Webleb - HTML UI Elements -

Apri nell'Editor Pubblica il Tuo Codice

10 September 2024

PAGINA DI CARICAMENTO NETFLIX

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

}

PAGINA DI CARICAMENTO NETFLIX

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS