2

To get a sticky navbar I used the Bootstrap 4 class sticky-top. I prefer the css solution instead of some JS, because that made some errors in the past.

I want to have my navbar in a transparent color when the user reaches it. (The moment my navbar gets sticky - that works). Before that it should have a random color. (That does not work - The grey background emerges from the transparent background of the sticky-top class).

I have not found a good solution to get this yet. I have tried to add a new class via JS, but that did not work.

Codepen example

/* Open tabs */
function openTab(evt, parameter) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(parameter).style.display = "block";
  evt.currentTarget.className += " active";
}
/* Open tabs END */
/* Smooth scroll */
//Only where the class smooth-scroll is, scrolling is enabled
$(document).ready(function () {
  $('a.smooth-scroll[href*="#"]:not([href="#three"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      //Comment the following line if you don't want to see the anchor in the url
      //target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
/* Smooth scroll END */
/* Global */

* {
  margin: 0px;
  padding: 0px;
  font-family: Roboto,
}

.separator {
  height: 50px;
  background-color: black;
}

/* Global END */

/* Big Carousel */

.big-carousel .carousel-item {
  /* viewport height */
  height: 375px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.big-carousel .carousel-inner {
  height: 375px;
}

.big-carousel .carousel-caption {
  margin-bottom: 110px;
}

.big-carousel .carousel-caption a {
  border: none;
  background-color: rgba(255, 0, 77);
  color: white;
  padding: 20px;
  border-radius: 1px;
}

.big-carousel .carousel-caption a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black;
}

.big-carousel .carousel-indicators i {
  font-size: 40px;
  color: white;
  margin-bottom: 100px;
}

/* Big Carousel END */

/* Navigation */

.navbar {
  background-color: #020202;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 1 !important;
}

.sticky-top {
  background-color: rgba(0, 0, 0, 0.8);
}

.navbar-brand {
  /*padding-left: 60px;*/
}

.navbar a {
  color: #b6b9c1 !important;
}

.nav-social {
  padding-right: 10px;
}

.nav-social i {
  color: white;
}

.navbar .hvr-underline-from-center::before {
  background: white;
  height: 2px;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none;
  border: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none;
}

.cta-nav {
  margin-top: 8px;
  margin-bottom: 5px;
  margin-left: 25px;
}

.cta-nav a {
  background-color: rgba(255, 0, 77);
  color: white !important;
  padding: 10px;
  border-radius: 1px;
}

.cta-nav a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black !important;
}

@media (min-width: 1px) and (max-width: 576px) {
  .navbar-brand {
    padding-left: 7.5px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .navbar-brand {
    padding-left: 15px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .navbar-brand {
    padding-left: 25px;
  }
  .nav-social {
    padding-right: 20px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .navbar-brand {
    padding-left: 50px;
  }
  .nav-social {
    padding-right: 30px;
  }
}

@media (min-width: 1201px) and (max-width: 9999px) {
  .navbar-brand {
    padding-left: 70px;
  }
  .nav-social {
    padding-right: 50px;
  }
}

/* Navigation END */

/* Tab content */

.tabcontent {
  display: none;
  color: black;
  padding-top: 40px;
  padding-bottom: 50px;
}

.tabcontent h1 {
  text-align: center;
  margin-bottom: 15px;
}

.tabcontent h2,
h3,
h4 {
  text-align: center;
}

.tabcontent a {
  text-decoration: none;
  color: #719DE3;
  padding-bottom: 2px;
}

.tabcontent p {
  color: #121212;
}

.tabcontent {
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Tab content END */

/* Start Section 1 */

.start-section {
  height: 100%;
  background: #DAD299;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-attachment: fixed;
}

/* XX1 */

/* XX1 END*/

/* XX2 */

/* XX2 */

/* XX3 */

/* XX3 END */

/* Start Section END */
<!DOCTYPE html>
<html>
<!-- Meta head -->

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/all-css.css">
  <!-- JQuery first -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="js/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<!-- Meta head END -->

<body id="top" onload="openTab(event, 't1');">
  <!-- Big Carousel -->
  <div class="big-carousel">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->
        <div class="carousel-item active" style="background-image: url(images/MG_9185.jpg)">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Two - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Three - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Arrow left -->
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
      <!-- Arrow right -->
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
  </div>
  <!-- Big Carousel END -->
    <!-- Navigation -->
  <div id="nav-anker"></div>
  <nav class="navbar navbar-dark navbar-expand-md sticky-top">
    <a href="/" class="navbar-brand"><img style="width: 45px;" src=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar2">
      <ul class="navbar-nav mx-auto text-center">
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't1')"><span class="hvr-underline-from-center">Die Tour</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't2')"><span class="hvr-underline-from-center">Vorbereitung</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't3')"><span class="hvr-underline-from-center">Termine & Städte</span></a>
        </li>
        <li class="nav-item cta-nav d-none d-md-block hvr-pulse-grow">
          <a href="">Tickets</a>
        </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap nav-social">
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-facebook"></i></a> </li>
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-instagram"></i></a> </li>
        <li class="nav-item"><a class="nav-link text-whit" href="" target="_blank"><i class="fa fa-youtube"></i></a> </li>
      </ul>
    </div>
  </nav>
  <!-- Navigation -->

  <!-- Start Section -->
  <section class="start-section">
    <!-- XX1 -->
    <div id="t1" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Titel</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX1 END -->
    <!-- XX2 -->
    <div id="t2" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Was du wissen musst</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX2 END -->
    <!-- XX3 -->
    <div id="t3" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Wann</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX3 END -->
  </section>
  <!-- Start Section END -->
</body>
</html>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    The full content of your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable ([here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). – Rory McCrossan May 03 '18 at 08:12
  • What do you mean by "random color"? You want to animate it in random colors? – jdickel May 03 '18 at 08:13
  • I meant some color, e.g. #000 –  May 03 '18 at 08:17
  • @RoryMcCrossan I changed it, so you can help me :) I am sorry I have troubled you –  May 03 '18 at 08:21
  • Where is your JS code have you attempted to change the navbar color? I only see smooth scroll behavior. – Carol Skelly May 03 '18 at 10:28

2 Answers2

2

For reasons explained here position:sticky (Bootstrap sticky-top) doesn't provide an indication of when it's "stuck".

Therefore, you need to use JS to conditionally change the Navbar color/style. One way is using an IntersectionObserver. You can use this on the #nav-anker which is the element immediately before the sticky-top Navbar.

(new IntersectionObserver(function(e,o){
    if (e[0].intersectionRatio > 0){
        document.documentElement.removeAttribute('class');
    } else {
        document.documentElement.setAttribute('class','stuck');
    };
})).observe(document.querySelector('#nav-anker'));

So when the Navbar becomes sticky, the stuck class is added to it. You can have CSS styles that change when it's stuck...

/* style for when sticky is applied */
.stuck .sticky-top {
    background: #000;
}

Demo: https://www.codeply.com/go/psiFbB6Ro6

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

You can simply override the color of all "nav" styles. Even tho it's not recommended to use "!important", this will work here.

Otherwise you will need to set up the style of all parents till the nav bar ancestor or pass an ID to the nav bar.

EDIT: By checking the offset of the element to the topside (which is 0 if it is sticky) you can change the opacity to whatever value you want. So if the offset to top is 0 you lower the opacity and if the offset is greater than 0 you simply revert the opacity back to 1.

/* Open tabs */
function openTab(evt, parameter) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(parameter).style.display = "block";
  evt.currentTarget.className += " active";
}
/* Open tabs END */
/* Smooth scroll */
//Only where the class smooth-scroll is, scrolling is enabled
$(document).ready(function () {
  $('a.smooth-scroll[href*="#"]:not([href="#three"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      //Comment the following line if you don't want to see the anchor in the url
      //target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });

    /* change opacity if nav is at top of the page */
    var distance = $('nav').offset().top,
    $window = $(window);

    $window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
      $('nav').fadeTo(0.5, 0.2);
    }else{
      $('nav').fadeTo(0.5, 1);
    }
  });

});
/* Smooth scroll END */
/* Global */

* {
  margin: 0px;
  padding: 0px;
  font-family: Roboto,
}

.separator {
  height: 50px;
  background-color: black;
}

/* Global END */

/* Navigation */
nav{
  background-color: red !important;

}

/* Big Carousel */

.big-carousel .carousel-item {
  /* viewport height */
  height: 375px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.big-carousel .carousel-inner {
  height: 375px;
}

.big-carousel .carousel-caption {
  margin-bottom: 110px;
}

.big-carousel .carousel-caption a {
  border: none;
  background-color: rgba(255, 0, 77);
  color: white;
  padding: 20px;
  border-radius: 1px;
}

.big-carousel .carousel-caption a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black;
}

.big-carousel .carousel-indicators i {
  font-size: 40px;
  color: white;
  margin-bottom: 100px;
}

/* Big Carousel END */

/* Navigation */

.navbar {
  background-color: #020202;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 1 !important;
}

.sticky-top {
  background-color: rgba(0, 0, 0, 0.8);
}

.navbar-brand {
  /*padding-left: 60px;*/
}

.navbar a {
  color: #b6b9c1 !important;
}

.nav-social {
  padding-right: 10px;
}

.nav-social i {
  color: white;
}

.navbar .hvr-underline-from-center::before {
  background: white;
  height: 2px;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none;
  border: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none;
}

.cta-nav {
  margin-top: 8px;
  margin-bottom: 5px;
  margin-left: 25px;
}

.cta-nav a {
  background-color: rgba(255, 0, 77);
  color: white !important;
  padding: 10px;
  border-radius: 1px;
}

.cta-nav a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black !important;
}

