-
Notifications
You must be signed in to change notification settings - Fork 21
Expand file tree
/
Copy pathresponsive-highlights.html
More file actions
132 lines (119 loc) · 6.16 KB
/
responsive-highlights.html
File metadata and controls
132 lines (119 loc) · 6.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<title>Creating three highlights responsive with navigation only CSS of El Chavo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="See this example of responsive three highlights without using javascript. Using only html and css. by Palloi Hofmann">
<meta name="keywords" content="css4html, css+for+html, css 4 html, css4, css4 html, css, css3, html, html5" />
<meta property="og:image" content="http://palloi.github.io/responsive-header-only-css/assets/images/image-shared-2.png" />
<meta property="og:keywords" content="css4html, css+for+html, css 4 html, css4, css4 html, css, css3, html, html5" />
<meta name="description" content="See this example of responsive three highlights without using javascript. Using only html and css. by Palloi Hofmann">
<link rel="stylesheet" type="text/css" href="assets/stylesheets/style.css" />
</head>
<body>
<header>
<h1 class="float-l">
<a href="#" title="Titulo do Site">A TURMA DO CHAVES</a>
</h1>
<input type="checkbox" id="control-nav" />
<label for="control-nav" class="control-nav"></label>
<label for="control-nav" class="control-nav-close"></label>
<nav class="float-r">
<ul class="list-auto">
<li>
<a href="#Chaves" title="Chaves">Chaves</a>
</li>
<li>
<a href="#Chiquinha" title="Chiquinha">Chiquinha</a>
</li>
<li>
<a href="#Seu-Madruga" title="Seu Madruga">Seu Madruga</a>
</li>
<li>
<a href="#Quico" title="Quico">Quico</a>
</li>
</ul>
</nav>
</header>
<section id="Chaves">
<p>
<strong>Interpretado por:</strong> Roberto Goméz Bolaños.
</p>
<p>
<strong>Descrição:</strong> 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.
</p>
<p>
<strong>Frases:</strong> "Isso, isso, isso!" - "Foi sem querer querendo!" - "Ninguém tem paciência comigo!" - "É que me escapuliu!" - "Zas, zas e zas...
</p>
<div class="highlights">
<input type="radio" id="radio-img1" name="highlights" checked="checked" />
<div class="highlights-item">
<img src="assets/images/chaves.jpg" />
<p>Olha o Chaves sorrindo</p>
</div>
<input type="radio" id="radio-img2" name="highlights" />
<div class="highlights-item">
<img src="assets/images/chaves-2.jpg" />
<p>Pensando na Paty</p>
</div>
<input type="radio" id="radio-img3" name="highlights" />
<div class="highlights-item">
<img src="assets/images/chaves-3.jpg" />
<p>Quero tanto esse sanduiche iche iche</p>
</div>
<div class="highlights-buttons">
<label for="radio-img1">Image 1</label>
<label for="radio-img2">Image 2</label>
<label for="radio-img3">Image 3</label>
</div>
</div>
</section>
<section id="Chiquinha">
<img src="assets/images/chiquinha.jpg" class="float-r" />
<p>
<strong>Interpretado por:</strong> Maria Antonieta de las Nieves.
</p>
<p>
<strong>Descrição:</strong> É 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.
</p>
<p>
<strong>Frases:</strong> "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 é...".
</p>
<p>
<strong>Apelidos:</strong> Micróbio, balguelinha sem-graça, sardenta, etc...
</p>
</section>
<section id="Seu-Madruga">
<img src="assets/images/seumadruga.jpg" class="float-r" />
<p>
<strong>Interpretado por:</strong> Ramón Gómez Valdez Castillo.
</p>
<p>
<strong>Descrição:</strong> 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.
</p>
<p>
<strong>Frases:</strong> "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."
</p>
<p>
<strong>Apelidos:</strong> Chimpanzé reumático, lombriga esticada, pernas de saracura...
</p>
</section>
<section id="Quico">
<img src="assets/images/quico.png" class="float-r" />
<p>
<strong>Interpretado por:</strong> Carlos Villangrán Eslavan.
</p>
<p>
<strong>Descrição:</strong> É 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.
</p>
<p>
<strong>Frases:</strong> "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?"
</p>
<p>
<strong>Apelidos:</strong> bochechas de mamão macho, bochechas de bulldog belho, mocorongo almofadinha e etc...
</p>
</section>
</body>
</html>