-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog.html
More file actions
243 lines (224 loc) · 13.5 KB
/
blog.html
File metadata and controls
243 lines (224 loc) · 13.5 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
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Las 4 etiquetas meta anteriores *deben* aparecer primero en el head; cualquier otro contenido del head debe venir *después* de estas etiquetas -->
<!-- Título -->
<title>INSTANTE | Blog</title>
<!-- Favicon -->
<link rel="icon" href="img/core-img/favicon.ico">
<!-- CSS de Estilo Principal -->
<link rel="stylesheet" href="css/core-style.css">
<link rel="stylesheet" href="style.css">
<!-- CSS Responsivo -->
<link href="css/responsive.css" rel="stylesheet">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="showbox">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
</div>
<div class="questions-area text-center">
<p>¿Sabías que?</p>
<ul>
<li>La competición de fotografía más grande tiene 353,768 participantes.</li>
<li>La fotografía es la profesión más dura del mundo.</li>
<li>El álbum de fotos más grande del mundo por dimensiones era de 13 pies 11.5 pulgadas x 17 pies.</li>
<li>El mosaico fotográfico más grande del mundo contaba con 176,175 imágenes.</li>
<li>El objetivo de cámara más grande del mundo era un lente de 5200mm acoplado a un canon.</li>
</ul>
</div>
</div>
<!-- Capa de fondo de gradiente -->
<div class="gradient-background-overlay"></div>
<!-- Área del encabezado -->
<header class="header-area bg-img" style="background-image: url(img/bg-img/14.jpg);">
<div class="container-fluid h-100">
<div class="row h-100 align-items-center">
<div class="col-12 h-100">
<div class="main-menu h-100">
<nav class="navbar h-100 navbar-expand-lg">
<!-- Área de logo -->
<a class="navbar-brand" href="index.html"><img src="img/core-img/logo.png" alt="Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#studioMenu" aria-controls="studioMenu" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i> Menu</button>
<div class="collapse navbar-collapse" id="studioMenu">
<!-- Área de menú -->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Páginas</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="index.html">Inicio</a>
<a class="dropdown-item" href="about-me.html">Acerca de mí</a>
<a class="dropdown-item" href="portfolio.html">Portafolio</a>
<a class="dropdown-item" href="blog.html">Blog</a>
<a class="dropdown-item" href="contact.html">Contacto</a>
<a class="dropdown-item" href="elements.html">Elementos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="about-me.html">Acerca de mí</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portafolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contacto</a>
</li>
</ul>
<!-- Formulario de búsqueda -->
<div class="header-search-form ml-auto">
<form action="#">
<input type="search" class="form-control" placeholder="Input your keyword then press enter..." id="search" name="search">
<input class="d-none" type="submit" value="submit">
</form>
</div>
<!-- Botón de búsqueda -->
<div id="searchbtn">
<img src="img/core-img/search.png" alt="">
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- Área del encabezado -->
<!-- Área de barra lateral social -->
<div class="social-sidebar-area">
<!-- Área social -->
<div class="social-info-area">
<a href="#" data-toggle="tooltip" data-placement="right" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i> <span>Facebook</span></a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i> <span>Twitter</span></a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i> <span>Pinterest</span></a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Behance"><i class="fa fa-behance" aria-hidden="true"></i> <span>Behance</span></a>
</div>
</div>
<!-- Área de barra lateral social -->
<!-- Área de blog -->
<section class="blog-area section_padding_100 mt-100">
<div class="container">
<div class="row justify-content-center">
<!-- Área de blog única -->
<div class="col-10">
<div class="single-blog-area text-center mb-100 wow fadeInUpBig" data-wow-delay="100ms" data-wow-duration="1s">
<div class="blog-thumbnail mb-100">
<img src="img/bg-img/b1.jpg" alt="">
</div>
<div class="blog-content">
<span></span>
<h2>10 Consejos de Fotografía para Principiantes</h2>
<a href="#" class="post-date">Dic 01, 2024</a>
<a href="#" class="post-author">YGBS</a>
<p>Si estás iniciando en el mundo de la fotografía, hay ciertas técnicas que pueden ayudarte a mejorar rápidamente. Desde la importancia de la composición hasta el uso adecuado de la luz, estos 10 consejos te permitirán capturar imágenes más impactantes y profesionales. Aprende a configurar tu cámara, dominar el enfoque y aprovechar cada escena para obtener el mejor resultado. </p>
<a href="#" class="btn studio-btn"><img src="img/core-img/logo-icon.png" alt=""> Leer más</a>
</div>
</div>
</div>
<!-- Área de blog única -->
<div class="col-10">
<div class="single-blog-area text-center mb-100 wow fadeInUpBig" data-wow-delay="100ms" data-wow-duration="1s">
<div class="blog-thumbnail mb-100">
<img src="img/bg-img/b2.jpg" alt="">
</div>
<div class="blog-content">
<span></span>
<h2>Los mejores tutoriales en línea para fotógrafos</h2>
<a href="#" class="post-date">Dic 01, 2024</a>
<a href="#" class="post-author">YGBS</a>
<p>La fotografía callejera es un arte que requiere paciencia, creatividad y, sobre todo, una buena comprensión de la luz. Descubre cómo aprovechar la iluminación natural, jugar con las sombras y capturar escenas auténticas que transmitan emociones. Con estos consejos, lograrás fotos urbanas llenas de vida y profundidad. </p>
<a href="#" class="btn studio-btn"><img src="img/core-img/logo-icon.png" alt=""> Leer más</a>
</div>
</div>
</div>
<!-- Área de blog única -->
<div class="col-10">
<div class="single-blog-area text-center mb-100 wow fadeInUpBig" data-wow-delay="100ms" data-wow-duration="1s">
<div class="blog-thumbnail mb-100">
<img src="img/bg-img/b3.jpg" alt="">
</div>
<div class="blog-content">
<span></span>
<h2>La luz perfecta para el arte callejero</h2>
<a href="#" class="post-date">Dic 01, 2024</a>
<a href="#" class="post-author">YGBS</a>
<p>La fotografía callejera es un arte que requiere paciencia, creatividad y, sobre todo, una buena comprensión de la luz. Descubre cómo aprovechar la iluminación natural, jugar con las sombras y capturar escenas auténticas que transmitan emociones. Con estos consejos, lograrás fotos urbanas llenas de vida y profundidad. </p>
<a href="#" class="btn studio-btn"><img src="img/core-img/logo-icon.png" alt=""> Leer más</a>
</div>
</div>
</div>
</div>
<!-- Área de paginación -->
<div class="row">
<div class="col-12">
<nav aria-label="Page navigation" class="pagination-area mb-100">
<ul class="pagination justify-content-center">
<li class="page-item active"><a class="page-link" href="#">01.</a></li>
<li class="page-item"><a class="page-link" href="#">02.</a></li>
<li class="page-item"><a class="page-link" href="#">03.</a></li>
<li class="page-item"><a class="page-link" href="#">04.</a></li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!-- Fin del área de blog -->
<!-- Área de pie de página -->
<footer class="footer-area">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-12 h-100">
<div class="footer-content h-100 d-md-flex align-items-center justify-content-between">
<!-- Contenido de pie de página único -->
<div class="single-footer-content">
<img src="img/core-img/map.png" alt="">
<a href="#">Av. Lima, Lima</a>
</div>
<!-- Contenido de pie de página único -->
<div class="single-footer-content">
<img src="img/core-img/smartphone.png" alt="">
<a href="#">+51 987654321</a>
</div>
<!-- Contenido de pie de página único -->
<div class="single-footer-content">
<img src="img/core-img/envelope-2.png" alt="">
<a href="#">contacto@gmail.com</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Fin del área de pie de página -->
<p>Copyright ©<script>document.write(new Date().getFullYear());</script> Reservados todos los derechos | Developed and Designed by <a href="https://github.com/gianmattus-programmer" target="_blank">Gianmattus-Programmer</a></p>
<!-- jQuery (Necesario para todos los complementos de JavaScript) -->
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script src="js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugins js -->
<script src="js/plugins.js"></script>
<!-- Active js -->
<script src="js/active.js"></script>
</body>
</html>