-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (163 loc) · 5.86 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
<!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" />
<link rel="stylesheet" href="styles.css" />
<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=Italiana&family=Lato:wght@300;400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/0499a3b8f3.js" crossorigin="anonymous"></script>
<script src="script.js" type="text/javascript"></script>
<title>💎Arora Jewelers💎</title>
</head>
<body>
<header>
<!-- <div class="mobile"><a href="#" onclick="toggleNav();">☰</a></div> -->
<!-- class="small" -->
<nav>
<ul>
<li>
<a href="#Home">Home</a>
</li>
<li>
<a href="#About">About</a>
</li>
<li>
<a href="#Blog">Blog</a>
</li>
<li>
<a href="#Contact">Contact</a>
</li>
</ul>
</nav>
<div class="logo">
<h1>-ARO-
<span class="ra">RA</pan>
</h1>
<h3>Jewelers</h3>
</div>
<div class="social">
<a href="#">
<i class="fa-brands fa-instagram fa-lg"></i>
</a>
<a href="#">
<i class="fa-brands fa-facebook-f fa-lg"></i>
</a>
<a href="#">
<i class="fa-brands fa-snapchat fa-lg"></i>
</a>
<a href="#">
<i class="fa-brands fa-twitter fa-lg"></i>
</a>
</div>
</header>
<main>
<section class="wrapper hand">
<div class="handImg">
<img
src="assets/image-6@2x.png"
alt="Jewelery Being Made by Hand"
/>
</div>
<div class="handSub">
<h2>Hand Crafted</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe vel voluptatum atque eius sunt, neque repellat suscipit velit quos odit, architecto, totam nisi assumenda. Amet iste reprehenderit nobis, odit sequi quasi libero omnis. Veniam impedit error, quibusdam omnis totam optio sint obcaecati libero corrupti ea rerum consequatur voluptas dicta unde tempore explicabo ut perspiciatis quo. Culpa, ullam maxime quod in cumque quas, voluptatem excepturi enim quos consequuntur unde reprehenderit odio quis qui ipsa nisi esse cum sed libero sint sequi ea dolorum distinctio. Aut, nulla.
</p>
<button>Read More</button>
</div>
</section>
<section class="latest">
<h2>Latest Collection</h2>
<div class="cards wrapper">
<img class="necklaces"
src="assets/image-2_2@2x.png"
alt="An assortment of gold and silver necklaces"
/>
<img class="wedding"
src="assets/image-4@2x.png"
alt="A Pair of intertwined gold wedding bands"
/>
<img class="earings" src="assets/image-3.jpg" alt=";Gold Earings" />
</div>
</section>
<section class="links wrapper">
<div class="icons">
<ul>
<li><i class="fa-regular fa-images fa-xl"></i></li>
<li>Catologue</li>
</ul>
<ul>
<li><i class="fa-solid fa-calendar-days fa-xl"></i></li>
<li>Events</li>
</ul>
<ul>
<li> <i class="fa-regular fa-handshake fa-xl"></i></li>
<li>Collaborations</li>
</ul>
</div>
</section>
<section class="materials">
<div class="materialsSub wrapper">
<h2>Sustainable Materials</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem
assumenda magnam cum excepturi illo, voluptatibus, atque ratione
fugit nostrum mollitia eligendi odit earum quam aliquam sint dolor
possimus labore asperiores!
</p>
<button>Read More</button>
</div>
<div class="sustainImg">
<img
src="assets/image-2@2x.png"
alt="Woman wearing two necklaces with charms"
/>
</div>
</section>
<section class="match">
<div class="matchImg">
<img src="assets/image-2-copy@2x.png" alt="" />
</div>
<div class="matchSub wrapper">
<h2>Mix & Match</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui tempora possimus modi deleniti expedita ab esse doloremque a harum cumque doloribus eaque eos est at, dolorem natus vitae quae, cupiditate numquam repellat id aspernatur voluptatum illo. Culpa dolorum dolorem quae?
</p>
<button>Read More</button>
</div>
</section>
<section class="wrapper closing">
<div class="closing1">
<ul>
<li><a href=""></a>Home</li>
<li><a href=""></a>Blog</li>
<li><a href=""></a>Gallery</li>
<li><a href=""></a>Contact</li>
</ul>
</div>
<div class="closing2">
<h5>Stay Updated</h5>
<h6>Subscribe to our newsletter to stay updated</h6>
<form action="#">
<!-- <div class="inputBtn"> -->
<input type="email" placeholder="email address" />
<button class="suscribeBtn">subscribe</button>
<!-- </div> -->
</form>
</div>
<div class="address closing3">
<h5>Contact</h5>
<p>info@email.com | 123-456-7890</p>
<p>123 some road, Toronto, ON</p>
<p>A5A 5A5, Canada</p>
</div>
</section>
</main>
<footer>
<p>Copyright © 2019 HackerYou</p>
</footer>
</body>
</html>