Advertisement
irmantas_radavicius

Untitled

Jan 23rd, 2022
848
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         * {
  6.             box-sizing: border-box;
  7.         }
  8.         body {
  9.             margin: 0;
  10.         }
  11.         header {
  12.             width: 100%;
  13.         }
  14.         #logo {
  15.             float: left;
  16.             width: 60%;
  17.         }
  18.         #banner {
  19.             float: left;
  20.         }
  21.        
  22.         main {
  23.             float: right;
  24.             background-color: white;
  25.             width: 70%;
  26.         }
  27.        
  28.         nav#main-menu {
  29.             background-color: brown;
  30.             width: 100%;
  31.             padding: 10px 0px;
  32.         }
  33.         nav#main-menu a {
  34.             float: left;           
  35.             color: white;            
  36.             text-decoration: none;                    
  37.             margin-right: 5px;
  38.             border: 1px solid white;            
  39.             padding: 5px;
  40.             background-color: red;          
  41.         }
  42.         nav#main-menu a:hover {
  43.             color: brown;
  44.             background-color: white;
  45.         }
  46.        
  47.         nav#sec-menu {
  48.             float: left;
  49.             width: 30%;
  50.         }
  51.         footer {            
  52.             width: 100%;
  53.         }        
  54.         footer .col {
  55.             float: left;
  56.             width: 24.25%;
  57.             padding: 20px;
  58.             border: 1px solid brown;
  59.             text-align: center;
  60.             margin-right: 1%;
  61.         }
  62.         footer .col:first-child {
  63.             margin-left: 0px;
  64.         }
  65.         footer .col:last-child {
  66.             margin-right: 0px;
  67.         }
  68.        
  69.         .clear::after {
  70.             clear: both;
  71.             content: "";
  72.             display: table;
  73.         }
  74.        
  75.  
  76.     </style>
  77. </head>
  78. <body>
  79.  
  80. <header class="clear">
  81.     <div id="logo">logo</div>
  82.     <div id="banner">banner</div>    
  83. </header>
  84. <nav id="main-menu" class="clear">
  85.     <a href="">Punktas1</a>
  86.     <a href="">Punktas1</a>
  87.     <a href="">Punktas1</a>
  88.     <a href="">Punktas1</a>
  89.     <a href="">Punktas1</a>
  90.     <a href="">Punktas1</a>
  91.     <a href="">Punktas1</a>
  92. </nav>
  93.  
  94. <main>rewrwe
  95. </main>
  96. <nav id="sec-menu">rewrew
  97. </nav>
  98. <footer>
  99.     <div class="col">column 1</div>    
  100.     <div class="col">column 1</div>    
  101.     <div class="col">column 1</div>    
  102.     <div class="col">column 1</div>    
  103. </footer>
  104.  
  105.  
  106. </body>
  107. </html>
  108.  
  109.  
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement