<!DOCTYPE html>
<html>

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

<style>
* {
  box-sizing: border-box;
}

body{
  font-family:Arial;
  text-align: justify;
}

.header {
  background:#dbf7ff;
  padding: 15px; 
  color:darkblue;
  font-size:11pt;
  text-align: center;
}
.main-body {
  float: right;
  width: 70%;
  padding: 0px 80px 20px 20px;
}
.left-sidebar {
  float: left;
  width: 30%;
  padding: 0px 20px 10px 80px;
}

footer {
  background:#dbf7ff;
  float: left;
  width: 100%;
  padding: 30px;
  height: 80px;
  text-align: center;
}

@media only screen and (max-width:768px) {
  /* Desktops/Tablets: */
  .main-body {
    width: 70%;
    }

  .left-sidebar {
    width: 30%;
  }
}

@media only screen and (max-width:568px) {
  /* For mobile phones: */

  .main-body, .left-sidebar {width:100%;
               }
  .main-body {
    padding: 0px 20px 0px 20px;
    }

  .left-sidebar {
    padding: 0px 20px 3px 20px;
    }
}
</style>

</head>
<body>

<div class="header">
  <h1>Responsive Website</h1>
  <h3>-Left Sidebar</h3>
</div>

 <div class="main-body">
    <h2>Body</h2>
    <p>Malesuada proin libero nunc consequat interdum varius sit amet. Euismod lacinia at quis risus sed vulputate odio. Quam quisque id diam vel quam elementum. Suscipit adipiscing bibendum est ultricies integer. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. At tellus at urna condimentum. Pellentesque nec nam aliquam sem et tortor consequat id porta.</p>

<p>Malesuada proin libero nunc consequat interdum varius sit amet. Euismod lacinia at quis risus sed vulputate odio. Quam quisque id diam vel quam elementum. Suscipit adipiscing bibendum est ultricies integer. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. At tellus at urna condimentum. Pellentesque nec nam aliquam sem et tortor consequat id porta.</p>
    <img src="https://i.ytimg.com/vi/SHzTju0Kkhc/maxresdefault.jpg" style="width:100%; display: block;"/>
</div>

  <div class="left-sidebar">
    <h2>Sidebar</h2>
    <p>At tellus at urna condimentum. Enim facilisis gravida neque convallis. Urna cursus eget nunc scelerisque viverra mauris in aliquam. </p>
    <h2>Suscipit</h2>
    <p>Tincidunt eget nullam non nisi est sit amet facilisis magna. Enim ut tellus elementum sagittis vitae.</p>
    <h2>Condimentum</h2>
    <p>Volutpat lacus laoreet non curabitur gravida arcu. Ligula ullamcorper malesuada proin libero nunc consequat interdum.</p>
  </div>

<footer>
COPYRIGHT © <script type='text/javascript'>document.write(new Date().getFullYear())</script><a href="https://v815.blogspot.com/" target="_blank"> Vast Site</a>
</footer>

</body>
</html>
Comforting Tools

Pages

Popular Posts

Left Sidebar Responsive Website

Contact Form
