Блог

Я создаю свой первый веб-сайт react, и когда пользователь отправляет форму, я включаю текст в верхней части экрана, чего я и хотел. Однако, когда я прокручиваю вниз, отображается выделенный серым цветом контейнер, внутри которого находится текст. Как это исправить. Вот картинки, чтобы вы лучше поняли: обычный:

прокручивается:

код:

  return (
    <div>
      <div>{enable amp;amp; <p>Mesajınız için teşekkür ederiz. En kısa zamanda geri döneceğiz.</p>}</div>
      <div className='hero-container'>
then I implement everything else...
 

Я вызываю setenable сразу после нажатия кнопки отправки.
Полный код css:

 video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

.hero-container {
  /* background: url('/images/img-home.jpg') center center/cover no-repeat; */
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
  object-fit: contain;
}

.hero-container > h1 {

  overflow: hidden;
  color: #fff;
  font-size: 55px;
  
}

.hero-container > p {
  margin-top: 8px;
  color: #fff;
  font-size: 32px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
}

.hero-btns {
  margin-top: 32px;
}

.hero-btns .btn {
  margin: 6px;
}

.fa-play-circle {
  margin-left: 4px;
}

@media screen and (max-width: 960px) {
  .hero-container > h1 {
    font-size: 70px;
    margin-top: -150px;
  }
}

@media screen and (max-width: 768px) {
  .hero-container > h1 {
    font-size: 50px;
    margin-top: -100px;
  }

  .hero-container > p {
    font-size: 30px;
  }

  .btn-mobile {
    display: block;
    text-decoration: none;
  }

  .btn {
    width: 100%;
  }
}
 

Полный код реакции:

 import React, { useState } from 'react';
import '../App.css';
import { Button } from './Button';
import './HeroSection.css';
import Popup from 'reactjs-popup';
import emailjs from 'emailjs-com';

function HeroSection() {
  const [enable, setEnable] = useState(false);
  function sendEmail(e) {
    e.preventDefault();
    emailjs.sendForm('service_33udodm', 'template_7nv26ca', e.target, 'user_2ZHVUb5KwDuGDQFDtmrqB')
      .then((result) => {

        console.log(result.text);
      }, (error) => {
        console.log(error.text);
      });
    setEnable(true)
  }

  const Modal = () => (
    <Popup trigger={<button className="btns" > Open Modal </button>} modal>
      <span>
        <div className="login-box">
        <form className="contact-form" onSubmit={sendEmail}>
          <div className="user-box">
          <input type="hidden" name="contact_number" />
          <label>Name</label>
          </div>
          <div className="user-box">
          <input type="text" name="user_name" />
          <label>Email</label>
          </div>
          <div className="user-box">
          <input type="email" name="user_email" />
          <label>Message</label>
          </div>
          <textarea name="message" />
          <input type="submit" value="Send" />
        </form>
        </div>
      </span>
    </Popup>
  );

  return (
    <div>
      <div className='enabled'>{enable amp;amp; <p >Mesajınız için teşekkür ederiz. En kısa zamanda geri döneceğiz.</p>}</div>
      <div className='hero-container'>

        <video src='/videos/covidvid.mp4' autoPlay loop muted />
        <h1>COVID-19 Antijen PCR Hızlı Test Kaseti</h1>
        <p></p>
        <div className='hero-btns'>
          <Button
            link="/covid-19-corona-antikor-testi-nedir"
            className='btns'
            buttonStyle='btn--outline'
            buttonSize='btn--large'
          >
            Antikor Testi Nedir?
        </Button>
          <Modal></Modal>
        </div>
      </div>
    </div>
  );
}

export default HeroSection;

 

App.css:

 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
}

p {
  font-size: 25px;
  font-family:Arial, sans-serif;
  text-indent: 30px;
  font-weight: normal;
  margin: 10px;
}
h1 {
  font-family: 'Andika New Basic';
  font-size: 30px;
  font-weight: 700;
  margin-top: 10px;
  padding-top: 10px;
}
.home,
.services,
.products,
.sign-up {
  display: flex;
  height: 90vh;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.services {
  background-image: url('/images/img-2.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 100px;
}

.products {
  background-image: url('/images/img-1.jpg');
  background-position: center;
  background-size: fill;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 100px;
}

.sign-up {
  background-image: url('/images/img-8.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 100px;
}

.nedir {
  font-family: 'Andika New Basic';
  font-weight: 700;
  margin-top: 10px;
}
.nedirpq {
  width: 100%;
  justify-content: center;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.nedirp {
  width: 500px;
  justify-content: center;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.dacontainer {
  margin-bottom: 50px;

}

.splitScreen {
  padding-top: 15px;
  display: flex;
  flex-direction: row;
}

.leftPane {
  width: 50%;
}

.rightPane {
  width: 50%;
} 


@media screen and (max-width: 992px) {
  .splitScreen {
    display: block;
  }
  .leftPane {
    width: 100%;
  }
  
  .rightPane {
    width: 100%;
  }
}