Sitio web de viajes con radio de borde invertido

Abrir en el editor Publica tu código

Recomendado

26 February 2025

Un código de mematixd3162

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;
}

Sitio web de viajes con radio de borde invertido

Recomendado

Un código de securearray494

Un código de Mete

Un código de mematixd3162

HTML

CSS

JS

Recomendado

Un código de securearray494

Un código de Mete

Un código de mematixd3162

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS