About
Explore
Events & Classes
Support Us
Join
Sign In
AbdelrahmanElkady-1
View Project Page
Run
Fullscreen
Phone
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Phone</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="phone"> <div class="screen" id="screen"> <div class="apps row"></div> </div> <div class="home-btn" onclick="change_phone()"></div> </div> </body> </html>
body { background-color: lightblue; } .phone { border: 30px solid blue; border-radius: 10px; border-bottom: 55px solid blue; width: 40%; height: 65%; /*border-top: 55px solid darkblue;*/ position: absolute; left: 50%; transform: translate(-50%); } .screen { background-color: black; width: 100%; height: 100%; } .home-btn { position: absolute; border-radius: 50%; border: 3px solid darkblue; left: 42%; margin-top: 5px; width: 10%; height: 6%; } .home-btn:active { background-color: darkblue; }
// Javascript code function change_phone(){ document.getElementById("screen").style.border = "1px solid black"; document.getElementById("screen").style.backgroundColor = "blue"; }
About
Explore
Events & Classes
Support Us
Join
Sign In
