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

Basic HTML Button Example

HTML Animated Button with SVG and Text

HTML CSS Login Form

HTML

CSS

JS

Recommended

Basic HTML Button Example

HTML Animated Button with SVG and Text

HTML CSS Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS