-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (85 loc) · 3.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Room homepage</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
</head>
<body>
<header>
<section class="hero">
</div>
<nav>
<img class="hero__hamburger" src="images/icon-hamburger.svg" alt="menu">
<ul class="hero__links">
<li>home</li>
<li>shop</li>
<li>about</li>
<li>contact</li>
</ul>
<h1 class="hero__logo">room</h1>
</nav>
</section>
</header>
<main>
<div class="desktop-view">
<!-- image slider using splidejs-->
<div id="image-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="./images/mobile-image-hero-1.jpg" class="slide-img1">
</li>
<li class="splide__slide">
<img src="./images/mobile-image-hero-2.jpg" class="slide-img2">
</li>
<li class="splide__slide">
<img src="./images/mobile-image-hero-3.jpg" class="slide-img3">
</li>
</ul>
</div>
</div>
<!-------------------------------->
<section class="focus">
<div class="focus-container">
<h2 class="focus__title">Discover innovative ways to decorate</h2>
<p class="focus__description">
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="focus__shop-btn">
<span class="focus__shop-btn__title">SHOP NOW</span>
<span class="focus__shop-btn__arrow">→</span>
</button>
</div>
</section>
</div>
<section class="about">
<img class="about__darkimg" src="./images/image-about-dark.jpg" alt="dark-image">
<div class="about__main-container">
<h3 class="about__title">About our furniture</h3>
<p class="about__description">
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>
<img class="about__lightimg" src="./images/image-about-light.jpg" alt="light-image">
</section>
</main>
<footer>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Luke Gammon</a>.
</div>
</footer>
<div class="overlay"></div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script src="./app.js"></script>
</body>
</html>