-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (99 loc) · 6.37 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
<!DOCTYPE html>
<html lang="en">
<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>aaaa</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://kit.fontawesome.com/0fa5fbeb78.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<div class="header__sup">
<a href="#" class="logo">
<img src="assets/images/logo.png" class="logo__img"></img>
</a>
<nav class="nav">
<ul class="nav__list">
<li><a href="#" class="nav__link"><i class="fa-solid fa-house nav__icon"></i>Inicio</a></li>
<li><a href="#" class="nav__link"><i class="fa-solid fa-location-dot nav__icon"></i>Rutas</a></li>
<li><a href="#" class="nav__link"><i class="fa-solid fa-square-h nav__icon"></i>Hoteles</a></li>
<li><a href="#" class="nav__link"><i class="fa-solid fa-plane nav__icon"></i>Vuelos</a></li>
<li><a href="#" class="nav__link"><i class="fa-solid fa-address-card nav__icon"></i>Contacto</a></li>
</ul>
</nav>
<div class="social-media">
<a href="#" class="social-media__link"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="social-media__link"><i class="fa-brands fa-twitter "></i></a>
</div>
</div>
<div class="header__inf"></div>
<h1 class="header__title">"Disfruta de la experiencia de otros"</h1>
</header>
<section class="main">
<main class="main__section">
<article class="card">
<header class="card__header">
<figure class="card__figure">
<img src="assets/images/sakura.jpg" alt="sakura image" class="card__img">
<figcaption class="card__time"><time datetime="2021-05-03">3 de mayo de 2021</time></figcaption>
</figure>
<h2 class="card__title">CULTURA</h2>
</header>
<div class="card__body">
<p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci iste sint tempore, suscipit nemo natus dolorum id magni accusamus, blanditiis sit rerum architecto porro. Deleniti iusto ullam ratione repellat tempora suscipit cumque pariatur sapiente porro est eveniet fuga commodi, placeat temporibus magni nobis asperiores laudantium perspiciatis ipsa! Dolore cupiditate sint non omnis. Modi libero voluptas omnis qui molestiae nisi voluptatem.</p>
<a href="#" class="card__link">Leer mas...</a>
</div>
</article>
<article class="card">
<header class="card__header">
<figure class="card__figure">
<img src="assets/images/comida.jpg" alt="food image" class="card__img">
<figcaption class="card__time"><time datetime="2021-05-01">1 de mayo de 2021</time></figcaption>
</figure>
<h2 class="card__title">GASTRONOMIA</h2>
</header>
<div class="card__body">
<p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci iste sint tempore, suscipit nemo natus dolorum id magni accusamus, blanditiis sit rerum architecto porro. Deleniti iusto ullam ratione repellat tempora suscipit cumque pariatur sapiente porro est eveniet fuga commodi, placeat temporibus magni nobis asperiores laudantium perspiciatis ipsa! Dolore cupiditate sint non omnis. Modi libero voluptas omnis qui molestiae nisi voluptatem.</p>
<a href="#" class="card__link">Leer mas...</a>
</div>
</article>
<article class="card">
<header class="card__header">
<figure class="card__figure">
<img src="assets/images/fuji.jpg" alt="tourism image" class="card__img">
<figcaption class="card__time"><time datetime="2021-05-22" >22 de mayo de 2021</time></figcaption>
</figure>
<h2 class="card__title">TURISMO</h2>
</header>
<div class="card__body">
<p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci iste sint tempore, suscipit nemo natus dolorum id magni accusamus, blanditiis sit rerum architecto porro. Deleniti iusto ullam ratione repellat tempora suscipit cumque pariatur sapiente porro est eveniet fuga commodi, placeat temporibus magni nobis asperiores laudantium perspiciatis ipsa! Dolore cupiditate sint non omnis. Modi libero voluptas omnis qui molestiae nisi voluptatem.</p>
<a href="#" class="card__link">Leer mas...</a>
</div>
</article>
<article class="card">
<header class="card__header">
<figure class="card__figure">
<img src="assets/images/noche.jpg" alt="night image" class="card__img">
<figcaption class="card__time"><time datetime="2021-03-30" >30 de mazo de 2021</time></figcaption>
</figure>
<h2 class="card__title">VIDA NOCTURNA</h2>
</header>
<div class="card__body">
<p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci iste sint tempore, suscipit nemo natus dolorum id magni accusamus, blanditiis sit rerum architecto porro. Deleniti iusto ullam ratione repellat tempora suscipit cumque pariatur sapiente porro est eveniet fuga commodi, placeat temporibus magni nobis asperiores laudantium perspiciatis ipsa! Dolore cupiditate sint non omnis. Modi libero voluptas omnis qui molestiae nisi voluptatem.</p>
<a href="#" class="card__link">Leer mas...</a>
</div>
</article>
<div class="main__footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nemo ullam, odit ipsum quisquam obcaecati eligendi sed, illo architecto deserunt voluptates nam dignissimos quibusdam fuga saepe, dolore alias atque.</div>
</main>
<aside class="aside">
<h3 class="aside__title">Something</h3>
<p class="aside__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima hic laboriosam rerum. Culpa explicabo possimus, id dolore ad accusantium molestiae illum velit, voluptatem, corrupti expedita cupiditate. Cum soluta nam quod?</p>
</aside>
</section>
<footer class="footer">
<p class="footer__content">©2021 Japan Tourism</p>
</footer>
</body>
</html>