CSS for A Right Sidebar 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:#dbf7ff;
  padding: 15px; 
  color:darkblue;
  font-size:11pt;
  text-align: center;
}
.main-body {
  float: left;
  width: 70%;
  padding: 0px 20px 20px 80px;
}
.right-sidebar {
  float: right;
  width: 30%;
  padding: 0px 80px 10px 20px;
}

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%;
    }

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

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

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

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

</head>
<body>

<div class="header">
  <h1>Responsive Website</h1>
  <h3>-Right 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/Ij1nTHUtOso/maxresdefault.jpg" style="width:100%; display: block;"/>
</div>

  <div class="right-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>
NEW POSTS

Main Menu

CSS for A Right Sidebar Responsive Website

No comments

Post a Comment

Pages

NEW POSTS

Main Menu

CSS for A Right Sidebar Responsive Website

You Might Also Like

No comments

Post a Comment

Pages
