Advertisement
Skyownz

site

Jan 6th, 2021
1,178
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.23 KB | None | 0 0
  1. <html>
  2.     <head>
  3.         <style>
  4.             body{
  5.                 padding: 0;
  6.                 margin: 0;
  7.             }
  8.             .menubar{
  9.                 background-color: black;
  10.                 display:grid;
  11.                 grid-template-columns: 20% 80%;
  12.                
  13.             }
  14.             .logo{
  15.                 margin-top: 25px;
  16.                 margin-left: 15em;
  17.             }
  18.             .menu{
  19.                 text-align: right;
  20.                 margin-right: 15em;
  21.             }
  22.             .menu a{
  23.                 margin: 15px;
  24.             }
  25.             .menubar div{
  26.                 margin-top: 25px;
  27.                 margin-bottom: 25px;
  28.             }
  29.             .content{
  30.                 display: flex;
  31.             }
  32.             .content div{
  33.                 flex: 1;
  34.                 text-align: center;
  35.                 margin:7em;
  36.                 margin-top: 2em;
  37.                 margin-bottom: 2em;
  38.                 padding: 10px;
  39.             }
  40.             .description{
  41.                 text-align: center;
  42.                 margin: 4em;
  43.             }
  44.             a{
  45.                 color: white;
  46.                 text-decoration: none;
  47.             }
  48.             .contacts{
  49.                 background-color:darkslategrey;
  50.                 display: flex;
  51.                 padding: 10px;
  52.                 margin-bottom: 0;
  53.             }
  54.             .contacts  p{
  55.                 text-align: center;
  56.                 flex: 1;
  57.                 color: white;
  58.             }
  59.             .contacts a{
  60.                 color: darkgrey;
  61.             }
  62.             footer{
  63.                 background-color: black;
  64.                
  65.                 color: white;
  66.                 text-align: center;
  67.             }
  68.             footer p{
  69.                 margin: 0;
  70.                 padding: 10px;
  71.             }
  72.             button{
  73.                
  74.                 width: 10em;
  75.                 height: 3em;
  76.             }
  77.         </style>
  78.     </head>
  79.     <body>
  80.         <section class="menubar">
  81.             <a class="logo" href="#">YEINYDD</a>
  82.             <div class="menu">
  83.                 <a href="#">HOME</a>
  84.                 <a href="#">PAGES</a>
  85.                 <a href="#">DROPDOWN</a>
  86.                 <a href="#">LINK TEXT</a>
  87.                 <a href="#">LINK TEXT</a>
  88.                 <a href="#">LINK TEXT</a>
  89.                 <a href="#">LONG LINK TEXT</a>
  90.             </div>
  91.         </section>
  92.         <section class="description">
  93.                 <h1>Quisque Adipiscing</h1>
  94.                 <p>Urna sed augue class aptent taciti soclosqu ad ltora torquent</p>
  95.         </section>
  96.         <section class="content">
  97.            
  98.             <div class="item1">
  99.                 <img  src="logo1.jpg">
  100.                 <h2>Suspendisse</h2>
  101.                 <p>Per conubia nostra per mauris aliquet massa nulla facillsi porta liguia non elementum</p>
  102.                 <button>MORE DETAILS</button>
  103.             </div>
  104.             <div class="item2">
  105.                 <img src="logo2.jpg">
  106.                 <h2>Inceptos</h2>
  107.                 <p>Ultricies justo uma egestas metus ut ornaire leo augue pharetra risus morbi tincidunt massa</p>
  108.                 <button>MORE DETAILS</button>
  109.             </div>
  110.             <div class="item3">
  111.                 <img src="logo3.jpg">
  112.                 <h2>Himenaeos</h2>
  113.                 <p>Ac vestibulum rutum orci augue laculis nibh quis porta nunc nisi susipit leo nam as lacus</p>
  114.                 <button>MORE DETAILS</button>
  115.             </div>
  116.             <div class="item4">
  117.                 <img src="logo4.jpg">
  118.                 <h2>Facilisi</h2>
  119.                 <p>Cras tempor ultricies urna aliquam massa sapien possuere in laculis adipiscing vulputate</p>
  120.                 <button>MORE DETAILS</button>
  121.             </div>
  122.         </section>
  123.         <section class="contacts">
  124.             <p>Give us a call: +00 (123) 456 7890</p>
  125.             <p>Send us a mail: support@domain.com</p>
  126.             <p>Monday - Saturday: 08.00am - 18.00pm</p>
  127.             <p>Come visit us: Directions to <a href="#">our location</a></p>
  128.         </section>
  129.         <footer>
  130.             <p>Copyright 2021 - All Rights Reserved - Domain Name</p>
  131.         </footer>
  132.     </body>
  133. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement