WebTec
WebTec
Learn everything about Webdevelopment
Home
Social Media
About
Clean Landing Page| Using HTML, CSS and JavaScript
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Landing Page</title> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Athiti&display=swap" rel="stylesheet"> </head> <body> <header> <div class="logo"> <img src="img/logo.png" alt="Logo"> </div> <div class="main"> <nav> <ul> <a href="about.html"> <li>About</li> </a> <a href="products.html"> <li>Products</li> </a> </ul> </nav> </div> </header> <div class="design"> <img src="img/bild.png" alt=""> </div> </body> </html>
CSS
html, body { margin:0; padding: 0; background-image: url(img/background.jpg); } li, ul, a { text-decoration: none; list-style: none; font-family: 'Athiti', sans-serif; color: #EBAB81 } li {float: right; font-size: 20px; padding-left: 60px;} nav {float: right; width: 500px; margin: 50px 100px;} .logo {float: left; margin: 50px auto auto 100px;} .logo img {width: 300px;} .design {position: absolute; margin: 680px auto auto 50px;}
Back
Video
Back
Video