@media (min-width: 1px) and (max-width: 576px) {
  .navbar-brand {
    padding-left: 7.5px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .navbar-brand {
    padding-left: 15px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .navbar-brand {
    padding-left: 25px;
  }
  .nav-social {
    padding-right: 20px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .navbar-brand {
    padding-left: 50px;
  }
  .nav-social {
    padding-right: 30px;
  }
}

@media (min-width: 1201px) and (max-width: 9999px) {
  .navbar-brand {
    padding-left: 70px;
  }
  .nav-social {
    padding-right: 50px;
  }
}

/* Navigation END */

/* Tab content */

.tabcontent {
  display: none;
  color: black;
  padding-top: 40px;
  padding-bottom: 50px;
}

.tabcontent h1 {
  text-align: center;
  margin-bottom: 15px;
}

.tabcontent h2,
h3,
h4 {
  text-align: center;
}

.tabcontent a {
  text-decoration: none;
  color: #719DE3;
  padding-bottom: 2px;
}

.tabcontent p {
  color: #121212;
}

.tabcontent {
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Tab content END */

/* Start Section 1 */

.start-section {
  height: 100%;
  background: #DAD299;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-attachment: fixed;
}

/* XX1 */

/* XX1 END*/

/* XX2 */

/* XX2 */

/* XX3 */

/* XX3 END */

/* Start Section END */
<!DOCTYPE html>
<html>
<!-- Meta head -->

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/all-css.css">
  <!-- JQuery first -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="js/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<!-- Meta head END -->

<body id="top" onload="openTab(event, 't1');">
  <!-- Big Carousel -->
  <div class="big-carousel">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->
        <div class="carousel-item active" style="background-image: url(images/MG_9185.jpg)">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Two - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Three - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Arrow left -->
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
      <!-- Arrow right -->
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
  </div>
  <!-- Big Carousel END -->
    <!-- Navigation -->
  <div id="nav-anker"></div>
  <nav class="navbar navbar-dark navbar-expand-md sticky-top">
    <a href="/" class="navbar-brand"><img style="width: 45px;" src=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar2">
      <ul class="navbar-nav mx-auto text-center">
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't1')"><span class="hvr-underline-from-center">Die Tour</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't2')"><span class="hvr-underline-from-center">Vorbereitung</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't3')"><span class="hvr-underline-from-center">Termine & Städte</span></a>
        </li>
        <li class="nav-item cta-nav d-none d-md-block hvr-pulse-grow">
          <a href="">Tickets</a>
        </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap nav-social">
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-facebook"></i></a> </li>
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-instagram"></i></a> </li>
        <li class="nav-item"><a class="nav-link text-whit" href="" target="_blank"><i class="fa fa-youtube"></i></a> </li>
      </ul>
    </div>
  </nav>
  <!-- Navigation -->

  <!-- Start Section -->
  <section class="start-section">
    <!-- XX1 -->
    <div id="t1" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Titel</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX1 END -->
    <!-- XX2 -->
    <div id="t2" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Was du wissen musst</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX2 END -->
    <!-- XX3 -->
    <div id="t3" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Wann</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX3 END -->
  </section>
  <!-- Start Section END -->
</body>
</html>
jdickel
  • 1,437
  • 1
  • 11
  • 21