Samsung Galaxy S8
HTML
<div class="body">
<div class="top-bezel">
<div class="tool-1"></div>
<div class="tool-2"></div>
<div class="tool-3"></div>
<div class="tool-4"></div>
<div class="earpiece"></div>
<div class="front-camera"></div>
<div class="tool-5"></div>
</div>
<div class="screen"></div>
<div class="volume-button"></div>
<div class="bixby-button"></div>
<div class="power-button"></div>
<div class="bottom-bezel"></div>
</div>
CSS
body {
background-image: url("https://img00.deviantart.net/803a/i/2015/193/e/a/windows_10_default_wallpaper_minimal_by_link6155-d910rjc.png");
background-size: cover;
}
.body {
width: 300px;
height: 664px;
position: relative;
margin: 40px auto;
border-top: 4px solid #D1D1D1;
border-bottom: 4px solid #D1D1D1;
border-radius: 40px;
/* PHONE color */
/*background-color: #00000a;*/ /* Midnight Black */
/*background-color: #61506a;*/ /* Orchid Gray */
/*background-color: #698ac4;*/ /* Coral Blue */
background-color: #9a9b9f; /* Arctic Silver */
/*background-color: #9e8a73;*/ /* Maple Gold */
/*background-color: #ce9da5;*/ /* Rose Pink */
}
.top-bezel {
width: 100%;
height: 30px;
position: absolute;
box-sizing: border-box;
float: left;
}
.tool-1 {
width: 7px;
height: 7px;
position: absolute;
background-color: #081131;
border: 1px solid #313131;
border-radius: 50%;
left: 41px;
top: calc(50% - 4.5px);
}
.tool-2 {
width: 12px;
height: 12px;
position: absolute;
background-color: #0C1842;
border: 2px solid #313131;
border-radius: 50%;
left: 55px;
top: calc(50% - 8px);
}
.tool-3 {
width: 7px;
height: 7px;
position: absolute;
background-color: black;
border: 1.5px solid #313131;
border-radius: 50%;
left: 82px;
top: calc(50% - 5px);
}
.tool-4 {
width: 4px;
height: 4px;
position: absolute;
background-color: #081131;
border: 2.5px solid #313131;
border-radius: 50%;
left: 98px;
top: calc(50% - 4.5px);
}
.earpiece {
width: 40px;
height: 3px;
position: absolute;
border: 1px solid black;
border-radius: 4px;
left: calc(50% - 20px);
top: calc(50% - 2px);
background-color: #434343;
}
.front-camera {
width: 10px;
height: 10px;
position: absolute;
background-color: #081131;
border: 3px solid #313131;
border-radius: 50%;
right: 77px;
top: calc(50% - 8px);
}
.tool-5 {
width: 8.5px;
height: 8.5px;
position: absolute;
background-color: #0C1842;
border: 2px solid #313131;
border-radius: 50%;
right: 53px;
top: calc(50% - 6.5px);
}
.volume-button {
width: 2px;
height: 95px;
position: absolute;
left: -4px;
top: 103px;
border-right: 2px solid #4D4C44;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
background-color: #A0A0A0;
}
.bixby-button {
width: 2px;
height: 50px;
position: absolute;
left: -4px;
top: 232px;
border-right: 2px solid #4D4C44;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
background-color: #A0A0A0;
}
.power-button {
width: 2px;
height: 50px;
position: absolute;
right: -4px;
top: 190px;
border-left: 2px solid #4D4C44;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
background-color: #A0A0A0;
}
.screen {
width: 98%;
height: 604px;
position: absolute;
top: 30px;
left: calc(1%);
background-color: black;
background-image: url('http://www.ulasabis.com/wp-content/uploads/2017/05/Galaxy-S8-UlasAbis-SS-15.jpeg');
background-size: 100%;
border-radius: 20px;
transition: all .5s ease;
}
.screen.lock {
background-color: black;
background-image: none;
transition: all .5s ease;
}
.bottom-bezel {
width: 100%;
height: 30px;
position: absolute;
box-sizing: border-box;
bottom: 0;
}
JAVASCRIPT
$(document).ready(function() {
$(".power-button").click(function() {
$(".screen").toggleClass("lock");
});
});
1 Response