Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
2.4 kB
0
Indexable
Never
<!DOCTYPE html>
<html>
<head>
	<title>Facebook Homepage</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="header">
		<div class="logo">
			<img src="https://via.placeholder.com/150x50" alt="Facebook logo">
		</div>
		<div class="search">
			<input type="text" placeholder="Search Facebook">
			<button>Search</button>
		</div>
		<div class="menu">
			<ul>
				<li>Home</li>
				<li>Friends</li>
				<li>Messages</li>
			</ul>
		</div>
	</div>
	<div class="content">
		<div class="sidebar">
			<h3>People you may know</h3>
			<ul>
				<li><a href="#">Friend 1</a></li>
				<li><a href="#">Friend 2</a></li>
				<li><a href="#">Friend 3</a></li>
			</ul>
		</div>
		<div class="feed">
			<h2>Recent Posts</h2>
			<div class="post">
				<div class="post-header">
					<img src="https://via.placeholder.com/50" alt="Profile picture">
					<h4>John Doe</h4>
				</div>
				<div class="post-content">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</div>
				<div class="post-footer">
					<button>Like</button>
					<button>Comment</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

.header {
	background-color: #3b5998;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}

.logo img {
	height: 50px;
}

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

.search input {
	padding: 5px;
	margin-right: 5px;
	border: none;
	border-radius: 5px;
}

.search button {
	background-color: white;
	color: #3b5998;
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.menu ul {
	display: flex;
	list-style: none;
}

.menu li {
	margin-right: 10px;
	cursor: pointer;
}

.content {
	display: flex;
	margin-top: 10px;
}

.sidebar {
	width: 200px;
	padding: 10px;
	background-color: #f0f2f5;
}

.sidebar h3 {
	margin-top: 0;
}

.sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar li {
	margin: 10px 0;
}

.feed {
	flex: 1;
	padding