<!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>