-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (120 loc) · 4.44 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
<!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
href="https://fonts.googleapis.com/css2?family=Spartan:wght@500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Frontend Mentor | Room homepage</title>
<style>
.attribution {
font-size: 11px;
text-align: center;
margin-top: 10px;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<!--Main-->
<main>
<div class="container">
<div class="image-display">
<!--Header-->
<header>
<!--hamburger-->
<div class="header-container">
<div class="hamburger"></div>
<!--logo-->
<div class="logo"><img src="/images/logo.svg" alt="Logo" /></div>
<!--nav bar-->
<nav class="nav-links-container">
<ul class="nav-links">
<li><a href="#" class="nav-link">home</a></li>
<li><a href="#" class="nav-link">shop</a></li>
<li><a href="#" class="nav-link">about</a></li>
<li><a href="#" class="nav-link">contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="image-container">
<div id="image-a"></div>
<div id="image-b"></div>
<div id="image-c"></div>
</div>
<div class="buttons">
<button class="left-btn" type="button">
<img src="/images/icon-angle-left.svg" alt="Left arrow" />
</button>
<button class="right-btn" type="button">
<img src="/images/icon-angle-right.svg" alt="Right arrow" />
</button>
</div>
</div>
<div class="introduction">
<div class="intro-text">
<div id="text-a">
<h1>Discover innovative ways to decorate</h1>
<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>
</div>
<div id="text-b">
<h1>We are available all across the globe</h1>
<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>
</div>
<div id="text-c">
<h1>Manufactured with the best materials</h1>
<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>
</div>
</div>
<button class="cta-btn" type="button">
SHOP NOW<img src="/images/icon-arrow.svg" alt="Arrow" />
</button>
</div>
<div class="left-image"></div>
<div class="about">
<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="right-image"></div>
</div>
</main>
<script src="./index.js"></script>
</body>
</html>