Webleb - HTML UI Elements -

Abrir no Editor Publique Seu Código

Recomendado

14 September 2024

Um Código por alejandrokundrah

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="website icon" type="png"
    href="img/Screenshot_20240827_151541_Chrome.png">
    <link rel="stylesheet" href="css/styles.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Красивый текст</title>
    <style>
    h1 {
        font-size: 48px;
        color: #ffffff;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        letter-spacing: 2px;
        padding: 80px 20px;
        
        border-radius: 10px;
        animation: fadeIn 2s ease-in-out;
    }

@keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

.item {
            flex: 1 1 calc(33.333% - 20px); /* Задает ширину и отступы для каждого элемента */
            box-sizing: border-box;
            margin: 10px;
            text-align: center;
        }

.item img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            display: block;
        }

.item p {
            margin-top: 10px;
            font-size: 16px;
            color: #333;
        }

/* Адаптивность для мобильных устройств */
        @media (max-width: 768px) {
            .item {
                flex: 1 1 calc(50% - 20px); /* 2 колонки на мобильных устройствах */
            }
        }

@media (max-width: 480px) {
            .item {
                flex: 1 1 100%; /* 1 колонка на маленьких экранах */
            }
        }

</style>
</head>
<body>
</body>
</html>
    <title>Webleb</title>
</head>
<body style="background-color: black;">
    <nav>
        <div class="logo" style="display: flex;align-items: center;">
         <span style="color:#01939c; font-size:26px; font-weight:bold; letter-spacing: 1px;margin-left: 20px;">EXIZ</span>
        </div>
        <div class="hamburger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Solutions</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Services</a></li>
            <li><button class="login-button" href="#">Login</button></li>
        </ul>
    </nav>

<div class="bg-image">
        <div class="bg-shadow">
            <div class="container">
                <div class=" text-white" style="padding-top: 160px; padding-bottom: 160px;  text-align: center;">
                    <h1>
                        Welcome To My First Project
                    </h1>
                    </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="item">
        <img src="img/0d9b7c559bf811ee8f474288c7f1f5c6_upscaled.jpg" alt="Описание изображения 1" class="img-hover">
        <p style="color: white;">кофеин воздействует на центральную нервную систему, срабатывая, как природный “будильник”.</p>
    </div>
    <div class="item">
        <img src="img/16aa325f853c11ee9b847a2f0d1382ba_upscaled.jpg" alt="Описание изображения 2" class="img-hover">
        <p style="color: white;">Поэтому мы быстрее просыпаемся после чашки утреннего эспрессо и за это свойство особенно ценим ароматный напиток. </p>
    </div>
    <div class="item">
        <img src="img/322338b170ee11eeb75fe6d39d9a42a4_upscaled.jpg" alt="Описание изображения 3" class="img-hover">
        <p style="color: white;">кофе стимулирует мозговую деятельность, уменьшает усталость и повышает работоспособность и физическую активность.</p>
    </div>
    <div class="item">
        <img src="img/ab8b6d627f9611ee9a051e5d9776cfa6_upscaled.jpg" alt="Описание изображения 1" class="img-hover">
        <p style="color: white;">Он способен блокировать действие аденозина, который отвечает на стимулирование сна и подавление бодрости.</p>
    </div>
    <div class="item">
        <img src="img/046e6bf163b411ef965476c88230f316.png" alt="Описание изображения 2" class="img-hover">
        <p style="color: white;"> Этим достигается всем известный эффект. Кроме того, многие исследования доказывают, </p>
    </div>
    <div class="item">
        <img src="img/854b448663c211efad67aa707850473b_upscaled.jpg" alt="Описание изображения 3" class="img-hover">
        <p style="color: white;"> что с помощью кофе можно улучшить свои когнитивные способности: повысить память, внимание и способность к обучению.</p>
    </div>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
*{
  margin: 0;
  padding: 0;
  color: #f2f5f7;
  font-family: sans-serif;
  letter-spacing: 1px;
  font-weight: 300;
}
body{
  overflow-x: hidden;
}
nav{
  height: 4.5rem;
  width: 100vw;
  background-color: #131418;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  position: fixed;
  z-index: 10;
}

/*Styling logo*/
.logo{
  padding:1vh 1vw;
  text-align: center;
}
.logo img {
  height: 5rem;
  width: 5rem;
}

/*Styling Links*/
.nav-links{
  display: flex;
  list-style: none; 
  width: 88vw;
  padding: 0 0.7vw;
  justify-content: space-evenly;
  align-items: center;
  text-transform: uppercase;
}
.nav-links li a{
  text-decoration: none;
  margin: 0 0.7vw;
}
.nav-links li a:hover {
  color: #61DAFB;
}
.nav-links li {
  position: relative;
}
.nav-links li a:hover::before{
  width: 80%;
}

/*Styling Buttons*/
.login-button{
  background-color: transparent;
  border: 1.5px solid #f2f5f7;
  border-radius: 2em;
  padding: 0.6rem 0.8rem;
  margin-left: 2vw;
  font-size: 1rem;
  cursor: pointer;

}
.login-button:hover {
  color: #131418;
  background-color: #f2f5f7;
  border:1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}
.join-button{
  color: #131418;
  background-color: #61DAFB;
  border: 1.5px solid #61DAFB;
  border-radius: 2em;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  cursor: pointer;
}
.join-button:hover {
  color: #f2f5f7;
  background-color: transparent;
  border:1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}

/*Styling Hamburger Icon*/
.hamburger div{
  width: 30px;
  height:3px;
  background: #f2f5f7;
  margin: 5px;
  transition: all 0.3s ease;
}
.hamburger{
  display: none;
}

/*Stying for small screens*/
@media screen and (max-width: 800px){
  nav{
      position: fixed;
      z-index: 3;
  }
  .hamburger{
      display:block;
      position: absolute;
      cursor: pointer;
      right: 5%;
      top: 50%;
      transform: translate(-5%, -50%);
      z-index: 2;
      transition: all 0.7s ease;
  }
  .nav-links{
      position: fixed;
      background: #131418;
      height: 100vh;
      width: 100%;
      flex-direction: column;
      clip-path: circle(50px at 90% -20%);
      -webkit-clip-path: circle(50px at 90% -10%);
      transition: all 1s ease-out;
      pointer-events: none;
  }
  .nav-links.open{
      clip-path: circle(1000px at 90% -10%);
      -webkit-clip-path: circle(1000px at 90% -10%);
      pointer-events: all;
  }
  .nav-links li{
      opacity: 0;
  }
  .nav-links li:nth-child(1){
      transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2){
      transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3){
      transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4){
      transition: all 0.5s ease 0.7s;
  }
  .nav-links li:nth-child(5){
      transition: all 0.5s ease 0.8s;
  }
  .nav-links li:nth-child(6){
      transition: all 0.5s ease 0.9s;
      margin: 0;
  }
  .nav-links li:nth-child(7){
      transition: all 0.5s ease 1s;
      margin: 0;
  }
  li.fade{
      opacity: 1;
  }
}
/*Animating Hamburger Icon on Click*/
.toggle .line1{
  transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
  transition: all 0.7s ease;
  width:0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);
}

.bg-image {
  background-image: url("../img/1.jpg");
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.bg-shadow {
  background-color: rgba(0, 0, 0, .5);
}

.img-hover {
  transition: .6s;
}
.img-hover:hover {
  transform: scale(1.03);
  transition: .6s all;
  cursor: pointer;
  filter: contrast(1.2);
}

a.hover-1 {
  position: relative;
  color: white!important;
}

a.hover-1:hover {
  color: green!important;
}

a.hover-1:hover::before {
  content: '';
  position: absolute;
  animation: hover-1 5s infinite;
  top: 35px;
  width: 106px;
  height: 2px;
  background-color: green!important;
  transition: .5s all;
}

@keyframes hover-1 {
  0% {
      width: 0;
      height: 0;
  }
  50% {
      width: 106px;
      height: 2px;
  }
  75% {
      width: 0;
      height: 0;
  }
  100% {
      width: 0;
      height: 0;
  }

}

Recomendado

Formulário de Login Moderno

Interação com Pôster de Filme

Um Código por alejandrokundrah

HTML

CSS

JS

Recomendado

Formulário de Login Moderno

Interação com Pôster de Filme

Um Código por alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS