Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav class="menu">
    <ul class="active">
<!--         <li class="current-item"><a href="#">Home</a></li> -->
        <li><a href="#">Headphones</a></li>
        <li><a href="#">Earphones</a></li>
        <li><a href="#">Speakers</a></li>
        <li><a href="#" id="no-brd">Explore</a></li>
    </ul>
 
    <a class="toggle-nav" href="#">&#9776;</a>
</nav>

<nav id="nav">
  <img  src="http://sg.beatsbydre.com/on/demandware.static/Sites-beats-SG-Site/-/default/dw43e20dab/images/logo-big.png">
  <div class="dropdown">
    <a href="" data-toggle="dropdown">headphones</a>
    <div class="dropdown-menu">
    <div class="row">
      <div class="col-sm-3">
        <h4 class="text-center">beats solo wireless</h4>
      <img class="img-responsive" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dwcead19d4/images/Solo3_Wireless/Gloss_Black/MNEN2_BBD_240x270-mobile-nav.jpg">
      </div><!--col-sm-3-->
      <div class="col-sm-3">
        <h4 class="text-center">studio wireless</h4>
        <img class="img-responsive" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dwd1d3fce5/images/navigation/mobile/BBD_240x270_overear-studio-wireless-titanium-standard-thrqrtleft-O.jpg">
      </div><!--col-sm-3-->
      <div class="col-sm-3">
        <h4 class="text-center">beats ep</h4>
        <img class="img-responsive" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dw66ce2794/images/B310/Web_Files_Black/ML992_BBD_240x270-mobile-nav.jpg">
      </div><!--col-sm-3-->
      <div class="col-sm-3 pull-right">
        <p><strong>Browse headphones</strong></p>
        <ul class="list-unstyled">
          <li>browse all headphones</li>
          <li>wireless headphones</li>
          <li>noise canceling headphones</li>
          <li>on ear headphones</li>
          <li>over the ear headphones</li>
        </ul>
        <p><strong>Get help</strong></p>
        <ul class="list-unstyled">
          <li>Tech support</li>
          <li>Warranty support</li>
          <li>Frequently asked questions</li>
        </ul>
      </div><!--col-sm-3-->
    </div><!--row-->
    <div class="row">
      <div class="col-sm-3">
        <h4 class="text-center">Solo 2</h4>
        <img class="img-responsive " src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dwcfca5ce2/images/Red_MLA42/mobile_nav.jpg/MLA42_BBD_240x270-mobile-nav_v2.jpg">
      </div><!--col-sm-3-->
      <div class="col-sm-3">
        <h4 class="text-center">pro</h4>
        <img class="img-responsive " src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dwd6705a24/images/navigation/mobile/BBD_240x270_overear-pro-black-standard-thrqrtleft-2.jpg">
      </div><!--col-sm-3-->
    </div><!--row-->
    </div>
    </div>
  <div class="dropdown">
    <a href="" data-toogle="dropdown">earphones</a>
    <div class="dropdown-menu two">
      <div class="row">
        <div class="col-sm-3">
          <h4 class="text-center">powerbeats</h4>
          <img class="img-responsive" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dweebf5faa/images/Powerbeats3_Wireless/Black/ML8V2_BBD_240x270-mobile-nav.jpg">
        </div><!--col-sm-3-->
        <div class="col-sm-3">
          <h4 class="text-center">beatsx</h4>
          <img class="img-responsive" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dw60434354/images/B282_images/MLYE2_BBD_240x270-mobile-nav.jpg">
        </div><!--col-sm-3-->
        <div class="col-sm-3">
          <h4 class="text-center">tour2</h4>
          <img class="img-responsive" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dwe6d90d3a/images/navigation/mobile/MKMT2_BBD_240x270-mobile-nav.jpg">
        </div><!--col-sm-3-->
        <div class="col-sm-3">
          <p><strong>Browse earphones</strong></p>
          <ul class="list-unstyled">
            <li>Browse all earphones</li>
            <li>Wireless earphones</li>
          </ul>
          <p><strong>Get help</strong></p>
          <ul class="list-unstyled">
            <li>Tech support</li>
            <li>Warranty support</li>
            <li>Frequently asked questions</li>
          </ul>
        </div><!--col-sm-3-->
      </div><!--row-->
      <br>
      <br>
      <div class="row">
      <div class="col-sm-3">
          <h4 class="text-center">urbeats</h4>
          <img class="img-responsive" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dw70f3110e/images/navigation/mobile/BBD_240x270_inear-urbeats-black-standard-thrqrtleft.jpg">
        </div><!--col-sm-3-->
    </div><!--row-->
    </div><!--dropdown-menu-->
  </div><!--dropdown-->
  <div class="dropdown">
    <a href="" data-toggle="dropdown">speakers</a>
    <div class="dropdown-menu three">
    <div class="row">
      <div class="col-sm-8">
        <h4 class="text-center">beats pill</h4>
        <img class="img-responsive pill" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dwb085669b/images/PillPlus/ML4M2/ML4M2_BBD_240x270-mobile-nav_v2.jpg">
      </div><!--col-sm-8-->
      <div class="col-sm-4">
        <p><strong>Browse speakers</strong></p>
        <ul class="list-unstyled">
          <li>Browse all speakers</li>
        </ul>
        <p><strong>Get help</strong></p>
        <ul class="list-unstyled">
          <li>Tech support</li>
            <li>Warranty support</li>
            <li>Frequently asked questions</li>
        </ul>
      </div><!--col-sm-4-->
    </div><!--row-->
    </div><!--dropdown-menu-->
  </div><!--dropdown-->
    <a href="">explore</a>
    <a href="#" class="glyphicon glyphicon-search"></a>
