-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (103 loc) · 5.17 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
<!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="./css/styles.css">
<title>Jewels By Me</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header__container">
<div class="header__menu-logo-item">
<nav class="header__menu menu">
<a href="#">Shop</a>
<a href="#">Product</a>
<a href="#">About Us</a>
</nav>
<a href="#" class="header__logo logo">Jewels By Me</a>
</div>
<div class="header__search">
<a href="#"><img src="./img/icons/search.svg" alt="Search icon"></a>
</div>
</div>
</header>
<main class="page">
<section class="exclusive">
<div class="exclusive__container">
<div class="exclusive__image">
<img src="./img/main-image.jpg" alt="Main picture">
</div>
<div class="exclusive__text">
<h1>EXCLUSIVE JEWELLERY DESIGNS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit justo ut lacinia facilisis. Phasellus scelerisque ut eros sit amet scelerisque. Nam vitae nulla ut arcu dictum eleifend vitae et dui. </p>
<button type="button">Explore Now</button>
</div>
</div>
</section>
<section class="gallery">
<div class="gallery__container">
<div class="gallery__text">
<h2>JEWELS BY CATEGORY</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit justo ut lacinia facilisis. Phasellus scelerisque ut eros sit amet scelerisque. Nam vitae nulla ut arcu dictum eleifend vitae et dui. </p>
</div>
<div class="gallery__images">
<div class="gallery__image">
<a href="#"><img src="./img/gallery-img1.jpg" alt="Gallery Image 1"></a>
</div>
<div class="gallery__image">
<a href="#"><img src="./img/gallery-img2.jpg" alt="Gallery Image 2"></a>
</div>
<div class="gallery__image">
<a href="#"><img src="./img/gallery-img3.jpg" alt="Gallery Image 3"></a>
</div>
<div class="gallery__image">
<a href="#"><img src="./img/gallery-img4.jpg" alt="Gallery Image 4"></a>
</div>
</div>
</div>
</section>
<section class="shop-now">
<div class="shop-now__container">
<div class="shop-now__text">
<h2>JEWELS THAT <span>MAKE YOU</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit justo ut lacinia facilisis. Phasellus scelerisque ut eros sit amet scelerisque. Nam vitae nulla ut arcu dictum eleifend vitae et dui. </p>
<button type="button">Shop Now</button>
</div>
<div class="shop-now__image">
<img src="./img/shop-now-img.jpg" alt="Shop picture">
</div>
</div>
</section>
<section class="review">
<div class="review__container">
<div class="review__text">
<h3>OUR CUSTOMER REVIEW</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit justo ut lacinia facilisis. Phasellus scelerisque ut eros sit amet scelerisque. Nam vitae nulla ut arcu dictum eleifend vitae et dui.</p>
<p>-Samantha Jones</p>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__container">
<a href="#" class="footer__logo logo">Jewels By Me</a>
<nav class="footer__menu menu">
<a href="#">Shop</a>
<a href="#">Product</a>
<a href="#">About Us</a>
</nav>
<div class="footer__socials">
<a href="#"><img src="./img/icons/insta.svg" alt="Search icon"></a>
<a href="#"><img src="./img/icons/twitter.svg" alt="Search icon"></a>
<a href="#"><img src="./img/icons/facebook.svg" alt="Search icon"></a>
</div>
</div>
<div class="footer__bottom">
<p>© all rights reserved</p>
</div>
</footer>
</div>
</body>
</html>