javascript - Bootstrap 导航栏切换按钮不起作用

Question

当我缩小页面时按钮出现了，但是当我点击它时没有任何反应。我试图改变 div 的结构，在行和列中，但仍然没有，我认为缺少一些东西。我什至尝试复制和直接从 Bootstrap 示例粘贴。我也尝试了这个解决方案:https://stackoverflow.com/a/49629348/9603817

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url('https://fonts.google.com/?selection.family=Roboto:400,500,700,900');
/* --- General Style --> */

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Segoe UI', 'Poppins', sans-serif;
  background: #fff;
  color: #666666;
}

a {
  color: #5fcf80;
}

a:hover,
a:active,
a:focus {
  color: #5fcf80;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 30px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
}

/* --- Navbar --> */

#header {
  padding: 30px 0;
  height: 92px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
}

#header #logo {
  float: left;
}

#header #logo img {
  padding: 0;
  margin: 0;
}

/* --- Login Button --> */

.container #nav-menu-container .btn-get-started {
  font-family: "Segoe UI", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 7px 24px;
  border-radius: 50px;
  transition: 0.5s;
  margin: -20px 0px 5px;
  border: 2px solid #5fcf80;
  color: #fff;
}

.container #nav-menu-container .btn-get-started:hover {
  background-color: #5fcf80;
}

.container #nav-menu-container .btn-get-started:hover:before {
  visibility: hidden;
}

/* --- jQuery Fixed Nav --> */

#header.header-fixed {
  background: rgba(52, 59, 64, 0.9);
  padding: 20px 0;
  height: 72px;
  transition: all 0.5s;
}

.nav-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.nav-menu li {
  float: left;
  position: relative;
  white-space: nowrap;
}

.nav-menu ul {
  top: 0;
  left: 100%;
}

#nav-menu-container {
  float: right;
  margin: 0;
}

.sandwich {
  font-family: "Segoe UI", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 25px;
  transition: 0.5s;
  margin: 5px;
  background: black;
  opacity: 1;
  border: 1px solid black;
  display: none;
}

.sandwich:hover {
  font-family: "Segoe UI", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline;
  padding: 10px 15px;
  border-radius: 25px;
  transition: 0.5s;
  margin: 5px;
  background: #5fcf80;
  opacity: 1;
  border: 2px solid black;
}

.fa-bars {
  color: #fff;
}

/* --- Navbar Styling --> */

.nav-menu a {
  padding: 0 8px 10px 8px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Segoe UI", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 15px;
  outline: none;
}

.nav-menu>li {
  margin-left: 20px;
}

.nav-menu>li>a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #5fcf80;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.nav-menu a:hover:before,
.nav-menu li:hover>a:before,
.nav-menu .menu-active>a:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* --- Carousel --> */

#carousel {
  display: table;
  width: 100%;
  height: 100vh;
  background: url(../img/dandelion1.jpg) top center fixed;
  background-size: cover;
}

#carousel .carousel-container {
  background: rgba(0, 0, 0, 0.6);
  display: table-cell;
  margin: 0;
  padding: 0 10px;
  text-align: center;
  vertical-align: middle;
}

#carousel h1 {
  text-transform: uppercase;
  color: #fff;
}

#carousel h2 {
  color: #eee;
  margin-bottom: 50px;
  font-size: 24px;
}

#carousel .btn-get-started {
  font-family: "Segoe UI", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #5fcf80;
  color: #fff;
}

#carousel .btn-get-started:hover {
  background: #5fcf80;
  border: 2px solid #5fcf80;
}

/* --- Jumbotron --> */

.jumbotron {
  padding: 1rem;
  border-radius: 0;
}

.padding {
  padding-bottom: 2rem;
}

.welcome {
  width: 75%;
  margin: 0 auto;
  padding-top: 2rem;
}

.welcome hr {
  border-top: 2px solid #5fcf80;
  width: 95%;
  margin-top: .3rem;
  margin-bottom: 1rem;
}

.fa-allergies,
.fa-user-md,
.fa-heart {
  color: #5fcf80;
  font-size: 8em;
  padding-bottom: 2rem;
  margin: 1rem;
}

/* --- Social Media Links --> */

.social a {
  font-size: 4.5em;
  padding: 3rem;
}

.fa-facebook {
  color: #3b5998;
}

.fa-twitter {
  color: #00aced;
}

.fa-google-plus-g {
  color: #dd4b39;
}

.fa-youtube {
  color: #bb0000;
}

.fa-facebook:hover,
.fa-twitter:hover,
.fa-google-plus-g:hover,
.fa-youtube:hover {
  color: #5fcf80;
}

/* --- Contact Us --> */

#contact {
  background: #f7f7f7;
  padding: 80px 0 40px 0;
}

#contact .info p {
  padding: 0 0 10px 30px;
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 14px;
  display: inline-block;
}

#contact .form #sendmessage {
  color: #5fcf80;
  border: 1px solid #5fcf80;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #sendmessage.show,
#contact .form #errormessage.show,
#contact .form .show {
  display: block;
}

#contact .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

#contact .form button[type="submit"] {
  font-family: "Segoe UI", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  color: #fff;
  background: #5fcf80;
  border: 2px solid #fff;
}

#contact .fa-map-marker,
.fa-envelope,
.fa-phone {
  font-size: 2em;
  color: #5fcf80;
}

/*---Footer -->*/

#footer {
  background: #485859;
  padding: 30px 0;
  color: #fff;
  font-size: 14px;
}

#footer .copyright {
  text-align: center;
}

#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #ccc;
}

/*---Media Queries -->*/

@media (max-width: 992px) {
  .social a {
    font-size: 4em;
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  #header #logo img {
    max-height: 40px;
  }
  #nav-menu-container {
    display: none;
  }
  #carousel h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #carousel h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
  .carousel-caption {
    top: 45%;
  }
  .carousel-caption h1 {
    font-size: 350%;
  }
  .carousel-caption h3 {
    font-size: 140%;
    font-weight: 400;
    padding-bottom: .2rem;
  }
  .carousel-caption .btn {
    font-size: 95%;
    padding: 8px 14px;
  }
  .display-4 {
    font-size: 200%;
  }
  .social a {
    font-size: 2.5em;
    padding: 1.2rem;
  }
  .sandwich {
    display: inline-block;
  }
}

@media (max-width: 576px) {
  .carousel-caption {
    top: 40%;
  }
  .carousel-caption h1 {
    font-size: 250%;
  }
  .carousel-caption h3 {
    font-size: 110%;
  }
  .carousel-caption .btn {
    font-size: 90%;
    padding: 4px 8px;
  }
  .carousel-indicators {
    display: none;
  }
  .display-4 {
    font-size: 160%;
  }
  .social a {
    font-size: 2em;
    padding: .7rem;
  }
}

/*---Firefox Bug Fix -->*/

.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/*--- Fixed Background Image -->*/

figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0 !important;
}

.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/*--- Bootstrap Padding Fix -->*/

[class*="col-"] {
  padding: 1rem;
}

#logo {
  width: 10rem;
  height: 3.4rem;
}

.footer-allergyhelp img {
  width: 10rem;
}

/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
  <!-- CSS -->
  <link href="assets/css/style.css" rel="stylesheet" />
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">

  <title>AllergyHelp</title>
</head>

