Here's the merged code combining the HTML and CSS from the previous examples. Please remember that this is a basic illustration and doesn't replicate the full functionality and features of Facebook.

on

  

```html 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

  <meta charset="UTF-8"> 

  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

  <title>Your Better-Than-Facebook Website</title> 

  <style> 

    /* Reset default styles */ 

    body, h1, p, ul, li, img, button { 

      margin: 0; 

      padding: 0; 

    } 

  

    /* Basic styling */ 

    body { 

      font-family: Arial, sans-serif; 

      background-color: #f0f0f0; 

    } 

  

    header, nav ul, footer { 

      background-color: #333; 

      color: #fff; 

      padding: 1em; 

      text-align: center; 

    } 

  

    nav ul { 

      list-style: none; 

    } 

  

    nav li { 

      display: inline; 

      margin-right: 20px; 

    } 

  

    nav a { 

      color: #fff; 

      text-decoration: none; 

    } 

  

    main { 

      padding: 1em; 

    } 

  

    .post { 

      margin-bottom: 20px; 

      border: 1px solid #ddd; 

      padding: 10px; 

    } 

  

    .post-header { 

      display: flex; 

      align-items: center; 

    } 

  

    .post-header img { 

      width: 40px; 

      height: 40px; 

      border-radius: 50%; 

      margin-right: 10px; 

    } 

  

    .post-actions button { 

      padding: 5px 10px; 

      margin-right: 10px; 

      border: none; 

      background-color: #333; 

      color: #fff; 

      cursor: pointer; 

    } 

  </style> 

</head> 

<body> 

  <header> 

    <h1>Your Social Network</h1> 

  </header> 

  

  <nav> 

    <ul> 

      <li><a href="#">Home</a></li> 

      <li><a href="#">Friends</a></li> 

      <li><a href="#">Profile</a></li> 

    </ul> 

  </nav> 

  

  <main> 

    <section class="post"> 

      <div class="post-header"> 

        <img src="user-avatar.jpg" alt="User Avatar"> 

        <h2>User123</h2> 

      </div> 

      <p>This is a post content...</p> 

      <div class="post-actions"> 

        <button class="like-button">Like</button> 

        <button class="comment-button">Comment</button> 

        <button class="share-button">Share</button> 

      </div> 

    </section> 

  

    <!-- More posts... --> 

  </main> 

  

  <footer> 

    <p>&copy; 2023 Your Better-Than-Facebook Website</p> 

  </footer> 

</body> 

</html> 

``` 

  

Replace `"user-avatar.jpg"` with an actual user avatar image. This combined code provides a basic structure for a social network-like platform similar to Facebook, but creating a full-featured website with advanced features like Facebook would require significant resources, advanced technology, and a dedicated team. 

Comments

Post a Comment