</nav>
<div class="page-slide">
<div class="jumbotron">
  <div><img class="img-responsive" src="http://www.citymac.com/sites/tdcurran/images/user/beats-by-dr-dre/studio-wireless-2.png"></div>
  
  <div class="arrow bounce"></div>
</div><!--jumbotron-->
</div><!--page-slide-->
<div class="container page-slide">
  <section class="sec">
  <h1 class="text-center text-uppercase text-xs" data-aos="fade-down"><strong>Live the wireless life with our latest additions to the beats family. This is the wireless remastered</strong></h1>
  </section>
  <section class="sec">
    <div class="row">
      <div class="col-sm-6">
        <img class="img-responsive" src="http://techbooky.com/wp-content/uploads/2016/09/BeatsX.png">
      </div><!--col-sm-6-->
      <div class="col-sm-6 center">
        <h4>Introducing</h4>
        <h3>Beats<span>x</span></h3>
        <p>Fit for your life, Beatsx earphones are the perfect wireless companion. With up to 8 hours of battery life and Fast Fuel technology, you can experience authentic, clear sound throughout your day.</p>
        <br>
        <button type="button" class="btn text-uppercase">explore</button>
      </div><!--col-sm-6-->
    </div><!--row-->
  </section>
  <section class="sec">
    <div class="row">
      <div class="col-sm-6">
        <img class="img-responsive powerbeats" src="https://srorg-soundreview.netdna-ssl.com/wp-content/uploads/2015/01/power-beats-2-earphones.png">
      </div><!--col-sm-6-->
      <div class="col-sm-6 center middle ">
        <h4>Introducing</h4>
        <h3>Powebeats<span>3</span><br> Wireless</h3>
        <p>Powerbeats3 Wireless earhphones are ready for any challenge with up to 12 hours of battery life to fuel long, tough workouts and powerful, dynamic sound to keep you pushing.</p>
        <br>
        <button type="button" class="btn text-uppercase">explore</button>
      </div><!--col-sm-6-->
    </div><!--row-->
  </section>
  <section class="sec">
    <div class="row">
      <div class="col-sm-6">
        <img class="img-responsive powerbeats" src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/-/Sites-beats-master-catalog/default/dw522f9989/images/Solo3_Wireless/Gloss_Black/MNEN2-mobile-thrqtrrght.png">
      </div><!--col-sm-6-->
      <div class="col-sm-6 center middle ">
        <h4>Introducing</h4>
        <h3>Beats Solo<span>3</span><br> Wireless</h3>
        <p>With up to 40 hours of battery life, Beats Solo3 Wireless is your perfect everyday headphone. Get the most out of your music with an award-winning, emotionally charged Beats listening experience.</p>
        <br>
        <button type="button" class="btn text-uppercase">explore</button>
        <button type="button" class="btn red text-uppercase">Buy on <span class="fa fa-apple"></span></button>
      </div><!--col-sm-6-->
    </div><!--row-->
  </section>
</div><!--container-->
              
            
!

CSS

              
                *{
  box-sizing:border-box;
}
html{
  overflow-x:hidden;
}

/*
jumbotron
*/
.jumbotron{
  margin:0;
  margin-top:-1px;
  height:100%;
  background:linear-gradient(to top, grey, black);
}
.jumbotron img{
  height:350px;
  margin:50px auto;
  -webkit-transform:scale(1.2);
  transition:transform .8s;
}
.jumbotron img:hover{
  -webkit-transform:scale(1.1);
}

.arrow{
  cursor: pointer;
  position: relative;
  bottom: -3rem;
  left: 50%;
  margin-left:-20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
  padding:1em;
  background-size: contain;
}

/* .bounce {
  animation: bounce 2s infinite;
} */

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/*
container
*/
.container{
  margin-top:-20px;
  padding:0;
}

.container section .text-center{
  display:block;
  padding: 15% 10% 10% 10%;
}

/*
section 2
*/
.sec{
  height:100%;
}
.container section span{
  display:inline-block;
  position:absolute;
  margin-top:-7px;
}
.center{
  margin: 100px 0;
}
.col-sm-6 h4, h3{
  font-weight:bold;
}
.col-sm-6 .btn{
  background:none;
  color:black;
  border:solid 2px red;
  padding: 8px 35px;
  border-radius:15px;
  transition-property:background, color;
  transition-duration:.5s;
}
.col-sm-6 .btn:hover{
  background:black;
  color:white;
}
.container .fa-apple{
  
  margin-top:1px;
  margin-left:5px;
}
.container .red{
  background:red;
  color:white;
  padding-right:40px;
}
.container .red:hover{
  background:white;
  color:black;
}