<body>

  <!-- Navigation -->
  <header id="header">
    <div class="container">

      <div id="logo">
        <a href="./index.html">
          <img src="./assets/img/logo-mic.png">
        </a>
      </div>


      <nav id="nav-menu-container">
        <ul class="nav-menu">
          <li class="menu-active">
            <a href="#">Acasă</a>
          </li>
          <li>
            <a href="#">Despre noi</a>
          </li>
          <li>
            <a href="#">Servicii</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
          <li>
            <a href="#">Echipa</a>
          </li>

          <li>
            <a href="#" class="btn-get-started">Login</a>
          </li>
        </ul>
      </nav>
      <button class="btn-primary navbar-toggle float-right sandwich" data-toggle="collapse" data-target="#nav-menu-container">
        <i class="fas fa-bars"></i>
      </button>
    </div>
  </header>

  <!-- Carousel V2 -->
  <section id="carousel">
    <div class="carousel-container">
      <h1 class="display-2">AllergyHelp</h1>
      <h2>Protejează-te împotriva alergiilor</h2>
      <a href="#" class="btn-get-started">Inscrie-te acum</a>
    </div>
  </section>

  <!--- Jumbotron -->
  <div class="container-fluid">
    <div class="row jumbotron">
      <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
        <p class="lead">Bacon ipsum dolor amet boudin pig andouille, buffalo jowl cow venison pork loin frankfurter. Short loin turducken
          buffalo boudin beef rump ball tip. Pastrami kielbasa pork buffalo swine drumstick. Biltong pancetta chuck ribeye.
          Porchetta beef hamburger jerky ground round fatback ham hock pig biltong corned beef swine rump bacon beef ribs
          ball tip.
        </p>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
        <a href="#">
          <button type="button" class="btn btn-outline-secondary btn-lg">Buton</button>
        </a>
      </div>
    </div>
  </div>

  <!--- Welcome Section -->
  <div class="container-fluid padding">
    <div class="row welcome text-center">
      <div class="col-12">
        <h1 class="display-4">Text frumos</h1>
      </div>
      <hr>
      <div class="col-12">
        <p class="lead">Bacon ipsum dolor amet meatball boudin ground round strip steak tri-tip rump bresaola meatloaf meatball boudin ground
          round strip steak tri-tip rump bresaola meatloaf turkey doner shank.
        </p>
      </div>
    </div>
  </div>

  <!--- 3 Column Section -->
  <div class="container-fluid padding">
    <div class="row text-center padding">
      <div class="col-xs-12 col-sm-6 col-md-4">
        <i class="fas fa-allergies"></i>
        <h3>Alergie</h3>
        <p>Bacon ipsum dolor amet meatball</p>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-4">
        <i class="fas fa-user-md"></i>
        <h3>Tratamente</h3>
        <p>Bacon ipsum dolor amet meatball</p>
      </div>


      <div class="col-sm-12 col-md-4">
        <i class="fas fa-heart"></i>
        <h3>Care
          <3</h3>
            <p>Bacon ipsum dolor amet meatball</p>
      </div>
    </div>
    <hr class="my-4">
  </div>

  <!--- 2 Column Section -->
  <div class="container-fluid padding">
    <div class="row padding">
      <div class="col-md-12 col-lg-6">
        <h2>Text mare</h2>
        <p>Corned beef frankfurter tenderloin beef ribs beef. Cow buffalo alcatra jowl drumstick biltong meatball bresaola shank
          spare ribs strip steak turkey.</p>

        <p>Meatloaf salami filet mignon brisket pork belly flank kielbasa. Shoulder chuck hamburger, cupim cow bacon kielbasa
          t-bone chicken shankle.</p>
        <br>
        <a href="#" class="btn btn-primary">Detalii</a>
      </div>
      <div class="col-lg-6">
        <img src="assets/img/placeholder3.png" class="img-fluid">
      </div>
    </div>
  </div>
  <hr class="my-4">

  <!--- Cards Title -->
  <div class="container-fluid padding">
    <div class="row welcome text-center">
      <div class="col-12">
        <h1 class="display-4">Diverse Alergii</h1>
      </div>
    </div>
  </div>

  <!--- Cards Section -->
  <div class="container-fluid padding">
    <div class="row padding">
      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="assets/img/placeholder1.png">
          <div class="card-body">
            <h4 class="card-title">Alergie 1</h4>
            <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
            <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="assets/img/placeholder2.png">
          <div class="card-body">
            <h4 class="card-title">Alergie 2</h4>
            <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
            <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="assets/img/placeholder3.png">
          <div class="card-body">
            <h4 class="card-title">Alergie 3</h4>
            <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
            <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="assets/img/placeholder3.png">
          <div class="card-body">
            <h4 class="card-title">Alergie 4</h4>
            <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
            <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="assets/img/placeholder2.png">
          <div class="card-body">
            <h4 class="card-title">Alergie 5</h4>
            <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
            <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="assets/img/placeholder1.png">
          <div class="card-body">
            <h4 class="card-title">Alergie 6</h4>
            <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
            <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!--- 2 Column Section -->
  <div class="container-fluid padding">
    <div class="row padding">
      <div class="col-md-12 col-lg-6">
        <h2>Text mare</h2>
        <p>Corned beef frankfurter tenderloin beef ribs beef. Cow buffalo alcatra jowl drumstick biltong meatball bresaola shank
          spare ribs strip steak turkey.</p>

        <p>Meatloaf salami filet mignon brisket pork belly flank kielbasa. Shoulder chuck hamburger, cupim cow bacon kielbasa
          t-bone chicken shankle.</p>
        <br>
      </div>
      <div class="col-lg-6">
        <img src="assets/img/placeholder3.png" class="img-fluid">
      </div>
    </div>
  </div>

  <!--- Social Media -->

  <section id="contact">

    <div class="social-links">
      <div class="container-fluid padding">
        <div class="row text-center padding">
          <div class="col-12">
            <h1>Contactează-ne</h1>
          </div>
          <div class="col-12 social padding">
            <a href="#">
              <i class="fab fa-facebook"></i>
            </a>
            <a href="#">
              <i class="fab fa-twitter"></i>
            </a>
            <a href="#">
              <i class="fab fa-google-plus-g"></i>
            </a>
            <a href="#">
              <i class="fab fa-youtube"></i>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!--- Contact Us -->
    <div class="container">
      <div class="row justify-content-center">

        <div class="col-lg-3 col-md-4">

          <div class="info">
            <div>
              <i class="fas fa-map-marker"></i>
              <p>Str. Străzilor, Iași, România</p>
            </div>

            <div>
              <i class="fas fa-envelope"></i>
              <p>discodeteam@gmail.com</p>
            </div>

            <div>
              <i class="fas fa-phone"></i>
              <p>+40 723 456 789</p>
            </div>
          </div>

        </div>

        <div class="col-lg-5 col-md-8">
          <div class="form">
            <div id="sendmessage">Vă mulțumim pentru feedback!</div>
            <div id="errormessage"></div>
            <form action="" method="post" role="form" class="contactForm">
              <div class="form-group">
                <input type="text" name="name" class="form-control" id="name" placeholder="Nume" data-rule="minlen:4" data-msg="Va rugam introduceti minim 4 caractere"
                />
                <div class="validation"></div>
              </div>
              <div class="form-group">
                <input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Va rugam introduceti un email valid."
                />
                <div class="validation"></div>
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="subject" id="subject" placeholder="Titlu" data-rule="minlen:4" data-msg="Va rugam introduceti minim 4 caractere"
                />
                <div class="validation"></div>
              </div>
              <div class="form-group">
                <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Va rugam sa completati acest camp"
                  placeholder="Mesaj"></textarea>
                <div class="validation"></div>
              </div>
              <div class="text-center">
                <button type="submit">Trimite</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--- Footer -->
  <footer id="footer">
    <div class="footer-top">
      <div class="container"></div>
    </div>

    <div class="container">
      <div class="copyright">
        &copy; Copyright
        <strong>AllergyHelp</strong>. All Rights Reserved
      </div>
      <div class="credits">
        Aplicație realizată de
        <a href="#">Discode Team</a>
      </div>
    </div>
  </footer>

  <!-- Scripts -->

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <!-- Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <!-- JavaScript -->
  <script src="./assets/js/main.js"></script>
</body>

</html>

Answer 1

您没有为导航栏 check docs here 使用 Bootstrap 类

    @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
    @import url('https://fonts.google.com/?selection.family=Roboto:400,500,700,900');
    /* --- General Style --> */

    html,
    body {
      height: 100%;
      width: 100%;
      font-family: 'Segoe UI', 'Poppins', sans-serif;
      background: #fff;
      color: #666666;
    }

    a {
      color: #5fcf80;
    }

    a:hover,
    a:active,
    a:focus {
      color: #5fcf80;
      outline: none;
      text-decoration: none;
    }

    p {
      padding: 0;
      margin: 0 0 30px 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Segoe UI', sans-serif;
      font-weight: 400;
      margin: 0 0 20px 0;
      padding: 0;
    }

    /* --- Navbar --> */

    #header {
      padding: 30px 0;
      height: 92px;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      transition: all 0.5s;
      z-index: 997;
    }

    #header #logo {
      float: left;
    }

    #header #logo img {
      padding: 0;
      margin: 0;
    }

    /* --- Login Button --> */

    .container #nav-menu-container .btn-get-started {
      font-family: "Segoe UI", sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 1px;
      display: inline-block;
      padding: 7px 24px;
      border-radius: 50px;
      transition: 0.5s;
      margin: -20px 0px 5px;
      border: 2px solid #5fcf80;
      color: #fff;
    }

    .container #nav-menu-container .btn-get-started:hover {
      background-color: #5fcf80;
    }

    .container #nav-menu-container .btn-get-started:hover:before {
      visibility: hidden;
    }

    /* --- jQuery Fixed Nav --> */

    #header.header-fixed {
      background: rgba(52, 59, 64, 0.9);
      padding: 20px 0;
      height: 72px;
      transition: all 0.5s;
    }

    .nav-menu {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .nav-menu ul {
      position: absolute;
      display: none;
      top: 100%;
      left: 0;
      z-index: 99;
    }

    .nav-menu li {
      float: left;
      position: relative;
      white-space: nowrap;
    }

    .nav-menu ul {
      top: 0;
      left: 100%;
    }

    #nav-menu-container {
      float: right;
      margin: 0;
    }

    .sandwich {
      font-family: "Segoe UI", sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 1px;
      display: inline-block;
      padding: 10px 15px;
      border-radius: 25px;
      transition: 0.5s;
      margin: 5px;
      background: black;
      opacity: 1;
      border: 1px solid black;
      display: none;
    }

    .sandwich:hover {
      font-family: "Segoe UI", sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 1px;
      display: inline;
      padding: 10px 15px;
      border-radius: 25px;
      transition: 0.5s;
      margin: 5px;
      background: #5fcf80;
      opacity: 1;
      border: 2px solid black;
    }

    .fa-bars {
      color: #fff;
    }

    /* --- Navbar Styling --> */

    .nav-menu a {
      padding: 0 8px 10px 8px;
      text-decoration: none;
      display: inline-block;
      color: #fff;
      font-family: "Segoe UI", sans-serif;
      font-weight: 300;
      text-transform: uppercase;
      font-size: 15px;
      outline: none;
    }

    .nav-menu>li {
      margin-left: 20px;
    }

    .nav-menu>li>a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #5fcf80;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

    .nav-menu a:hover:before,
    .nav-menu li:hover>a:before,
    .nav-menu .menu-active>a:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
.navbar-collapse{
  background:#fff
}
    /* --- Carousel --> */

    #carousel {
      display: table;
      width: 100%;
      height: 100vh;
      background: url(../img/dandelion1.jpg) top center fixed;
      background-size: cover;
    }

    #carousel .carousel-container {
      background: rgba(0, 0, 0, 0.6);
      display: table-cell;
      margin: 0;
      padding: 0 10px;
      text-align: center;
      vertical-align: middle;
    }

    #carousel h1 {
      text-transform: uppercase;
      color: #fff;
    }

    #carousel h2 {
      color: #eee;
      margin-bottom: 50px;
      font-size: 24px;
    }

    #carousel .btn-get-started {
      font-family: "Segoe UI", sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 1px;
      display: inline-block;
      padding: 8px 28px;
      border-radius: 50px;
      transition: 0.5s;
      margin: 10px;
      border: 2px solid #5fcf80;
      color: #fff;
    }

    #carousel .btn-get-started:hover {
      background: #5fcf80;
      border: 2px solid #5fcf80;
    }

    /* --- Jumbotron --> */

    .jumbotron {
      padding: 1rem;
      border-radius: 0;
    }

    .padding {
      padding-bottom: 2rem;
    }

    .welcome {
      width: 75%;
      margin: 0 auto;
      padding-top: 2rem;
    }

    .welcome hr {
      border-top: 2px solid #5fcf80;
      width: 95%;
      margin-top: .3rem;
      margin-bottom: 1rem;
    }

    .fa-allergies,
    .fa-user-md,
    .fa-heart {
      color: #5fcf80;
      font-size: 8em;
      padding-bottom: 2rem;
      margin: 1rem;
    }

    /* --- Social Media Links --> */

    .social a {
      font-size: 4.5em;
      padding: 3rem;
    }

    .fa-facebook {
      color: #3b5998;
    }

    .fa-twitter {
      color: #00aced;
    }

    .fa-google-plus-g {
      color: #dd4b39;
    }

    .fa-youtube {
      color: #bb0000;
    }

    .fa-facebook:hover,
    .fa-twitter:hover,
    .fa-google-plus-g:hover,
    .fa-youtube:hover {
      color: #5fcf80;
    }

    /* --- Contact Us --> */

    #contact {
      background: #f7f7f7;
      padding: 80px 0 40px 0;
    }

    #contact .info p {
      padding: 0 0 10px 30px;
      margin-bottom: 20px;
      line-height: 22px;
      font-size: 14px;
      display: inline-block;
    }

    #contact .form #sendmessage {
      color: #5fcf80;
      border: 1px solid #5fcf80;
      display: none;
      text-align: center;
      padding: 15px;
      font-weight: 600;
      margin-bottom: 15px;
    }

    #contact .form #errormessage {
      color: red;
      display: none;
      border: 1px solid red;
      text-align: center;
      padding: 15px;
      font-weight: 600;
      margin-bottom: 15px;
    }

    #contact .form #sendmessage.show,
    #contact .form #errormessage.show,
    #contact .form .show {
      display: block;
    }

    #contact .form .validation {
      color: red;
      display: none;
      margin: 0 0 20px;
      font-weight: 400;
      font-size: 13px;
    }

    #contact .form button[type="submit"] {
      font-family: "Segoe UI", sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 1px;
      display: inline-block;
      padding: 8px 28px;
      border-radius: 50px;
      transition: 0.5s;
      margin: 10px;
      color: #fff;
      background: #5fcf80;
      border: 2px solid #fff;
    }

    #contact .fa-map-marker,
    .fa-envelope,
    .fa-phone {
      font-size: 2em;
      color: #5fcf80;
    }

    /*---Footer -->*/

    #footer {
      background: #485859;
      padding: 30px 0;
      color: #fff;
      font-size: 14px;
    }

    #footer .copyright {
      text-align: center;
    }

    #footer .credits {
      padding-top: 10px;
      text-align: center;
      font-size: 13px;
      color: #ccc;
    }

    /*---Media Queries -->*/

    @media (max-width: 992px) {
      .social a {
        font-size: 4em;
        padding: 2rem;
      }
    }

    @media (max-width: 768px) {
      #header #logo img {
        max-height: 40px;
      }
      #nav-menu-container {
        display: none;
      }
      #carousel h1 {
        font-size: 28px;
        line-height: 36px;
      }
      #carousel h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
      }
      .carousel-caption {
        top: 45%;
      }
      .carousel-caption h1 {
        font-size: 350%;
      }
      .carousel-caption h3 {
        font-size: 140%;
        font-weight: 400;
        padding-bottom: .2rem;
      }
      .carousel-caption .btn {
        font-size: 95%;
        padding: 8px 14px;
      }
      .display-4 {
        font-size: 200%;
      }
      .social a {
        font-size: 2.5em;
        padding: 1.2rem;
      }
      .sandwich {
        display: inline-block;
      }
    }

    @media (max-width: 576px) {
      .carousel-caption {
        top: 40%;
      }
      .carousel-caption h1 {
        font-size: 250%;
      }
      .carousel-caption h3 {
        font-size: 110%;
      }
      .carousel-caption .btn {
        font-size: 90%;
        padding: 4px 8px;
      }
      .carousel-indicators {
        display: none;
      }
      .display-4 {
        font-size: 160%;
      }
      .social a {
        font-size: 2em;
        padding: .7rem;
      }
    }

    /*---Firefox Bug Fix -->*/

    .carousel-item {
      transition: -webkit-transform 0.5s ease;
      transition: transform 0.5s ease;
      transition: transform 0.5s ease, -webkit-transform 0.5s ease;
      -webkit-backface-visibility: visible;
      backface-visibility: visible;
    }

    /*--- Fixed Background Image -->*/

    figure {
      position: relative;
      width: 100%;
      height: 60%;
      margin: 0 !important;
    }

    .fixed-wrap {
      clip: rect(0, auto, auto, 0);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    #fixed {
      background-image: url('img/mac.png');
      position: fixed;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      will-change: transform;
    }

    /*--- Bootstrap Padding Fix -->*/

    [class*="col-"] {
      padding: 1rem;
    }

    #logo {
      width: 10rem;
      height: 3.4rem;
    }

    .footer-allergyhelp img {
      width: 10rem;
    }

    /*
    Extra small (xs) devices (portrait phones, less than 576px)
    No media query since this is the default in Bootstrap

    Small (sm) devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    Medium (md) devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    Large (lg) devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    Extra (xl) large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    */

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Bootstrap -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
      <!-- CSS -->
      <link href="assets/css/style.css" rel="stylesheet" />
      <!-- Fonts -->
      <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">

      <title>AllergyHelp</title>
    </head>

    <body>

      <!-- Navigation -->
      <header id="header">
        <div class="container">

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="#"> <img src="./assets/img/logo-mic.png"></a>
  <button class="btn-primary navbar-toggle float-right sandwich" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-bars"></i>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
         <a class="nav-link" href="#">Acasă</a>
      </li>
      <li>
        <a class="nav-link" href="#">Despre noi</a>
      </li>
      <li>
        <a class="nav-link" href="#">Servicii</a>
      </li>
      <li>
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li>
        <a class="nav-link" href="#">Echipa</a>
      </li>

      <li>
        <a class="nav-link" href="#" class="btn-get-started">Login</a>
      </li>  
    </ul>

  </div>
