Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- li{
- display:inline-block;
- margin:0px 15px;
- }
- .column{
- display:inline-block;
- vertical-align:middle;
- }
- #header{
- background:#7ac141;
- padding: 30px 75px 30px 75px;
- border-bottom:solid 10px #dfdfdf;
- }
- li a{
- color:white;
- text-decoration: none;
- font-weight: bold;
- }
- input[type=text]{
- background:#a3d47b;
- border:none;
- padding:3px;
- margin-left:75px;
- color:white;
- width:180px;
- }
- input[type=button]{
- background:#7ac141;
- border:solid 1px white;
- color:white;
- }
- .left{
- width:350px;
- margin-right:75px;
- }
- .right{
- width:420px;
- }
- #main{
- padding:75px;
- }
- h1{
- font-family: Georgia;
- font-size:40px;
- color:#7ac141;
- font-weight:normal;
- }
- .left a{
- color:white;
- text-decoration:none;
- display:inline-block;
- padding:10px 15px;
- margin-right:20px;
- background: #6ab357;
- }
- .left a:hover{
- background: #3e786a;
- }
- </style>
- </head>
- <body>
- <div id="header">
- <div class="column">
- <a href="https://www.google.bg">
- <img src="https://placehold.it/180x35" alt="">
- </a>
- </div>
- <div class="column">
- <ul>
- <li>
- <a href="#">Features</a>
- </li>
- <li>
- <a href="#">Industries</a>
- </li>
- <li>
- <a href="#">Results</a>
- </li>
- <li>
- <a href="#">Support</a>
- </li>
- <li>
- <a href="#">Contact</a>
- </li>
- </ul>
- </div>
- <div class="column">
- <input type="text" value="Search">
- <input type="button" value="Go">
- </div>
- </div>
- <div id="main">
- <div class="column left">
- <h1>Easy to use asset management and workflow software</h1>
- <p>
- <strong>Brand ™ </strong>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque assumenda nemo, inventore fugiat doloribus excepturi tempora error qui praesentium consequatur dolorum totam debitis eos velit voluptatum, consequuntur maiores. Doloremque, officiis.
- </p>
- <a href="">Find out more</a>
- <a href="">Find out more</a>
- </div>
- <div class="column right">
- <iframe width="420" height="345" src="https://www.youtube.com/embed/n5ZhKyOxZns" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement