HTML Code
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dubai Desert Website</title> |
| <link rel="stylesheet" href="styles.css"> |
| </head> |
| <body> |
| <div class="container"> |
| |
| <nav> |
| <img src="logo.png" class="logo"> |
| <ul> |
| <li class="active"><a href="">Home</a></li> |
| <li><a href="">Services</a></li> |
| <li><a href="">Travel</a></li> |
| <li><a href="">About</a></li> |
| </ul> |
| </nav> |
| <div class="text"> |
| <h2>Dubai Desert</h2> |
| <h3>Explore The Uae</h3> |
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae modi ab facere atque vero ducimus delectus.</p> |
| <a href="">Explore</a> |
| </div> |
| <ul class="social"> |
| <li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li> |
| <li><a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li> |
| <li><a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li> |
| </ul> |
| </div> |
| |
| |
| </body> |
| </html> |
CSS Code
| |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); |
| |
| * { |
| padding: 0; |
| margin: 0; |
| font-family: 'poppins', sans-serif; |
| } |
| |
| .container { |
| width: 100%; |
| height: 100vh; |
| background-image: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),url(background.jpg); |
| background-size: cover; |
| background-position: center; |
| } |
| nav { |
| width: 84%; |
| margin: auto; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
| |
| .logo { |
| width: 45px; |
| cursor: pointer; |
| } |
| |
| nav ul li { |
| display: inline-block; |
| list-style: none; |
| margin: 20px 20px; |
| } |
| |
| nav ul li a { |
| text-transform: uppercase; |
| text-decoration: none; |
| color: #fff; |
| padding: 5px 20px; |
| border: 1px solid transparent; |
| transition: 0.5s ease; |
| } |
| |
| nav ul li a:hover { |
| color: #000000; |
| background: #fff; |
| } |
| |
| nav ul li.active a { |
| color: #000000; |
| background: #fff; |
| } |
| |
| .text { |
| margin-top: 215px; |
| margin-left: 85px; |
| } |
| |
| .text h2 { |
| font-size: 4em; |
| font-weight: 800; |
| color: #fff; |
| line-height: 1em; |
| text-transform: uppercase; |
| } |
| |
| .text h3 { |
| font-size: 3em; |
| font-weight: 700; |
| color: #fff; |
| line-height: 1em; |
| text-transform: uppercase; |
| } |
| |
| .text p { |
| font-size: 1.1em; |
| color: #fff; |
| margin: 20px 0; |
| font-weight: 400; |
| max-width: 700px; |
| } |
| |
| .text a { |
| display: inline-block; |
| font-size: 1em; |
| background: #fff; |
| padding: 10px 30px; |
| text-transform: uppercase; |
| text-decoration: none; |
| font-weight: 500; |
| margin-top: 10px; |
| color: #111; |
| letter-spacing: 2px; |
| transition: 0.2s; |
| } |
| |
| .text a:hover { |
| letter-spacing: 6px; |
| } |
| |
| .social { |
| position: absolute; |
| margin-left: 85px; |
| bottom: 20px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .social li { |
| list-style: none; |
| } |
| |
| .social li a { |
| display: inline-block; |
| margin-right: 20px; |
| filter: invert(1); |
| transform: scale(0.5); |
| transition: 0.5s; |
| } |
| .social li a:hover { |
| transform: scale(0.5) translateY(-15px); |
| } |
Comments