-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (147 loc) · 5.15 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
<!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="stylesheet" href="style.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=League+Spartan:wght@500;600;700&display=swap"
rel="stylesheet"
/>
<title>Frontend Mentor | Room homepage</title>
</head>
<body class="font-spartan">
<main class="flex flex-col lg:flex-row">
<div class="h-[50vh] relative md:h-auto lg:w-7/12">
<img
src="images/desktop-image-hero-1.jpg"
alt=""
class="h-full w-full hidden silder lg:block"
/>
<img
src="images/mobile-image-hero-1.jpg"
alt=""
class="h-full object-cover object-left-bottom w-full block silder-mobile lg:hidden"
/>
<nav
class="flex w-full py-7 px-5 top-0 absolute nav-bar !items-center lg:space-x-10 lg:w-10/12"
>
<div class="flex w-full justify-between">
<img
src="images/icon-hamburger.svg"
alt=""
class="block open-btn lg:hidden"
/>
<img src="images/logo.svg" alt="" class="mx-auto w-20 lg:mx-0" />
</div>
<div
class="space-x-5 text-black w-10/12 hidden items-center absolute nav-bar-main md:h-auto md:space-x-14 lg:flex lg:relative"
>
<img
src="images/icon-close.svg"
alt=""
class="close-btn lg:hidden"
/>
<div
class="flex font-medium h-full space-x-8 text-black lowercase !items-center md:!mx-auto lg:text-white"
>
<a href="">Home</a>
<a href="">Shop</a>
<a href="">About</a>
<a href="">Contact</a>
</div>
</div>
</nav>
<div class="flex right-0 bottom-0 absolute lg:hidden">
<button class="bg-black">
<img
src="images/icon-angle-left.svg"
alt=""
class="p-4 prev-btn md:p-6"
/>
</button>
<button class="bg-black">
<img
src="images/icon-angle-right.svg"
alt=""
class="p-4 next-btn md:p-6"
/>
</button>
</div>
</div>
<div class="relative lg:w-5/12">
<div class="p-10 md:p-20">
<h1
class="font-semibold mb-3 text-2xl slider-head md:mb-5 md:text-4xl"
>
Discover innovative ways to decorate
</h1>
<p class="font-medium text-sm mb-8 text-[hsl(0_0%_63%)] slider-text">
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>
<button
class="flex mb-5 leading-5 tracking-[.5rem] uppercase lg:font-medium lg:tracking-[1rem] hover:opacity-70"
>
Shop now
<span
><img src="images/icon-arrow.svg" alt="" class="animate-slide"
/></span>
</button>
</div>
<div class="bottom-0 left-0 hidden lg:flex lg:absolute">
<button class="bg-black hover:opacity-70">
<img src="images/icon-angle-left.svg" alt="" class="p-7 prev-btn" />
</button>
<button class="bg-black hover:opacity-70">
<img
src="images/icon-angle-right.svg"
alt=""
class="p-7 next-btn"
/>
</button>
</div>
</div>
</main>
<section
id="footer"
class="w-full grid grid-cols-1 lg:grid-cols-[29%_42%_29%]"
>
<div class="">
<img src="images/image-about-dark.jpg" alt="" class="h-full w-full" />
</div>
<div class="">
<div class="p-10">
<h1
class="font-semibold mb-3 tracking-[2.5px] uppercase md:text-center lg:text-left"
>
About our furniture
</h1>
<p class="text-[hsl(0_0%_63%)]">
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>
<div class="">
<img src="images/image-about-light.jpg" alt="" class="h-full w-full" />
</div>
<script type="module" src="main.js"></script>
</section>
</body>
</html>