Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <style>
- body{
- padding: 0;
- margin: 0;
- }
- .menubar{
- background-color: black;
- display:grid;
- grid-template-columns: 20% 80%;
- }
- .logo{
- margin-top: 25px;
- margin-left: 15em;
- }
- .menu{
- text-align: right;
- margin-right: 15em;
- }
- .menu a{
- margin: 15px;
- }
- .menubar div{
- margin-top: 25px;
- margin-bottom: 25px;
- }
- .content{
- display: flex;
- }
- .content div{
- flex: 1;
- text-align: center;
- margin:7em;
- margin-top: 2em;
- margin-bottom: 2em;
- padding: 10px;
- }
- .description{
- text-align: center;
- margin: 4em;
- }
- a{
- color: white;
- text-decoration: none;
- }
- .contacts{
- background-color:darkslategrey;
- display: flex;
- padding: 10px;
- margin-bottom: 0;
- }
- .contacts p{
- text-align: center;
- flex: 1;
- color: white;
- }
- .contacts a{
- color: darkgrey;
- }
- footer{
- background-color: black;
- color: white;
- text-align: center;
- }
- footer p{
- margin: 0;
- padding: 10px;
- }
- button{
- width: 10em;
- height: 3em;
- }
- </style>
- </head>
- <body>
- <section class="menubar">
- <a class="logo" href="#">YEINYDD</a>
- <div class="menu">
- <a href="#">HOME</a>
- <a href="#">PAGES</a>
- <a href="#">DROPDOWN</a>
- <a href="#">LINK TEXT</a>
- <a href="#">LINK TEXT</a>
- <a href="#">LINK TEXT</a>
- <a href="#">LONG LINK TEXT</a>
- </div>
- </section>
- <section class="description">
- <h1>Quisque Adipiscing</h1>
- <p>Urna sed augue class aptent taciti soclosqu ad ltora torquent</p>
- </section>
- <section class="content">
- <div class="item1">
- <img src="logo1.jpg">
- <h2>Suspendisse</h2>
- <p>Per conubia nostra per mauris aliquet massa nulla facillsi porta liguia non elementum</p>
- <button>MORE DETAILS</button>
- </div>
- <div class="item2">
- <img src="logo2.jpg">
- <h2>Inceptos</h2>
- <p>Ultricies justo uma egestas metus ut ornaire leo augue pharetra risus morbi tincidunt massa</p>
- <button>MORE DETAILS</button>
- </div>
- <div class="item3">
- <img src="logo3.jpg">
- <h2>Himenaeos</h2>
- <p>Ac vestibulum rutum orci augue laculis nibh quis porta nunc nisi susipit leo nam as lacus</p>
- <button>MORE DETAILS</button>
- </div>
- <div class="item4">
- <img src="logo4.jpg">
- <h2>Facilisi</h2>
- <p>Cras tempor ultricies urna aliquam massa sapien possuere in laculis adipiscing vulputate</p>
- <button>MORE DETAILS</button>
- </div>
- </section>
- <section class="contacts">
- <p>Give us a call: +00 (123) 456 7890</p>
- <p>Send us a mail: support@domain.com</p>
- <p>Monday - Saturday: 08.00am - 18.00pm</p>
- <p>Come visit us: Directions to <a href="#">our location</a></p>
- </section>
- <footer>
- <p>Copyright 2021 - All Rights Reserved - Domain Name</p>
- </footer>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement