-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (108 loc) · 4.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<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=League+Spartan:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./dist/style.css">
<script src="./app/js/script.js" defer></script>
<title>Frontend Mentor | Room homepage</title>
</head>
<body>
<main class="main">
<h1 class="v-hidden">room shop page</h1>
<div class="container">
<div class="hero">
<div class="nav">
<button class="menu hidden"><img src="./images/icon-hamburger.svg" alt="menu icon"></button>
<div class="logo"><img src="./images/logo.svg" alt="logo image"></div>
<a class="link" href="#">home</a>
<a class="link" href="#">shop</a>
<a class="link" href="#">about</a>
<a class="link" href="#">contact</a>
</div>
<div class="slide">
<!-- slide images -->
<div class="slide__image">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<!-- slide description -->
<div class="slide__desc">
<div class="description desc-1">
<h2>Discover innovative ways to decorate</h2>
<p>
We provide unmatched quality, comfort, and style for property owners across the country.
Our experts combine form and function in bringing your vision to life. Create a room in your
own style with our collection and make your property a reflection of you and what you love.
</p>
<a href="#" class="shop-now">
<p>SHOP NOW</p>
<img src="./images/icon-arrow.svg" alt="arrow image">
</a>
</div>
<div class="description desc-2">
<h2>We are available all across the globe</h2>
<p>
With stores all over the world, it's easy for you to find furniture for your home or place of business.
Locally, we’re in most major cities throughout the country. Find the branch nearest you using our
store locator. Any questions? Don't hesitate to contact us today.
</p>
<a href="#" class="shop-now">
<p>SHOP NOW</p>
<img src="./images/icon-arrow.svg" alt="arrow image">
</a>
</div>
<div class="description desc-3">
<h2>Manufactured with the best materials</h2>
<p>
Our modern furniture store provide a high level of quality. Our company has invested in advanced technology
to ensure that every product is made as perfect and as consistent as possible. With three decades of
experience in this industry, we understand what customers want for their home and office.
</p>
<a href="#" class="shop-now">
<p>SHOP NOW</p>
<div class="arrow"><img src="./images/icon-arrow.svg" alt="arrow image"></div>
</a>
</div>
</div>
</div>
<!-- slide buttons -->
<div class="slide-btns">
<button class="prev"><img src="./images/icon-angle-left.svg" alt="previous button icon"></button>
<button class="next"><img src="./images/icon-angle-right.svg" alt="next button icon"></button>
</div>
</div>
<!-- about section -->
<div class="about">
<div class="image-1"></div>
<div class="info">
<h3>ABOUT OUR FURNITURE</h3>
<p>
Our multifunctional collection blends design and function to suit your individual taste.
Make each room unique, or pick a cohesive theme that best express your interests and what
inspires you. Find the furniture pieces you need, from traditional to contemporary styles
or anything in between. Product specialists are available to help you create your dream space.
</p>
</div>
<div class="image-2"></div>
</div>
<!-- mobile menu -->
<div class="overlay"></div>
<div class="mobile-menu">
<button class="close"><img src="./images/icon-close.svg" alt="close button icon"></button>
<div class="links">
<a class="link" href="#">home</a>
<a class="link" href="#">shop</a>
<a class="link" href="#">about</a>
<a class="link" href="#">contact</a>
</div>
</div>
</div>
</main>
</body>
</html>