0

html {
  scroll-behavior: smooth;
}

.navbar {
  z-index: 3;
}

header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: blue;
  opacity: 0.5;
  z-index: 1;
}

form {
  z-index: 2;
  justify-content: center;
}


/*image is taken from google */

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('media/vr_bed.jpg') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}
<!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="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">

  <head>

    <!-- Navigation bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!--Butopea logo taken from the website-->
      <a class="navbar-brand" href="#"><img src="https://butopea.com/image/catalog/logo/butopea_circle.png" alt="Butopêa HU" height="40px" width="40px" style="height: 40px;width: 40px;"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse float-right" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#Signup">Become a tester</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#Details">Details</a>
          </li>
        </ul>
      </div>
    </nav>

    <body>
      <header id="Signup">

        </div>
      </header>


      <!-- Javascript libraries and frameworks -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://kit.fontawesome.com/b4b26d4271.js"></script>
      <script src="main.js"></script>

</html>

По какой-то причине навигация не открывается в мобильной версии вебсайта. Не могу понять, какие параметры мешают ему открыться?

HTML:

  <!-- Navigation bar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!--Butopea logo taken from the website-->
            <a class="navbar-brand" href="#"><img src="https://butopea.com/image/catalog/logo/butopea_circle.png" alt="Butopêa HU" height="40px" width="40px" style="height: 40px;width: 40px;"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse float-right" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#Signup">Become a tester</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Details">Details</a>
                    </li>
                </ul>
            </div>
        </nav>

        <body>
            <header id="Signup">
                <!-- Email part -->
                <form action="" id="post-data" class="justify-content-center col">
                    <div class="container form-group text-white text-center">
                        <div class="form-group">
                            <h1 class="title text-center"> <strong>New Virtual Software</strong> </br> Design Your Room </br> Your Own Way</h1>
                        </div>
                        <div>
                            <input type="email" id="email" class="form-control form-group form-control-lg text-center" placeholder="Enter your email...">
                        </div>
                        <div>
                            <button type="submit" class="btn btn-lg btn-primary form-group">Become a tester</button>
                        </div>
                    </div>
                </form>
                <div class="overlay">
                    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                        <source src="media/vr.mp4" type="video/mp4">
                    </video>
                </div>
            </header>

CSS:

html {
     scroll-behavior: smooth;
}
 .navbar{
     z-index: 3;
}
 header {
     position: relative;
     background-color: black;
     height: 75vh;
     min-height: 25rem;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
}
 header video {
     position:absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: 0;
     -ms-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
     -webkit-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
}
 header .overlay {
     position:absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-color: blue;
     opacity: 0.5;
     z-index: 1;
}
 form {
     z-index:2;
     justify-content: center;
}
/*image is taken from google */
 @media (pointer: coarse) and (hover: none) {
     header {
         background: url('media/vr_bed.jpg') black no-repeat center center scroll;
    }
     header video {
         display: none;
    }
}
2
  • 1
    Неплохо бы прикрепить пример который можно запустить, либо на fiddle, либо здесь
    – user298256
    19 июл 2019 в 10:16
  • jsfiddle.net/valimikayilov/6k24Lrx7 Я вставил весь код на фиддле.
    – Vello
    19 июл 2019 в 10:29

1 ответ 1

0

Подгрузите скрипты Bootstrap. С ними всё работает корректно.

https://jsfiddle.net/w4b2kpm5/

// when the button pressed accepts the data with proper formating
document.getElementById('post-data').addEventListener('submit', newPost)

function newPost(){
  let email = document.querySelector('#email').value;
  //convert it to a JSON script and send to the back end
  fetch('http://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ email: email }) })
  .then(response => response.json())
  .then(response => console.log(email));
}
html {
     scroll-behavior: smooth;
}
 .navbar{
     z-index: 3;
}
 header {
     position: relative;
     background-color: black;
     height: 75vh;
     min-height: 25rem;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
}
 header video {
     position:absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: 0;
     -ms-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
     -webkit-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
}
 header .overlay {
     position:absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-color: blue;
     opacity: 0.5;
     z-index: 1;
}
 form {
     z-index:2;
     justify-content: center;
}
/*image is taken from google */
 @media (pointer: coarse) and (hover: none) {
     header {
         background: url('media/vr_bed.jpg') black no-repeat center center scroll;
    }
     header video {
         display: none;
    }
}
<!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="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <head>

        <!-- Navigation bar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!--Butopea logo taken from the website-->
            <a class="navbar-brand" href="#"><img src="https://butopea.com/image/catalog/logo/butopea_circle.png" alt="Butopêa HU" height="40px" width="40px" style="height: 40px;width: 40px;"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse float-right" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#Signup">Become a tester</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Details">Details</a>
                    </li>
                </ul>
            </div>
        </nav>

        <body>
            <header id="Signup">
                <!-- Email part -->
                <form action="" id="post-data" class="justify-content-center col">
                    <div class="container form-group text-white text-center">
                        <div class="form-group">
                            <h1 class="title text-center"> <strong>New Virtual Software</strong> </br> Design Your Room </br> Your Own Way</h1>
                        </div>
                        <div>
                            <input type="email" id="email" class="form-control form-group form-control-lg text-center" placeholder="Enter your email...">
                        </div>
                        <div>
                            <button type="submit" class="btn btn-lg btn-primary form-group">Become a tester</button>
                        </div>
                    </div>
                </form>
                <div class="overlay">
                    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                        <source src="media/vr.mp4" type="video/mp4">
                    </video>
                </div>
            </header>

            <!-- Expectations part(divided with the help of columns) -->
            <section id="Details" class="page-section m-5" id="services">
                <div class="container text-dark">
                    <h2 class="text-center mt-0">What to expect</h2>
                    <hr class="divider ">
                    <div class="container">
                        <div class="row text-center">
                            <div class="col-md-4">
                                <span class="fa-stack fa-6x">
                          <i class="fa fa-square fa-stack-2x text-primary"></i>
                          <i class="fa fa-pencil-ruler fa-stack-1x fa-inverse"></i>
                      </span>
                                <h4 class="service-heading">New way of design</h4>
                                <p class="text-muted">We will show you how to design your room in a new ways</p>
                            </div>
                            <div class="col-md-4">
                                <span class="fa-stack fa-6x">
                          <i class="fa fa-square fa-stack-2x text-primary"></i>
                          <i class="fa fa-building fa-stack-1x fa-inverse"></i>
                      </span>
                                <h4 class="service-heading">Better Design</h4>
                                <p class="text-muted"> With the help of VR you will look like no other room</p>
                            </div>
                            <div class="col-md-4">
                                <span class="fa-stack fa-6x">
                          <i class="fa fa-square fa-stack-2x text-primary"></i>
                          <i class="fa fa-star fa-stack-1x fa-inverse"></i>
                      </span>
                                <h4 class="service-heading">Be first to try it!</h4>
                                <p class="text-muted">This is not available anywere else</p>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                </div>
            </section>
        </body>

        <!-- Javascript libraries and frameworks -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/b4b26d4271.js"></script>
        <script src="main.js"></script>

</html>

1
  • Да правильно, только что заметил.
    – Vello
    19 июл 2019 в 13:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.