Responsive Website Layout with HTML and CSS

Today, you will learn how to create Responsive Website Layout using only HTML and CSS.I have shared another snippet based on how to create a Responsive Card with HTML and CSS. In this tutorial, I have created a Responsive Website Layout with HTML and CSS, If you like this article, please also subscribe my channel - Code Info

Responsive website layout is about using HTML and CSS to routinely resize, hide, reduce, or expand, a website, to make it appearance proper on all gadgets (computers, tablets, and phones).

Below is the video tutorials. watch and practice.

Whilst considering the format styling for a website it’s crucial to consider the meant purpose and target audience of the layout, the sources available for the internet site (text, snap shots, video, and hyperlinks), your very own layout preferences, and any current branding inclusive of a logo or print advertising and marketing material. Every of these will outline in component the layout selections that are made.

Website layout is a pattern that defines a internet website’s shape or structure. It has the role of structuring the statistics present on a domain each for the internet site’s owner and for customers. It offers clean paths for navigation inside webpages and places the maximum critical factors of a website front and middle.

Internet site layouts outline the content material hierarchy. Content will indicate visitors around the website, and it need to convey your message in addition to possible to them.

Source Code:

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Resposive Layout | By Code info</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="body-section">
      <div class="sidebar">
        <h1>Sidebar 1</h1>
      </div>
      <div class="main-body">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita modi
          repellat laboriosam nam id voluptatibus ab quae, quaerat accusamus
          voluptatem, cumque hic, repudiandae laudantium amet exercitationem
          numquam. Quaerat obcaecati deleniti quae ut repellendus praesentium
          modi illum corporis incidunt, nobis molestias inventore fugit
          voluptatibus tempora rem necessitatibus ipsam. Odio aperiam deserunt
          quia, enim voluptatem doloremque nobis exercitationem eum, quis,
          voluptate ullam minus quidem eos consectetur itaque! Soluta non
          similique quod quae odit? Possimus mollitia nemo itaque perferendis
          perspiciatis voluptates nostrum consequuntur saepe, aliquid,
          repellendus eligendi cumque explicabo adipisci aperiam velit earum
          repellat autem sequi? Asperiores soluta, tempore dolor suscipit enim
          possimus!
        </p>
      </div>
      <div class="sidebar s2">
        <h1>Sidebar 2</h1>
      </div>
    </div>
    <footer>
      <div class="footer">
        <h1>Footer</h1>
      </div>
    </footer>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

h1 {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 100px;
  border-radius: 20px;
  background-color: red;
  text-align: center;
  color: white;
}

.body-section {
  display: flex;
  margin: 10px 10px;
}

.sidebar {
  width: 15%;
  height: 530px;
  border-radius: 20px;
  background-color: green;
  text-align: center;
  color: white;
}

.s2 {
  background-color: hotpink;
}

.main-body {
  width: 68%;
  height: 530px;
  border-radius: 20px;
  background-color: yellow;
  text-align: center;
  margin: 0 10px 0 10px;
}

.footer {
  width: 100%;
  height: 80px;
  border-radius: 20px;
  background-color: blue;
  text-align: center;
  color: white;
}

@media (max-width: 770px) {
  .body-section {
    display: block;
  }
  .main-body {
    width: 100%;
    height: 340px;
    margin: 10px 0 10px 0;
  }
  .sidebar {
    width: 100%;
    height: 70px;
    text-align: center;
  }
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

You may like this:

Source Code:

Post a Comment

Post a Comment

About Us

Contact Form