-
Notifications
You must be signed in to change notification settings - Fork 0
/
gap_itau.html
161 lines (155 loc) · 10.5 KB
/
gap_itau.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HZC | Picos</title>
<!-- Importando Fonte Open Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
<!-- Reset CSS -->
<link rel="stylesheet" href="assets/css/reset.css">
<!-- Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Menu Topo -->
<header class="cabecalho">
<button class="cabecalho__menu" aria-label="Icone para acessar o menu"><i
class="cabecalho__icone-hamburguer"></i></button>
<img src="assets/img/logo.svg" alt="Logo da página HZC" class="cabecalho__logo">
<p class="cabecalho__perfil">Bruno Lopes</p>
<div class="cabecalho__notificacao--divisao"></div>
<button class="cabecalho__notificacao" aria-label="Icone para acessar as notificações"><i
class="cabecalho__icone-notificacao"></i></button>
</header>
<!-- Fim Menu Topo -->
<!-- Menu Lateral -->
<nav class="menu-lateral">
<img src="assets/img/logo.svg" alt="Logotipo da HZC" class="menu-lateral__logo">
<a href="index.html" class="menu-lateral__link menu-lateral__link--inicio">Início</a>
<a href="videos.html" class="menu-lateral__link menu-lateral__link--videos">Vídeos</a>
<a href="picos.html" class="menu-lateral__link menu-lateral__link--picos menu-lateral__link--ativo">Pícos</a>
<a href="#" class="menu-lateral__link menu-lateral__link--integrantes">Integrantes</a>
<a href="#" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
<a href="#" class="menu-lateral__link menu-lateral__link--pinturas">Pinturas</a>
</nav>
<!-- Fim Menu Lateral -->
<!-- Main section -->
<main class="artigo">
<img src="assets/img/artigo_1_mobile.png" alt="Imagem do gap do Itaú da Voluntários"
class="artigo__imagem artigo__imagem--principal artigo__imagem--mobile">
<img src="assets/img/artigo_1.png" alt="Imagem do gap do Itaú da Voluntários"
class="artigo__imagem artigo__imagem--principal artigo__imagem--web imagem-principal">
<!-- Videos mais vistos -->
<section class="artigo__picos-similares">
<h3 class="picos-similares__titulo">Outros picos similares</h3>
<!-- vídeo 1 -->
<article class="picos-similares__cartao">
<img src="assets/img/mais-visitados_1.png" alt="Thumbnail do vídeo HZC - Tudo sem Padrin"
class="cartao__imagem">
<div class="cartao__conteudo">
<p class="cartao__nome">Bruno Lopes</p>
<h3 class="cartao__titulo"> Gap do Itaú da Voluntários da Pátria </h3>
<p class="cartao__contagem cartao__contagem--visualizacao">53 visualizações</p>
<a class="cartao__botao cartao__botao--pico" href="gap_itau.html"><button
aria-label="Ver local"></button></a>
</div>
</article>
<!-- vídeo 2 -->
<article class="picos-similares__cartao">
<img src="assets/img/mais-visitados_2.png" alt="Thumbnail do vídeo HZC - Tudo sem Padrin"
class="cartao__imagem">
<div class="cartao__conteudo">
<p class="cartao__nome">Luiza Sampaio</p>
<h3 class="cartao__titulo">Gap com mureta da Voluntários</h3>
<p class="cartao__contagem cartao__contagem--visualizacao">39 visualizalções</p>
<button class="cartao__botao cartao__botao--pico" aria-label="Ver local"></button>
</div>
</article>
<!-- vídeo 3 -->
<article class="picos-similares__cartao">
<img src="assets/img/mais-visitados_3.png" alt="Thumbnail do vídeo HZC - Tudo sem Padrin"
class="cartao__imagem">
<div class="cartao__conteudo">
<p class="cartao__nome">André Soares</p>
<h3 class="cartao__titulo">Rampa da entrada do túnel Rebouças</h3>
<p class="cartao__contagem cartao__contagem--visualizacao">22 visualizalções</p>
<button class="cartao__botao cartao__botao--pico" aria-label="Ver local"></button>
</div>
</article>
<!-- vídeo 4 -->
<article class="picos-similares__cartao">
<img src="assets/img/mais-visitados_4.png" alt="Thumbnail do vídeo HZC - Tudo sem Padrin"
class="cartao__imagem">
<div class="cartao__conteudo">
<p class="cartao__nome">Júlia Fonseca</p>
<h3 class="cartao__titulo">Wallride de pedra portuguesa da FGP</h3>
<p class="cartao__contagem cartao__contagem--visualizacao">98 visualizalções</p>
<button class="cartao__botao cartao__botao--pico" aria-label="Ver local"></button>
</div>
</article>
</section>
<article class="artigo__conteudo">
<h1 class="artigo__titulo">Gap do Itaú da Voluntários da Pátria</h1>
<p class="artigo__perfil">Bruno Lopes</p>
<p class="cartao__contagem--visualizacao">98 visualizalções</p>
<p class="artigo__texto artigo__texto--mobile">Venenatis maecenas animi eiusmod nostrum, mauris alias quas.
Recusandae, ridiculus porta nec eaque? Excepteur aut do quisquam ultricies, quos! Morbi ad magna sunt
anim imperdiet iusto hymenaeos voluptate? Nostrum sapien hic non occaecat!</p>
<p class="artigo__texto artigo__texto--web">Venenatis maecenas animi eiusmod nostrum, mauris alias quas.
Recusandae, ridiculus porta nec eaque? Excepteur aut do quisquam ultricies, quos! Morbi ad magna sunt
anim imperdiet iusto hymenaeos voluptate? Nostrum sapien hic non occaecat! Facilis interdum debitis,
deserunt fermentum quas mattis interdum penatibus. Dictum laboris diamlorem, repellat, aut ligula. Quam
tellus, facilisis possimus? Quidem nunc! Aenean sem! Curabitur eos felis porro integer consectetuer
consectetur. Porttitor, convallis, sapien earum inventore dapibus facilis, facilis semper. Tempora
senectus dictumst odio vivamus pariatur, praesentium laoreet, hendrerit duis proin excepturi, torquent
et, sem, eu temporibus aut placerat nostrum. Parturient perspiciatis nesciunt. Earum ligula habitasse
quo laoreet.</p>
<img src="assets/img/artigo_1_mapa_mobile.png" alt="Mapa do Pico"
class="artigo__imagem artigo__imagem--mobile">
<img src="assets/img/artigo_1_mapa.png" alt="Mapa do Pico" class="artigo__imagem artigo__imagem--web">
<p class="artigo__texto artigo__texto--mobile">Venenatis maecenas animi eiusmod nostrum, mauris alias quas.
Recusandae, ridiculus porta nec eaque? Excepteur aut do quisquam ultricies, quos! Morbi ad magna sunt
anim imperdiet iusto hymenaeos voluptate?</p>
<p class="artigo__texto artigo__texto--web">Venenatis maecenas animi eiusmod nostrum, mauris alias quas.
Recusandae, ridiculus porta nec eaque? Excepteur aut do quisquam ultricies, quos! Morbi ad magna sunt
anim imperdiet iusto hymenaeos voluptate? Nostrum sapien hic non occaecat! Facilis interdum debitis,
deserunt fermentum quas mattis interdum penatibus. Dictum laboris diamlorem, repellat, aut ligula. Quam
tellus, facilisis possimus? Quidem nunc! Aenean sem! Curabitur eos felis porro integer consectetuer
consectetur. Porttitor, convallis, sapien earum inventore dapibus facilis, facilis semper. Tempora
senectus dictumst odio vivamus pariatur, praesentium laoreet, hendrerit duis proin excepturi, torquent
et, sem, eu temporibus aut placerat nostrum. Parturient perspiciatis nesciunt. Earum ligula habitasse
quo laoreet.</p>
<img src="assets/img/artigo_1_mobile_2.png" alt="Imagem de skatista"
class="artigo__imagem artigo__imagem--mobile">
<img src="assets/img/artigo_1_mobile_3.png" alt="Skatistas praticando"
class="artigo__imagem artigo__imagem--mobile">
<div class="artigo__imagem--web">
<img src="assets/img/artigo_3.png" alt="Imagem de skatista"
class="artigo__imagem artigo__imagem--texto-web-1">
<img src="assets/img/artigo_4.png" alt="Skatistas praticando"
class="artigo__imagem artigo__imagem--texto-web-2">
</div>
<p class="artigo__texto artigo__texto--mobile">Venenatis maecenas animi eiusmod nostrum, mauris alias quas.
Recusandae, ridiculus porta nec eaque? Excepteur aut do quisquam ultricies, quos! Morbi ad magna sunt
anim imperdiet iusto hymenaeos voluptate? Nostrum sapien hic non occaecat! Facilis interdum debitis,
deserunt fermentum quas mattis interdum</p>
<p class="artigo__texto artigo__texto--web">Venenatis maecenas animi eiusmod nostrum, mauris alias quas.
Recusandae, ridiculus porta nec eaque? Excepteur aut do quisquam ultricies, quos! Morbi ad magna sunt
anim imperdiet iusto hymenaeos voluptate? Nostrum sapien hic non occaecat! Facilis interdum debitis,
deserunt fermentum quas mattis interdum penatibus. Dictum laboris diamlorem, repellat, aut ligula. Quam
tellus, facilisis possimus? Quidem nunc! Aenean sem! Curabitur eos felis porro integer consectetuer
consectetur. Porttitor, convallis, sapien earum inventore dapibus facilis, facilis semper. Tempora
senectus dictumst odio vivamus pariatur, praesentium laoreet, hendrerit duis proin excepturi, torquent
et, sem, eu temporibus aut placerat nostrum. Parturient perspiciatis nesciunt. Earum ligula habitasse
quo laoreet.</p>
</article>
</main>
<!-- Fim Main section -->
<!-- Script Index.js -->
<script src="assets/js/index.js"></script>
</body>
</html>