Plantilla de página de destino HTML: Agencia de viajes

1,138 abdulrehmanahmed301

Abrir en el editor Publica tu código

Plantilla de página de destino HTML: Agencia de viajes

Recomendado

26 March 2026

Los juegos de Titan

15 May 2025

Un código de nasmacadic

25 July 2025

Cuadro de registro de inicio de sesión 3D HTML CSS

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>

CSS