├── .DS_Store ├── assets ├── .DS_Store ├── images │ ├── .DS_Store │ ├── 13paty.jpg │ ├── chaves.jpg │ ├── quico.png │ ├── chaves-2.jpg │ ├── chaves-3.jpg │ ├── chiquinha.jpg │ ├── chaves-sand.jpg │ ├── seumadruga.jpg │ ├── chaves-sand2.jpg │ ├── image-shared-2.png │ ├── image-shared.png │ ├── paty_do_chaves_rep2.jpg │ ├── paty_do_chaves_rep3.png │ └── chaves-fotos-raras-4.jpg └── stylesheets │ └── style.css ├── README.md ├── index.html ├── responsive-highlights.html └── responsive-modal.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/.DS_Store -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/.DS_Store -------------------------------------------------------------------------------- /assets/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/.DS_Store -------------------------------------------------------------------------------- /assets/images/13paty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/13paty.jpg -------------------------------------------------------------------------------- /assets/images/chaves.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/chaves.jpg -------------------------------------------------------------------------------- /assets/images/quico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/quico.png -------------------------------------------------------------------------------- /assets/images/chaves-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/chaves-2.jpg -------------------------------------------------------------------------------- /assets/images/chaves-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/chaves-3.jpg -------------------------------------------------------------------------------- /assets/images/chiquinha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/chiquinha.jpg -------------------------------------------------------------------------------- /assets/images/chaves-sand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/chaves-sand.jpg -------------------------------------------------------------------------------- /assets/images/seumadruga.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/seumadruga.jpg -------------------------------------------------------------------------------- /assets/images/chaves-sand2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/chaves-sand2.jpg -------------------------------------------------------------------------------- /assets/images/image-shared-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/image-shared-2.png -------------------------------------------------------------------------------- /assets/images/image-shared.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/image-shared.png -------------------------------------------------------------------------------- /assets/images/paty_do_chaves_rep2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/paty_do_chaves_rep2.jpg -------------------------------------------------------------------------------- /assets/images/paty_do_chaves_rep3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/paty_do_chaves_rep3.png -------------------------------------------------------------------------------- /assets/images/chaves-fotos-raras-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/palloi/responsive-header-only-css/HEAD/assets/images/chaves-fotos-raras-4.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #responsive-header-only-css 2 | ========================== 3 | 4 | ##See this example of responsive header without using javascript. 5 | 6 | ##Using only html and css. 7 | 8 | ###by Palloi Hofmann 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Responsive Header only CSS of El Chavo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

21 | A TURMA DO CHAVES 22 |

23 | 24 | 25 | 26 | 27 | 28 | 44 |
45 | 46 |
47 | 48 |

49 | Interpretado por: Roberto Goméz Bolaños. 50 |

51 |

52 | Descrição: Chaves é o personagem principal que dá nome ao seriado. Um garoto pobre, órfão e muito atrapalhado, sempre com as mesmas roupas velhas e apertadas e que sempre entra no seu famoso barril para se esconder. Ao contrário do que todos pensam, ele não mora no barril e seu nome não é Chaves. Ele mora na casa número 8 e seu verdadeiro nome é um mistério, pois sempre que perguntam seu nome, outra pessoa aparece e interrompe a conversa. 53 |

54 |

55 | Frases: "Isso, isso, isso!" - "Foi sem querer querendo!" - "Ninguém tem paciência comigo!" - "É que me escapuliu!" - "Zas, zas e zas... 56 |

57 |
58 | 59 |
60 | 61 |

62 | Interpretado por: Maria Antonieta de las Nieves. 63 |

64 |

65 | Descrição: É uma menina baixinha, sardenta e muito esperta, sempre arranjando uma maneira de se aproveitar da ingenuidade (para não dizer burrice) do Chaves e do Quico. 66 |

67 |

68 | Frases: "Papaízinho lindo do meu coração..." / "...me dá um dinheiro para mim comprar um pirulito?" / "O que você tem de burro, você tem de burro" / "Pois é, pois é, pois é...". 69 |

70 |

71 | Apelidos: Micróbio, balguelinha sem-graça, sardenta, etc... 72 |

73 |
74 | 75 |
76 | 77 |

78 | Interpretado por: Ramón Gómez Valdez Castillo. 79 |

