IPhone

Developer
Joost Jansen
Size
5,010 Kb
Views
4,048
  1. IPhone Previews
  2. IPhone HTML Codes
  3. IPhone CSS Codes
  4. IPhone JS Codes

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 Previews
IQ Test

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&amp;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'); }
}
IPhone - Script Codes
IPhone - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded January 31, 2023
Rating 3
Size 5,010 Kb
Views 4,048
Do you need developer help for IPhone?

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!

Joost Jansen (DevItWithDavid) Script Codes
Name
League of Legends Login UI
A Pen by Joost Jansen
Star Wars Battlefront I 2016 Interface
React CSSTransitionGroup
Personal website redesign v1.0
Personal Website Redesign v2.0
Portfolio Joost Jansen 2016
Skyrim Start Game UI
DevWars Objectives Template
JQuery Image Slider
Create amazing video scripts with AI!

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!