HTML Landing Page Template: Travel Agency

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Page</title>
  </head>
  <body>
    <style>
      *{
        padding: 0;
        margin: 0;
      box-sizing: border-box;
    
      /* calculates content width */
      }
      header{
        width: 100%;
        height: 100vh;
     font-size: 10px;
   background: linear-gradient( rgba(0,0,0,0.8),rgba(0,0,0,0.2)),url(https://www.zensebangkok.com/wp-content/uploads/2021/10/pexels-kenneth-carpina-2468773.jpg);
      background-size: cover;
      font-family: sans-serif;}
      nav{
width: 100%;
height: 100px;
color: white;
display: flex;
justify-content: space-around;
align-items: center;
      }
      .logo{
        font-size: 3em;
        letter-spacing: 2px;
        text-shadow: 5px 5px 5px indianred;
       
      }
      .menu a{
        text-decoration: none;
        color: white;
        padding: 10px 20px;
        font-size: 20px;
        position: relative;
      }
      .menu a:before{
        content:'';
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
    
        border-bottom: 2px solid indianred;
        border-top: 2px solid indianred;
        transition: 0.2s linear;
    
      }
      .menu a:hover:before{
width: 100%;
      }
      .register a{
text-decoration: none;
color: white;
padding: 10px 20px;
font-size: 10px;
background: indianred;
border-radius: 8px;
transition: 0.4s;
      }
      .register a:hover{
background: transparent;
border: 1px solid indianred;
font-size: xx-large;

}
      .headertext{
        max-width: 650px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
      }
      .headertext span{
        letter-spacing: 5px;
      }
      .headertext h1{
        font-size: 4.5em;
      }
      .headertext a{
        text-decoration: none;
        background: indianred;
        color: white;
        padding: 10px 20px;
        letter-spacing: 5px;
        transition: 0.4s;border-radius: 50%;
      }
      .headertext a:hover{
        text-decoration: none;
        background: transparent;
        color: indianred;
        padding: 10px 20px;
        letter-spacing: 8px;
        transition: 0.4s;
        font-size: xx-large;
      }
       </style>
    <header>
      <nav>
        <div class="logo">NOTHERN TRAVELS</div>
        <div class="menu">
          <a href="#">Home</a>
          <a href="#">Hill Station</a>
          <a href="#">About Us</a>
          <a href="#">Contact Us</a>
          <a href="#">Sale Offer</a>
        </div>
        <div class="register"><a href="#">Register</a></div>
      </nav> </header>
      <section class="headertext">
        <span>Enjoy</span>
        <h1>International Travel Agency</h1>
        <br>
        <a href="#">Book Your Trip Now ! </a>
      </section>
  
  </body>
</html>

HTML Landing Page Template: Travel Agency

Recommended

3D Smartwatch CSS HTML JavaScript Code

HTML Animation Container Example

HTML CSS and Javascript Hover Animation Effect

HTML

CSS

JS

Recommended

3D Smartwatch CSS HTML JavaScript Code

HTML Animation Container Example

HTML CSS and Javascript Hover Animation Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS