<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="workspace">
<div class="bg-content"></div>
<div class="mobile-body">
<div class="top-bar">
<div class="camera"></div>
<div class="speaker"></div>
</div>
<div class="button volume-up"></div>
<div class="button volume-down"></div>
<div class="button silent"></div>
<div class="button power"></div>
<div class="layer-2"></div>
<div class="layer-1"></div>
<div class="layer-gradient-1"></div>
<div class="layer-gradient-2"></div>
</div>
<div class="gallery-content">
<div class="gallery-content__img active" data-img="http://doodling.surge.sh/assets/images/bg-1.jpg"><img src="http://doodling.surge.sh/assets/images/bg-1.jpg"></div>
<div class="gallery-content__img" data-img="http://doodling.surge.sh/assets/images/bg-2.jpg"><img src="http://doodling.surge.sh/assets/images/bg-2.jpg"></div>
<div class="gallery-content__img" data-img="http://doodling.surge.sh/assets/images/bg-3.jpg"><img src="http://doodling.surge.sh/assets/images/bg-3.jpg"></div>
<div class="gallery-content__img" data-img="http://doodling.surge.sh/assets/images/bg-4.jpg"><img src="http://doodling.surge.sh/assets/images/bg-4.jpg"></div>
<div class="gallery-content__img" data-img="http://doodling.surge.sh/assets/images/bg-5.jpg"><img src="http://doodling.surge.sh/assets/images/bg-5.jpg"></div>
<div class="gallery-content__img" data-img="http://doodling.surge.sh/assets/images/bg-6.jpg"><img src="http://doodling.surge.sh/assets/images/bg-6.jpg"></div>
<div class="gallery-content__img" data-img="http://doodling.surge.sh/assets/images/bg-7.jpg"><img src="http://doodling.surge.sh/assets/images/bg-7.jpg"></div>
</div>
</div>
html {
font-size: 62.5%;
}
body {
background: lightgray;
font-size: 1.4rem;
ul { list-style: none; }
a {
text-decoration: none !important;
outline: none !important;
color: inherit;
}
}
*, h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
font-weight: normal;
box-sizing: border-box;
outline: none;
}
//CUSTOM CSS
.workspace {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: white;
&.active {
.gallery-content {
transform: translateY(0);
}
.mobile-body {
transform: scale(1);
opacity: 1;
box-shadow: 0 0 2rem 1rem rgba(black, .1);
}
}
}
.bg-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("http://doodling.surge.sh/assets/images/bg-1.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(1rem);
transition: all .5s;
}
.gallery-content {
position: fixed;
bottom: 0;
border-top-left-radius: 4rem;
border-top-right-radius: 4rem;
box-shadow: 0 0 2rem rgba(black, .2);
z-index: 1;
background-color: black;
height: 7.5rem;
display: flex;
align-items: center;
padding: 0 3rem;
justify-content: space-between;
align-items: center;
transform: translateY(7.5rem);
transition: all 1s;
overflow: auto;
&__img {
width: 4.5rem;
height: 4.5rem;
flex-shrink: 0;
margin-right: 2rem;
border: .1rem solid white;
cursor: pointer;
transition: all .5s;
&.active {
border-width: .2rem;
border-color: purple;
}
&:last-child {
margin-right: 0;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.mobile-body {
position: relative;
flex-shrink: 0;
width: 35.6rem;
height: 72.2rem;
border-radius: 6rem;
display: flex;
justify-content: center;
background-image: url("http://doodling.surge.sh/assets/images/bg-1.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
user-select: none;
transform: scale(.9);
opacity: 0;
box-shadow: none;
transition: all 1s;
margin-bottom: 7.5rem;
&:hover {
box-shadow: none !important;
transform: scale(.95) !important;
}
.layer-1 {
$offset: 0;
position: absolute;
left: $offset;
right: $offset;
top: $offset;
bottom: $offset;
border: .4rem solid #dcdcdc;
border-radius: 6rem;
}
.layer-2 {
$offset: .3rem;
position: absolute;
left: $offset;
right: $offset;
top: $offset;
bottom: $offset;
border: 1.6rem solid #000000;
border-radius: 5.6rem;
}
.layer-gradient-1 {
$offset: 1.1rem;
position: absolute;
left: $offset;
right: $offset;
top: $offset;
bottom: $offset;
border: .3rem solid #484848;
border-radius: 5rem;
filter: blur(1px);
opacity: .5;
}
.layer-gradient-2 {
$offset: .7rem;
position: absolute;
left: $offset;
right: $offset;
top: $offset;
bottom: $offset;
border: .4rem solid #bcbcbc;
border-radius: 5.6rem;
opacity: .5;
filter: blur(1px);
}
.top-bar {
width: 17.3rem;
height: 2.8rem;
background-color: #000000;
position: absolute;
top: 1.7rem;
left: 9.1rem;
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
&:before {
content: "";
position: absolute;
bottom: 1.25rem;
left: -0.9rem;
width: .8rem;
height: .8rem;
border: .4rem solid transparent;
border-top: .4rem solid black;
border-right: .4rem solid black;
border-top-right-radius: .6rem;
transform: rotate(28deg);
}
&:after {
content: "";
position: absolute;
bottom: 1.25rem;
right: -0.9rem;
width: .8rem;
height: .8rem;
border: .4rem solid transparent;
border-top: .4rem solid black;
border-left: .4rem solid black;
border-top-right-radius: .6rem;
transform: rotate(-28deg);
}
}
.camera {
position: absolute;
bottom: 1.1rem;
right: 4.5rem;
right: 4.5rem;
width: 1rem;
height: 1rem;
background-color: red;
border-radius: 50%;
border: .2rem solid #1e1f22;
background-image: linear-gradient(right, #091528, #2363a6);
}
.speaker {
position: absolute;
bottom: 1.3rem;
right: 6.5rem;
width: 4rem;
height: .6rem;
background-color: #161616;
border-radius: .2rem;
}
.button {
width: .3rem;
height: 2.5rem;
background-color: #dcdcdc;
position: absolute;
left: -.2rem;
border-top-left-radius: .3rem;
border-bottom-left-radius: .3rem;
border: .1rem solid rgba(black, .1);
border-right: none;
&.silent {
top: 9.8rem;
}
&.volume-up {
top: 15rem;
height: 5rem;
}
&.volume-down {
top: 21.6rem;
height: 5rem;
}
&.power {
top: 16.9rem;
height: 5rem;
right: -.3rem;
left: auto;
transform: rotate(180deg);
}
}
}
@media (max-width: 600px) {
.gallery-content {
width: 100%;
border-radius: 0;
}
.mobile-body {
transform: scale(.65) !important;
&:hover {
transform: scale(.6) !important;
}
}
.gallery-content__img {
&:last-child {
margin-right: 2rem !important;
}
}
}
@media (max-height: 800px) {
.mobile-body {
transform: scale(.77) !important;
&:hover {
transform: scale(.68) !important;
}
}
}
@media (max-height: 630px) {
.mobile-body {
transform: scale(.53) !important;
&:hover {
transform: scale(.48) !important;
}
}
}
window.onload = function () {
document.querySelector('.workspace').classList.add('active')
}
const gallery = document.querySelectorAll('.gallery-content__img'),
mobileBody = document.querySelector('.mobile-body'),
bg = document.querySelector('.bg-content')
gallery.forEach(g => {
g.addEventListener('click', function () {
const imgSrc = this.dataset.img,
activeGallery = document.querySelector('.gallery-content__img.active')
activeGallery.classList.remove('active')
this.classList.add('active')
bg.style.backgroundImage = `url('${imgSrc}')`
mobileBody.style.backgroundImage = `url('${imgSrc}')`
})
})
