Blog website responsive code ?

• Pradeep Sheoran
• Date : 30 September, 2023
• Categories : Bootstrap

Here is a basic responsive code for a blog website: HTML

!DOCTYPE html
html lang=en
head
  meta charset=UTF-8
  meta name=viewport content=width=device-width, initial-scale=1.0
  titleMy Blog/title
  link rel=stylesheet href=style.css
/head
body
  header
    h1My Blog/h1
    nav
      a href=#Home/a
      a href=#About/a
      a href=#Contact/a
    /nav
  /header

  main
    section class=blog-posts
      h2Latest Posts/h2
      article class=blog-post
        h3a href=#My First Blog Post/a/h3
        pThis is my first blog post. Iand#39;m excited to share my thoughts and ideas with the world./p
      /article
      article class=blog-post
        h3a href=#My Second Blog Post/a/h3
        pThis is my second blog post. Iand#39;m still learning, but Iand#39;m enjoying the process./p
      /article
    /section

    section class=sidebar
      h3Categories/h3
      ul
        lia href=#Technology/a/li
        lia href=#Travel/a/li
        lia href=#Food/a/li
      /ul

      h3Popular Posts/h3
      ul
        lia href=#My First Blog Post/a/li
        lia href=#My Second Blog Post/a/li
      /ul
    /section
  /main

  footer
    pCopyright andamp;copy; 2023 My Blog/p
  /footer
/body
/html

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10;
}

nav {
  float: right;
}

main {
  margin-top: 50px;
  padding: 20px;
}

.blog-posts {
  float: left;
  width: 75%;
}

.sidebar {
  float: right;
  width: 25%;
}

@media (max-width: 768px) {
  .blog-posts,
  .sidebar {
    float: none;
    width: 100%;
  }
}