80 |

81 | Descrição: Talvez o personagem favorito dos fãs do seriado, ele é um cara muito simples que está sempre fazendo bicos e trambiques para sobreviver. Vive fugindo do Senhor Barriga para não pagar o aluguel da sua casa onde mora junto a sua filha Chiquinha. Sempre foge também da Dona Florinda para não apanhar, pois sempre leva culpa pelas trapalhadas feitas pelo Chaves. 82 |

83 |

84 | Frases: "Que que foi, que que foi, que que há?" / "Só não te dou outra porque..." / "Não existe trabalho ruim, ruim é ter que trabalhar!" / "As pessoas boas devem amar seus inimigos." 85 |

86 |

87 | Apelidos: Chimpanzé reumático, lombriga esticada, pernas de saracura... 88 |

89 |
90 | 91 |
92 | 93 |

94 | Interpretado por: Carlos Villangrán Eslavan. 95 |

96 |

97 | Descrição: É um garoto bobo, mimado e bochechudo. Tem nove anos de idade e é o melhor amigo do Chaves. Mora na casa número 14 com sua mãe, Dona Florinda. Está sempre esperando por sua bola quadrada. 98 |

99 |

100 | Frases: "Cale-se, cale-se, cale-se, você me deixa louco!" / "Gentalha, Gentalha, pruuuuuf!" / "Você Não vai com a minha cara?" / "Você quer? Então compra!" / "Mamãe!" / "Da parte de quem?" / "Que coisa, não?" 101 |

102 |

103 | Apelidos: bochechas de mamão macho, bochechas de bulldog belho, mocorongo almofadinha e etc... 104 |

105 |
106 | 107 | 108 | -------------------------------------------------------------------------------- /responsive-highlights.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Creating three highlights responsive with navigation only CSS of El Chavo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

21 | A TURMA DO CHAVES 22 |

23 | 24 | 25 | 26 | 27 | 28 | 44 |
45 | 46 |
47 |

48 | Interpretado por: Roberto Goméz Bolaños. 49 |

50 |

51 | Descrição: Chaves é o personagem principal que dá nome ao seriado. Um garoto pobre, órfão e muito atrapalhado, sempre com as mesmas roupas velhas e apertadas e que sempre entra no seu famoso barril para se esconder. Ao contrário do que todos pensam, ele não mora no barril e seu nome não é Chaves. Ele mora na casa número 8 e seu verdadeiro nome é um mistério, pois sempre que perguntam seu nome, outra pessoa aparece e interrompe a conversa. 52 |

53 |

54 | Frases: "Isso, isso, isso!" - "Foi sem querer querendo!" - "Ninguém tem paciência comigo!" - "É que me escapuliu!" - "Zas, zas e zas... 55 |

56 | 57 |
58 | 59 |
60 | 61 |

Olha o Chaves sorrindo

62 |
63 | 64 | 65 |
66 | 67 |

Pensando na Paty

68 |
69 | 70 | 71 |
72 | 73 |

Quero tanto esse sanduiche iche iche

74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 |
82 |
83 | 84 |
85 | 86 |

87 | Interpretado por: Maria Antonieta de las Nieves. 88 |

89 |

90 | Descrição: É uma menina baixinha, sardenta e muito esperta, sempre arranjando uma maneira de se aproveitar da ingenuidade (para não dizer burrice) do Chaves e do Quico. 91 |

92 |

93 | Frases: "Papaízinho lindo do meu coração..." / "...me dá um dinheiro para mim comprar um pirulito?" / "O que você tem de burro, você tem de burro" / "Pois é, pois é, pois é...". 94 |

95 |

96 | Apelidos: Micróbio, balguelinha sem-graça, sardenta, etc... 97 |

98 |
99 | 100 |
101 | 102 |

103 | Interpretado por: Ramón Gómez Valdez Castillo. 104 |

105 |

106 | Descrição: Talvez o personagem favorito dos fãs do seriado, ele é um cara muito simples que está sempre fazendo bicos e trambiques para sobreviver. Vive fugindo do Senhor Barriga para não pagar o aluguel da sua casa onde mora junto a sua filha Chiquinha. Sempre foge também da Dona Florinda para não apanhar, pois sempre leva culpa pelas trapalhadas feitas pelo Chaves. 107 |

