<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
<title>hellcoding</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jQuerySimpleCounter.js"></script>
<script type="text/javascript" src="script.js"></script>
</script>
</head>
<body>
<header>
<nav>
<div id="navbar" class="navbar">
<div class="logo">
<img src="https://images.ctfassets.net/8cd2csgvqd3m/4JdKzu629zMIigR4O0AUGW/60ca2254d3cf4ed943ead8a12b947f8f/primary-logo-white.svg">
</div>
<div class="navb">
<a href="#">SPEAKERS</a>
<a href="#">HEADPHONES</a>
<a href="#">TELEVISIONS</a>
<a href="#">ACCESSORIES</a>
<a href="#">STORIES</a>
<a href="#">     </a>
<div id="sidenav" class="sidenav">
<div id="slidebtn" class="slideBtn"> ☰ </div>
<div id="close" class="close" onclick="closeNav()">☓</div><br>
<div class="menu">
<a href="#">SPEAKERS</a>
<a href="#">
<p>Portable</p>
</a>
<a href="#">
<p>Multiroom</p>
</a>
<a href="#">
<p>Stereo</p>
</a>
<a href="#">
<p>Architecture</p>
</a>
<a href="#">HEADPHONES</a>
<a href="#">
<p>Over-ear</p>
</a>
<a href="#">
<p>On-ear</p>
</a>
<a href="#">
<p>Earphones</p>
</a>
<a href="#">TELEVISIONS</a>
<a href="#">ACCESSORIES</a>
<a href="#">STORIES</a>
</div>
</div>
</div>
<div id="main">
</div>
</div>
</nav>
</header>
<main>
<div class="slider-container">
<div class="slider-control left inactive"></div>
<div class="slider-control right"></div>
<ul class="slider-pagi"></ul>
<div class="slider">
<div class="slide slide-0 active">
<div class="slide__bg">
</div>
<div class="slide__content">
<div class="slide__text">
<p class="slide__text-desc"><small>BEOPLAY H95</small></p>
<h1 class="slide__text-heading">완벽한 노이즈 캔슬링 </h1>
<p class="slide__text-desc">95년간의 혁신을 기념하는 한정판 인그레이브드 Beoplay H95와 스페셜 에디션 하드케이스를 소개합니다. </p>
<button class="butt">자세히 살펴보기</button>
</div>
</div>
</div>
<div class="slide slide-1 ">
<div class="slide__bg">
</div>
<div class="slide__content">
<div class="slide__text">
<h1 class="slide__text-heading">BEOPLAY H95 </h1>
<p class="slide__text-desc">95년간의 혁신을 기념하는 한정판 인그레이브드 Beoplay H95와 스페셜 에디션 하드케이스를 소개합니다. </p>
<button class="butt">자세히 살펴보기</button>
</div>
</div>
</div>
<div class="slide slide-2">
<div class="slide__bg">
</div>
<div class="slide__content">
<div class="slide__text">
<h1 class="slide__text-heading">순간의 아름다움 포착 </h1>
<p class="slide__text-desc">Beosound A1 2세대 휴대용 스피커를 소개합니다. 새로운 색상 가능.</p>
<button class="butt">자세히 살펴보기</button>
</div>
</div>
</div>
<div class="slide slide-3">
<div class="slide__bg">
</div>
<div class="slide__content">
<div class="slide__text">
<h1 class="slide__text-heading">Hear. See. Feel. </h1>
<p class="slide__text-desc">거실에서 마치 다른 곳에 있는 듯한 느낌을 받을 수 있는 홈 시네마 환경을 경험해 보세요. 가능성은 무한합니다.</p>
<button class="butt">자세히 살펴보기</button>
</div>
</div>
</div>
<div class="slide slide-4">
<div class="slide__bg">
</div>
<div class="slide__content">
<div class="slide__text">
<h1 class="slide__text-heading">Hear. See. Feel. </h1>
<p class="slide__text-desc">거실에서 마치 다른 곳에 있는 듯한 느낌을 받을 수 있는 홈 시네마 환경을 경험해 보세요. 가능성은 무한합니다.</p>
<button class="butt">자세히 살펴보기</button>
</div>
</div>
</div>
<div class="slide slide-5 ">
<div class="slide__bg">
</div>
<div class="slide__content">
<div class="slide__text">
<h1 class="slide__text-heading">Hear. See. Feel. </h1>
<p class="slide__text-desc">거실에서 마치 다른 곳에 있는 듯한 느낌을 받을 수 있는 홈 시네마 환경을 경험해 보세요. 가능성은 무한합니다.</p>
<button class="butt">자세히 살펴보기</button>
</div>
</div>
</div>
</div>
</main>
<article class="side">
<div class="adminActions">
<input type="checkbox" name="adminToggle" class="adminToggle" />
<a class="adminButton" href="#"><i class="fa fa-reorder"></i></a>
<div class="adminButtons">
<a href="#"><i class="fa fa-question"></i></a>
<a href="#"><i class="fa fa-commenting"></i></a>
<a href="#"><i class="fa fa-user"></i></a>
<a href="#" class="top"><i class="fa fa-arrow-up"></i></a>
</div>
</div>
</article>
<article class="one">
<section>
<div>
<h1>HI</h1>
</div>
<div>
<h2>CHECK OUT<br> OUR PRODUCTS</h2>
<p> |   SPEAKERS</p>
<p> |   HEADPHONES</p>
<p> |   TELEVISIONS</p>
<p> |   ACCESSORIES</p>
</div>
</section>
<section>
<div>
<div>
<h3>Beovision Harmony</h3>
<p>궁극적 경지의 몰입적인 오디오 비디오 체험을 위해 설계되었습니다. 새로운 Beovision Harmony 88"는 최신 8K OLED 화면 기술을 갖추고 있으며, 65" 및 77"는 4K 해상도를 지원합니다.</p>
<button>자세히 살펴보기</button>
</div>
<div>
<video autoplay muted loop class="myvideo">
<source src="https://videos.ctfassets.net/8cd2csgvqd3m/5zs6lMRJBYRq5A134CHUEq/cd2313e2c1c17d5d0dbe3035cb1538d5/B_O_H95_home_test.mp4" type="video/mp4">
</video>
</div>
</div>
</section>
</article>
<article class="two">
<section>
<h2>SPEAKERS</h2>
<p> Bang & Olufsen AR 앱을 다운로드하고 집안의 원하는 곳에 스피커를 놓아보세요.</p>
<h5> | </h5>
</section>
<section>
<div>
</div>
<div>
<div>
<h3>Beosound 2</h3>
<p>아름다운 모습만큼이나 매 비트마다 아름다운 사운드를 뿜어내는 강력한 멀티룸 스피커. 배치 위치나 사용 방법에 상관 없이 어떤 각도에서도 시선을 사로잡습니다..</p>
</div>
<div></div>
</div>
</section>
<section>
<div class="acco">
<ul>
<li>
<a class='show'>PORTABLE
<p class="sub">Bring beauty to the moment</p></a>
<div class="pimg">
<div>
<h4>방수 휴대용 블루투스 스피커</h4>
<h4>-</h4>
<p>어디로 가든, 누구를 만나든, 무엇을 할 계획이든 순간의 아름다움을 포착하세요. 업그레이드된 Beosound A1은 한 손에 들고 다닐 수 있는 음악 행복 주머니입니다. 주변 모든 사람과 몇 시간 동안 음악을 공유할 수 있도록 설계되었습니다.</p>
</div>
<img src="https://images.ctfassets.net/8cd2csgvqd3m/1ySxnI34HiTh6yK8y0OpsY/b2211eb1e5139cd2e49aa90d48cfd2a8/Beosound_a1_black_hero.png?q=85&fm=webp&w=720&h=720&fit=fill">
</div>
</li>
<li>
<a class='show'>MUITIROOM
<p class="sub">Beauty and passion to your music</p></a>
<div class="pimg">
<div>
<h4>혁신적인 무선 홈 스피커</h4>
<h4>-</h4>
<p>스칸디나비아풍 미니멀리즘에 뿌리를 둔 이 디자인적 심플함은 본질적으로 강력한 사운드와 극명한 대비를 이룹니다. 두 가지 구성 요소로 뚜렷하게 구분되는 Beosound Balance는 인테리어 오브제 형태의 고급스러운 디자인입니다. </p>
</div>
<img src="https://images.ctfassets.net/8cd2csgvqd3m/54re9IQ4soRmJxfcijWpPr/590d58d08fd2632b7314ea8bad71b787/Balance_her_natural_oak.png?q=90&fm=webp&w=720&h=720&fit=fill">
</div>
</li>
<li>
<a class='show'>STEREO
<p class="sub">All sound. Enjoy silence. Celebrate originality.</p></a>
<div class="pimg">
<div>
<h4>사운드의 미래</h4>
<h4>-</h4>
<p>모든 청취 시나리오 하에서 상상을 초월하는 성능을 발휘하는 무선 라우드스피커를 만나보십시오. Bang & Olufsen의 특허 기술로 완성된 탁월한 음악과 영화 사운드 성능을 느껴볼 준비를 하십시오.</p>
</div>
<img src="https://images.ctfassets.net/8cd2csgvqd3m/60OIJAMXb2OKfzXqnMIREF/a4b71730a7bbf482f262bcdccde84952/beolab-19-natural-hero.png?q=90&fm=webp&w=720&h=720&fit=fill">
</div>
</li>
<li>
<a class='show'>ARCHITECTURAL
<p class="sub">Modular, Wall Mounted Speaker System</p></a>
<div class="pimg">
<div>
<h4>즉흥적인 음악</h4>
<h4>-</h4>
<p>Beosound Shape는 디자인을 중시하는 음악 애호가를 위한 모듈형 스피커 시스템입니다. 마치 독특한 예술 작품처럼 벽에 거치되는 이 스피커는 몰입적인 사운드를 선사하는 동시에 기본 내장된 노이즈 댐퍼를 이용해 실내의 음향 특성을 개선해줍니다.</p>
</div>
<img src="https://images.ctfassets.net/8cd2csgvqd3m/4fPtynvUplfKqB4wHokXzl/d704846f015117a8df0892be4559f610/shape-product-img.png?q=90&fm=webp&w=720&h=720&fit=fill">
</div>
</li>
</ul>
</div>
</section>
</article>
<article class="three">
<section>
<h2>HEADPHONES</h2>
<p> 어디서나 Beoplay H95를 통해 나만의 공간으로 들어가세요.</p>
<h5> | </h5>
</section>
<section>
<div></div>
<div>
<h3>Beoplay H9 3rd Gen</h3>
<h5>고급 액티브 노이즈 캔슬링, 25시간 재생 및 음성 어시스턴트.</h5>
<p>"새로운 차원의 편안함, 배터리 수명, Google 어시스턴트 통합과 더불어 뛰어난 액티브 노이즈 캔슬링이 결합된 Bang & Olufsen 주력 헤드폰은 최고의 선택 중 하나입니다."</p>
<button>자세히 살펴보기</button>
</div>
</section>
<section>
<div>
<h3>Beoplay E8 3rd Gen</h3>
<h5>보다 컴팩트하고 더욱 강력해지다.</h5>
<p>최대 35시간의 향상된 배터리 수명, QI 인증 무선 충전 케이스 및 Bluetooth 5.1 지원으로 끊김없이 완벽한 청취 경험을 보장하는 진정한 무선 인이어 이어폰의 최신 버전입니다.</p>
<button>자세히 살펴보기</button>
</div>
<div></div>
</section>
<section>
<div>
<div id="projectFacts" class="sectionClass">
<div class="fullWidth eight columns">
<div class="projectFactsWrap ">
<div class="item wow fadeInUpBig animated animated" data-number="9894" style="visibility: visible;">
<i class="fa fa-users"></i>
<p id="number1" class="number">9894</p>
<p>Customers</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="557" style="visibility: visible;">
<i class="fa fa-money"></i>
<p id="number2" class="number">557</p>
<p>Sales</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="159" style="visibility: visible;">
<i class="fa fa-briefcase"></i>
<p id="number3" class="number">159</p>
<p>Partners</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="246" style="visibility: visible;">
<i class="fa fa-tags"></i>
<p id="number4" class="number">246</p>
<p>Stores</p>
</div>
</div>
</div>
</div>
</div>
</section>
</article>
<article class="four">
<section>
<h2>PRODUCTS</h2>
<p> 제품에 대해 더 자세히 알아보세요.</p>
<h5> | </h5>
</section>
<section>
<div>
<img src="https://images.ctfassets.net/8cd2csgvqd3m/4Bk2HuTf4E6JTBPuFyzl2U/18a9b7c55fc4cee2f93fd26a38a97a2c/beolab50-icon.svg">
<h5>SPEAKERS FOR TELEVISION</h5>
<p>Explore the speakers made to give you the full cinematic experience</p>
<button>TV 스피커 ➙</button>
</div>
<div>
<img src="https://images.ctfassets.net/8cd2csgvqd3m/3BawSGRFfschgR8mJ8iu56/ab1394e3741fb7bd5778011b46e3766a/harmony-icon.svg">
<h5>TELEVISION CATEGORY</h5>
<p>Explore the full range of televisions and learn more about their features</p>
<button>TV 보기 ➙</button>
</div>
<div>
<img src="https://images.ctfassets.net/8cd2csgvqd3m/7kHW4EpbZLmi29kzRhE0cB/c9b40a29a7e423af74e3d013f4fc2ade/Beoremote_One_icon.svg">
<h5>BEOREMOTE ONE</h5>
<p>Learn more about the handy controller for your entire Bang & Olufsen setup</p>
<button>리모컨 스피커 ➙</button>
</div>
</section>
</article>
<div class="icon">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-envelope"></i>
</div>
<footer>
<div>
<section>
<h5>CUSTOMER CARE</h5>
<p>Login/Register</p>
<p>Customer support</p>
<p>Find store</p>
<p>Contact us</p>
<p>Shipping</p>
</section>
<section>
<h5>OUR POLICIES</h5>
<p>Privacy Policy</p>
<p>Cookie Policy</p>
<p>Accessibility</p>
<p>Policies and terms</p>
</section>
<section>
<h5>OUR COMPANY</h5>
<p>Become a Retailer</p>
<p>Press</p>
<p>Corporate</p>
<p>Investors</p>
<p>Careers</p>
</section>
<section>
<h5>INSTAGRAM FEED</h5>
<img
src="https://scontent-ssn1-1.xx.fbcdn.net/v/t1.0-0/p206x206/119510526_10157160648041607_4953543228230659749_o.jpg?_nc_cat=103&_nc_sid=730e14&_nc_ohc=S9UnrZrnwAkAX861WjQ&_nc_ht=scontent-ssn1-1.xx&tp=6&oh=099099630fe5e5c933dd97edeca4405f&oe=5F876ED9">
<img
src="https://scontent-ssn1-1.xx.fbcdn.net/v/t1.0-0/c0.23.206.206a/p206x206/118943335_10157146613441607_7095393433910532043_o.jpg?_nc_cat=111&_nc_sid=730e14&_nc_ohc=2kmKnLQ1eCwAX9IYEXW&_nc_ht=scontent-ssn1-1.xx&oh=af9da71d2b45d46a07993591a7c23979&oe=5F86BE57">
<img
src="https://scontent-ssn1-1.xx.fbcdn.net/v/t1.0-0/c0.23.206.206a/p206x206/119049421_10157146613266607_2369031249965019159_o.jpg?_nc_cat=108&_nc_sid=730e14&_nc_ohc=sFbPFSp8rh0AX_6JE1q&_nc_ht=scontent-ssn1-1.xx&oh=3d0c22d0c6a2edecf58fa6407e40f3f9&oe=5F8777E2"><br>
<img
src="https://scontent-ssn1-1.xx.fbcdn.net/v/t1.0-0/c0.23.206.206a/p206x206/118865619_10157145027886607_3269121367816326629_o.jpg?_nc_cat=102&_nc_sid=730e14&_nc_ohc=jWBuo0X7dJAAX9fL_Dh&_nc_ht=scontent-ssn1-1.xx&oh=8ce91a982401d01fd2d3e28c9d0246e9&oe=5F84CD11">
<img
src="https://scontent-ssn1-1.xx.fbcdn.net/v/t1.0-0/c0.23.206.206a/p206x206/118865619_10157145027881607_6432647069459652814_o.jpg?_nc_cat=100&_nc_sid=730e14&_nc_ohc=yCNM4-AFEAkAX8G-knm&_nc_ht=scontent-ssn1-1.xx&oh=96369ce1ab0e94a2a4cc1e3e01fe328c&oe=5F86BF50">
<img
src="https://scontent-ssn1-1.xx.fbcdn.net/v/t1.0-0/c0.23.206.206a/p206x206/119041512_10157145027866607_3259146742627100503_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=5rVb1EOHyJAAX8Pmw2S&_nc_ht=scontent-ssn1-1.xx&oh=280662ac71eb57a14495c868d513ed3c&oe=5F84645A">
</section>
</div>
<div>
<div>
<img src="https://images.ctfassets.net/8cd2csgvqd3m/4JdKzu629zMIigR4O0AUGW/60ca2254d3cf4ed943ead8a12b947f8f/primary-logo-white.svg">
</div>
<div>
<p>Facebook</p>
<p>Instagram</p>
<p>Twitter</p>
<p>Youtube</p>
</div>
</div>
</footer>
<script>
//accordion
$('div .show').click(function() {
$('.pimg').slideUp(300);
if ($(this).next().is(':hidden') == true) {
$(this).next().slideDown(300);
}
$('.show').toggleClass('selected');
});
$('.pimg').hide();
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 400,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('#number1').jQuerySimpleCounter({end: 9894,duration: 60000});
$('#number2').jQuerySimpleCounter({end: 557,duration: 60000});
$('#number3').jQuerySimpleCounter({end: 159,duration: 60000});
$('#number4').jQuerySimpleCounter({end: 246,duration: 60000});
///top
$( '.top' ).click( function() {
$( 'html, body' ).animate( { scrollTop : 0 }, 400 );
return false;
} );
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0px solid silver;
}
img {
width: 120px;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 0.9rem;
line-height: 1rem;
color: #666;
letter-spacing: 0.1px;
}
h1 {
font-size: 3.5rem;
line-height: 4rem;
color: #333;
}
h2 {
font-size: 2rem;
color: #222;
line-height: 2.5rem;
}
h3 {
font-size: 1.5rem;
line-height: 2.5rem;
color: #333;
}
h4 {
font-size: 1.2rem;
color: #333;
}
h5 {
font-size: 1rem;
color: #333;
line-height: 2rem;
}
p {
font-size: 1rem;
line-height: 2rem;
color: #777;
}
a:link {
text-decoration: none;
}
a:visited {}
a:hover {
color: #fff;
}
a:active {}
button {
font-size: 1rem;
padding: 10px 30px;
background: none;
color: #444;
border: 1px solid #444;
font-weight: bold;
transition: 0.3s;
margin-top: 1.5rem;
outline: none;
}
button:hover {
background: #444;
color: #fff;
border: 1px solid #444;
font-weight: bold;
cursor: pointer;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
height: 80px;
margin: 0 auto;
display: flex;
justify-content: space-between;
transition: top 0.8s;
line-height: 4.5rem;
padding: 0px 5%;
z-index: 10;
}
.navb {
position: fixed;
right: 5%;
}
.navb a {
float: left;
display: block;
color: #ddd;
text-decoration: none;
margin: 0 1.5rem;
font-size: 1rem;
}
.navb a:hover {
color: #fff;
font-weight: bold;
}
.logo img {
width: 250px;
height: 70px;
cursor: pointer;
padding-top: 0.5rem;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: black;
overflow-x: hidden;
transition: 0.5s;
padding-top: 0px;
}
.sidenav a {
padding: 5px 30px 10px 10px;
text-decoration: none;
font-size: 1.2rem;
color: #fff;
display: block;
transition: 0.3s;
font-weight: bold;
}
.sidenav a:hover {
color: #fff;
}
.slideBtn {
transition: .8s;
position: fixed;
right: 0;
font-size: 30px;
cursor: pointer;
margin-right: 5%;
color: #ddd;
}
.close {
width: 50px;
float: right;
line-height: 1rem;
padding: 20px 10px;
margin: 10px 5%;
cursor: pointer;
font-size: 2rem;
color: #fff;
}
.menu {
padding-top: 20px;
width: 300px;
position: absolute;
left: 5%;
}
.menua:hover {
opacity: 1;
}
.menu p {
color: #888;
font-weight: lighter;
}
.menu p:hover {
color: #fff;
}
.menu a {
padding: 20px 30px 0px 20px;
line-height: 2rem;
}
.menu>:nth-child(2), .menu>:nth-child(3), .menu>:nth-child(4), .menu>:nth-child(5), .menu>:nth-child(7), .menu>:nth-child(8), .menu>:nth-child(9) {
padding: 5px 30px;
}
main {
width: 100%;
height: 800px;
overflow: hidden;
}
.slider-container {
position: relative;
height: 100%;
user-select: none;
cursor: pointer;
}
.slider-control {
z-index: 2;
position: absolute;
top: 0;
width: 12%;
height: 100%;
opacity: 0;
}
.slider-control.inactive:hover {
cursor: auto;
}
.slider-control:not(.inactive):hover {
opacity: 1;
cursor: pointer;
}
.slider-control.left {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}
.slider-control.right {
right: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
}
.slider-pagi {
position: absolute;
z-index: 3;
left: 50%;
bottom: 2rem;
transform: translateX(-50%);
font-size: 0;
list-style-type: none;
}
.slider-pagi__elem {
position: relative;
display: inline-block;
vertical-align: top;
width: 2.7rem;
height: 0.5rem;
margin: 0 0.5rem;
border: 2px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
}
.slider-pagi__elem:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 2.7rem;
height: 0.5rem;
background: rgba(255, 255, 255, 0.6);
transition: transform 0.3s;
transform: translate(-50%, -50%) scale(0);
}
.slider-pagi__elem.active:before, .slider-pagi__elem:hover:before {
transform: translate(-50%, -50%) scale(1);
}
.slider {
z-index: 1;
position: relative;
height: 100%;
}
.slider.animating {
transition: transform 0.5s;
will-change: transform;
}
.slider.animating .slide__bg {
transition: transform 0.5s;
will-change: transform;
}
.slide {
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide.active .slide__text {
opacity: 1;
transform: translateX(0);
}
.slide__bg {
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background-size: cover;
will-change: transform;
}
.slide:nth-child(1) {
left: 0;
}
.slide:nth-child(1) .slide__bg {
left: 0;
background-image: url("https://9to5mac.com/wp-content/uploads/sites/6/2019/01/Untitled_2.0.png.jpeg?quality=82&strip=all&w=1600");
background-size: cover;
background-position: left center;
filter:brightness(85%);
}
.slide:nth-child(2) {
left: 100%;
}
.slide:nth-child(2) .slide__bg {
left: -50%;
background-image: url("https://sonnydickson.com/wp-content/uploads/2019/02/33557426178_78d70f8f54_k.jpg");
background-size: cover;
background-position: center;
filter:brightness(85%);
}
.slide:nth-child(3) {
left: 200%;
}
.slide:nth-child(3) .slide__bg {
left: -100%;
background-image: url("https://images.ctfassets.net/8cd2csgvqd3m/3FRD06OHCjzy88nW1k7kyM/c0c29a52bae1eb6a8a8331bb33406970/E8_3rdgen_Test.jpg");
background-size: cover;
background-position: left center;
filter:brightness(80%);
}
.slide:nth-child(4) {
left: 300%;
}
.slide:nth-child(4) .slide__bg {
left: -150%;
background-image: url("https://www.scandinaviastandard.com/wp-content/uploads/2020/01/contrast-collection-Bang-Olufsen-and-Norm-Architects%E2%80%99s-Contrast-Collection-Scandinavia-Standard.jpg");
background-size: cover;
background-position: left center;
}
.slide:nth-child(5) {
left: 400%;
}
.slide:nth-child(5) .slide__bg {
left: -200%;
background-image: url("https://images.ctfassets.net/8cd2csgvqd3m/2KYpNX9BUwk5phzmafvL9P/72cb109dffb44cc7342acb4a1e178cb8/Contrast_Edge.jpg");
background-size: cover;
background-position: left center;
}
.slide:nth-child(6) {
left: 500%;
}
.slide:nth-child(6) .slide__bg {
left: -250%;
background-image: url("https://henritibosch.com/wp-content/uploads/2017/11/BSoE-14BH-Me02-kopie-e1511599933285.jpg");
background-size: cover;
background-position: left center;
filter:brightness(80%);
}
.slide__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide__text {
position: absolute;
width: 20%;
top: 38%;
left: 15%;
color: #ddd;
transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
will-change: transform, opacity;
transform: translateY(-50%);
opacity: 0;
}
a.slide__text-link:hover {
text-decoration: none;
color: #FFF;
}
.slide__text-heading {
width: 600px;
line-height: 4.5rem;
margin-bottom: 1.7rem;
color: #fff;
}
.slide__text-desc {
width: 600px;
font-size: 1.1rem;
margin-bottom: 0.8rem;
color: #fff;
}
.butt {
width: 200px;
color: #fff;
border: 1px solid #fff;
margin-top: 1rem;
}
.butt:hover {
color: #ccc;
border: 1px solid #333;
background: #333;
}
.slide__text-link {
z-index: 5;
display: inline-block;
position: relative;
padding: 0.5rem;
cursor: pointer;
font-size: 2.3rem;
perspective: 1000px;
}
.slide__text-link:before {
z-index: -1;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
transform-origin: 50% 100%;
transform: rotateX(-85deg);
transition: transform 0.3s;
will-change: transform;
}
.slide__text-link:hover:before {
transform: rotateX(0);
}
.side{
position: relative;
z-index: 200;
}
.adminActions {
position: fixed;
bottom: 50px; right: 35px;
}
.adminButton {
height: 50px;
width: 50px;
background-color: rgba(0, 0, 0, .8);
border-radius: 50%;
display: block;
color: #fff;
text-align: center;
position: relative;
z-index: 1;
}
.adminButton i {
font-size: 1.5rem;
}
.adminButtons {
position: absolute;
width: 100%;
bottom: 120%;
text-align: center;
}
.adminButtons a {
display: block;
width: 45px;
height: 45px;
border-radius: 50%;
text-decoration: none;
margin: 10px auto 0;
line-height: 1.15;
color: #fff;
opacity: 0;
visibility: hidden;
position: relative;
box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);
background-color: rgba(0, 0, 0, .6);
}
.adminButtons a:hover {
transform: scale(1.1);
background-color: rgba(0, 0, 0, 0.9);
}
.adminButtons a:nth-child(1) {
transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;
}
.adminButtons a:nth-child(2) {
transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;
}
.adminButtons a:nth-child(3) {
transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;
}
.adminButtons a:nth-child(4) {
transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;
}
.adminActions a i {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2rem;
}
.adminToggle {
-webkit-appearance: none;
position: absolute;
border-radius: 50%;
top: 0; left: 0;
margin: 0;
width: 100%;
height: 100%;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
z-index: 2;
transition: box-shadow .2s ease-in-out;
box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);
}
.adminToggle:hover {
box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);
}
.adminToggle:checked ~ .adminButtons a {
opacity: 1;
visibility: visible;
}
.one {
clear: both;
padding: 7rem 0;
}
.one>:first-child {
width: 1000px;
margin: 0 auto;
display: flex;
height: 200px;
}
.one>:first-child>:first-child {
width: 20%;
border: 6px solid #333;
}
.one>:first-child>:first-child h1 {
text-align: center;
font-size: 5rem;
line-height: 11rem;
}
.one>:first-child>:last-child {
width: 70%;
margin-left: 10%;
padding-top: 35px;
}
.one>:first-child>:last-child p {
display: inline;
line-height: 5rem;
padding: 0 50px 0px 5px;
cursor: pointer;
}
.one>:first-child>:last-child p:hover{
color:#000;
}
.one>:last-child {
height: 330px;
margin-top: 5rem;
background: #eee;
}
.one>:last-child div {
width: 1200px;
margin: 0 auto;
display: flex;
}
.one>:last-child>:first-child>:first-child {
width: 45%;
padding: 60px 50px;
text-align: right;
display: block;
}
.one>:last-child>:first-child>:last-child {
width: 55%;
height: 600px;
position: relative;
}
.myvideo {
width: 100%;
height: 400px;
position: absolute;
top: -6%;
filter: brightness(90%);
}
.two {
clear: both;
margin: 0 auto;
text-align: center;
}
.two>:first-child p {
padding-top: 1rem;
}
.two>:first-child h5 {
font-size: 3rem;
line-height: 3.8rem;
padding: 10px 0;
color: #aaa;
}
.two>:nth-child(2) {
display: flex;
margin: 4rem auto;
width: 1000px;
}
.two>:nth-child(2) div {
width: 48%;
height: 650px;
}
.two>:nth-child(2)>:first-child {
background-image: url("https://images.ctfassets.net/8cd2csgvqd3m/3D7BvkbvoVBS7ROlVzujju/86de8d9414d4f23cd5629b5f6aaef479/M3-black-shopimage-2.jpg?q=90&fm=webp&w=720&h=1440&fit=fill");
background-size: cover;
background-position: center;
margin-right: 4%;
}
.two>:nth-child(2)>:last-child>:first-child {
width: 90%;
height: 200px;
text-align: left;
margin-left: 10%;
padding-top: 25px;
}
.two>:nth-child(2)>:last-child>:last-child {
width: 100%;
height: 400px;
background-image: url("https://images.ctfassets.net/8cd2csgvqd3m/6VzT8ExWk1iRcg6Z9pWyve/7a19470fbf49bdbd3857d0b3d1211b77/M3-black-shopimage-3.jpg?q=90&fm=webp&w=720&h=720&fit=fill");
background-size: cover;
background-position: center;
}
.acco {
width: 1000px;
margin: 0rem auto;
}
.acco li {
list-style: none;
padding: 20px;
border-bottom: 1px solid #222;
}
.acco li a {
display: block;
color: #222;
text-decoration: none;
font-size: 1.2rem;
padding: 10px 10px 4px 10px;
cursor: pointer;
text-align: left;
}
.acco a:before {
content: '+';
margin-right: 16px;
margin-top: 12px;
font-family: arial;
font-weight: normal;
width: 5px;
display: inline-block;
float: right;
}
.acco a.selected:before {
content: '-';0
margin-right: 16px;
font-family: arial;
font-weight: normal;
width: 5px;
display: inline-block;
color: red
}
.pimg {
display: flex;
justify-content: space-around;
}
.pimg div {
display: block;
width: 60%;
height: 250px;
text-align: left;
padding: 50px 0;
}
.pimg p {
line-height: 2rem;
}
.pimg img {
width: 30%;
height: 250px;
}
.sub{
text-align: left;
padding: 2px 0;
font-size:0.9rem;
}
.three {
clear: both;
margin: 0 auto;
padding: 7rem 0;
text-align: center;
}
.three>:first-child p {
padding-top: 1rem;
}
.three>:first-child h5 {
font-size: 3rem;
line-height: 3.8rem;
color: #aaa;
}
.three>:nth-child(2) {
width: 1000px;
height: 300px;
margin: 5rem auto;
display: flex;
}
.three>:nth-child(2)>:first-child {
width: 48%;
background-image: url("https://images.ctfassets.net/8cd2csgvqd3m/1anJnAp7k16YFwIidbgKNY/fdd64b617b57182af9d5cf14c6068ce1/H9_Antrachite_GG_2.jpg?q=90&fm=webp&w=720");
background-size: cover;
background-position: center;
}
.three>:nth-child(2)>:last-child {
width: 52%;
padding: 10px 50px;
text-align: left;
}
.three>:nth-child(2) h3 {
padding-bottom: 1rem;
}
.three>:nth-child(2) h5 {
padding-bottom: 1.2rem;
color: #555;
}
.three>:nth-child(3) {
width: 1000px;
height: 300px;
margin: 4rem auto;
display: flex;
}
.three>:nth-child(3)>:first-child {
width: 52%;
padding: 10px 50px;
text-align: right;
}
.three>:nth-child(3)>:last-child {
width: 48%;
background-image: url("https://images.ctfassets.net/8cd2csgvqd3m/30TeFJ1iQNSaXisJQy1s3U/98f7456c20a911ddd18eede78b04d0df/Grey_Mist_GG_2.jpg?q=90&fm=webp&w=720");
background-size: cover;
background-position: center;
}
.three>:nth-child(3) h3 {
padding-bottom: 1rem;
}
.three>:nth-child(3) h5 {
padding-bottom: 1.2rem;
color: #555;
}
.three>:last-child {
width: 100%;
height: 350px;
margin-top:7rem;
background-image: url("https://i0.wp.com/www.alphr.com/wp-content/uploads/2016/12/bang_olufsen_beosound_1_5.jpg?ssl=1");
background-size: cover;
background-position: center bottom ;
filter:brightness(95%);
}
.three>:last-child>:first-child{
width:1000px;
margin: 0 auto;
}
.sectionClass {
padding: 20px 0px 50px 0px;
position: relative;
display: block;
}
.fullWidth {
width: 100% !important;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
.sectiontitle {
background-position: center;
margin: 30px 0 0px;
text-align: center;
min-height: 20px;
}
.projectFactsWrap{
display: flex;
margin-top: 30px;
flex-direction: row;
flex-wrap: wrap;
}
#projectFacts .fullWidth{
padding: 0;
}
.projectFactsWrap .item{
width: 25%;
height: 100%;
padding: 60px 0px;
text-align: center;
}
.projectFactsWrap .item p.number{
font-size: 3rem;
padding: 10px;
font-weight: bold;
}
.projectFactsWrap .item p{
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
margin: 0;
padding: 10px;
font-family: 'Open Sans';
}
.projectFactsWrap .item i{
vertical-align: middle;
font-size: 3rem;
color: rgba(255, 255, 255, 0.9);
}
.projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{
color: white;
}
.four {
clear: both;
width: 1000px;
margin: 0 auto;
text-align: center;
}
.four>:first-child p {
padding-top: 1rem;
}
.four>:first-child h5 {
font-size: 3rem;
line-height: 3.8rem;
color: #aaa;
}
.four>:last-child {
display:flex;
justify-content:space-between;
margin:5rem 0;
}
.four>:last-child div{
width:31%;
height:400px;
background:#eee;
margin: 0 auto;
padding:30px;
}
.four>:last-child div img{
width:100px;
margin:12px 0;
}
.icon{
width:1000px;
margin:0 auto 5rem auto;
text-align:center;
}
.icon i{
width:45px;
height:45px;
font-size:1.3rem;
background-color: white;
border-radius: 50%;
border: 2px solid #333;
color:#333;
padding: 10px;
margin:0 2px;
cursor:pointer;
}
.icon i:hover{
background-color: #333;
border: 2px solid #333;
color:#fff;
}
footer {}
footer>:first-child {
background: #eee;
height: 300px;
display: flex;
justify-content: space-between;
padding: 50px 15%;
}
footer>:first-child p {
font-size: 0.9rem;
line-height: 1.8rem;
cursor: pointer;
}
footer>:first-child p:hover {
color: #333;
}
footer>:first-child img {
width: 80px;
padding: 2px;
cursor: pointer;
}
footer>:first-child>:last-child {
margin-left: 8rem;
}
footer>:last-child {
background: #aaa;
height: 50px;
display: flex;
justify-content: space-between;
padding: 0 15%;
}
footer>:last-child img {
width: 250px;
padding-top: 0.8rem;
cursor: pointer;
}
footer>:last-child>:last-child {
margin: 6px 0;
}
footer>:last-child p {
display: inline;
padding: 10px 20px;
color: #fff;
cursor: pointer;
}
footer>:last-child p:hover {
color: #333;
}
//SCROLL
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollpos = window.pageYOffset;
if (prevScrollpos > currentScrollpos) {
document.getElementById("navbar").style.top = "0";
document.getElementById("slidebtn").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-150px";
document.getElementById("slidebtn").style.top = "-150px";
}
prevScrollpos = currentScrollpos;
}
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 1) {
$(".navbar").css("background", "#000");
} else {
$(".navbar").css("background", "none");
}
})
})
//HAMBERGER MENU
function closeNav() {
document.getElementById("sidenav").style.width = "0%";
document.getElementById("slidebtn").style.display = "block";
}
$(document).ready(function() {
$(".slideBtn").click(function() {
if ($("#sidenav").width() == 0) {
document.getElementById("sidenav").style.width = "100%";
document.getElementById("main").style.paddingRight = "100%";
document.getElementById("slidebtn").style.paddingRight = "0px";
document.getElementById("slidebtn").style.display = "none";
} else {
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.paddingRight = "0";
document.getElementById("slidebtn").style.paddingRight = "0";
}
});
});
//slider
$(document).ready(function() {
var $slider = $(".slider"),
$slideBGs = $(".slide__bg"),
diff = 0,
curSlide = 0,
numOfSlides = $(".slide").length - 1,
animating = false,
animTime = 500,
autoSlideTimeout,
autoSlideDelay = 6000,
$pagination = $(".slider-pagi");
function createBullets() {
for (var i = 0; i < numOfSlides + 1; i++) {
var $li = $("<li class='slider-pagi__elem'></li>");
$li.addClass("slider-pagi__elem-" + i).data("page", i);
if (!i) $li.addClass("active");
$pagination.append($li);
}
};
createBullets();
function manageControls() {
$(".slider-control").removeClass("inactive");
if (!curSlide) $(".slider-control.left").addClass("inactive");
if (curSlide === numOfSlides) $(".slider-control.right").addClass("inactive");
};
function autoSlide() {
autoSlideTimeout = setTimeout(function() {
curSlide++;
if (curSlide > numOfSlides) curSlide = 0;
changeSlides();
}, autoSlideDelay);
};
autoSlide();
function changeSlides(instant) {
if (!instant) {
animating = true;
manageControls();
$slider.addClass("animating");
$slider.css("top");
$(".slide").removeClass("active");
$(".slide-" + curSlide).addClass("active");
setTimeout(function() {
$slider.removeClass("animating");
animating = false;
}, animTime);
}
window.clearTimeout(autoSlideTimeout);
$(".slider-pagi__elem").removeClass("active");
$(".slider-pagi__elem-" + curSlide).addClass("active");
$slider.css("transform", "translate3d(" + -curSlide * 100 + "%,0,0)");
$slideBGs.css("transform", "translate3d(" + curSlide * 50 + "%,0,0)");
diff = 0;
autoSlide();
}
function navigateLeft() {
if (animating) return;
if (curSlide > 0) curSlide--;
changeSlides();
}
function navigateRight() {
if (animating) return;
if (curSlide < numOfSlides) curSlide++;
changeSlides();
}
$(document).on("mousedown touchstart", ".slider", function(e) {
if (animating) return;
window.clearTimeout(autoSlideTimeout);
var startX = e.pageX || e.originalEvent.touches[0].pageX,
winW = $(window).width();
diff = 0;
$(document).on("mousemove touchmove", function(e) {
var x = e.pageX || e.originalEvent.touches[0].pageX;
diff = (startX - x) / winW * 70;
if ((!curSlide && diff < 0) || (curSlide === numOfSlides && diff > 0)) diff /= 2;
$slider.css("transform", "translate3d(" + (-curSlide * 100 - diff) + "%,0,0)");
$slideBGs.css("transform", "translate3d(" + (curSlide * 50 + diff / 2) + "%,0,0)");
});
});
$(document).on("mouseup touchend", function(e) {
$(document).off("mousemove touchmove");
if (animating) return;
if (!diff) {
changeSlides(true);
return;
}
if (diff > -8 && diff < 8) {
changeSlides();
return;
}
if (diff <= -8) {
navigateLeft();
}
if (diff >= 8) {
navigateRight();
}
});
$(document).on("click", ".slider-control", function() {
if ($(this).hasClass("left")) {
navigateLeft();
} else {
navigateRight();
}
});
$(document).on("click", ".slider-pagi__elem", function() {
curSlide = $(this).data("page");
changeSlides();
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.