-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (123 loc) · 9.58 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 href="https://fonts.googleapis.com/css2?family=Spartan:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>Frontend Mentor | Room homepage</title>
</head>
<body>
<header class="header">
<div class="container">
<button aria-label="mobile burger" title="mobile burger" class="mobile-nav-trigger">
<span class="sr-only">Mobile Nav Trigger</span>
<svg class="mobile-nav-trigger__icon" width="20" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M20 12v2H0v-2h20zm0-6v2H0V6h20zm0-6v2H0V0h20z" fill="#FFF" fill-rule="evenodd"/></svg>
<svg class="mobile-nav-trigger__icon hide" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.364.222l1.414 1.414L9.414 8l6.364 6.364-1.414 1.414L8 9.414l-6.364 6.364-1.414-1.414L6.586 8 .222 1.636 1.636.222 8 6.586 14.364.222z" fill="#000" fill-rule="evenodd" opacity=".201"/></svg>
</button>
<a class="site-brand" href="/">
<span class="sr-only">Site logo</span>
<svg width="62" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M2.988 12.672v-7.32c0-.48.142-.928.426-1.344a3.36 3.36 0 011.11-1.02c.456-.264.94-.396 1.452-.396.296 0 .618.048.966.144.348.096.654.224.918.384L9.096.588A4.277 4.277 0 007.998.162 5.115 5.115 0 006.744 0c-.776 0-1.488.186-2.136.558-.648.372-1.188.91-1.62 1.614V.384H0v12.288h2.988zm13.472.384c1.328 0 2.526-.276 3.594-.828a6.406 6.406 0 002.532-2.304c.62-.984.93-2.116.93-3.396 0-1.288-.31-2.422-.93-3.402A6.421 6.421 0 0020.054.828C18.986.276 17.788 0 16.46 0c-1.336 0-2.536.276-3.6.828a6.476 6.476 0 00-2.532 2.298c-.624.98-.936 2.114-.936 3.402 0 1.28.312 2.412.936 3.396a6.45 6.45 0 002.538 2.304c1.068.552 2.266.828 3.594.828zm0-2.568c-.744 0-1.416-.17-2.016-.51a3.729 3.729 0 01-1.416-1.404c-.344-.596-.516-1.278-.516-2.046 0-.776.172-1.462.516-2.058a3.686 3.686 0 011.416-1.398c.6-.336 1.272-.504 2.016-.504.752 0 1.426.168 2.022.504a3.698 3.698 0 011.41 1.398c.344.596.516 1.282.516 2.058 0 .768-.172 1.45-.516 2.046a3.741 3.741 0 01-1.41 1.404c-.596.34-1.27.51-2.022.51zm15.704 2.568c1.328 0 2.526-.276 3.594-.828a6.406 6.406 0 002.532-2.304c.62-.984.93-2.116.93-3.396 0-1.288-.31-2.422-.93-3.402A6.421 6.421 0 0035.758.828C34.69.276 33.492 0 32.164 0c-1.336 0-2.536.276-3.6.828a6.476 6.476 0 00-2.532 2.298c-.624.98-.936 2.114-.936 3.402 0 1.28.312 2.412.936 3.396a6.45 6.45 0 002.538 2.304c1.068.552 2.266.828 3.594.828zm0-2.568c-.744 0-1.416-.17-2.016-.51a3.729 3.729 0 01-1.416-1.404c-.344-.596-.516-1.278-.516-2.046 0-.776.172-1.462.516-2.058a3.686 3.686 0 011.416-1.398c.6-.336 1.272-.504 2.016-.504.752 0 1.426.168 2.022.504a3.698 3.698 0 011.41 1.398c.344.596.516 1.282.516 2.058 0 .768-.172 1.45-.516 2.046a3.741 3.741 0 01-1.41 1.404c-.596.34-1.27.51-2.022.51zm12.608 2.184V4.896c0-.44.126-.85.378-1.23s.596-.686 1.032-.918c.436-.232.93-.348 1.482-.348.8 0 1.432.258 1.896.774.464.516.696 1.206.696 2.07v7.428h2.988V4.908c0-.44.124-.852.372-1.236a2.717 2.717 0 011.02-.924c.432-.232.92-.348 1.464-.348.8 0 1.438.266 1.914.798s.714 1.254.714 2.166v7.308h2.988V4.548c0-.952-.198-1.766-.594-2.442a4.051 4.051 0 00-1.62-1.56C58.818.182 58.036 0 57.156 0c-.928 0-1.744.21-2.448.63-.704.42-1.332 1.022-1.884 1.806-.312-.744-.846-1.336-1.602-1.776C50.466.22 49.604 0 48.636 0c-.752 0-1.442.152-2.07.456-.628.304-1.226.772-1.794 1.404V.384h-2.988v12.288h2.988z" fill="#FFF" fill-rule="nonzero"/></svg>
</a>
<ul class="nav-desktop">
<li class="t-nav t-white">home</li>
<li class="t-nav t-white">shop</li>
<li class="t-nav t-white">about</li>
<li class="t-nav t-white">contact</li>
</ul>
<div class="nav-mobile hide">
<ul class="mobile-nav-links">
<li class="t-nav t-black">home</li>
<li class="t-nav t-black">shop</li>
<li class="t-nav t-black">about</li>
<li class="t-nav t-black">contact</li>
</ul>
</div>
</div>
</header>
<main class="main">
<section class="hero">
<div class="siema">
<div class="swiper-slide">
<div class="slide-image slide-image--1"></div>
<div class="slide-content">
<div class="siema-buttons">
<div class="siema-button-prev">
<svg class="icon-angle" width="14" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 0L1 12l12 12" stroke="#FFF" fill="none" fill-rule="evenodd"/></svg>
</div>
<div class="siema-button-next">
<svg class="icon-angle" width="14" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M1 0l12 12L1 24" stroke="#FFF" fill="none" fill-rule="evenodd"/></svg>
</div>
</div>
<h2 class="t-heading-l">Discover innovative ways to decorate</h2>
<p class="t-body slide-content__body">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 class="shop-now" href="">
<span class="shop-now__text">Shop now</span>
<span class="shop-now__icon"><svg width="40" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M34.05 0l5.481 5.527h.008v.008L40 6l-.461.465v.063l-.062-.001L34.049 12l-.662-.668 4.765-4.805H0v-1h38.206l-4.82-4.86L34.05 0z" fill="#000" fill-rule="nonzero"/></svg></span>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image slide-image--2"></div>
<div class="slide-content">
<div class="siema-buttons">
<div class="siema-button-prev">
<svg class="icon-angle" width="14" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 0L1 12l12 12" stroke="#FFF" fill="none" fill-rule="evenodd"/></svg>
</div>
<div class="siema-button-next">
<svg class="icon-angle" width="14" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M1 0l12 12L1 24" stroke="#FFF" fill="none" fill-rule="evenodd"/></svg>
</div>
</div>
<h2 class="t-heading-l">We are available all across the globe</h2>
<p class="t-body slide-content__body">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 class="shop-now" href="">
<span class="shop-now__text">Shop now</span>
<span class="shop-now__icon"><svg width="40" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M34.05 0l5.481 5.527h.008v.008L40 6l-.461.465v.063l-.062-.001L34.049 12l-.662-.668 4.765-4.805H0v-1h38.206l-4.82-4.86L34.05 0z" fill="#000" fill-rule="nonzero"/></svg></span>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image slide-image--3"></div>
<div class="slide-content">
<div class="siema-buttons">
<div class="siema-button-prev">
<svg class="icon-angle" width="14" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 0L1 12l12 12" stroke="#FFF" fill="none" fill-rule="evenodd"/></svg>
</div>
<div class="siema-button-next">
<svg class="icon-angle" width="14" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M1 0l12 12L1 24" stroke="#FFF" fill="none" fill-rule="evenodd"/></svg>
</div>
</div>
<h2 class="t-heading-l">Manufactured with the best materials</h2>
<p class="t-body slide-content__body">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 class="shop-now" href="">
<span class="shop-now__text">Shop now</span>
<span class="shop-now__icon"><svg width="40" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M34.05 0l5.481 5.527h.008v.008L40 6l-.461.465v.063l-.062-.001L34.049 12l-.662-.668 4.765-4.805H0v-1h38.206l-4.82-4.86L34.05 0z" fill="#000" fill-rule="nonzero"/></svg></span>
</a>
</div>
</div>
</div>
</section>
<section class="about">
<div class="about__dark"></div>
<div class="about__content">
<h1 class="t-heading-s">About our furniture</h1>
<p class="t-body about__content__body">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="about__light"></div>
</section>
</main>
<script src="./js/gsap.min.js"></script>
<script src="./js/siema.min.js"></script>
<script src="./js/app.js"></script>
</body>
</html>