<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Furniture Shop - CodeCraftedWeb</title>
<!--=============== CSS ===============-->
<link rel="stylesheet" href="style.css">
<!--=============== Remixicon ===============-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.1.0/remixicon.css" integrity="sha512-dUOcWaHA4sUKJgO7lxAQ0ugZiWjiDraYNeNJeRKGOIpEq4vroj1DpKcS3jP0K4Js4v6bXk31AAxAxaYt3Oi9xw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!--=============== Header ===============-->
<header class="header" id="header">
<nav class="navbar">
<div class="nav-head">
<h1>MOBILLIO</h1>
</div>
<div class="nav-menu" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
<a href="#home" class="nav-link active-link">HOME</a>
</li>
<li class="nav-item">
<a href="#shop" class="nav-link">SHOP</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#special" class="nav-link">SPECIAL</a>
</li>
<li class="nav-item">
<a href="#lookbook" class="nav-link">LOOKBOOK</a>
</li>
<li class="nav-item">
<a href="#blog" class="nav-link">BLOG</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">CONTACT</a>
</li>
</ul>
<div class="social-links">
<a href="#" class="social-link">
<i class="ri-twitter-x-fill"></i>
</a>
<a href="#" class="social-link">
<i class="ri-instagram-line"></i>
</a>
<a href="#" class="social-link">
<i class="ri-facebook-fill"></i>
</a>
</div>
<div class="nav-close" id="nav-close">
<i class="ri-close-line"></i>
</div>
</div>
<div class="nav-toggle" id="nav-toggle">
<i class="ri-apps-2-line"></i>
</div>
</nav>
</header>
<!--=============== Main ===============-->
<main class="main">
<!--=============== Home ===============-->
<section class="home-container" id="home">
<div class="home-content">
<div class="text">
<span>FURNITURE</span>
<span>TRENDS - 2024</span>
</div>
<div class="home-head">
<h1>YELLOWSTONE</h1>
</div>
<div class="price">
<p><label>FROM</label> $339</p>
</div>
<div class="home-button">
<button class="home-btn">Explore the collection</button>
</div>
</div>
<div class="home-img">
<img src="furniture1.png" alt="image">
</div>
</section>
<!--=============== Shop ===============-->
<section class="shop-container" id="shop">
<div class="shop-heads">
<h1>SHOP BY CATEGORIES</h1>
<p>Start shopping based on the categories you are interested in</p>
</div>
<div class="shop-cards">
<div class="card">
<img src="desks.jpeg" alt="image">
<span>Desks</span>
</div>
<div class="card">
<img src="chairs.jpeg" alt="image">
<span>Chairs</span>
</div>
<div class="card">
<img src="tables.jpeg" alt="image">
<span>Tables</span>
</div>
<div class="card">
<img src="lamps.jpeg" alt="image">
<span>Lamps</span>
</div>
<div class="card">
<img src="plants.jpeg" alt="image">
<span>Plants</span>
</div>
<div class="card">
<img src="decoration.jpeg" alt="image">
<span>Decoration</span>
</div>
<div class="card">
<img src="collections.jpeg" alt="image">
<span>Collections</span>
</div>
</div>
</section>
<!--=============== About ===============-->
<section class="about-container" id="about">
<div class="about-heads">
<div class="line"></div>
<div class="about-head-box">
<h1>MOBILLIO</h1>
<span>FURNITURE</span>
</div>
</div>
<div class="about-desc">
<div class="desc">
<img src="bg.svg" alt="image">
<p>Mobilio Stores Inc. are unique reseller of modern furnitors, designer-made,<br>home-decoration items, since 1997.<br>Our legacy guarantees exceptional product quality, unique designs and special prices for all of our product line-up. Lorem ipsum, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue.</p>
</div>
<div class="about-button">
<button class="about-btn">Read More</button>
</div>
</div>
</section>
<!--=============== Special ===============-->
<section class="special-container" id="special">
<div class="special-heads">
<h1>TRENDING ITEMS</h1>
<p>Explore our monthly most trending products, new items and the best Mobilio offers you can buy.</p>
</div>
<div class="special-cards">
<div class="left">
<div class="card1">
<img src="product1.jpeg" alt="image" class="card-img">
<div class="card-txt">
<h2>Amazing Bulb</h2>
<div class="stars">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
<span>$5</span>
</div>
</div>
</div>
<div class="right">
<div class="card2-3">
<div class="card2">
<img src="product2.jpeg" alt="image" class="card-img">
<div class="card-txt">
<h2>Project Title</h2>
<div class="stars">
html+css+js网页设计登录界面
需积分: 1 77 浏览量
2024-03-13
01:03:36
上传
评论
收藏 2.97MB ZIP 举报
Responsive_Furniture_Shop_Website-main.zip （21个子文件） 
Responsive_Furniture_Shop_Website-main 
style.css 16KB blog3.jpeg 298KB product4.jpeg 254KB product3.jpeg 280KB
furniture2.png 427KB furniture1.png 225KB blog1.jpeg 431KB
bg.svg 288B lamps.jpeg 11KB product5.jpeg 168KB plants.jpeg 13KB product1.jpeg 81KB tables.jpeg 6KB desks.jpeg 14KB
index.html 17KB decoration.jpeg 16KB chairs.jpeg 355KB product2.jpeg 73KB blog2.jpeg 382KB collections.jpeg 13KB script.js 2KB资源评论
