CSS for Left & Right Sidebars-Responsive Website

<!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:#e303fc;
  padding: 15px; 
  color:white;
  font-size:11pt;
  text-align: center; 
}

.main-body {
  float: left;
  margin-left:25%;
  width: 50%;
  padding: 0px 20px 15px 20px;
}

.left-sidebar {
  float: left;
  margin-left:-75%;
  width: 25%;
  padding: 0px 20px 15px 80px;
}

.right-sidebar {
  float: right; 
  width: 25%;
  padding: 0px 80px 15px 20px;
}

.sidebarbgc {
  padding:0px 5px 0px 5px;
  background: #dbe9ff;
  border-radius:15px;
}

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

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

  .left-sidebar {
    width: 25%;
  }

  .right-sidebar {
  }
}

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

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

  .left-sidebar {
    padding: 0px 20px 0px 20px;
    margin-left:0;
  }

  .right-sidebar {
    padding: 0px 20px 10px 20px;
    margin-top: -5%;
    }
}
</style>

</head>
<body>

<header>
  <h2>Responsive Website</h2>
  <h3>-Right & Left Sidebars</h3>
</header>

 <div class="main-body">
    <h3>Body</h3>
    <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/C07UjNSULBA/maxresdefault.jpg" style="width:100%; display: block;"/>
</div>

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

  <div class="right-sidebar">
   <div class="sidebarbgc">
    <h2 style="color: #fc03c6;">Right Sidebar</h2>
    <p>At tellus at urna condimentum. Enim facilisis gravida neque convallis. Urna cursus eget nunc scelerisque viverra mauris in aliquam. </p>
    <h3>Suscipit</h3>
    <p>Tincidunt eget nullam non nisi est sit amet facilisis magna. Enim ut tellus elementum sagittis vitae.</p>
    <h3>Condiment</h3>
    <p>Volutpat lacus laoreet non curabitur gravida arcu. Ligula ullamcorper malesuada proin libero nunc consequat interdum.</p>
  </div></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>
NEW POSTS

Main Menu

CSS for Left & Right Sidebars-Responsive Website

No comments

Post a Comment

Pages

NEW POSTS

Main Menu

CSS for Left & Right Sidebars-Responsive Website

You Might Also Like

No comments

Post a Comment

Pages
