Beats By Dre website

Developer
John
Size
6,756 Kb
Views
4,048
  1. Beats By Dre website Previews
  2. Beats By Dre website HTML Codes
  3. Beats By Dre website CSS Codes
  4. Beats By Dre website JS Codes

How do I make an beats by dre website?

What is a beats by dre website? How do you make a beats by dre website? This script and codes were developed by John on 05 January 2023, Thursday.

Beats By Dre website Previews
IQ Test

Beats By Dre website - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Beats By Dre website </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.js'></script> <script src="js/index.js"></script>
</body>
</html>

Beats By Dre website - Script Codes CSS Codes

*{ 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; }
}

Beats By Dre website - Script Codes JS Codes

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(); });
});
Beats By Dre website - Script Codes
Beats By Dre website - Script Codes
Home Page Home
Developer John
Username -J0hn-
Uploaded January 05, 2023
Rating 3
Size 6,756 Kb
Views 4,048
Do you need developer help for Beats By Dre website?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John (-J0hn-) Script Codes
Name
Spotify
Sort movies with React JS
Airbnb
FullPage.js movies
CodingPhase Mentorship 2nd Project
Add To Cart jquery
A tribute page for Eddie Guerrero
Simple slider
IMDb design concept from dribbble
Android Play Store With Slick Carousel
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!