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