Загрузка...

Помогите пофиксить код

Тема в разделе Frontend создана пользователем Стэнли 30 мар 2024. (поднята 30 мар 2024) 200 просмотров

  1. Стэнли
    Стэнли Автор темы 30 мар 2024 ОТКРОЙ СВОЙ ПРОЕКТ МЕЧТЫ В 2025 ГОДУ 6525 6 ноя 2022
    react (html css)
    Вверху сайта банер, размером с экран, в нем находится шапка + банер. Шапка с банером закрыты в контейнере, который при большом разрешении экрана центрируется. Но если размер экрана меньше чем размер контейнера - вместо центрирования все элементы убегают влево почему-то. Хелпаните пж


    JS
    import { useState } from "react";
    
import "./App.css";
    
import styles from "./app.module.scss";
    
import { useEffect } from "react";
    

    
function App() {
    
  const PHOTO_SRC = {};
    
  PHOTO_SRC["logo"] = "../public/images/Logo.png";
    
  PHOTO_SRC["fb"] = "../public/images/icons/fb.png";
    
  PHOTO_SRC["inst"] = "../public/images/icons/inst.svg";
    
  PHOTO_SRC["twich"] = "../public/images/icons/twich.svg";
    
  PHOTO_SRC["twitter"] = "../public/images/icons/twitter.svg";
    
  PHOTO_SRC["youtube"] = "../public/images/icons/youtube.svg";
    
  PHOTO_SRC["header-photos"] = [
    
    "../public/images/header-photos/pc/1.jpg",
    
    "../public/images/header-photos/pc/2.jpg",
    
    "../public/images/header-photos/pc/3.jpg",
    
  ];
    

    
  const [actualHeaderPhoto, setActualHeaderPhoto] = useState(1);
    
  useEffect(() => {
    
    const intervalId = setInterval(() => {
    
      setActualHeaderPhoto((prevPhoto) => {
    
        return prevPhoto + 1 == PHOTO_SRC["header-photos"].length
    
          ? 0
    
          : prevPhoto + 1;
    
      });
    
    }, 5000);
    
    return () => clearInterval(intervalId);
    
  });
    

    
  return (
    
    <>
    
      <div className={styles.wrapper}>
    
        <img
    
          id="header-bg"
    
          className={styles.background}
    
          src={PHOTO_SRC["header-photos"][actualHeaderPhoto]}
    
        />
    
        <div className={styles.header}>
    
          <div className={styles.headerTop}>
    
            <div className={styles.headerTopLeft}>
    
              <img
    
                src={PHOTO_SRC["logo"]}
    
                className={styles.headerTopLeft__logo}
    
              />
    
            </div>
    

    
            <div className={styles.headerTopRight}>
    
              <ol className={styles.headerTopRightMediaList}>
    
                <a href="#" className={styles.headerTopRightMediaList__media}>
    
                  <img src={PHOTO_SRC["fb"]} />
    
                </a>
    
                <a href="#" className={styles.headerTopRightMediaList__media}>
    
                  <img src={PHOTO_SRC["inst"]} />
    
                </a>
    
                <a href="#" className={styles.headerTopRightMediaList__media}>
    
                  <img src={PHOTO_SRC["twich"]} />
    
                </a>
    
                <a href="#" className={styles.headerTopRightMediaList__media}>
    
                  <img src={PHOTO_SRC["twitter"]} />
    
                </a>
    
                <a href="#" className={styles.headerTopRightMediaList__media}>
    
                  <img src={PHOTO_SRC["youtube"]} />
    
                </a>
    
              </ol>
    
            </div>
    
          </div>
    
          <div className={styles.headerBottom}>
    
            <h2 className={styles.headerBottom__title}>
    
              Доступно на всех платформах
    
            </h2>
    
            <div className={styles.headerBottom__text}>Узнать больше</div>
    
          </div>
    
        </div>
    
        <div className={styles.testBody}>sss</div>
    
      </div>
    
    </>
    
  );
    
}
    

    
export default App;
    CSS
    @import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic);
    
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,regular,500,600,700,800,300italic,italic,500italic,600italic,700italic,800italic);
    
body {
    
}
    