108 |

109 | Frases: "Que que foi, que que foi, que que há?" / "Só não te dou outra porque..." / "Não existe trabalho ruim, ruim é ter que trabalhar!" / "As pessoas boas devem amar seus inimigos." 110 |

111 |

112 | Apelidos: Chimpanzé reumático, lombriga esticada, pernas de saracura... 113 |

114 |
115 | 116 |
117 | 118 |

119 | Interpretado por: Carlos Villangrán Eslavan. 120 |

121 |

122 | Descrição: É um garoto bobo, mimado e bochechudo. Tem nove anos de idade e é o melhor amigo do Chaves. Mora na casa número 14 com sua mãe, Dona Florinda. Está sempre esperando por sua bola quadrada. 123 |

124 |

125 | Frases: "Cale-se, cale-se, cale-se, você me deixa louco!" / "Gentalha, Gentalha, pruuuuuf!" / "Você Não vai com a minha cara?" / "Você quer? Então compra!" / "Mamãe!" / "Da parte de quem?" / "Que coisa, não?" 126 |

127 |

128 | Apelidos: bochechas de mamão macho, bochechas de bulldog belho, mocorongo almofadinha e etc... 129 |

130 |
131 | 132 | 133 | -------------------------------------------------------------------------------- /responsive-modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Creating responsive modal with only CSS of El Chavo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

21 | A TURMA DO CHAVES 22 |

23 | 24 | 25 | 26 | 27 | 28 | 44 |
45 | 46 |
47 |

48 | Interpretado por: Roberto Goméz Bolaños. 49 |

50 |

51 | Descrição: Chaves é o personagem principal que dá nome ao seriado. Um garoto pobre, órfão e muito atrapalhado, sempre com as mesmas roupas velhas e apertadas e que sempre entra no seu famoso barril para se esconder. Ao contrário do que todos pensam, ele não mora no barril e seu nome não é Chaves. Ele mora na casa número 8 e seu verdadeiro nome é um mistério, pois sempre que perguntam seu nome, outra pessoa aparece e interrompe a conversa. 52 |

53 |

54 | Frases: "Isso, isso, isso!" - "Foi sem querer querendo!" - "Ninguém tem paciência comigo!" - "É que me escapuliu!" - "Zas, zas e zas... 55 |

56 | 57 |
58 | 59 |
60 | 61 |

Olha o Chaves sorrindo

62 | 63 |
64 | 65 | 66 |
67 | 68 |

Pensando na Paty

69 | 70 |
71 | 72 | 73 |
74 | 75 |

Quero tanto esse sanduiche iche iche

76 | 77 |
78 | 79 |
80 | 81 | 82 | 83 |
84 |
85 | 86 | 87 | 94 | 95 | 96 | 105 |
106 | 107 |
108 | 109 |

110 | Interpretado por: Maria Antonieta de las Nieves. 111 |

112 |

113 | Descrição: É uma menina baixinha, sardenta e muito esperta, sempre arranjando uma maneira de se aproveitar da ingenuidade (para não dizer burrice) do Chaves e do Quico. 114 |

115 |

116 | Frases: "Papaízinho lindo do meu coração..." / "...me dá um dinheiro para mim comprar um pirulito?" / "O que você tem de burro, você tem de burro" / "Pois é, pois é, pois é...". 117 |

118 |

119 | Apelidos: Micróbio, balguelinha sem-graça, sardenta, etc... 120 |

121 |
122 | 123 |
124 | 125 |

126 | Interpretado por: Ramón Gómez Valdez Castillo. 127 |

128 |

129 | Descrição: Talvez o personagem favorito dos fãs do seriado, ele é um cara muito simples que está sempre fazendo bicos e trambiques para sobreviver. Vive fugindo do Senhor Barriga para não pagar o aluguel da sua casa onde mora junto a sua filha Chiquinha. Sempre foge também da Dona Florinda para não apanhar, pois sempre leva culpa pelas trapalhadas feitas pelo Chaves. 130 |

131 |

132 | Frases: "Que que foi, que que foi, que que há?" / "Só não te dou outra porque..." / "Não existe trabalho ruim, ruim é ter que trabalhar!" / "As pessoas boas devem amar seus inimigos." 133 |

134 |