@media (min-width:768px){
  [data-toggle="dropdown"]{
  padding-top:5em;
}
.dropdown-menu{
  padding:20px;
  border-radius:0;
  left:-120%;
  top:31px;
}
  .two{
    left:-300%;
  }
  .three{
    left:-400%;
  }
.dropdown:hover > .dropdown-menu{
    display:block;
}
.row .col-sm-3:nth-of-type(-1n+3){
  margin:0;
  border-bottom:solid 1px lightgrey;
  border-left:solid 1px lightgrey;
  border-right:solid 1px lightgrey;
} 
.row:nth-of-type(2){
  margin-top:-40px;
}
.row .col-sm-3 ul li{
  margin:5px 0;
}
  .pill{
    margin:auto;
  }
  .col-sm-8{
    border-left:solid 1px lightgrey;
    border-right:solid 1px lightgrey;
  }
  .dropdown-menu{
    width:850%;
    padding:10px 30px;
  }
}
@media (max-width:768px){
  .jumbotron{
    height:35vh;
  }
  .jumbotron img{
    height:140px;
    margin-top:-10px;
    padding:5px;
  }
  .arrow{
    display:none;
  }
  .container section:nth-of-type(1){
    height:225px;
  }
  .container section h1{
    margin:0;
    padding:0;
    font-size:1.3em;
  }
}




@media (min-width:426px){
  nav{
  display:flex;
  justify-content:space-around;
  align-items:center;
  background-color:black;
}
nav a{
  padding:15px 0;
  color:grey;
  text-transform:uppercase;
  transition:color .4s;
}

nav a:hover{
  color:white;
  text-decoration:none;
}
.glyphicon-search{
  font-size:1.3em;
}
}
@media (max-width:425px){
  .container section:nth-of-type(1){
  background-color:lightgrey;
}
  #nav{
    display:none;
  }
  body{
    background:black;
  }
  nav:nth-of-type(1){
    background:black;
  }
  .menu {
    margin-bottom:-6px;
        position:relative;
        display:inline-block;
    }
 
    .menu ul.active {
        display:none;
    }
 
    .menu ul {
        z-index:1;
        width:300%;
        position:absolute;
        top:120%;
        left:0px;
        padding:10px 0 0 0;
/*         box-shadow:0px 1px 1px rgba(0,0,0,0.15); */
        background:white;
    }
 
    .menu ul:after {
        width:0px;
        height:0px;
        position:absolute;
        top:0%;
        left:22px;
        content:'';
        transform:translate(0%, -100%);
        border-left:7px solid transparent;
        border-right:7px solid transparent;
        border-bottom:7px solid white;
    }
 
    .menu li {
        margin:5px 0px 5px 0px;
        float:none;
        display:block;
    }
 
    .menu a:not(.toggle-nav) {
        display:block;
      font-weight:bold;
      text-decoration:none;
      color:black;
      border-bottom:solid 1px lightgrey;
      padding-bottom:8px;
      padding-top:5px;
      margin-left:5px;
    }
  #no-brd{
    border-bottom:none;
  }
 
    .toggle-nav {
        padding:20px;
        float:left;
        display:inline-block;
/*         box-shadow:0px 1px 1px rgba(0,0,0,0.15); */
        border-radius:3px;
/*         text-shadow:0px 1px 0px rgba(0,0,0,0.5); */
        color:white;
        font-size:20px;
        transition:color linear 0.15s;
    }
  .toggle-nav:link, .toggle-nav.active{
    color:white;
    text-decoration:none;
  }
    .toggle-nav:hover, .toggle-nav.active {
        text-decoration:none;
        color:red;
    }
  .container .red{
    margin-top:10px;
  }
  
}
@media (max-width:321px){
  .menu ul{
    width:100%;
  }
}
@media (max-width:375px){
  .menu ul{
    width:612%;
  }
  .jumbotron{
    height:35vh;
  }
}
@media (max-width:425px){
  .menu ul{
    width:695%;
  }
  .sec:nth-of-type(1n+2){
    background:white;
  }
  .container section .row .col-sm-6 {
    margin-top:50px;
  }
  .row .col-sm-6 h4, h3, p{
    text-align:center;
  }
  .btn{
    display:block;
    margin:0 auto;
  }
  .powerbeats{
    margin-top:150px;
  }
}
@media (min-width:426px){
  .menu{
    display:none;
  }
}
              
            
!

JS

              
                AOS.init({
  duration: 2000,
  disable: window.innerWidth < 900
});


$('.arrow').on('click', function(){
    var target = $(this).parent().parent().next();
    $('html, body').stop().animate({
        'scrollTop': target.offset().top
    }, 900, 'swing');
});

jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
        jQuery(this).toggleClass('active');
        jQuery('.menu ul').toggleClass('active');
 
        e.preventDefault();
    });
});
              
            
!
999px

Console