酷炫个人主页模板 - HTML & CSS 代码示例
<!DOCTYPE html>
<html>
<head>
<title>My Cool Personal Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>Welcome to My Cool Personal Page</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<pre><code><section id="about">
<div class="container">
<h2>About Me</h2>
<img src="profile.jpg" alt="Profile Picture">
<p>Hi, I'm John Doe. I'm a web developer and designer based in New York City. I have a passion for creating beautiful and functional websites that provide a great user experience. When I'm not coding, you can find me hiking, playing guitar, or trying out new restaurants in the city.</p>
</div>
</section>
<section id="skills">
<div class="container">
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>WordPress</li>
</ul>
</div>
</section>
<section id="projects">
<div class="container">
<h2>My Projects</h2>
<div class="project">
<img src="project1.jpg" alt="Project 1">
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis viverra quam. Fusce vel ultrices ex.</p>
</div>
<div class="project">
<img src="project2.jpg" alt="Project 2">
<h3>Project 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis viverra quam. Fusce vel ultrices ex.</p>
</div>
<div class="project">
<img src="project3.jpg" alt="Project 3">
<h3>Project 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis viverra quam. Fusce vel ultrices ex.</p>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact Me</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="Send">
</form>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2021 John Doe. All rights reserved.</p>
<div class="social-media">
<a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</footer>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
</code></pre>
</body>
</html>
<p>/* CSS */
body {
margin: 0;
font-family: Arial, sans-serif;
}</p>
<p>header {
background-color: #333;
color: #fff;
padding: 1em 0;
}</p>
<p>.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1em;
}</p>
<p>nav {
display: flex;
justify-content: flex-end;
}</p>
<p>nav ul {
list-style: none;
}</p>
<p>nav li {
margin: 0 1em;
}</p>
<p>nav a {
color: #fff;
text-decoration: none;
}</p>
<p>nav a:hover {
text-decoration: underline;
}</p>
<p>section {
padding: 4em 0;
}</p>
<p>section h2 {
text-align: center;
margin-bottom: 2em;
}</p>
<p>ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}</p>
<p>li {
margin: 0 1em;
}</p>
<p>.project {
display: flex;
flex-direction: column;
align-items: center;
margin: 2em 0;
}</p>
<p>.project img {
max-width: 100%;
}</p>
<p>.project h3 {
margin: 1em 0;
}</p>
<p>form {
display: flex;
flex-direction: column;
align-items: center;
}</p>
<p>label {
margin-bottom: 0.5em;
}</p>
<p>input[type="text"],
input[type="email"],
textarea {
padding: 0.5em;
margin-bottom: 1em;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}</p>
<p>input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 0.5em 1em;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.5s ease;
}</p>
<p>input[type="submit"]:hover {
background-color: #555;
}</p>
<p>footer {
background-color: #ccc;
padding: 1em 0;
text-align: center;
}</p>
<p>footer p {
margin: 0;
}</p>
<p>.social-media a {
color: #333;
margin: 0 1em;
text-decoration: none;
}</p>
<p>.social-media a:hover {
text-decoration: underline;
}</p>
原文地址: http://www.cveoy.top/t/topic/lvBL 著作权归作者所有。请勿转载和采集!