irmantas_radavicius

Untitled

Dec 8th, 2021
977
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Title</title>   
  5.     <style>
  6.         * {
  7.             box-sizing: border-box;
  8.         }
  9.         body {
  10.             padding: 0px;
  11.             margin: 0px;
  12.         }
  13.         #header {
  14.             background-color: yellow;
  15.             position: relative;
  16.             width: 100%;
  17.             height: 200px;         
  18.         }
  19.         #logo {
  20.             position: absolute;
  21.             top: 10%;
  22.             left: 0px;
  23.             height: 80%;
  24.             width: 40%;
  25.             background-color: red;
  26.         }
  27.         #banner {
  28.             position: absolute;
  29.             top: 40px;
  30.             right: 15%;
  31.             height: 120px;
  32.             width: 30%;
  33.             background-color: red;
  34.         }
  35.        
  36.         #main {
  37.             position: relative;
  38.             background-color: blue;    
  39.             overflow: hidden;  
  40.         }
  41.         #menu {
  42.             z-index: 2;
  43.             background-color: blue;
  44.             height: 1000px;
  45.             width: 30%;
  46.             left: 0px;
  47.             top: 0px;
  48.             position: absolute;
  49.         }
  50.         #content {
  51.             position: relative;
  52.             left: 0px;
  53.             top: 0px;
  54.             width: 100%;
  55.             padding-left: 30%;
  56.             padding-right: 20%;
  57.             background-color: orange;
  58.             z-index: 1;
  59.         }
  60.         #side {
  61.             height: 1000px;
  62.             position: absolute;
  63.             z-index: 2;
  64.             background-color: blue;
  65.             width: 20%;
  66.             right: 0px;
  67.             top: 0px;
  68.         }
  69.         #copyright {
  70.             background-color: gray;
  71.             position: relative;
  72.             height: 200px;
  73.             width: 100%;
  74.         }
  75.         #copyright div {
  76.             position: absolute;
  77.             top: calc(50% - 50px);
  78.             left: 0px;
  79.             height: 100px;
  80.             background-color: green;
  81.         }
  82.  
  83.     </style>   
  84. </head>
  85. <body> 
  86.     <div id="header">
  87.         <div id="logo">Logo</div>
  88.         <div id="banner">Banner</div>
  89.     </div>
  90.     <div id="main">
  91.         <div id="menu">Menu</div>
  92.         <div id="content">Text lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum lorem ipsum ipsum lorem lorem ipsum </div>
  93.         <div id="side">Something</div>
  94.     </div>
  95.     <div id="copyright">
  96.         <div>Copy</div>
  97.     </div>
  98. </body>
  99. </html>
  100.  
RAW Paste Data