-
Notifications
You must be signed in to change notification settings - Fork 0
/
office.html
84 lines (74 loc) · 3.4 KB
/
office.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
<!DOCTYPE html>
<html>
<head>
<title>Office Page</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="design.css">
</head>
<body>
<header>
<h1 class="header">SAVICLE</h1>
<nav>
<a href="index.html">Home</a>
<div class="dropdown">
<h2 class="dropbtn">Furniture</h2>
<div class="dropdown-content">
<a href="office.html">Office</a>
<a href="livingroom.html">Living Room</a>
<a href="diningroom.html">Dining Room</a>
<a href="bedroom.html">Bedroom</a>
<a href="bathroom.html">Bathroom</a>
</div>
</div>
<a href="wishlist.html">Wishlist</a>
<a href="cart.html">Cart</a>
<a href="login.html" class="login">Login</a>
</nav>
</header>
<h2 class="Title">OFFICE FURNITURES</h2>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="image-container">
<div class="image-card" data-target="#section1">
<img src="photos/desk.png" alt="Desks">
<h2>Desks</h2>
<p>Revamp your workspace with our stylish,
pre-loved office desks. Each desk offers a
unique character and sturdy design, perfect for
enhancing productivity while supporting sustainable choices.
</p>
</div> <!-- Closing tag for the first image-card -->
<div class="image-card" data-target="#section2">
<img src="photos/chairs.png" alt="Chairs">
<h2>Chairs</h2>
<p>Discover the perfect blend of comfort and style with our
collection of used office chairs. Designed for ergonomic support,
these chairs will keep you productive without compromising on aesthetics.
</p>
</div> <!-- Closing tag for the second image-card -->
<div class="image-card" data-target="#section3">
<img src="photos/storage.png" alt="Storage">
<h2>Storage</h2>
<p>Maximize your office
organization with our selection of
used storage solutions. From charming filing cabinets
to versatile shelves, each piece combines functionality with
sustainability to enhance your workspace.
</p>
</div> <!-- Closing tag for the third image-card -->
</div> <!-- Closing tag for the image-container -->
<main>
</main>
<section id="section1" class="styled-section">
<h1>Desks</h1>
</section>
<section id="section2" class="styled-section">
<h1>Chairs</h1>
</section>
<section id="section3" class="styled-section">
<h1>Storage</h1>
</section>
<script src="script.js"></script>
<main>
</main>
</body>
</html>