Beautiful Single Page HTML Source Code - Responsive Design - 常规

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='UTF-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<title>My Beautiful Single Page</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			background-color: #f2f2f2;
			color: #333;
		}
<pre><code>	.header {
		background-color: #fff;
		padding: 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logo {
		font-weight: bold;
		font-size: 24px;
	}

	.navbar {
		display: flex;
		align-items: center;
	}

	.navbar a {
		margin-left: 20px;
		color: #333;
		text-decoration: none;
		font-size: 18px;
		transition: color 0.3s;
	}

	.navbar a:hover {
		color: #007bff;
	}

	.hero {
		background-image: url(https://source.unsplash.com/random/1920x1080);
		background-size: cover;
		background-position: center;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		color: #fff;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.hero h1 {
		font-size: 64px;
		margin: 0;
		line-height: 1.2;
	}

	.hero p {
		font-size: 24px;
		margin-top: 20px;
	}

	.features {
		background-color: #fff;
		padding: 80px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
	}

	.features h2 {
		font-size: 48px;
		margin: 0;
		margin-bottom: 40px;
	}

	.feature {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40px;
	}

	.feature img {
		width: 80px;
		height: 80px;
		margin-right: 20px;
		border-radius: 50%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.feature h3 {
		font-size: 24px;
		margin: 0;
	}

	.cta {
		background-image: url(https://source.unsplash.com/random/1920x1080);
		background-size: cover;
		background-position: center;
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		color: #fff;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.cta h2 {
		font-size: 48px;
		margin: 0;
		margin-bottom: 40px;
	}

	.cta p {
		font-size: 24px;
		margin-top: 20px;
	}

	.cta button {
		background-color: #007bff;
		color: #fff;
		padding: 20px 40px;
		font-size: 24px;
		border: none;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.cta button:hover {
		background-color: #0056b3;
	}

	.footer {
		background-color: #333;
		padding: 20px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
		font-size: 18px;
	}

	.footer p {
		margin: 0;
	}

	.footer a {
		color: #fff;
		text-decoration: none;
		transition: color 0.3s;
	}

	.footer a:hover {
		color: #007bff;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<header class='header'>
		<div class='logo'>My Beautiful Single Page</div>
		<nav class='navbar'>
			<a href='#'>Home</a>
			<a href='#'>Features</a>
			<a href='#'>Pricing</a>
			<a href='#'>Contact</a>
		</nav>
	</header>
	<section class='hero'>
		<h1>Welcome to My Beautiful Single Page</h1>
		<p>A place where you can find everything you need</p>
	</section>
	<section class='features'>
		<h2>Our Features</h2>
		<div class='feature'>
			<img src='https://source.unsplash.com/random/80x80' alt='Feature 1'>
			<h3>Feature 1</h3>
		</div>
		<div class='feature'>
			<img src='https://source.unsplash.com/random/80x80' alt='Feature 2'>
			<h3>Feature 2</h3>
		</div>
		<div class='feature'>
			<img src='https://source.unsplash.com/random/80x80' alt='Feature 3'>
			<h3>Feature 3</h3>
		</div>
	</section>
	<section class='cta'>
		<h2>Join Us Now</h2>
		<p>Sign up today and get access to exclusive features</p>
		<button>Sign Up</button>
	</section>
	<footer class='footer'>
		<p>&copy; 2021 My Beautiful Single Page</p>
		<nav>
			<a href='#'>Privacy Policy</a>
			<a href='#'>Terms of Service</a>
			<a href='#'>Contact Us</a>
		</nav>
	</footer>
</body>
</html>