About
Explore
Events & Classes
Support Us
Join
Sign In
Coding with Rumaysa
View Project Page
Run
Fullscreen
Phone Layout CSS
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,shrink-to-fit=no,width=device-width"> </head> <body> <div class="phone"></div> </body> </html>
* { margin: 0; } body { text-align: center; align-items: center; justify-content: center; overflow: hidden; margin-top: 20px; } .phone { width: 220px; height: 460px; margin: auto; border-radius: 25px; z-index: 1000; background-size: cover; background-color: black; background-position: center top; background-repeat: no-repeat; // background-image: url("https://justcodaborate.org/project_assets/phone%20screen.jpg"); border: 13px solid #dba1ff; position: relative; } .phone::before { content: ''; position: absolute; width: 10px; height: 60px; top: 60px; left: 228px; border-radius: 10px; background-color: #dba1ff; } .phone::after { content: ''; position: absolute; width: 10px; height: 40px; top: 130px; left: 228px; border-radius: 10px; background-color: #dba1ff; }
About
Explore
Events & Classes
Support Us
Join
Sign In