.wrapper {
    
  margin: 0 auto;
    
  width: 100%;
    
  height: 100%;
    
  max-height: 100vh;
    
  max-width: 1280px;
    
  @media (max-width: 1280px) {
    
    max-width: 100%;
    
  }
    

    
  .background {
    
    position: absolute;
    
    left: 50%;
    
    top: 50%;
    
    height: 100vh;
    
    transform: translate(-50%, -50%);
    
    min-width: 100%;
    
    min-height: 100%;
    
    object-fit: cover;
    
    border: 1px solid #000;
    
    display: flex;
    
    flex-direction: column;
    
    justify-content: center;
    
  }
    
  .header {
    
    position: relative;
    
    display: flex;
    
    flex-direction: column;
    
    align-items: center;
    
    margin: 0 auto;
    
    width: 100%;
    
    height: 100vh;
    
    max-width: 1280px;
    
    @media (max-width: 1280px) {
    
      max-width: 100%;
    
    }
    
    &Top {
    
      display: flex;
    
      justify-content: space-between;
    
      align-items: center;
    
      padding: 20px 0;
    
      width: 100%;
    
      &Left {
    
        &__logo {
    
          cursor: pointer;
    
          &:hover {
    
            transform: scale(1.02);
    
            transition-duration: 0.3s;
    
          }
    
          transition-duration: 0.3s;
    
        }
    
      }
    
      &Right {
    
        &MediaList {
    
          &__media {
    
            padding: 0px 20px;
    
            &:last-child {
    
              padding: 0px;
    
            }
    
            img {
    
              &:hover {
    
                transform: scale(1.2);
    
                transition-duration: 0.3s;
    
              }
    
              transition-duration: 0.3s;
    
            }
    
          }
    
        }
    
      }
    
    }
    
    &Bottom {
    
      position: absolute;
    
      bottom: 0px;
    
      right: 0px;
    
      width: 100%;
    
      height: 100%;
    
      max-width: 624px;
    
      max-height: 369px;
    
      background-color: yellow;
    
      display: inline-block; /* Сделать элемент блочным с возможностью задания ширины и высоты */
    
      -webkit-clip-path: polygon(
    
        10% 0,
    
        100% 0,
    
        100% 85%,
    
        85% 100%,
    
        0 100%,
    
        0 10%
    
      ); /* Для браузеров на основе WebKit */
    
      clip-path: polygon(10% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 10%);
    
      display: flex;
    
      flex-direction: column;
    
      justify-content: center;
    
      &__title {
    
        margin-left: 80px;
    
        font-family: "Roboto";
    
        font-size: 50px;
    
        font-weight: bold;
    
      }
    
      &__text {
    
        width: 120px;
    
        margin-top: 30px;
    
        margin-left: 80px;
    
        text-align: center;
    
        padding: 15px 50px;
    
        font-weight: bold;
    
        font-family: "Open Sans";
    
        color: yellow;
    
        background-color: black;
    
        cursor: pointer;
    
        &:hover {
    
          transform: scale(1.02);
    
          transition-duration: 0.3s;
    
        }
    
        transition-duration: 0.3s;
    
      }
    
    }
    
  }
    
}
    

    
.objectDisappears {
    
  animation: fadeOut 0.5s ease-in-out infinite;
    
  @keyframes fadeOut {
    
    from {
    
      opacity: 1; /* Начальное состояние: полностью непрозрачный */
    
    }
    
    to {
    
      opacity: 0; /* Конечное состояние: полностью прозрачный */
    
    }
    
  }
    
}
    

    
.objectAppears {
    
  animation: fadeOut 0.5s ease-in-out infinite;
    
  @keyframes fadeOut {
    
    from {
    
      opacity: 0; /* Начальное состояние: полностью непрозрачный */
    
    }
    
    to {
    
      opacity: 1; /* Конечное состояние: полностью прозрачный */
    
    }
    
  }
    
}
    

    
.testBody {
    
  margin-top: 900px;
    
}
    [IMG]
    [IMG]
     
    30 мар 2024
  2. Стэнли
    Стэнли Автор темы 31 мар 2024 ОТКРОЙ СВОЙ ПРОЕКТ МЕЧТЫ В 2025 ГОДУ 6525 6 ноя 2022
    Хелпаните пж( Или как такие блоки делать, что бы не было ебли этой
     
    31 мар 2024
Загрузка...
Top