</nav>

        </div>
      </header>

      <!-- Carousel V2 -->
      <section id="carousel">
        <div class="carousel-container">
          <h1 class="display-2">AllergyHelp</h1>
          <h2>Protejează-te împotriva alergiilor</h2>
          <a href="#" class="btn-get-started">Inscrie-te acum</a>
        </div>
      </section>

      <!--- Jumbotron -->
      <div class="container-fluid">
        <div class="row jumbotron">
          <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
            <p class="lead">Bacon ipsum dolor amet boudin pig andouille, buffalo jowl cow venison pork loin frankfurter. Short loin turducken
              buffalo boudin beef rump ball tip. Pastrami kielbasa pork buffalo swine drumstick. Biltong pancetta chuck ribeye.
              Porchetta beef hamburger jerky ground round fatback ham hock pig biltong corned beef swine rump bacon beef ribs
              ball tip.
            </p>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
            <a href="#">
              <button type="button" class="btn btn-outline-secondary btn-lg">Buton</button>
            </a>
          </div>
        </div>
      </div>

      <!--- Welcome Section -->
      <div class="container-fluid padding">
        <div class="row welcome text-center">
          <div class="col-12">
            <h1 class="display-4">Text frumos</h1>
          </div>
          <hr>
          <div class="col-12">
            <p class="lead">Bacon ipsum dolor amet meatball boudin ground round strip steak tri-tip rump bresaola meatloaf meatball boudin ground
              round strip steak tri-tip rump bresaola meatloaf turkey doner shank.
            </p>
          </div>
        </div>
      </div>

      <!--- 3 Column Section -->
      <div class="container-fluid padding">
        <div class="row text-center padding">
          <div class="col-xs-12 col-sm-6 col-md-4">
            <i class="fas fa-allergies"></i>
            <h3>Alergie</h3>
            <p>Bacon ipsum dolor amet meatball</p>
          </div>

          <div class="col-xs-12 col-sm-6 col-md-4">
            <i class="fas fa-user-md"></i>
            <h3>Tratamente</h3>
            <p>Bacon ipsum dolor amet meatball</p>
          </div>


          <div class="col-sm-12 col-md-4">
            <i class="fas fa-heart"></i>
            <h3>Care
              <3</h3>
                <p>Bacon ipsum dolor amet meatball</p>
          </div>
        </div>
        <hr class="my-4">
      </div>

      <!--- 2 Column Section -->
      <div class="container-fluid padding">
        <div class="row padding">
          <div class="col-md-12 col-lg-6">
            <h2>Text mare</h2>
            <p>Corned beef frankfurter tenderloin beef ribs beef. Cow buffalo alcatra jowl drumstick biltong meatball bresaola shank
              spare ribs strip steak turkey.</p>

            <p>Meatloaf salami filet mignon brisket pork belly flank kielbasa. Shoulder chuck hamburger, cupim cow bacon kielbasa
              t-bone chicken shankle.</p>
            <br>
            <a href="#" class="btn btn-primary">Detalii</a>
          </div>
          <div class="col-lg-6">
            <img src="assets/img/placeholder3.png" class="img-fluid">
          </div>
        </div>
      </div>
      <hr class="my-4">

      <!--- Cards Title -->
      <div class="container-fluid padding">
        <div class="row welcome text-center">
          <div class="col-12">
            <h1 class="display-4">Diverse Alergii</h1>
          </div>
        </div>
      </div>

      <!--- Cards Section -->
      <div class="container-fluid padding">
        <div class="row padding">
          <div class="col-md-4">
            <div class="card">
              <img class="card-img-top" src="assets/img/placeholder1.png">
              <div class="card-body">
                <h4 class="card-title">Alergie 1</h4>
                <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
                <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card">
              <img class="card-img-top" src="assets/img/placeholder2.png">
              <div class="card-body">
                <h4 class="card-title">Alergie 2</h4>
                <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
                <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card">
              <img class="card-img-top" src="assets/img/placeholder3.png">
              <div class="card-body">
                <h4 class="card-title">Alergie 3</h4>
                <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
                <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card">
              <img class="card-img-top" src="assets/img/placeholder3.png">
              <div class="card-body">
                <h4 class="card-title">Alergie 4</h4>
                <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
                <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card">
              <img class="card-img-top" src="assets/img/placeholder2.png">
              <div class="card-body">
                <h4 class="card-title">Alergie 5</h4>
                <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
                <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card">
              <img class="card-img-top" src="assets/img/placeholder1.png">
              <div class="card-body">
                <h4 class="card-title">Alergie 6</h4>
                <p class="card-text">Detalii alergie foarte periculoasă și dureroasă</p>
                <a href="#" class="btn btn-outline-secondary">Vezi Detalii</a>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!--- 2 Column Section -->
      <div class="container-fluid padding">
        <div class="row padding">
          <div class="col-md-12 col-lg-6">
            <h2>Text mare</h2>
            <p>Corned beef frankfurter tenderloin beef ribs beef. Cow buffalo alcatra jowl drumstick biltong meatball bresaola shank
              spare ribs strip steak turkey.</p>

            <p>Meatloaf salami filet mignon brisket pork belly flank kielbasa. Shoulder chuck hamburger, cupim cow bacon kielbasa
              t-bone chicken shankle.</p>
            <br>
          </div>
          <div class="col-lg-6">
            <img src="assets/img/placeholder3.png" class="img-fluid">
          </div>
        </div>
      </div>

      <!--- Social Media -->

      <section id="contact">

        <div class="social-links">
          <div class="container-fluid padding">
            <div class="row text-center padding">
              <div class="col-12">
                <h1>Contactează-ne</h1>
              </div>
              <div class="col-12 social padding">
                <a href="#">
                  <i class="fab fa-facebook"></i>
                </a>
                <a href="#">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#">
                  <i class="fab fa-google-plus-g"></i>
                </a>
                <a href="#">
                  <i class="fab fa-youtube"></i>
                </a>
              </div>
            </div>
          </div>
        </div>

        <!--- Contact Us -->
        <div class="container">
          <div class="row justify-content-center">

            <div class="col-lg-3 col-md-4">

              <div class="info">
                <div>
                  <i class="fas fa-map-marker"></i>
                  <p>Str. Străzilor, Iași, România</p>
                </div>

                <div>
                  <i class="fas fa-envelope"></i>
                  <p>discodeteam@gmail.com</p>
                </div>

                <div>
                  <i class="fas fa-phone"></i>
                  <p>+40 723 456 789</p>
                </div>
              </div>

            </div>

            <div class="col-lg-5 col-md-8">
              <div class="form">
                <div id="sendmessage">Vă mulțumim pentru feedback!</div>
                <div id="errormessage"></div>
                <form action="" method="post" role="form" class="contactForm">
                  <div class="form-group">
                    <input type="text" name="name" class="form-control" id="name" placeholder="Nume" data-rule="minlen:4" data-msg="Va rugam introduceti minim 4 caractere"
                    />
                    <div class="validation"></div>
                  </div>
                  <div class="form-group">
                    <input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Va rugam introduceti un email valid."
                    />
                    <div class="validation"></div>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" name="subject" id="subject" placeholder="Titlu" data-rule="minlen:4" data-msg="Va rugam introduceti minim 4 caractere"
                    />
                    <div class="validation"></div>
                  </div>
                  <div class="form-group">
                    <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Va rugam sa completati acest camp"
                      placeholder="Mesaj"></textarea>
                    <div class="validation"></div>
                  </div>
                  <div class="text-center">
                    <button type="submit">Trimite</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--- Footer -->
      <footer id="footer">
        <div class="footer-top">
          <div class="container"></div>
        </div>

        <div class="container">
          <div class="copyright">
            &copy; Copyright
            <strong>AllergyHelp</strong>. All Rights Reserved
          </div>
          <div class="credits">
            Aplicație realizată de
            <a href="#">Discode Team</a>
          </div>
        </div>
      </footer>

      <!-- Scripts -->

      <!-- jQuery -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <!-- Popper.js -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <!-- Bootstrap JS -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
      <!-- JavaScript -->
      <script src="./assets/js/main.js"></script>
    </body>

    </html>