-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (139 loc) · 6.04 KB
/
index.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
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FotoArte - Blog de Fotografia</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Itim&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="./src/assets/favicon/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./src/styles/index.css" />
<link rel="stylesheet" href="./src/styles/mediaQuerie.css" />
<link rel="stylesheet" href="./src/styles/global.css">
</head>
<body>
<!-- Cabeçalho -->
<header>
<div class="header-content">
<h1>FotoArte</h1>
<p class="slogan">Capturando Momentos, Criando Histórias</p>
<nav>
<ul>
<li><a href="./src/pages/Albuns/album.html">Álbuns</a></li>
<li><a href="#destaques">Destaques</a></li>
<li><a href="#galeria">Galeria</a></li>
<li><a href="#artigos">Artigos</a></li>
<li><a href="#depoimentos">Depoimentos</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- Seção Sobre -->
<section id="sobre">
<h2>Sobre o Blog</h2>
<p>
O FotoArte é um espaço dedicado aos amantes da fotografia. Aqui você encontrará galerias com fotos incríveis, artigos e histórias de outros fotógrafos que compartilham a mesma
paixão.
</p>
</section>
<!-- Destaques de Fotografia -->
<section id="destaques">
<h2>Destaques da Semana</h2>
<div class="destaques-container">
<figure>
<img
src="https://lh3.googleusercontent.com/pw/AP1GczPptTeI7qg3F_BwLmYdzqYBMQFfgGbZpiE4Zw8XI1j6auN8mzRO0DPESqghmS7GjGjqkcCK6w9rilrkR0fVI972ndOEo9tgvHwseR-VDSJ2E3PuJFe7qs1ucwzNQgpu30o51nWOwgQgrd4icOGG1QH9yA=w590-h787-s-no-gm?authuser=0"
alt="Foto no Arco do Triunfo - Parque Nacional de Sete Cidades"
loading="lazy"
/>
<figcaption>
Arco do Triunfo - Parque Nacional de Sete Cidades
</figcaption>
</figure>
<figure>
<img
src="https://lh3.googleusercontent.com/pw/AP1GczMOv_TptG7JBRYcfSMxahh_IEPMhZ4SPDtgy6qZ5lbnQqqQ2aOUD8P9oJv7H3GQ6vM1cO2gkxt8Nrx8J6EEAknNumhZqBB8y-DDKA4q65jHyfGWoNX_T7ZIcB-WFityNuQuX6PH-DCQtg98yesv1-EPMg=w590-h787-s-no-gm?authuser=0"
alt="Foto nas Formações Rochosas - Parque Nacional de Sete Cidades"
loading="lazy"
/>
<figcaption>
Formações Rochosas - Parque Nacional de Sete Cidades
</figcaption>
</figure>
<figure>
<img
src="https://lh3.googleusercontent.com/pw/AP1GczOGykdfHElqAKs1W3FardKsS4CrSRDlmHtHogIt_7sAVPZdOH7cyt3dFWYd-fDf2ln-Bv7Wd7gvoH--146y7p3-c-mvyWoCWvxh7BOaqpDKf5ubgbc4YcnRLnleVT9NSJ8EDO4x6MCsiNopMD1ZIXr46w=w590-h787-s-no-gm?authuser=0"
alt="Foto de um lago espelhado"
loading="lazy"
/>
<figcaption>
Praia - Pedra do Sal
</figcaption>
</figure>
</div>
</section>
<!-- Galeria de Fotos -->
<section id="galeria">
<h2>Galeria de Fotos</h2>
<p>
Explore nossa galeria e inspire-se com fotos de diversos temas e
estilos.
</p>
<div class="galeria-container" id="galeriaFotos">
<!-- Fotos renderizadas com JavaScript -->
</div>
</section>
<!-- Artigos sobre Fotografia -->
<section class="artigos-trigger" id="artigos">
<h2>Conteúdos sobre Fotografia</h2>
<div class="artigos-container">
</div>
</section>
<!-- Depoimentos -->
<section id="depoimentos">
<h2>Depoimentos</h2>
<div class="depoimentos-container">
<blockquote>
"O FotoArte me apresentou conteúdos incríveis de fontes renomadas, especialmente sobre técnicas de iluminação natural. Esses artigos me ajudaram a aprimorar minha abordagem fotográfica e a capturar a luz de maneiras que antes eu não imaginava." - <strong>Mariana Silva</strong>
</blockquote>
<blockquote>
"Depois de ler os artigos, minha visão sobre fotografia mudou completamente. As dicas de fontes confiáveis ajudaram a transformar minhas fotos e eu recomendo o FotoArte para qualquer fotógrafo que deseje aprimorar suas habilidades." - <strong>João Pedro</strong>
</blockquote>
<blockquote>
"A galeria de fotos do FotoArte é uma verdadeira fonte de criatividade! Cada imagem me inspira a tentar novas abordagens e me desafiar a pensar fora da caixa. Sempre encontro algo novo e surpreendente que me faz querer pegar a câmera e sair para fotografar."- <strong>Lucas Ferreira</strong>
</blockquote>
</div>
</section>
</main>
<!-- Modal de imagem -->
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">×</span>
<img src="" alt="" class="modal-image" />
<div class="modal-caption"></div>
</div>
</div>
<!-- Rodapé -->
<footer>
<p>© 2024 FotoArte - Todos os direitos reservados</p>
<div class="social-icons-container">
<a href="#">
<img src="./src/assets/icons/icon-facebook.png" alt="ícone Facebook">
</a>
<a href="#">
<img src="./src/assets/icons/icone-instagram.png" alt="Ícone Instagram">
</a>
<a href="#">
<img src="./src/assets/icons/icon-twitter.png" alt="Ícone Twitter">
</a>
</div>
</footer>
<script type="module" src="./src/js/index.js"></script>
<script type="module" src="./src/js/renderArtigos.js"></script>
</body>
</html>