135 | Apelidos: Chimpanzé reumático, lombriga esticada, pernas de saracura... 136 |

137 |
138 | 139 |
140 | 141 |

142 | Interpretado por: Carlos Villangrán Eslavan. 143 |

144 |

145 | Descrição: É um garoto bobo, mimado e bochechudo. Tem nove anos de idade e é o melhor amigo do Chaves. Mora na casa número 14 com sua mãe, Dona Florinda. Está sempre esperando por sua bola quadrada. 146 |

147 |

148 | Frases: "Cale-se, cale-se, cale-se, você me deixa louco!" / "Gentalha, Gentalha, pruuuuuf!" / "Você Não vai com a minha cara?" / "Você quer? Então compra!" / "Mamãe!" / "Da parte de quem?" / "Que coisa, não?" 149 |

150 |

151 | Apelidos: bochechas de mamão macho, bochechas de bulldog belho, mocorongo almofadinha e etc... 152 |

153 |
154 | 155 | 156 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /assets/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, font, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td { 10 | margin:0; padding:0; border:0; background:transparent; 11 | /*vertical-align: baseline;*/ 12 | } 13 | 14 | /* lists */ 15 | .list-full, .list-full li, 16 | .list-auto, .list-auto li { width: 100%; float: left; display: block; position: relative; } 17 | .list-auto, .list-auto li { width: auto; } 18 | 19 | /* floats */ 20 | .float-l { float: left; } 21 | .float-r { float: right; } 22 | 23 | body { 24 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 25 | color: #333; 26 | text-shadow: 0 1px 0 #fff; 27 | } 28 | 29 | header { 30 | min-height: 60px; 31 | position: fixed; 32 | top: 0; 33 | right: 0; 34 | left: 0; 35 | border-bottom: 1px solid #ccc; 36 | background: #ECECEC; 37 | z-index: 2; 38 | } 39 | 40 | header h1 { 41 | padding: 10px 0 0 10px; 42 | } 43 | 44 | header h1 a { 45 | color: #333; 46 | } 47 | 48 | header ul { 49 | padding: 15px 10px 0 0; 50 | } 51 | 52 | header li { 53 | border-left: 1px solid #ccc; 54 | } 55 | 56 | header li:first-child { 57 | border: none; 58 | } 59 | 60 | header li a { 61 | display: block; 62 | padding: 0 10px; 63 | color: #999; 64 | font-size: 16px; 65 | line-height: 30px; 66 | text-decoration: none; 67 | -webkit-transition: all 300ms ease; 68 | transition: all 300ms ease; 69 | } 70 | 71 | header li a:hover { 72 | color: #333; 73 | } 74 | 75 | input#control-nav { 76 | visibility: hidden; 77 | position: absolute; 78 | left: -9999px; 79 | opacity: 0; 80 | } 81 | 82 | /* content */ 83 | section { 84 | padding: 80px 20px 50px; 85 | border-top: 1px solid #ccc; 86 | font-size: 20px; 87 | line-height: 24px; 88 | } 89 | 90 | section:after { 91 | content: ""; 92 | display: block; 93 | clear: both; 94 | } 95 | 96 | section img { 97 | width: 44%; 98 | margin: 0 0 10px 4%; 99 | } 100 | 101 | section p { 102 | padding: 0 0 20px; 103 | } 104 | 105 | .highlights { 106 | position: relative; 107 | } 108 | 109 | .highlights input { 110 | visibility: hidden; 111 | position: absolute; 112 | left: -9999px; 113 | opacity: 0; 114 | } 115 | 116 | .highlights-item { 117 | float: left; 118 | margin: 0 0 0 2%; 119 | width: 32%; 120 | text-align: center; 121 | } 122 | 123 | .highlights-item:first-of-type { 124 | margin-left: 0; 125 | } 126 | 127 | .highlights-item img { 128 | display: block; 129 | width: 100%; 130 | margin: 0 0 5px; 131 | } 132 | 133 | .highlights-item p { 134 | font-size: 14px; 135 | } 136 | 137 | .highlights-button { 138 | display: inline-block; 139 | padding: 10px 15px 8px; 140 | cursor: pointer; 141 | border-radius: 3px; 142 | border: 1px solid #ccc; 143 | background-color: #ececec; 144 | -webkit-transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out; 145 | transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out; 146 | } 147 | 148 | .highlights-button:hover { 149 | border: 1px solid #ececec; 150 | background-color: #ccc; 151 | } 152 | 153 | .highlights-buttons { 154 | display: none; 155 | clear: both; 156 | text-align: center; 157 | } 158 | 159 | .highlights-buttons label { 160 | display: inline-block; 161 | width: 15px; 162 | height: 15px; 163 | margin: 0 10px; 164 | border-radius: 10px; 165 | background-color: #ccc; 166 | cursor: pointer; 167 | position: relative; 168 | overflow: hidden; 169 | text-indent: -9999px; 170 | -webkit-transition: background-color 300ms ease-in-out; 171 | transition: background-color 300ms ease-in-out; 172 | } 173 | 174 | .highlights-buttons label:hover { 175 | background-color: #777; 176 | } 177 | 178 | /* init modal */ 179 | .modal { 180 | position: fixed; 181 | top: 0; 182 | right: 0; 183 | bottom: 0; 184 | left: 0; 185 | z-index: 10; 186 | opacity: 0; 187 | visibility: hidden; 188 | -webkit-transition: all 0.5s 0.5s ease-in-out; 189 | transition: all 0.5s 0.5s ease-in-out; 190 | } 191 | 192 | .modal-content { 193 | padding: 10px; 194 | max-width: 600px; 195 | min-width: 360px; 196 | max-height: 85%; 197 | overflow: auto; 198 | position: absolute; 199 | top: 5%; 200 | left: 50%; 201 | z-index: 2; 202 | opacity: 0; 203 | border-radius: 3px; 204 | background: #fff; 205 | -webkit-transform: translate(-50%, 0); 206 | -ms-transform: translate(-50%, 0); 207 | transform: translate(-50%, 0); 208 | 209 | -webkit-transition: all 0.5s ease-in-out; 210 | transition: all 0.5s ease-in-out; 211 | } 212 | 213 | .modal-content img { 214 | display: block; 215 | width: 100%; 216 | margin: 10px 0 0; 217 | } 218 | 219 | .modal-content p { 220 | padding-top: 10px; 221 | text-align: justify; 222 | } 223 | 224 | .modal-close { 225 | position: absolute; 226 | top: 0; 227 | right: 0; 228 | bottom: 0; 229 | left: 0; 230 | background-color: rgba(0,0,0,0.5); 231 | } 232 | 233 | .modal-close:after { 234 | content: "X"; 235 | float: right; 236 | margin: 5px 5px 0 0; 237 | width: 30px; 238 | height: 30px; 239 | position: relative; 240 | z-index: 3; 241 | text-align: center; 242 | line-height: 30px; 243 | cursor: pointer; 244 | background-color: rgba(255,255,255,0.8); 245 | border-radius: 20px; 246 | box-shadow: 0 0 3px #000; 247 | } 248 | 249 | input[id*="modal_"] { 250 | position: fixed; 251 | left: -9999px; 252 | top: 50%; 253 | opacity: 0; 254 | } 255 | input[id*="modal_"]:checked + div.modal { 256 | opacity: 1; 257 | visibility: visible; 258 | -webkit-transition-delay: 0s; 259 | -ms-transition-delay: 0s; 260 | transition-delay: 0s; 261 | } 262 | 263 | input[id*="modal_"]:checked + div.modal .modal-content { 264 | opacity: 1; 265 | -webkit-transform: translate(-50%, 0); 266 | -ms-transform: translate(-50%, 0); 267 | transform: translate(-50%, 0); 268 | -webkit-transition-delay: 0.5s; 269 | -ms-transition-delay: 0.5s; 270 | transition-delay: 0.5s; 271 | } 272 | 273 | @media screen and (max-width: 767px) { 274 | header nav { 275 | position: fixed; 276 | top: 0; 277 | right: 0; 278 | bottom: 0; 279 | width: 250px; 280 | border-left: 1px solid #ccc; 281 | background: #fff; 282 | overflow-x: auto; 283 | z-index: 2; 284 | -webkit-transition: all 500ms ease; 285 | transition: all 500ms ease; 286 | -webkit-transform: translate(100%, 0); 287 | -ms-transform: translate(100%, 0); 288 | transform: translate(100%, 0); 289 | } 290 | 291 | header ul.list-auto { 292 | padding: 0; 293 | } 294 | 295 | header ul.list-auto li { 296 | width: 100%; 297 | border: solid #ccc; 298 | border-width: 0 0 1px; 299 | } 300 | 301 | header li a { 302 | padding: 15px 10px; 303 | } 304 | 305 | header li a:hover { 306 | background-color: #ccc; 307 | } 308 | 309 | .control-nav { /* label icon */ 310 | position: absolute; 311 | right: 20px; 312 | top: 20px; 313 | display: block; 314 | width: 30px; 315 | padding: 5px 0; 316 | border: solid #333; 317 | border-width: 3px 0; 318 | z-index: 2; 319 | cursor: pointer; 320 | } 321 | 322 | .control-nav:before { 323 | content: ""; 324 | display: block; 325 | height: 3px; 326 | background: #333; 327 | } 328 | 329 | .control-nav-close { 330 | position: fixed; /* label layer */ 331 | right: 0; 332 | top: 0; 333 | bottom: 0; 334 | left: 0; 335 | display: block; 336 | z-index: 1; 337 | background: rgba(0,0,0,0.4); 338 | -webkit-transition: all 500ms ease; 339 | transition: all 500ms ease; 340 | -webkit-transform: translate(100%, 0); 341 | -ms-transform: translate(100%, 0); 342 | transform: translate(100%, 0); 343 | } 344 | 345 | /* checked nav */ 346 | input#control-nav { 347 | display: block; 348 | } 349 | 350 | input#control-nav:focus ~ .control-nav { 351 | border-color: #000; 352 | box-shadow: 0px 0px 9px rgba(0,0,0,0.3); 353 | } 354 | 355 | input#control-nav:focus ~ .control-nav:before { 356 | background: #000; 357 | } 358 | 359 | input#control-nav:checked ~ nav, 360 | input#control-nav:checked ~ .control-nav-close { 361 | -webkit-transform: translate(0, 0); 362 | -ms-transform: translate(0, 0); 363 | transform: translate(0, 0); 364 | } 365 | 366 | header+section { 367 | padding-top: 80px; 368 | } 369 | 370 | section { 371 | padding: 30px 15px 10px; 372 | } 373 | 374 | .highlights { 375 | -webkit-transition: all 500ms ease-in-out; 376 | transition: all 500ms ease-in-out; 377 | } 378 | 379 | .highlights-item { 380 | width: 100%; 381 | margin-left: 0; 382 | position: absolute; 383 | top: 0; 384 | opacity: 0; 385 | visibility: hidden; 386 | -webkit-transition: all 500ms ease-in-out; 387 | transition: all 500ms ease-in-out; 388 | -webkit-transform: scale(0.9); 389 | -ms-transform: scale(0.9); 390 | transform: scale(0.9); 391 | } 392 | 393 | .highlights-item p { 394 | opacity: 0; 395 | -webkit-transition: opacity 500ms 500ms ease-in-out; 396 | transition: opacity 500ms 500ms ease-in-out; 397 | } 398 | 399 | .highlights-buttons { 400 | display: block; 401 | padding-top: 10px; 402 | } 403 | 404 | /*checked*/ 405 | .highlights input:checked + div { 406 | position: relative; 407 | opacity: 1; 408 | visibility: visible; 409 | z-index: 1; 410 | -webkit-transform: scale(1); 411 | -ms-transform: scale(1); 412 | transform: scale(1); 413 | } 414 | 415 | .highlights input:checked + div p { 416 | opacity: 1; 417 | } 418 | 419 | .highlights input:nth-of-type(1):checked ~ .highlights-buttons label:nth-child(1), 420 | .highlights input:nth-of-type(2):checked ~ .highlights-buttons label:nth-child(2), 421 | .highlights input:nth-of-type(3):checked ~ .highlights-buttons label:nth-child(3) { 422 | background-color: #000 423 | } 424 | 425 | .modal-content { 426 | padding: 10px 5%; 427 | min-width: 88%; 428 | } 429 | } 430 | 431 | @media screen and (max-width: 480px) { 432 | header h1 { 433 | font-size: 20px; 434 | line-height: 40px; 435 | } 436 | } 437 | --------------------------------------------------------------------------------