Landing Page另一個範例 – 花店
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>My Landingpage stage 1</title>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">FuhGwo Flower Store</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="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="description">
<h1>歡迎來到富國花店</h1>
<p>富國花店開設於2021年10月，由弘光科技大學資訊管理系教師陳富國成立，總部位於台灣台中沙鹿弘光科技大學。
<br>富國花店什麼花都賣！</p>
<button class="btn btn-outline-secondary btn-lg">請不吝告知您的想法！</button>
</div>
</div>
</header>
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#product-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse product-navbar-collapse" id="product-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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 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: #DCCFEC;
font-family: 'cwTeXKai', serif;
}
/*--- navigation bar ---*/
.navbar {
background: #4F517D;
}
.nav-link, .navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover, .navbar-brand:hover {
color: #DCCFEC;
}
/* 讓導覽列排至尾部(end) */
.navbar-collapse {
justify-content: flex-end;
}
.product-navbar-collapse{
justify-content: center;
font-size: 24px;
}
.btn {
color: #DBC9E4;
border-color: #DBC9E4;
font-size: 1.5rem;
}
.btn:hover {
background-color: #4F517D;
}
.header {
background-image: url('../images/header-bk-image.jpg');
background-size: 100% 100%;
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 {
width: 60%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -55%);
text-align: center;
}
.description h1 {
color: #D0B3E3;
font-weight: 600;
}
.description p {
color: #DBC9E4;
font-size: 2rem;
line-height: 1.5;
}
目前這個階段的完整程式下載：FlowerShopStage 2 Nav + Header