Modelo de página de destino HTML: agência de viagens

122 abdulrehmanahmed301

Abrir no Editor Publique Seu Código

Modelo de página de destino HTML: agência de viagens

Recomendado

7 July 2025

Indicador do menu de navegação

28 November 2024

Controle deslizante horizontal puro com menu deslizante

4 February 2025

Fração de Animação

HTML

<!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>

Modelo de página de destino HTML: agência de viagens

Recomendado

Indicador do menu de navegação

Controle deslizante horizontal puro com menu deslizante

Fração de Animação

HTML

CSS

JS

Recomendado

Indicador do menu de navegação

Controle deslizante horizontal puro com menu deslizante

Fração de Animação

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS