使用到font-awesome, google 字体。
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="C:\Wnmp\html\shop-cart-2\fontawesome-free-5.15.1-web\fontawesome-free-5.15.1-web\css\all.css">
<title>Document</title>
<style>
/* import font */
@font-face {
font-family: 'Hachi Maru Pop';
src:
url('HachiMaruPop-Regular.ttf') format('truetype')
}
/* initial start */
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
/* initial end */
body{
font-family: 'Hachi Maru Pop', cursive;
}
ul, nav{
list-style: none;
}
a{
text-decoration: none;
cursor:pointer;
color:inherit;
}
header{
position: absolute;
top:0;
left: 0;
z-index: 10;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #000;
padding:35px 100px 0;
}
header h2{
text-transform: uppercase;
color:#fff;
}
header nav{
display: flex;
}
header nav li{
margin:0 15px;
color:#fff;
}
header nav li:first-child{
margin-left: 0;
}
header nav li:last-child{
margin-right: 0;
}
@media (max-width:1000px){
header{
padding:20px 50px;
}
}
@media (max-width:700px){
header{
flex-direction: column;
}
header h2{
margin-bottom: 15px;
}
header nav li{
margin: 0 7px;
}
}
/* banner area */
section{
display:flex;
flex-direction: column;
align-items: center;
padding: 110px 100px;
}
@media (max-width:600px){
section{
padding:100px 50px
}
}
section p{
max-width: 800px;
text-align: center;
margin-bottom: 35px;
padding: 0 20px;
line-height:2;
}
.banner-area{
position: relative;
justify-content: center;
min-height:100vh;
color: #fff;
text-align: center;
}
.banner-area .banner-img{
background-image: url("city_night.jpg");
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index:-1;
}
.banner-area .banner-img:afetr{
content:'';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .8;
}
.banner-area h1{
margin-bottom: 15px;
font-size: 65px;
font-family: 'Hachi Maru Pop', cursive;
}
.banner-area h3{
margin-bottom: 40px;
font-size: 25px;
}
.banner-area a.banner-btn{
padding: 15px 35px;
background-color: crimson;
border-radius: 50px;
text-transform: uppercase;
}
@media (max-width:800px){
.banner-area{
min-height: 600px;
}
.banner-area h1{
font-size: 32px;
}
.banner-area h3{
font-size: 20px;
}
.banner-area a.banner-btn{
padding: 15px;
}
}
/* about area */
ul.about-content{
width: 100%;
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.about-content li{
padding: 20px;
height: 290px;
background-clip: content-box;
background-size: cover;
background-position: center;
}
.about-left{
flex-basis: 40%;
background-image: url("sunrise.jpg");
}
.about-right{
flex-basis: 60%;
}
.about-area p{
max-width:800px;
margin-bottom: 35px;
line-height: 1.5;
text-align: left;
padding-left: 0;
}
.section-title{
text-transform: uppercase;
font-size: 50px;
margin-bottom: 5%;
}
.about-right h2{
margin-bottom: 3%;
}
.about-btn{
padding: 15px 35px;
background-color: crimson;
border-radius: 50px;
text-transform: uppercase;
color: #fff;
}
@media (max-width:800px){
.about-left,.about-right{
flex-basis: 100%;
}
.about-content li{
padding: 8px;
}
}
/* service area */
.services-area{
background-color: #ddd;
}
ul.services-content{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.services-content li{
padding: 0 30px;
flex-basis: 33%;
text-align: center;
}
.services-content li i{
font-size: 50px;
color: crimson;
margin-bottom: 25px;
}
.services-content li h4{
font-size: 20px;
margin-bottom: 25px;
}
.services-content li p{
margin: 0;
}
@media (max-width:800px){
.services-content li{
flex-basis: 100%;
margin-bottom: 65px;
}
.services-content li:last-child{
margin-bottom: 0;
}
}
/* contact area */
.contact-area{
background-color: #fff;
}
ul.contact-content{
width: 100%;
display: flex;
justify-content: center;
}
.contact-content li{
padding: 0 30px;
flex-basis: 33%;
text-align: center;
}
.contact-content li i{
font-size: 50px;
color: crimson;
margin-bottom: 25px;
}
.contact-content li p{
margin: 0;
}
@media (max-width:800px){
.contact-content li{
flex-basis: 100%;
margin-bottom: 65px;
}
.contact-content li:last-child{
margin-bottom: 0;
}
.contact-content li p{
padding: 0;
}
}
/* footer */
footer{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
background-color: #000;
padding: 60px 0;
}
</style>
</head>
<body>
<header>
<h2><a href="">999 Demo</a></h2>
<nav>
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Nothing</a></li>
</nav>
</header>
<section class="banner-area">
<div class="banner-img"></div>
<h1>Flexbox Website</h1>
<h2>Responsive Web Design</h2>
<a href="#" class="banner-btn">Contact US</a>
</section>
<section class="about-area" id="about">
<h3 class="section-title">About us</h3>
<ul class="about-content">
<li class="about-left"></li>
<li class="about-right">
<h2>About our company</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, consequuntur.</p>
<a href="" class="about-btn">Learn More</a>
</li>
</ul>
</section>
<section class="services-area" >
<h3 class="section-title">Services</h3>
<ul class="services-content">
<li>
<i class="fas fa-laptop"></i>
<h4>Web Design</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, porro.</p>
</li>
<li>
<i class="fas fa-signal"></i>
<h4>Marketing</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, porro.</p>
</li>
<li>
<i class="far fa-image"></i>
<h4>Graphics</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae, porro.</p>
</li>
</ul>
</section>
<section class="contact-area">
<h3 class="section-title">Contact Info</h3>
<ul class="contact-content">
<li>
<i class="fas fa-map-marked-alt"></i>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li>
<i class="fas fa-phone-alt"></i>
<p>999-999-9999</p>
</li>
<li>
<i class="fas fa-envelope-open"></i>
<p>Lorem ipsum dolor sit amet.</p>
</li>
</ul>
</section>
<footer>
<p>All Right Reserved by You</p>
</footer>
</body>
</html>