IPhone
How do I make an iphone?
An attempt at recreating the iPhone look with html, css and js. On windows the css borders look kinda meh but they also give a cool iPhone glass reflection look, ifyouknowwhatimean... Let me know if you would like to see any extra features!. What is a iphone? How do you make a iphone? This script and codes were developed by Joost Jansen on 31 January 2023, Tuesday.
IPhone - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iPhone</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="iphone"> <div class="bezel"> <div class="front-camera"></div> <div class="front-speaker"></div> </div> <div class="screen"> <div class="statusbar"> <div class="statusbar__group"> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-circle-o"></i> <i class="fa fa-circle-o"></i> <span>AT&T</span> <i class="fa fa-wifi"></i> </div> <div class="statusbar__group"> <i class="fa fa-lock"></i> </div> <div class="statusbar__group"> <i class="fa fa-clock-o"></i> <span>52%</span> <i class="fa fa-battery-half"></i> </div> </div> <div class="time-and-date"> <h1>9:30</h1> <h3>Thursday, 17 August</h3> </div> <div class="notification-drawer"> <div class="notification"> <div class="notification__content"> <div class="notification__title"> <i class="fa fa-whatsapp"></i> <p>WhatsApp</p> <p>2s ago</p> </div> <div class="notification__text"> <p>Some notification text here.</p> </div> </div> <div class="notification__clear"> <p>Clear</p> </div> </div> <div class="notification"> <div class="notification__content"> <div class="notification__title"> <i class="fa fa-envelope"></i> <p>Mail</p> <p>5m ago</p> </div> <div class="notification__text"> <p>Some notification text here.</p> </div> </div> <div class="notification__clear"> <p>Clear</p> </div> </div> <div class="notification"> <div class="notification__content"> <div class="notification__title"> <i class="fa fa-snapchat"></i> <p>Snapchat</p> <p>7m ago</p> </div> <div class="notification__text"> <p>Some notification text here. This one is a little bit longer so it breaks the line, let's see what happens.</p> </div> </div> <div class="notification__clear"> <p>Clear</p> </div> </div> </div> <div class="tabs"> <i class="fa fa-circle"></i> <i class="fa fa-circle white"></i> <i class="fa fa-camera"></i> </div> </div> <div class="bezel"> <div class="home-button"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
IPhone - Script Codes CSS Codes
body { margin: 0; position: relative; -webkit-font-smoothing: antialiased; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
h1, h2, h3, h4,
p,
span { margin: 0; font-family: 'Roboto', sans-serif;
}
html,
body { height: 100%; background-color: #efefef;
}
.iphone { width: 375px; height: 727px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; border: 3px solid black; border-radius: 30px; background-color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 15px 85px rgba(0, 0, 0, 0.55);
}
.bezel { height: 80px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: black;
}
.bezel .front-camera { height: 10px; width: 10px; border-radius: 50%; background-color: darkslategray;
}
.bezel .front-speaker { height: 10px; width: 80px; margin-left: 10px; border-radius: 5px; background-color: darkslategray;
}
.bezel .home-button { height: 55px; width: 55px; border: 4px solid #182929; border-radius: 50%; background-color: #090f0f;
}
.screen { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; background: url("https://unsplash.it/400/700?random") no-repeat center/cover; background-color: rgba(0, 0, 0, 0.3); background-blend-mode: multiply; border-right: 8px solid black; border-left: 8px solid black; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.screen .statusbar { height: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 5px; color: #fff; background-color: transparent;
}
.screen .statusbar__group:nth-child(2) { position: absolute; left: calc(50% - 5px);
}
.screen .statusbar i,
.screen .statusbar span { font-size: 12px;
}
.screen .time-and-date { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 30px; padding-bottom: 20px; color: #fff;
}
.screen .time-and-date h1, .screen .time-and-date h3 { font-weight: 300;
}
.screen .time-and-date h1 { font-size: 82px;
}
.screen .notification-drawer { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; overflow-x: hidden; overflow-y: auto; padding: 0 10px 10px; color: #fff;
}
.notification { width: 140%; position: relative; left: 0; -webkit-transition: left 200ms; transition: left 200ms; margin-bottom: 10px;
}
.notification.active { left: -28%;
}
.notification__content { float: left; width: 71.5%; margin-bottom: 10px;
}
.notification__clear { float: left; padding: 23px; margin-bottom: 10px; position: relative; left: 10px; border-radius: 10px; color: #000; background-color: #efefef;
}
.notification__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 7.5px; color: #000; background-color: #efefef; border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.notification__title i { margin-right: 5px;
}
.notification__title p:first-of-type { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-transform: uppercase;
}
.notification__title i, .notification__title p { line-height: 1.1;
}
.notification__text { padding: 7.5px; position: relative; top: -1px; color: #000; background-color: #dedede; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
.tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 5px 0;
}
.tabs i { font-size: 12px; margin: 0 5px;
}
.tabs i:first-child,
.tabs i:last-child { color: rgba(255, 255, 255, 0.5);
}
.white { color: #fff;
}
IPhone - Script Codes JS Codes
const timeEl = document.querySelector('.time-and-date h1');
const dateEl = document.querySelector('.time-and-date h3');
const allNotifications = Array.from(document.querySelectorAll('.notification'));
document.addEventListener('DOMContentLoaded', () => { const date = new Date(); const timeVal = date.toLocaleTimeString('en-US', { hour12: false, hour: "numeric", minute: "numeric" }); const dateVal = date.toDateString(); timeEl.innerText = timeVal; dateEl.innerText = dateVal;
});
allNotifications.forEach((n) => { n.addEventListener('click', (e) => { handleNotificationClick(n); });
});
function handleNotificationClick(nClicked) { const nActive = allNotifications.find(n => n.classList.contains('active')); if (nActive === nClicked) { nActive.classList.remove('active'); } else if (nActive && nActive !== nClicked) { nActive.classList.remove('active'); nClicked.classList.add('active'); } else { nClicked.classList.add('active'); }
}
Developer | Joost Jansen |
Username | DevItWithDavid |
Uploaded | January 31, 2023 |
Rating | 3 |
Size | 5,010 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
React Close Dialog with Animation | 5,569 Kb |
A Pen by Joost Jansen | 4,394 Kb |
My Business Card | 4,034 Kb |
Flexbox Layout - One page website | 5,649 Kb |
JQuery Image Slider | 3,407 Kb |
Overwatch cards, three styles | 4,047 Kb |
Star Wars Battlefront I 2016 Interface | 6,229 Kb |
Personal Website Redesign v2.0 | 5,168 Kb |
TicTacToe | 4,809 Kb |
League of Legends Login UI | 6,748 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by John Malc | F789gh | 1,420 Kb |
Full page table inside the grid | Twikito | 1,864 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Popover Example | Seanboom | 2,429 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!