Simple html responsive layout without using any library or framework

This is a simple, responsive, HTML template with different devices, designed with HTML and CSS only, containing the header and body that is divided into wrapper and sidebar and footer.

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple html responsive layout</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>

<style>
  
  html {scroll-behavior: smooth;}
  body { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529;  background-color: #fff; padding: 2px 5px}
  
  /*disktop style*/
  header{width:100%; height:48px; background:#00d0ff69;}

  center {margin: 10px auto;}
  #ads-header{display:inline-block;width: 730px;height: 92px;background: orange;}

  #wrapper{margin:0;overflow:hidden; }
  #content{width:75%; height:400px; background:#ff3b008f; float:right}
  #sidebar-content{width:24%; height:400px; background:yellow; float:left}

  footer {margin-top: 10px;}
  #social-media{ background:#c2de8b}
  #copy-right{ background:#93a971}
  
  #copy-right,#social-media {width;100%;height:48px;text-align: center;padding-top: 20px;}
  
  
  /*mobile style*/
  @media screen and (max-width: 759px) {#ads-header{display: none;}}
  @media screen and (max-width: 850px) {#content{width:100%;float:none} #sidebar-content{width:100%;margin-top: 10px;float:none}


</style>
  
</head>
  
<body>

  <header> nav bar,search bar</header>
<center><div id="ads-header">adsence 728*90 </div></center>
<div id="wrapper">
  <div id="content"></div>
  <div id="sidebar-content"></div>
</div>
<footer>
  <div id="social-media"> facebook, youtube, twitter... </div>
  <div id="copy-right" > your website 2021 ©</div>
</footer>


</body>
</html>

Simple html responsive layout without using any library or framework

☷✎

Simple html responsive layout without using any library or framework

Comments

Post a Comment

Meta keywords generator tool for Blogger

Create direct download link for google drive file online

ReverseText: Easily Reverse Your Writing Online for Free

Create simple recent post with thumbnail in blogger

building text editor template using html css js