Theme design

 Testing 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

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

  <title>My Blogger Theme</title>

  <style>

    body {

      margin: 0;

      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

      background: #f9f9f9;

      color: #333;

    }


    header {

      background: #222;

      color: #fff;

      padding: 20px;

      text-align: center;

    }


    header h1 {

      margin: 0;

      font-size: 32px;

    }


    nav {

      background: #444;

      text-align: center;

      padding: 10px 0;

    }


    nav a {

      color: #fff;

      text-decoration: none;

      margin: 0 15px;

      font-size: 16px;

    }


    nav a:hover {

      text-decoration: underline;

    }


    .container {

      display: flex;

      max-width: 1100px;

      margin: 30px auto;

      padding: 0 20px;

    }


    .main-content {

      flex: 2;

      margin-right: 20px;

    }


    .sidebar {

      flex: 1;

      background: #fff;

      padding: 20px;

      box-shadow: 0 0 10px rgba(0,0,0,0.05);

    }


    .post {

      background: #fff;

      padding: 20px;

      margin-bottom: 20px;

      border-left: 4px solid #007BFF;

      box-shadow: 0 0 5px rgba(0,0,0,0.05);

    }


    .post h2 {

      margin-top: 0;

    }


    .post p {

      line-height: 1.6;

    }


    footer {

      background: #222;

      color: #fff;

      text-align: center;

      padding: 15px;

      margin-top: 40px;

    }

  </style>

</head>

<body>


  <header>

    <h1>My Blogger</h1>

    <p>Your daily dose of blogs</p>

  </header>


  <nav>

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

    <a href="#">About</a>

    <a href="#">Blogs</a>

    <a href="#">Contact</a>

  </nav>


  <div class="container">

    <div class="main-content">

      <div class="post">

        <h2>First Blog Post</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae urna ut nisl blandit cursus. Nulla facilisi.</p>

      </div>

      <div class="post">

        <h2>Second Blog Post</h2>

        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

      </div>

    </div>

    

    <div class="sidebar">

      <h3>About Me</h3>

      <p>Hi! I'm a passionate writer who loves sharing thoughts with the world. Stay tuned!</p>

      <h3>Categories</h3>

      <ul>

        <li>Travel</li>

        <li>Technology</li>

        <li>Lifestyle</li>

        <li>Food</li>

      </ul>

    </div>

  </div>


  <footer>

    &copy; 2025 My Blogger | Designed by You

  </footer>


</body>

</html>

Comments