Site de viagens com raio de borda invertido

2028 Andev.web

Abrir no Editor Publique Seu Código

Site de viagens com raio de borda invertido

Recomendado

29 May 2025

Um código de Mete

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

Site de viagens com raio de borda invertido

Recomendado

Um código de Mete

Nariz de Ferro

Um código de Mete

HTML

CSS

JS

Recomendado

Um código de Mete

Nariz de Ferro

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS