健康穀物麵包新鮮出爐！
亞麻的細語、葵花的微風，每一口都是自然的敘事
" 嚴選天然食材，精湛匠心烘培，
讓幸福在每口麵包中的香氣中蔓延 "
8月1日大安旗艦店隆重開張！
享受花園庭院的悠閒時光，內用座位區美食相伴，
即日起來店消費加 LINE 好友可獲精緻小點心，等您一同品味！
烘培工坊
健康穀物麵包新鮮出爐！
亞麻的細語、葵花的微風，每一口都是自然的敘事
" 嚴選天然食材，精湛匠心烘培，
讓幸福在每口麵包中的香氣中蔓延 "
8月1日大安旗艦店隆重開張！
享受花園庭院的悠閒時光，內用座位區美食相伴，
即日起來店消費加 LINE 好友可獲精緻小點心，等您一同品味！
烘培工坊
健康穀物麵包新鮮出爐！
亞麻的細語、葵花的微風，每一口都是自然的敘事
" 嚴選天然食材，精湛匠心烘培，
讓幸福在每口麵包中的香氣中蔓延 "
8月1日大安旗艦店隆重開張！
享受花園庭院的悠閒時光，內用座位區美食相伴，
即日起來店消費加 LINE 好友可獲精緻小點心，等您一同品味！
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>烘培工坊</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<button class="menu">☰</button>
<h1>烘培工坊</h1>
<nav>
<ul>
<li><a href="#">最新消息</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">門市據點</a></li>
<li><a href="#">會員專區</a></li>
</ul>
</nav>
</header>
<main>
<section class="news">
<h2>健康穀物麵包新鮮出爐！</h2>
<p>亞麻的細語、葵花的微風，每一口都是自然的敘事</p>
<p><a href="#">瞭解更多</a></p>
</section>
<section class="slogan">
<blockquote>" 嚴選天然食材，精湛匠心烘培，<br>讓幸福在每口麵包中的香氣中蔓延 "</blockquote>
</section>
<section class="shop">
<img src="images/shop.png" alt="烘培工坊大安店">
<div class="info">
<h2>8月1日大安旗艦店隆重開張！</h2>
<p>享受花園庭院的悠閒時光，內用座位區美食相伴，<br>
即日起來店消費加 LINE 好友可獲精緻小點心，等您一同品味！</p>
</div>
</section>
<section class="product">
<div>
<img src="images/p1.png" alt="巴黎風法國土司">
<h3>巴黎風法國土司</h3>
<p>外皮金黃酥脆，內質鬆軟<br>讓您體驗法式浪漫的味覺享受</p>
</div>
<div>
<img src="images/p2.png" alt="皇家奶油可頌麵包">
<h3>皇家奶油可頌麵包</h3>
<p>酥脆口感搭配奶油的濃郁香氣<br>品嘗簡單而純粹的美味</p>
</div>
<div>
<img src="images/p3.png" alt="健康營養全麥土司">
<h3>健康營養全麥土司</h3>
<p>全麥製成，口感柔韌紮實<br>天然養分健康首選</p>
</div>
</section>
<section class="newsletter">
<p>歡迎訂閱烘培工坊電子報，可不定期收到限定優惠喔！</p>
<form>
<input type="email" placeholder="請輸入您的 Email" required>
<button type="submit">送出</button>
</form>
</section>
</main>
<footer>
<p>Copyright © 2023 烘培工坊 All Rights Reserved.</p>
</footer>
</body>
</html>
* {
padding:0;
margin:0;
}
header {
background-color:rgba(35,28,26,0.8);
height:80px;
width:100%;
position:fixed;
}
h1 {
color:white;
position:absolute;
left:120px;
top:0;
line-height: 80px;
background-image:url(images/logo.svg) ;
background-repeat: no-repeat;
background-position: center;
width:210px;
text-indent: -9999px;
}
header ul {
position:absolute;
right:5vw;
top:0;
line-height:80px;
}
header li {
display:inline;
margin-right:4vw;
}
header a {
color:white;
text-decoration: none;
}
header a:hover {
text-decoration: underline;
}
.news {
background-color: antiquewhite;
color:white;
height:95vh;
background-image: url("images/banner.png");
background-repeat: no-repeat;
background-size:cover;
background-position: center;
display:flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
.news h2 {
font-size:60px;
margin-top:60px;
}
.news p {
color:#FEF7E6;
font-size:18px;
margin:25px 0;
}
.news a {
color:white;
text-decoration: none;
border: 1px solid #ACACAC;
padding:10px 20px;
border-radius: 5px;
}
.slogan {
background-color:#485652;
color:white;
height:250px;
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
line-height: 1.8em;
}
.shop {
display:flex;
}
.shop img {
width:50%;
}
.info {
width:50%;
background-color: white;
display:flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
.info h2 {
font-size:40px;
margin-bottom: 30px;
}
.info p {
text-align: center;
line-height: 2em;
}
.product {
display:flex;
background-color: #ede9db;
justify-content: space-between;
align-items: center;
padding: 100px 180px 80px;
}
.product div {
width:300px;
text-align:center;
}
.product img {
width:100%;
border-radius: 10px;;
}
.product h3 {
font-size: 20px;
margin: 20px 0;
}
.product p {
font-size:14px;
line-height: 1.6em;
}
.newsletter {
background-color:#485652;
color:white;
padding:60px 0;
display:flex;
flex-direction: column;
align-items: center;
}
.newsletter p {
margin-bottom: 20px;
}
.newsletter input, .newsletter button {
background-color: transparent;
color:white;
border: 1px solid #949d9a;
padding: 10px;
border-radius: 5px;;
}
.newsletter input {
width:200px;
margin-right: 15px;;
}
.newsletter button {
width:80px;
cursor:pointer;
}
input::placeholder {
color:#DDDDDD;
}
input:focus {
outline: none;
border-color:#E0E9A3;
}
footer {
background-color:#000000;
color:#B7B7B7;
height:60px;
display:flex;
justify-content: center;
align-items: center;
font-size: 14px;
}
.menu {
display:none;
}
/* 響應式設計語法 */
@media screen and (max-width: 768px) {
header ul {
display:none;
}
header h1 {
left:50%;
transform: translateX(-50%);
}
.news h2 {
font-size:40px;
}
.menu {
display:block;
background-color: transparent;
color:white;
font-size: 35px;
position:absolute;
top:15px;
left:20px;
border:none;
cursor: pointer;
}
.shop {
flex-direction: column;
}
.shop img {
width:100%;
}
.info {
width:100%;
padding:40px 0;
}
.info h2 {
font-size:30px;
}
.product {
flex-direction: column;
padding: 60px 0;
}
.product div {
margin-bottom: 30px;
}
}