234 lines
11 KiB
HTML
234 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Social Media Layout</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||
<style>
|
||
.sidebar {
|
||
height: 100%;
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: #f0f2f5;
|
||
}
|
||
.main-content {
|
||
background-color: #f0f2f5;
|
||
padding: 20px;
|
||
}
|
||
.profile-card,
|
||
.story,
|
||
.post,
|
||
.who-to-follow,
|
||
.news {
|
||
background-color: #ffffff;
|
||
padding: 20px;
|
||
border-radius: 15px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.profile-card img,
|
||
.who-to-follow img {
|
||
width: 60px;
|
||
height: 60px;
|
||
object-fit: cover;
|
||
border-radius: 50%;
|
||
}
|
||
.story input {
|
||
border-radius: 30px;
|
||
}
|
||
.story button {
|
||
border-radius: 20px;
|
||
}
|
||
.post img {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
margin-top: 10px;
|
||
}
|
||
.who-to-follow button {
|
||
border-radius: 20px;
|
||
}
|
||
.navbar,
|
||
footer,
|
||
body {
|
||
background-color: #f0f2f5;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm mb-3">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/30" alt="Logo" /></a>
|
||
<button
|
||
class="navbar-toggler"
|
||
type="button"
|
||
data-bs-toggle="collapse"
|
||
data-bs-target="#navbarNav"
|
||
aria-controls="navbarNav"
|
||
aria-expanded="false"
|
||
aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" aria-current="page" href="#">Demo</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pages</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Account</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">My Network</a>
|
||
</li>
|
||
</ul>
|
||
<form class="d-flex">
|
||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<!-- Sidebar -->
|
||
<div class="col-12 col-md-3 sidebar mb-3">
|
||
<div class="profile-card text-center p-3">
|
||
<img src="https://via.placeholder.com/100" alt="Profile Picture" />
|
||
<h5>Sam Lanson</h5>
|
||
<p>Web Developer at Webestica</p>
|
||
<p class="text-muted">I'd love to change the world, but they won’t give me the source code.</p>
|
||
<div class="d-flex justify-content-around">
|
||
<span>256 Posts</span>
|
||
<span>2.5K Followers</span>
|
||
<span>365 Following</span>
|
||
</div>
|
||
</div>
|
||
<div class="list-group">
|
||
<a href="#" class="list-group-item list-group-item-action">Feed</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Connections</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Latest News</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Events</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Groups</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Notifications</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Settings</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="col-12 col-md-6 main-content mb-3">
|
||
<!-- Post a Story -->
|
||
<div class="story p-3 shadow-sm">
|
||
<div class="d-flex align-items-center">
|
||
<img
|
||
src="https://via.placeholder.com/50"
|
||
class="rounded-circle me-3"
|
||
alt="Profile Picture" />
|
||
<input type="text" class="form-control" placeholder="Share your thoughts..." />
|
||
</div>
|
||
<div class="d-flex justify-content-around mt-3">
|
||
<button class="btn btn-outline-primary">Photo</button>
|
||
<button class="btn btn-outline-primary">Video</button>
|
||
<button class="btn btn-outline-primary">Event</button>
|
||
<button class="btn btn-outline-primary">Feeling/Activity</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Posts -->
|
||
<div class="post p-3 shadow-sm">
|
||
<div class="d-flex">
|
||
<img
|
||
src="https://via.placeholder.com/50"
|
||
class="rounded-circle me-3"
|
||
alt="Profile Picture" />
|
||
<div>
|
||
<h6>Lori Ferguson</h6>
|
||
<small class="text-muted">Web Developer at Webestica • 2hr</small>
|
||
</div>
|
||
</div>
|
||
<p class="mt-3">
|
||
I'm thrilled to share that I've completed a graduate certificate course in project
|
||
management with the president's honor roll.
|
||
</p>
|
||
<img src="https://via.placeholder.com/600x300" alt="Post Image" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Sidebar -->
|
||
<div class="col-12 col-md-3 mb-3">
|
||
<!-- Who to Follow -->
|
||
<div class="who-to-follow p-3 shadow-sm">
|
||
<h6>Who to follow</h6>
|
||
<div class="d-flex align-items-center my-2">
|
||
<img
|
||
src="https://via.placeholder.com/50"
|
||
class="rounded-circle me-3"
|
||
alt="Profile Picture" />
|
||
<div>
|
||
<h6 class="mb-0">Judy Nguyen</h6>
|
||
<small class="text-muted">News anchor</small>
|
||
</div>
|
||
<button class="btn btn-outline-primary ms-auto">+</button>
|
||
</div>
|
||
<div class="d-flex align-items-center my-2">
|
||
<img
|
||
src="https://via.placeholder.com/50"
|
||
class="rounded-circle me-3"
|
||
alt="Profile Picture" />
|
||
<div>
|
||
<h6 class="mb-0">Amanda Reed</h6>
|
||
<small class="text-muted">Web Developer</small>
|
||
</div>
|
||
<button class="btn btn-outline-primary ms-auto">+</button>
|
||
</div>
|
||
<div class="d-flex align-items-center my-2">
|
||
<img
|
||
src="https://via.placeholder.com/50"
|
||
class="rounded-circle me-3"
|
||
alt="Profile Picture" />
|
||
<div>
|
||
<h6 class="mb-0">Billy Vasquez</h6>
|
||
<small class="text-muted">News anchor</small>
|
||
</div>
|
||
<button class="btn btn-outline-primary ms-auto">+</button>
|
||
</div>
|
||
<div class="text-center mt-3">
|
||
<button class="btn btn-link">View more</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Today's News -->
|
||
<div class="news p-3 shadow-sm">
|
||
<h6>Today's news</h6>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2">
|
||
Ten questions you should answer truthfully <small class="text-muted">2hr</small>
|
||
</li>
|
||
<li class="mb-2">
|
||
Five unbelievable facts about money <small class="text-muted">3hr</small>
|
||
</li>
|
||
<li class="mb-2">
|
||
Best Pinterest Boards for learning about business <small class="text-muted">4hr</small>
|
||
</li>
|
||
<li class="mb-2">
|
||
Skills that you can learn from ... <small class="text-muted">4hr</small>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="bg-white text-center py-3 shadow-sm mt-3">
|
||
<div class="container">
|
||
<small>© 2024 Webestica. Alle Rechte vorbehalten.</small>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
|
||
</body>
|
||
</html>
|