-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
209 lines (188 loc) · 6.57 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
/>
<link rel="stylesheet" href="./css/global.css" />
<link rel="stylesheet" href="./css/modal.css" />
<link rel="stylesheet" href="./css/home.css" />
<title>Home | Avion</title>
</head>
<body>
<div class="loading">
<h3>Loading...</h3>
</div>
<header>
<nav class="container">
<a class="logo" href="./index.html">Avion</a>
<ul class="list">
<li>
<a class="nav-link" href="./pages/about.html">About</a>
</li>
<li>
<a class="nav-link" href="./pages/products.html">Products</a>
</li>
<li>
<a class="nav-link" href="./pages/productdetails.html"
>Product Details</a
>
</li>
</ul>
<div class="icons">
<input class="nav-input" type="text" placeholder="Search" />
<a class="search-btn icons-link" href="#"
><img src="./image/search.svg" alt="Search"
/></a>
<a class="icons-link" href="./pages/cart.html"
><img src="./image/cart.svg" alt="" />
<span class="cart-count">0</span></a
>
<a class="icons-link modal-open-btn" href=""
><img src="./image/acount.svg" alt=""
/></a>
</div>
<button class="menu">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSEtjZKAxYKSx+QyjFhAM4QEJov8EnYVfAYqjsfmA5hZQ6AFU7QMSBzT3Ac3jgOYW0DyIhr4FNI8Dmlsw9ONg1AcoIUDz0hQAbegGGXzv/l0AAAAASUVORK5CYII="
alt="Menu"
/>
</button>
</nav>
</header>
<main>
<section class="herro container">
<div class="herro-category"></div>
<div class="herro-wrapper">
<div class="herro-info">
<h1>The furniture brand for the future, with timeless designs</h1>
<a href="./pages/products.html">View collection</a>
<p>
A new era in eco friendly furniture with Avelon, the French luxury
retail brand with nice fonts, tasteful colors and a beautiful way
to display things digitally using modern web technologies.
</p>
</div>
<div class="herro-image">
<img src="./image/herro-image.png" alt="" />
</div>
</div>
</section>
<section class="brend container">
<h2>What makes our brand different</h2>
<div class="brand-cards"></div>
</section>
<section class="container ceramics">
<h2>New ceramics</h2>
<div class="ceramic-cards"></div>
<a href="./pages/products.html">View collection</a>
</section>
<section class="popular-products container">
<h2>Our popular products</h2>
<div class="popular-cards"></div>
<a href="./pages/products.html">View collection</a>
</section>
<section class="join">
<div class="join-card container">
<h3>Join the club and get the benefits</h3>
<p>
Sign up for our newsletter and receive exclusive offers on new
ranges, sales, pop up stores and more
</p>
<div class="join-input">
<input type="text" placeholder="[email protected]" />
<button>Sign Up</button>
</div>
</div>
</section>
<section class="container outlet">
<div class="outlet-info">
<h3>
From a studio in London to a global brand with over 400 outlets
</h3>
<p>
When we started Avion, the idea was simple. Make high quality
furniture affordable and available for the mass market.
<br /><br />
Handmade, and lovingly crafted furniture and homeware is what we
live, breathe and design so our Chelsea boutique become the hotbed
for the London interior design community.
</p>
<button>Get in touch</button>
</div>
<div class="outlet-image">
<img src="./image/outlet.png" alt="" />
</div>
</section>
</main>
<footer>
<div class="footer container">
<div class="footer-top">
<div class="footer-top-content">
<a href="#">Menu</a>
<a href="#">New arrivals</a>
<a href="#">Best sellers</a>
<a href="#">Recently viewed</a>
<a href="#">Popular this week</a>
<a href="#">All products</a>
</div>
<div class="footer-top-content">
<a href="#">Categories</a>
<a href="#">Crockery</a>
<a href="#">Furniture</a>
<a href="#">Homeware</a>
<a href="#">Plant pots</a>
<a href="#">Chairs</a>
<a href="#">Crockery</a>
</div>
<div class="footer-top-content">
<a href="#">Our company</a>
<a href="#">About us</a>
<a href="#">Vacancies</a>
<a href="#">Contact us</a>
<a href="#">Privacy</a>
<a href="#">Returns policy</a>
</div>
<div class="footer-top-content">
<span> Join our mailing list </span>
<form class="footer-form">
<input type="text" placeholder="[email protected]" />
<button class="footer-button">Sign</button>
</form>
</div>
</div>
<div class="footer-bottom">
<h3>Copyright 2022 Avion LTD</h3>
<div class="footer-socials">
<a href="#">
<i class="bx bxl-instagram"></i>
</a>
<a href="#">
<i class="bx bxl-facebook"></i>
</a>
<a href="#">
<i class="bx bxl-linkedin"></i>
</a>
<a href="#">
<i class="bx bxl-pinterest-alt"></i>
</a>
<a href="#">
<i class="bx bxl-twitter"></i>
</a>
<a href="#">
<i class="bx bxl-sass"></i>
</a>
</div>
</div>
</div>
</footer>
<a href="#" class="backtop"><i class="bx bx-up-arrow-alt"></i></a>
<script src="./js/data.js"></script>
<script src="./js/modal.js"></script>
<script src="./js/home.js"></script>
<script src="./js/main.js"></script>
</body>
</html>