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 Я вставил весь код на фиддле.
    – Atrox
    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
  • Да правильно, только что заметил.
    – Atrox
    19 июл 2019 в 13:48

Ваш ответ

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

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