Загрузка...

Help me fix the code

Thread in Frontend created by Стэнли Mar 30, 2024. (bumped Mar 30, 2024) 201 view

  1. Стэнли
    Стэнли Topic starter Mar 30, 2024 ОТКРОЙ СВОЙ ПРОЕКТ МЕЧТЫ В 2025 ГОДУ 6525 Nov 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]
     
    Mar 30, 2024
  2. Стэнли
    Стэнли Topic starter Mar 31, 2024 ОТКРОЙ СВОЙ ПРОЕКТ МЕЧТЫ В 2025 ГОДУ 6525 Nov 6, 2022
    Хелпаните пж( Или как такие блоки делать, что бы не было ебли этой
     
    Mar 31, 2024
Loading...
Top