Facebook
From Perl Pheasant, 1 Month ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 42
  1. /* RWD */
  2.  
  3. @media screen and (max-width:1280px) {
  4.     /* .nav li {
  5.         height: 100px;
  6.     } */
  7.     .nav a {
  8.         font-size: 18px;
  9.     }
  10.     .motto {
  11.         padding-left: 840px;
  12.         padding-top: 200px;
  13.         font-size: 22px;
  14.     }
  15.     .aboutGym {
  16.         margin: 60px auto;
  17.         position: relative;
  18.         width: 640px;
  19.         height: 800px;
  20.         background: #eee;
  21.         text-align: center;
  22.     }
  23.     .answer {
  24.         position: absolute;
  25.         top: 55%;
  26.         left: -2%;
  27.         width: 640px;
  28.         margin-left: 15px;
  29.     }
  30.     h2.joinToUs {
  31.         font-size: 22px;
  32.     }
  33.     h2.joinToUs:nth-of-type(2) {
  34.         top: 120%;
  35.         left: 60%;
  36.     }
  37.     li.plan {
  38.         list-style: circle;
  39.         margin-left: 100px;
  40.         margin-top: 30px;
  41.     }
  42.     .wrapAll div.plan {
  43.         flex-basis: 50%;
  44.     }
  45.     div.wrapPlan {
  46.         width: 234px;
  47.         background: #eee;
  48.         border: 2px solid white;
  49.     }
  50.     div.plan {
  51.         width: 230px;
  52.         background: black;
  53.         margin-bottom: 10px;
  54.         color: white;
  55.         position: relative;
  56.     }
  57.     li.plan {
  58.         margin-left: 30px;
  59.         margin-top: 40px;
  60.     }
  61.     .gallery .tittle {
  62.         font-size: 20px;
  63.     }
  64.     .aboutGym.contact {
  65.         margin-top: 0px;
  66.         height: 900px;
  67.     }
  68.     .answer.contact {
  69.         text-align: left;
  70.         top: 50%;
  71.         left: 0%;
  72.         margin: 40px;
  73.     }
  74.     .answer.contact h1,
  75.     .answer.contact h4,
  76.     .answer.contact p {
  77.         text-align: left;
  78.         margin-left: 12px;
  79.     }
  80.     .contact .socials {
  81.         text-align: left;
  82.     }
  83.     .contact .socials img {
  84.         float: left;
  85.         height: 40px;
  86.         cursor: pointer;
  87.     }
  88.     .contact .socials span {
  89.         line-height: 40px;
  90.     }
  91.     #map {
  92.         width: 100%;
  93.     }
  94. }
  95.  
  96. @media screen and (max-width:1024px) {
  97.     .header {
  98.         width: 100%;
  99.         background-image: url(/GymProject/img/main1024.jpg);
  100.     }
  101.     header .aboutGym {
  102.         margin: 0 auto;
  103.     }
  104.     .nav a {
  105.         font-size: 16px;
  106.     }
  107.     .motto {
  108.         padding-top: 150px;
  109.         padding-left: 700px;
  110.         margin-right: 15px;
  111.         font-size: 25px;
  112.     }
  113. }
  114.  
  115. @media screen and (max-width:960px) {
  116.     .nav a {
  117.         font-size: 14px;
  118.     }
  119.     .motto {
  120.         padding-top: 350px;
  121.         padding-left: 470px;
  122.         width: 800px;
  123.     }
  124. }
  125.  
  126. @media screen and (max-width:890px) {
  127.     .nav a {
  128.         font-size: 0px;
  129.         vertical-align: baseline;
  130.     }
  131.     .nav a i {
  132.         vertical-align: -40%;
  133.     }
  134.     .tittle h1 {
  135.         text-align: center;
  136.     }
  137.     .wrapAll {
  138.         flex-wrap: wrap;
  139.     }
  140.     .wrapAll div.plan {
  141.         flex-basis: 50%;
  142.     }
  143.     .wrapPlan:nth-child(4) {
  144.         margin-top: 30px;
  145.     }
  146. }
  147.  
  148. @media screen and (max-width:768px) {
  149.     .nav a {
  150.         font-size: 0px;
  151.     }
  152.     .nav a.nosp.nopict {
  153.         padding-top: 50px;
  154.         padding-bottom: 10px;
  155.     }
  156.     .home.nosp.nopict {
  157.         vertical-align: -30px;
  158.     }
  159. }
  160.  
  161. @media screen and (max-width:719px) {
  162.     .wrapPlan:nth-child(3) {
  163.         margin-top: 30px;
  164.     }
  165. }