"iPhone X | CSS Only"
Bootstrap 3.0.0 Snippet by harunpehlivan

<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}')` }) })

Related: See More


Questions / Comments: