-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex OLD.html
130 lines (126 loc) · 5.03 KB
/
index OLD.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
<!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>Document</title>
<link rel="stylesheet" href="./assets/styles.css" />
<script src="./src/app.js" type="module"></script>
</head>
<body>
<nav id="main-nav">
<ul>
<li><a aria-label="Home" href="/">Home</a></li>
<li><a aria-label="Catalog" href="/catalog">Catalog</a></li>
</ul>
</nav>
<main>
<section id="catalog-section">
<h1 class="text-center">CATALOG VIEW</h1>
<div class="cards container-wide">
<div class="card box-shadow-1">
<figure>
<img class="card-image"
src="https://images.unsplash.com/photo-1669025466409-450f22c7561a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="Volcano" title="Volcano" />
</figure>
<section class="card-info">
<header>
<h2>Title</h2>
</header>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
aliquid sint voluptate ex eveniet hic aspernatur? Soluta quos
placeat veniam?
</p>
<a class="box-shadow-2" href="/details/some-card">Go to</a>
</div>
</section>
</div>
<div class="card box-shadow-1">
<figure>
<img class="card-image"
src="https://images.unsplash.com/photo-1669025466409-450f22c7561a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="Volcano" title="Volcano" />
</figure>
<section class="card-info">
<header>
<h2>Title</h2>
</header>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
aliquid sint voluptate ex eveniet hic aspernatur? Soluta quos
placeat veniam?
</p>
<a class="box-shadow-2" href="/details/some-card">Go to</a>
</div>
</section>
</div>
<div class="card box-shadow-1">
<figure>
<img class="card-image"
src="https://images.unsplash.com/photo-1669025466409-450f22c7561a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="Volcano" title="Volcano" />
</figure>
<section class="card-info">
<header>
<h2>Title</h2>
</header>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
aliquid sint voluptate ex eveniet hic aspernatur? Soluta quos
placeat veniam?
</p>
<a class="box-shadow-2" href="/details/some-card">Go to</a>
</div>
</section>
</div>
</div>
</section>
<section id="catalog-section">
<h1 class="text-center">SINGLE DETAILS VIEW</h1>
<div class="single-details-view container-wide box-shadow-1">
<div class="single-details-view__image">
<!-- This anchor will lead to another view for the image -->
<a href="javascript:void(0)">
<img
src="https://images.unsplash.com/photo-1669025466409-450f22c7561a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="image" title="image" class="box-shadow-2" /></a>
</div>
<div class="single-details-view__info">
<div>
<div>
<h2>Airline Name</h2>
<img src="./assets/imgs/914e5330ca464758a4db7479c59a4c7d.png" alt="logo" title="logo" />
</div>
<p>Country Name</p>
</div>
<div>
<p>
Slogan here - Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Incidunt nemo sit vitae, vero illum odio necessitatibus
sapiente ducimus eligendi, corrupti fugiat saepe voluptates vel
pariatur aut perspiciatis. Facilis, quia ut! Lorem ipsum dolor
sit, amet consectetur adipisicing elit.
<p class="single-details-view__info--show-more-info"> Incidunt nemo sit vitae,
vero illum odio necessitatibus sapiente ducimus eligendi, corrupti
fugiat saepe voluptates vel pariatur aut perspiciatis. Facilis,
quia ut!</p>
<span class="single-details-view__info--show-more-btn">Show more</span>
</p>
</div>
<hr />
<div>
<a href="https://www.google.com" target="_blank">Website - www.test.com</a>
<p>Established - 1999 ©</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>