目录
💞潘多拉魔盒📢
✨ 一个温暖的家.html⛳️
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Romance Living</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap" rel="stylesheet"> <!-- regular-->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap" rel="stylesheet"> <!-- bold-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="px-lg-5 px-sm-3 px-2">
<img class="logo1 item" src="./image/Logo/logo1.svg" alt="logo">
<img class="logo2 item" src="./image/Logo/logo2.svg" alt="logo">
<nav>
<ul class="pages mobile">
<li><a class="body1" href="">精選傢俱</a></li>
<li><a class="body1" href="">風格商城</a></li>
<li><a class="body1" href="">品牌介紹</a></li>
<li><a class="body1" href="">BLOG</a></li>
<li><a class="body1" href="">門市資訊</a></li>
</ul>
</nav>
<ul class="icons">
<li class='search'>
<input type="text" placeholder="Search...">
<div class="searchIcon item"></div>
</li>
<li class="icon menu"></li>
<li class="icon cart"></li>
<li class="icon profile"></li>
</ul>
</header>
<div class="container-fluid full banner">
<div class="row title">
<img src="./image/logo(white).svg">
<h3 class="subtitle mx-auto mt-2 mb-md-5 mb-4">用浪漫，妝點你的家</h3>
<button class="btn primary large">開始選購</button>
</div>
</div>
<article class="container-fluid news px-4">
<div class="row mx-sm-5 mx-4">
<div class="lamp col-lg-7 col-md-6 p-0">
<img src="./image/lamp.jpg" class="w-100 h-100">
</div>
<div class="salesText col-lg-5 col-md-6 p-0">
<h5 class="newTitle">- NEWS - </h5>
<h3>義大利 Berottini<br>燈飾商品</h3>
<div class="sales">
<h2>限時 9折優惠中</h2>
</div>
</div>
</div>
</article>
<main>
<div class="container-fluid category">
<h2 class="mb-md-5 mb-4">商品類別</h2>
<div class="row mx-mb-3 mx-sm-5 mx-4">
<div class="col-md-4 col-12">
<div class="item each p-2">
<div class="imgBorder h-md-100 h-75">
<img src="./image/category1.jpg" class="w-100 h-100">
</div>
<h4>經典傢俱</h4>
</div>
</div>
<div class="col-md-4 col-12 my-md-0 my-4">
<div class="item each p-2">
<div class="imgBorderh-md-100 h-75">
<img src="./image/category2.jpg" class="w-100 h-100">
</div>
<h4>風格燈飾</h4>
</div>
</div>
<div class="col-md-4 col-12">
<div class="item each p-2">
<div class="imgBorder h-md-100 h-75">
<img src="./image/category3.jpg" class="w-100 h-100">
</div>
<h4>優雅軟件</h4>
</div>
</div>
</div>
</div>
<div class="container-fluid full section w-100">
<div class="row">
<h3 class="helpYou">
不知道怎麼搭配傢俱嗎？
<br>
沒關係！Romance Living 擁有專業的傢俱陳列師
<br>
讓我們為你量身打造，規劃傢俱搭配吧！
</h3>
</div>
</div>
<div class="container-fluid newProduct px-md-3 p-0">
<h2 class="mb-md-5 mb-4">新品推薦</h2>
<div class="carosul align-items-center">
<img src="./image/icon/pre.svg" class="pre mx-md-3 mx-2">
<div class="row overflow-hidden">
<div class="col-lg-3 col-md-4 col-6">
<div class="item">
<div class="photo">
<img class="w-100 h-100" src="./image/new1.jpg ">
</div>
<p class="body1 my-2">胡桃木流線型四角茶几</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-6">
<div class="item">
<div class="photo">
<img class="w-100 h-100" src="./image/new2.jpg">
</div>
<p class="body1 my-2">鋼琴烤漆白色三腳床邊桌</p>
</div>
</div>
<div class="col-lg-3 col-md-4 third">
<div class="item">
<div class="photo">
<img class="w-100 h-100" src="./image/new3.jpg">
</div>
<p class="body1 my-2">經典亮黃單人扶手沙發</p>
</div>
</div>
<div class="col-lg-3 forth">
<div class="item">
<div class="photo">
<img class="w-100 h-100" src="./image/new4.jpg">
</div>
<p class="body1 my-2">復古色牛皮六腳旋轉椅</p>
</div>
</div>
</div>
<img src="./image/icon/next.svg" class="pre mx-md-3 mx-2">
</div>
</div>
<div class="container-fluid newProduct p-0">
<h2 class="mb-md-5 mb-4">本月暢銷</h2>
<div class="carosul align-items-center">
<img src="./image/icon/pre.svg" class="pre mx-md-3 mx-2">
<div class="row">
<div class="col-lg-3 col-md-4 col-6">
<div class="item">
<div class="photo">
<img class="w-100 h-100" src="./image/hot1.jpg ">
</div>
<p class="body1 my-2">珍珠白 LED 小巧造型桌燈</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-6">
<div class="item">
<div class="photo">
<img class="w-100 h-100" src="./image/hot2.jpg">
</div>
<p class="body1 my-2">對比色柔和舒眠雙人寢具</p>
</div>
</div>
<div class="col-lg-3 col-md-4 third">
<div class="item">
<div class="photo">
<img class="w-100 h-100" src="./image/hot3.jpg">
</div>
<p class="body1 my-2">三入組合型居家綠色植栽</p>
</div>
</div>
<div class="col-lg-3 forth">
<div class="item">
<div class="photo">
<img class="w-100 h-100" src="./image/hot4.jpg">
</div>
<p class="body1 my-2">普普風九宮格造型牆面裝飾</p>
</div>
</div>
</div>
<img src="./image/icon/next.svg" class="pre mx-md-3 mx-2">
</div>
</div>
<div class="container-fluid blog p-5">
<h2 class="mb-md-5 mb-4">相關文章</h2>
<div class="row">
<div class="col-md-4 col-sm-6 col-12">
<div class="item">
<div class="coverPhoto">
<img src="./image/blog1.jpg" class="w-100">
</div>
<div class="content px-3 py-3">
<div class="top">
<p class="body2 me-2">2021/10/25</p>
<p class="body2">室內設計</p>
</div>
<h4>初心者的室內設計指南</h4>
<p class="body1">為自己打造一個舒適安心、療癒且放鬆身心靈的居家環境一點都不難！</p>
<a href="">【 More 】</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 second">
<div class="item">
<div class="coverPhoto">
<img src="./image/blog2.jpg" class="w-100">
</div>
<div class="content px-3 py-3">
<div class="top">
<p class="body2 me-2">2021/11/07</p>
<p class="body2">室內設計</p>
</div>
<h4>善用綠色植物打造居家環境</h4>
<p class="body1">擔心自己不是綠手指，而遲遲不敢迎接綠色植物進來家中嗎？不用擔心！我們教你如何......</p>
<a href="">【 More 】</a>
</div>
</div>
</div>
<div class="col-4 third">
<div class="item">
<div class="coverPhoto w-100">
<img src="./image/blog3.jpg" class="w-100">
</div>
<div class="content px-3 py-3">
<div class="top">
<p class="body2 me-2">2021/10/01</p>
<p class="body2">風格介紹</p>
</div>
<h4>北歐風格室內設計介紹</h4>
<p class="body1">自從知名瑞典傢俱賣場進入台灣後，北歐風格家飾就受到許多人的喜愛，究竟什麼是......</p>
<a href="">【 More 】</a>
</div>
</div>
</div>
</div>
</div>
</main>
<section class="subscribe">
<h3 class="title">訂閱我們的電子報，了解更多居家生活好點子！</h3>
<div class="subInput">
<input type="text" placeholder="romance.living@gmail.com">
<button class="btn small primary">訂閱</button>
</div>
</section>
<section class="container-fluid full justify-content-between">
<div class="row row-cols-3 row-cols-md-6 pics w-100">
<button class="btn secondary large">更多商品</button>
<div class="col-md item">
<img src="./image/picture1.jpg" class='w-100'>
</div>
<div class="col-md item">
<img src="./image/picture2.jpg" class='w-100'>
</div>
<div class="col-md item">
<img src="./image/picture3.jpg" class='w-100'>
</div>
<div class="col-md item">
<img src="./image/picture4.jpg" class='w-100'>
</div>
<div class="col-md item">
<img src="./image/picture5.jpg" class='w-100'>
</div>
<div class="col-md item">
<img src="./image/picture6.jpg" class='w-100'>
</div>
</div>
</section>
<footer class="px-md-5">
<div class="text">
<p class="body1">© Romance Living All Rights Reserved </p>
<div class="follow">
<p class="body1">Follow us</p>
<img class="item" src="./image/icon/fb.svg">
<img class="item" src="./image/icon/ig.svg">
<img class="item" src="./image/icon/twitter.svg">
<img class="item" src="./image/icon/yt.svg">
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html> 
扫一扫
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
