Sitio web de viajes con radio de borde invertido

2,788 Andev.web

Abrir en el editor Publica tu código

Sitio web de viajes con radio de borde invertido

Recomendado

23 March 2023

Página de preguntas frecuentes responsiva

19 May 2025

tarjeta de caja flexible

9 December 2025

Solicitud de juego HTML5: Plantilla Ragdoll Hit × FNF

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<main>
  <div class="heading">
    <h1>Mountains tours <br />& glamping</h1>
    <aside>
      <p>Our tours immerse you in the beauty of the mountains. Enjoy your time with nature choice of guided day hikes.
      </p>
      <p>Since 2024</p>
    </aside>
  </div>
  <div class="container">
    <div class="card">
      <div class="card-inner">
        <div class="box">
          <div class="imgBox">
            <img src="https://images.unsplash.com/photo-1598601065215-751bf8798a2c?q=80&w=1883&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Awesome views">
          </div>
          <div class="more">
            <ul>
              <li><img src="https://plus.unsplash.com/premium_photo-1672115680958-54438df0ab82?q=80&w=1784&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></li>
              <li><img src="https://images.unsplash.com/photo-1600298882283-40b4dcb8b211?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></li>
              <li><img src="https://plus.unsplash.com/premium_photo-1667987781458-c45c1ad5dfe1?q=80&w=2051&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></li>
              <li><img src="https://images.unsplash.com/photo-1600298882698-312a4137fd33?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""><span>50+</span></li>
            </ul>
          </div>
          <div class="tag">
            <a href="#">#Awesome views</a>
          </div>

</div>
      </div>
    </div>
    <div class="card video">
      <div class="card-inner">
        <div class="box">
          <div class="videoBox poster">
          </div>

<div class="tag">
            <a href="#">#Pet friendly</a>
          </div>

</div>
      </div>
    </div>
    <div class="card">
      <p><a href="#">More about tours</a> </p>
      <div class="card-inner">
        <div class="box">
          <div class="imgBox">
            <img src="https://images.unsplash.com/photo-1501554728187-ce583db33af7?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hiking">
          </div>

</div>
          <div class="tag">
            <a href="#">#Hiking</a>
          </div>

</div>
      </div>
    </div>
  </div>
</main>
  <script  src="./script.js"></script>

</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Moderustic&family=SUSE:wght@600&display=swap");
:root {
  --clr-white: #fff;
  --clr-black: #111;
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--clr-white);
  font-family: "Moderustic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
}
ul li {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--clr-white);
  position: relative;
  transform: translatey(0);
  transition: 0.2s ease-in-out;
}
ul li:hover {
  transform: translatey(-0.625rem);
  cursor: pointer;
}
ul li::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(17, 17, 17, 0.2);
}
ul li span {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 0.6rem;
  color: var(--clr-white);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
ul li + li {
  margin-left: -0.625rem;
}
ul img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

a {
  display: inline-block;
  text-decoration: none;
}

main {
  padding-block: min(20vh, 2rem);
  width: calc(min(70rem, 90%));
  margin-inline: auto;
  color: var(--clr-black);
  position: relative;
}
@media screen and (min-width: 40rem) {
  main .heading {
    display: flex;
    justify-content: space-between;
    gap: 1em;
  }
}
main .heading h1 {
  letter-spacing: 0.025em;
  font-size: clamp(2.5rem, 1.6351rem + 4.3243vw, 6.5rem);
  line-height: 1;
  font-family: "SUSE", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
main .heading aside {
  margin-top: 1.5em;
  max-width: 16.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
@media screen and (min-width: 40rem) {
  main .heading aside {
    margin-top: 3em;
  }
}
main .heading aside p {
  font-size: 0.9rem;
  color: var(--clr-black);
  line-height: 1.5;
}
main .container {
  margin-top: 2em;
  display: grid;
  gap: 1.5rem;
}
@media screen and (min-width: 40rem) {
  main .container {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3.5em;
    gap: 2rem;
  }
}
main .card {
  padding-block: 1rem;
  background: var(--clr-white);
  border-radius: 1.2rem;
  position: relative;
  height: 24rem;
}
@media screen and (min-width: 53rem) {
  main .card {
    border-radius: 1.8rem;
  }
}
main .card p {
  position: absolute;
  right: 0;
  top: -1.25rem;
}
main .card p a {
  font-size: 0.9rem;
  display: inline-block;
  color: var(--clr-black);
}
main .card p a:hover {
  font-weight: 600;
}
main .card .card-inner {
  position: relative;
  width: inherit;
  height: inherit;
  border-bottom-right-radius: 0;
}
main .card .card-inner .box {
  width: 100%;
  height: 100%;
  background: var(--clr-white);
  border-radius: 1.2rem;
  overflow: hidden;
}
main .card .card-inner .box .videoBox {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main .card .card-inner .box .videoBox iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
main .card .card-inner .box .imgBox {
  position: absolute;
  inset: 0;
}
main .card .card-inner .box .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}
@media screen and (min-width: 53rem) {
  main .card .card-inner .box .imgBox img {
    border-radius: 1.6rem;
  }
}
main .card .card-inner .box .more {
  position: absolute;
  top: -0.375rem;
  right: 0;
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--clr-white);
  padding: 0.625rem 0 0.625rem 0.625rem;
  border-bottom-left-radius: 1rem;
}
main .card .card-inner .box .more::before {
  position: absolute;
  content: "";
  top: 0.375rem;
  left: -1.188rem;
  background: transparent;
  width: 1.2rem;
  height: 1.2rem;
  border-bottom-right-radius: 2rem;
  box-shadow: 0.313rem 0.313rem 0px 0.313rem var(--clr-white);
  transform: rotate(-90deg);
}
main .card .card-inner .box .more::after {
  position: absolute;
  content: "";
  bottom: -1.188rem;
  right: -0.063rem;
  background: transparent;
  width: 1.2rem;
  height: 1.2rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 0.313rem 0.313rem 0px 0.313rem var(--clr-white);
  transform: rotate(-90deg);
}
main .card .card-inner .box .more .arrow {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.125rem solid #c8c8c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease-in-out;
}
main .card .card-inner .box .more .arrow:hover {
  background: var(--clr-black);
  border: 0.125rem solid var(--clr-black);
  color: var(--clr-white);
}
main .card .card-inner .box .more .arrow:hover svg {
  color: var(--clr-white);
}
main .card .card-inner .box .more svg {
  width: 1.063rem;
  color: var(--clr-black);
}
main .card .card-inner .box .tag {
  position: absolute;
  bottom: -0.375rem;
  left: 0;
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--clr-white);
  padding: 0.625rem 0.625rem 0.625rem 0;
  border-top-right-radius: 1rem;
}
main .card .card-inner .box .tag::before {
  position: absolute;
  content: "";
  top: -1.188rem;
  left: 0;
  background: transparent;
  width: 1.2rem;
  height: 1.2rem;
  border-bottom-right-radius: 2rem;
  box-shadow: 0.313rem 0.313rem 0px 0.313rem var(--clr-white);
  transform: rotate(90deg);
}
main .card .card-inner .box .tag::after {
  position: absolute;
  content: "";
  bottom: 0.375rem;
  right: -1.188rem;
  background: transparent;
  width: 1.2rem;
  height: 1.2rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 0.313rem 0.313rem 0px 0.313rem var(--clr-white);
  transform: rotate(90deg);
}
main .card .card-inner .box .tag a {
  font-size: 0.8rem;
  color: var(--clr-black);
  font-weight: 400;
  border: 0.125rem solid #c8c8c8;
  border-radius: 3.125rem;
  padding: 0.313rem 0.625rem;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
main .card .card-inner .box .tag a:hover {
  color: var(--clr-white);
  background: var(--clr-black);
  border: 0.125rem solid var(--clr-black);
}
main .video {
  height: 20rem;
  align-self: flex-end;
}

.poster {
  position: relative;
  display: inline-flex;
}

.poster:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("https://images.unsplash.com/photo-1534361960057-19889db9621e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  transition: 1s ease;
  opacity: 0.8;
  cursor: pointer;
}

.poster-active:after {
  opacity: 0;
  pointer-events: none;
}