请仿照网站httpscloudlolipacn制作一个html单页代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Cloud.Lolipa</title>
<style>
body {
margin: 0;
padding: 0;
font-family: "Microsoft Yahei", sans-serif;
}
<pre><code> .header {
background-color: #222222;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
font-size: 24px;
font-weight: bold;
}
.banner {
background-image: url(https://picsum.photos/1920/1080);
background-size: cover;
background-position: center;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-size: 48px;
font-weight: bold;
text-shadow: 2px 2px 2px #000;
}
.features {
background-color: #f5f5f5;
padding: 50px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.feature {
flex-basis: 33.33%;
padding: 20px;
box-sizing: border-box;
}
.feature-icon {
font-size: 64px;
margin-bottom: 20px;
}
.feature-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.feature-desc {
font-size: 16px;
line-height: 1.5;
color: #666;
}
.cta {
background-color: #222222;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.footer {
background-color: #f5f5f5;
height: 60px;
line-height: 60px;
text-align: center;
color: #666;
font-size: 14px;
}
</style>
</code></pre>
</head>
<body>
<header class="header">
Cloud.Lolipa
</header>
<section class="banner">
Welcome to Cloud.Lolipa
</section>
<section class="features">
<div class="feature">
<div class="feature-icon">
<i class="fa fa-cloud"></i>
</div>
<div class="feature-title">
Cloud Storage
</div>
<div class="feature-desc">
Store your files in the cloud and access them from anywhere.
</div>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fa fa-shield"></i>
</div>
<div class="feature-title">
Security
</div>
<div class="feature-desc">
We take security seriously and protect your data with the latest encryption technologies.
</div>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fa fa-users"></i>
</div>
<div class="feature-title">
Collaboration
</div>
<div class="feature-desc">
Work together with your team and share files securely.
</div>
</div>
</section>
<section class="cta">
<a href="#" style="color: #fff;">Get Started</a>
</section>
<footer class="footer">
© 2021 Cloud.Lolipa. All rights reserved.
</footer>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/beN3 著作权归作者所有。请勿转载和采集!