| LEFT | RIGHT |
| 1 <style> | 1 <style> |
| 2 | 2 |
| 3 #media | 3 #media |
| 4 { | 4 { |
| 5 text-align: center; | 5 text-align: center; |
| 6 } | 6 } |
| 7 | 7 |
| 8 #media-links | 8 #media-links |
| 9 { | 9 { |
| 10 list-style: none; | 10 list-style: none; |
| (...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 67 } | 67 } |
| 68 | 68 |
| 69 @media (min-width: 930px) | 69 @media (min-width: 930px) |
| 70 { | 70 { |
| 71 #media small | 71 #media small |
| 72 { | 72 { |
| 73 display: none; | 73 display: none; |
| 74 } | 74 } |
| 75 } | 75 } |
| 76 | 76 |
| 77 #home-image-container div | 77 /* |
| 78 * Hero section |
| 79 */ |
| 80 |
| 81 #hero > div |
| 78 { | 82 { |
| 79 position: relative; | 83 position: relative; |
| 80 max-width: 1080px; | 84 padding: 0; |
| 81 margin: 0 auto; | |
| 82 } | 85 } |
| 83 | 86 |
| 84 #home-image-container p | 87 #hero img |
| 88 { |
| 89 display: block; |
| 90 width: 100%; |
| 91 } |
| 92 |
| 93 #hero h1 |
| 85 { | 94 { |
| 86 position: absolute; | 95 position: absolute; |
| 87 right: 0; | 96 right: 0; |
| 88 bottom: 0; | 97 bottom: 0; |
| 89 width: 100%; | 98 width: 100%; |
| 90 padding: 10px; | 99 padding: 10px; |
| 91 background-color: #fff; | 100 background-color: #fff; |
| 92 text-transform: uppercase; | 101 text-transform: uppercase; |
| 93 font-size: 18px; | 102 font-size: 18px; |
| 103 font-weight: 300; |
| 94 box-sizing: border-box; | 104 box-sizing: border-box; |
| 95 } | 105 } |
| 96 | 106 |
| 97 @media (min-width: 350px) | 107 @media (min-width: 350px) |
| 98 { | 108 { |
| 99 #home-image-container p | 109 #hero h1 |
| 100 { | 110 { |
| 101 width: 80%; | 111 width: 80%; |
| 102 } | 112 } |
| 103 } | 113 } |
| 104 | 114 |
| 105 @media (min-width: 450px) | 115 @media (min-width: 450px) |
| 106 { | 116 { |
| 107 #home-image-container p | 117 #hero h1 |
| 108 { | 118 { |
| 109 width: 60%; | 119 width: 60%; |
| 110 font-size: 20px; | 120 font-size: 20px; |
| 111 } | 121 } |
| 112 } | 122 } |
| 113 | 123 |
| 114 @media (min-width: 767px) | 124 @media (min-width: 800px) |
| 115 { | 125 { |
| 116 #home-image-container p | 126 #hero h1 |
| 117 { | 127 { |
| 118 padding: 15px; | 128 padding: 15px; |
| 119 width: 40%; | 129 width: 39%; |
| 120 font-size: 22px; | 130 font-size: 22px; |
| 121 } | 131 } |
| 122 } | 132 } |
| 123 | 133 |
| 124 </style> | 134 </style> |
| LEFT | RIGHT |