Landing Page另一個範例 – 飲料
這個範例，用了二個導覽列，最上端是公司相關的導覽列，在header下方是商品分頁的導覽列。
另外，這邊的商品，使用Bootstrap的卡片類別製作，另外在商品的上方(整個卡片的正中間位置)，放置一個加入購物車按鈕。
最新的範例，也引入了響應式的處理(直式畫面)。
index.html
index.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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<title>富國茶飲</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-comany">
<a class="navbar-brand" href="#">富國茶飲</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
<li class="nav-item"><a class="nav-link" href="#">企業簡介</a></li>
<li class="nav-item"><a class="nav-link" href="#">關係企業-富國花店</a></li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="description">
<h1>不喝不可頂級茶飲</h1>
<p>本店設立於2001年，地點位置弘光L棟7-11旁，我們的茶飲是英國頂級茶！</p>
<button class="btn btn-outline-secondary btn-lg">請不吝告知您的想法！</button>
</div>
</div>
</header>
<nav class="navbar navbar-expand navbar-tea">
<div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">珍珠奶茶</a></li>
<li class="nav-item"><a class="nav-link" href="#">經典厚奶</a></li>
<li class="nav-item"><a class="nav-link" href="#">花果公主茶</a></li>
<li class="nav-item"><a class="nav-link" href="#">拿鐵王子茶</a></li>
</ul>
</div>
</nav>
<div class="card-deck">
<div class="card">
<img src="images/BlackSugarBubbleMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">黑糖珍珠奶茶</h5>
<!-- <p class="card-text">黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
<div class="card">
<img src="images/XianCaoMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">仙草凍奶茶</h5>
<!-- <p class="card-text">仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
<div class="card">
<img src="images/MoChaBubbleMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">抹茶珍珠奶茶</h5>
<!-- <p class="card-text">抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
main.css
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
body {
padding: 0;
margin: 0;
background: #A0D8F1;
font-family: 'cwTeXKai', serif;
}
/*--- navigation bar ---*/
.navbar {
background:#003E52;
}
.nav-link, .navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover, .navbar-brand:hover {
color: #BC955C;
}
.navbar-collapse {
/* 讓導覽列排至尾部(end) */
justify-content: flex-end;
}
/* header */
.header {
background-image: url('../images/header-bk-image.jpg');
background-size :cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.description {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.description h1 {
font-size: 3rem;
color: #D4AF37;
font-weight: 600;
}
.description p {
color: #D0F0BF;
font-size: 2.2rem;
}
.navbar-tea{
justify-content: center;
font-size: 1.4rem;
}
.navbar-comany{
font-size: 1.4rem;
}
.navbar-brand{
font-size: 1.8rem;
/* font-weight: bold; */
}
.btn{
color: #D4AF37;
border-color: #D4AF37;
font-size: 1.5rem;
border-radius: 100px;
padding: 10px 20px;
background-color: rgba(100, 100, 100, 0.8 ) ;
}
.btn-outline-primary{
border-radius: 10px;
color: #94740d;
padding: 0px 20px;
font-size: 1.6rem;
background-color: rgba(241, 234, 234, 0.8) ;
}
.btn:hover {
background-color:#003E52;
}
.card-deck {
display: flex;
justify-content:space-around;
margin: 20px 10px;
}
.card img {
margin: 10px auto;
max-width: 300px;
max-height: 400px;
}
.card-title {
text-align: center;
font-size: 1.8rem;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen and (orientation: portrait) {
/* 直立時的格式 */
.description {
width : 85%;
}
.description h1 {
font-size: 2rem;
}
.description p {
font-size: 1.8rem;
}
.navbar-tea{
font-size: 1.2rem;
}
}
目前這個階段的完整程式下載：TeaShopStage3 - 商品(卡片) 連結
使用Grid格子系統排列卡片，大：4、中：3、小：1
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<img src="images/BlackSugarBubbleMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">黑糖珍珠奶茶</h5>
<!-- <p class="card-text">黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<img src="images/XianCaoMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">仙草凍奶茶</h5>
<!-- <p class="card-text">仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<img src="images/MoChaBubbleMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">抹茶珍珠奶茶</h5>
<!-- <p class="card-text">抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<img src="images/BlackSugarBubbleMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">黑糖珍珠奶茶</h5>
<!-- <p class="card-text">黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶黑糖珍珠奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<img src="images/XianCaoMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">仙草凍奶茶</h5>
<!-- <p class="card-text">仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶仙草凍奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<img src="images/MoChaBubbleMilkTea.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">抹茶珍珠奶茶</h5>
<!-- <p class="card-text">抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶抹茶珍珠奶茶</p> -->
</div>
<div class="center">
<button class="btn btn-outline-primary btn-lg">加入購物車</button>
</div>
<!-- <div class="card-footer">
</div> -->
</div>
</div>
</div>
目前這個階段的完整程式下載：TeaShopStage3 - 商品(卡片、格子系統排列)