Interactive CSS3 iPhone 6

Developer
Moreno Di Domenico
Size
11,365 Kb
Views
22,264
  1. Interactive CSS3 iPhone 6 Previews
  2. Interactive CSS3 iPhone 6 HTML Codes
  3. Interactive CSS3 iPhone 6 CSS Codes
  4. Interactive CSS3 iPhone 6 JS Codes

How do I make an interactive css3 iphone 6?

Interactive CSS3 iPhone 6Technologies: CSS3 (using Less) HTML5 (using Jade) JS + JQUERY (using CoffeeScript). What is a interactive css3 iphone 6? How do you make a interactive css3 iphone 6? This script and codes were developed by Moreno Di Domenico on 07 September 2022, Wednesday.

Interactive CSS3 iPhone 6 Previews
IQ Test

Interactive CSS3 iPhone 6 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactive CSS3 iPhone 6</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Hello, -->
<!-- I made this little experiment just for fun. -->
<!-- I'm looking for a Web Developer position in London. If you are interested please contact me [moreno at themesholic.com]-->
<!-- GitHub Repo-->
<!-- https://github.com/MorenoDiDomenico/Interactive-CSS3-iPhone6-->
<header> <h1>Interactive CSS3 iPhone 6 <h3>By <a href="https://codepen.io/MorenoDiDomenico/" target="_blank">Moreno Di Domenico</a></h3> </h1>
</header>
<div id="stage"> <div id="switch"><a href="#" data-color="white">WHITE</a><a href="#" data-color="black">BLACK</a></div> <div id="iphone-6"><span class="power"></span><span class="volume-switch"></span><span class="volume-plus"></span><span class="volume-minus"></span><span class="line-top"></span><span class="line-bottom"></span><span class="camera"></span><span class="speaker"></span><span class="home"><a href="#"></a></span> <div class="screen"> <div class="topbar"> <div class="signal"><span class="full"></span><span class="full"></span><span class="full"></span><span></span><span></span>T-Mobile</div> <div class="time">00:00</div> <div class="battery"></div> </div> <div class="loading"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/apple-logo.png" alt=""/></div> <div class="lock"> <div class="blur"></div> <div class="text">Touch ID or Enter Passcode (1234)</div> <div class="pills"><span></span><span></span><span></span><span></span></div> <div class="keyboard"> <div class="number"><em>1</em></div> <div class="number"><em>2</em><span>DEF</span></div> <div class="number last"><em>3</em><span>DEF</span></div> <div class="number"><em>4</em><span>GHI</span></div> <div class="number"><em>5</em><span>JKL</span></div> <div class="number last"><em>6</em><span>MNO</span></div> <div class="number"><em>7</em><span>PQRS</span></div> <div class="number"><em>8</em><span>TUV</span></div> <div class="number last"><em>9</em><span>WXYZ</span></div> <div class="number center"><em>0</em></div> </div> <div class="emergency">Emergency</div> <div class="delete">Delete</div> </div> <div class="wallpaper" data-parallaxify-range-x="100" data-parallaxify-range-y="100"></div> <div class="dashboard"> <div class="grid"> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Contacts.png" alt=""/></a><span class="label">Contacts</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Calendar.png" alt=""/></a><span class="label">Calendar</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Photos.png" alt=""/></a><span class="label">Photos</span></div> <div class="app last"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Camera.png" alt=""/></a><span class="label">Camera</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Weather.png" alt=""/></a><span class="label">Weather</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Clock.png" alt=""/></a><span class="label">Clock</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Maps.png" alt=""/></a><span class="label">Maps</span></div> <div class="app last"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Videos.png" alt=""/></a><span class="label">Videos</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Notes.png" alt=""/></a><span class="label">Notes</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Reminders.png" alt=""/></a><span class="label">Reminders</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Stocks.png" alt=""/></a><span class="label">Stocks</span></div> <div class="app last"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Game%20Center.png" alt=""/></a><span class="label">Game Center</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Newstand.png" alt=""/></a><span class="label">Newstand</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/iTunes%20Store.png" alt=""/></a><span class="label">Itunes Store</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/AppStore.png" alt=""/></a><span class="label">App Store</span></div> <div class="app last"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/iBooks.png" alt=""/></a><span class="label">iBooks</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Health.png" alt=""/></a><span class="label">Health</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Passbook.png" alt=""/></a><span class="label">Passbook</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Settings.png" alt=""/></a><span class="label">Settings</span></div> </div> <div class="dock"> <div class="blur"></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Phone.png" alt=""/></a><span class="label">Phone</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Messages.png" alt=""/></a><span class="label">Messages</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Safari.png" alt=""/></a><span class="label">Safari</span></div> <div class="app"><a href="#"><img src="https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/Mail.png" alt=""/></a><span class="label">Mail</span></div> </div> </div> <div class="overlay"> <div class="alert"> <div class="text"><strong>Hiya!</strong>It's just a demo :)</div><a href="#">Dismiss</a> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://hwthorn.github.io/parallaxify/javascripts/jquery.parallaxify.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Interactive CSS3 iPhone 6 - Script Codes CSS Codes

body { background: #fff; font-family: 'Helvetica Neue', sans-serif; line-height: 1; color: #fff; font-size: 12px; background: #C5EFF7; margin: 0; padding: 0;
}
header { text-align: center; padding: 120px 0; background: #fff; color: #000;
}
header h1 { margin: 0 0 15px 0; padding: 0; font-size: 42px; font-weight: normal;
}
header h3 { margin: 0; padding: 0; text-transform: uppercase; font-size: 14px; font-weight: bold; color: #999;
}
header h3 a { color: #09c; text-decoration: none;
}
header h3 a:hover { color: #09c; text-decoration: underline;
}
#stage { text-align: center; padding: 90px 0 180px 0;
}
#switch { position: relative; margin-bottom: 30px;
}
#switch a { width: 120px; line-height: 42px; color: #111; background: #fff; display: inline-block; font-weight: bold; text-decoration: none; letter-spacing: 1px; margin: 0 5px; -webkit-border-radius: 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px; -moz-background-clip: padding; border-radius: 2px; background-clip: padding-box;
}
#switch a[data-color="black"] { background: #111; color: #fff;
}
#iphone-6 { width: 375px; height: 667px; padding: 105px 24px; background: #d9dbdc; position: relative; display: inline-block; -webkit-border-radius: 56px; -webkit-background-clip: padding-box; -moz-border-radius: 56px; -moz-background-clip: padding; border-radius: 56px; background-clip: padding-box; -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
#iphone-6:before { content: ''; width: calc(100% - 12px); height: calc(100% - 12px); position: absolute; top: 6px; left: 6px; background: #f8f8f8; z-index: 1; -webkit-border-radius: 50px; -webkit-background-clip: padding-box; -moz-border-radius: 50px; -moz-background-clip: padding; border-radius: 50px; background-clip: padding-box;
}
#iphone-6 .power { position: absolute; right: -3px; width: 3px; height: 60px; background: #dcdcdc; top: 170px; cursor: pointer; -webkit-border-radius: 0 2px 2px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 2px 2px 0; -moz-background-clip: padding; border-radius: 0 2px 2px 0; background-clip: padding-box;
}
#iphone-6 .volume-switch { position: absolute; left: -3px; width: 3px; height: 30px; background: #dcdcdc; top: 110px; -webkit-border-radius: 2px 0 0 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px 0 0 2px; -moz-background-clip: padding; border-radius: 2px 0 0 2px; background-clip: padding-box;
}
#iphone-6 .volume-plus,
#iphone-6 .volume-minus { position: absolute; left: -3px; width: 3px; height: 60px; background: #dcdcdc; top: 170px; -webkit-border-radius: 2px 0 0 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px 0 0 2px; -moz-background-clip: padding; border-radius: 2px 0 0 2px; background-clip: padding-box;
}
#iphone-6 .volume-minus { top: 260px;
}
#iphone-6 .line-top,
#iphone-6 .line-bottom { position: absolute; width: 100%; height: 14px; background: rgba(0, 0, 0, 0.2); left: 0; top: 70px;
}
#iphone-6 .line-bottom { top: auto; bottom: 70px;
}
#iphone-6 .camera { position: absolute; top: 25px; left: 50%; width: 12px; height: 12px; display: inline-block; background: #333; z-index: 4; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);
}
#iphone-6 .speaker { position: absolute; top: 60px; left: 50%; width: 60px; height: 6px; display: inline-block; background: #333; z-index: 4; -webkit-border-radius: 6px; -webkit-background-clip: padding-box; -moz-border-radius: 6px; -moz-background-clip: padding; border-radius: 6px; background-clip: padding-box; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);
}
#iphone-6 .speaker:before { content: ''; position: absolute; top: -5px; left: -30px; width: 15px; height: 15px; display: inline-block; background: #333; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box;
}
#iphone-6 .home { width: 64px; height: 64px; position: absolute; z-index: 4; bottom: 20px; left: 50%; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background: #d7d7d7; background: linear-gradient(135deg, #d7d7d7 0%, #7a7a7a 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d7d7', endColorstr='#7a7a7a', GradientType=1);
}
#iphone-6 .home:after { content: ''; position: absolute; top: 3px; left: 3px; width: 58px; height: 58px; background: #fff; display: inline-block; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box;
}
#iphone-6 .home a { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 2;
}
#iphone-6 .screen { width: 375px; height: 667px; position: relative; z-index: 2; overflow: hidden; -webkit-box-shadow: 0 0 0 3px #111; -moz-box-shadow: 0 0 0 3px #111; box-shadow: 0 0 0 3px #111; -webkit-border-radius: 1px; -webkit-background-clip: padding-box; -moz-border-radius: 1px; -moz-background-clip: padding; border-radius: 1px; background-clip: padding-box;
}
#iphone-6 .screen .topbar { width: 100%; position: absolute; top: 0; left: 0; z-index: 7;
}
#iphone-6 .screen .topbar .signal { position: absolute; left: 10px; top: 5px; line-height: 1;
}
#iphone-6 .screen .topbar .signal span { width: 5px; height: 5px; border: 1px solid #fff; display: inline-block; margin: 0 2px 0 0; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box;
}
#iphone-6 .screen .topbar .signal span.full { background: #fff;
}
#iphone-6 .screen .topbar .time { position: absolute; width: 100%; text-align: center; top: 5px;
}
#iphone-6 .screen .topbar .battery { position: absolute; right: 10px; top: 5px; width: 20px; height: 8px; border: 1px solid #fff; display: inline-block; -webkit-border-radius: 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px; -moz-background-clip: padding; border-radius: 2px; background-clip: padding-box;
}
#iphone-6 .screen .topbar .battery:before { content: ''; position: absolute; right: -3px; width: 3px; height: 4px; top: 2px; background: #fff; display: inline-block; -webkit-border-radius: 0 1px 1px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 1px 1px 0; -moz-background-clip: padding; border-radius: 0 1px 1px 0; background-clip: padding-box;
}
#iphone-6 .screen .topbar .battery:after { content: ''; position: absolute; top: 1px; left: 1px; width: 7px; height: 6px; background: #fff; display: inline-block;
}
#iphone-6 .screen .loading { background: #fff; z-index: 9; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
#iphone-6 .screen .loading img { position: absolute; top: 50%; left: 50%; width: 64px; height: 78px; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
#iphone-6 .screen .wallpaper { width: 495px; height: 787px; position: absolute; top: 50%; left: 50%; z-index: 1; background: url(https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/wallpaper.jpg) center; -webkit-background-size: 495px 787px; -moz-background-size: 495px 787px; background-size: 495px 787px; margin-top: -393.5px; margin-left: -247.5px;
}
#iphone-6 .screen .dashboard { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
#iphone-6 .screen .dashboard .grid { position: absolute; top: 30px; display: block; margin: 0 30px;
}
#iphone-6 .screen .dashboard .dock { position: absolute; left: 0; bottom: 0; display: block; width: 100%; padding: 15px 30px; overflow: hidden;
}
#iphone-6 .screen .dashboard .dock:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(https://dl.dropboxusercontent.com/u/41791400/pen/iphone6/wallpaper.jpg) bottom center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -webkit-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%); -moz-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%); -ms-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%); filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%);
}
#iphone-6 .screen .dashboard .dock:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3);
}
#iphone-6 .screen .dashboard .dock .app { margin-bottom: 10px;
}
#iphone-6 .screen .dashboard .app { width: 62px; height: 62px; display: inline-block; float: left; margin: 0 22px 26px 0; position: relative; z-index: 3;
}
#iphone-6 .screen .dashboard .app.last { margin-right: 0;
}
#iphone-6 .screen .dashboard .app img { width: 100%; margin: -5px 0 0 -5px; float: left; width: 72px; height: 72px;
}
#iphone-6 .screen .dashboard .app .label { width: 120%; text-align: center; position: absolute; font-size: 11px; bottom: -14px; left: -10%;
}
#iphone-6 .screen .lock { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; background: url(https://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;
}
#iphone-6 .screen .lock:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(https://res.cloudinary.com/themesholic/image/upload/v1420903986/wallpaper_xe4crd.jpg) bottom center; -webkit-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%); -moz-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%); -ms-filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%); filter: blur(10px) brightness(0.9) saturate(90%) contrast(90%); -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;
}
#iphone-6 .screen .lock:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.05);
}
#iphone-6 .screen .lock .text { position: absolute; top: 90px; width: 100%; text-align: center; font-size: 16px; letter-spacing: 1px; font-weight: lighter; z-index: 2;
}
#iphone-6 .screen .lock .pills { position: absolute; width: 100%; top: 125px; z-index: 2; -webkit-animation-duration: 0.9s; -moz-animation-duration: 0.9s; -o-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
}
#iphone-6 .screen .lock .pills span { width: 8px; height: 8px; display: inline-block; margin: 0 10px; border: 1px solid #87bbf8; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;
}
#iphone-6 .screen .lock .pills span.fill { background: #87bbf8;
}
#iphone-6 .screen .lock .pills.error { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake;
}
#iphone-6 .screen .lock .pills lesshat-selector { -lh-property: 0; }
@-webkit-keyframes shake{ 0%,100%{ -webkit-transform: translate3d(0,0,0)}10%,30%,50%,70%,90%{ -webkit-transform: translate3d(-10px,0,0)}20%,40%,60%,80%{ -webkit-transform: translate3d(10px,0,0)}}
@-moz-keyframes shake{ 0%,100%{ -moz-transform: translate3d(0,0,0)}10%,30%,50%,70%,90%{ -moz-transform: translate3d(-10px,0,0)}20%,40%,60%,80%{ -moz-transform: translate3d(10px,0,0)}}
@-o-keyframes shake{ 0%,100%{ -o-transform: translate3d(0,0,0)}10%,30%,50%,70%,90%{ -o-transform: translate3d(-10px,0,0)}20%,40%,60%,80%{ -o-transform: translate3d(10px,0,0)}}
@keyframes shake{ 0%,100%{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}10%,30%,50%,70%,90%{-webkit-transform: translate3d(-10px,0,0);-moz-transform: translate3d(-10px,0,0);-ms-transform: translate3d(-10px,0,0);transform: translate3d(-10px,0,0);}20%,40%,60%,80%{-webkit-transform: translate3d(10px,0,0);-moz-transform: translate3d(10px,0,0);-ms-transform: translate3d(10px,0,0);transform: translate3d(10px,0,0);}}
[not-existing] { zoom: 1;
}
#iphone-6 .screen .lock .keyboard { position: absolute; display: block; top: 200px; margin: 0 40px; z-index: 2;
}
#iphone-6 .screen .lock .keyboard .number { width: 72px; height: 72px; border: 1px solid #87bbf8; float: left; margin: 0 35px 15px 0; cursor: pointer; position: relative; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; -o-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
}
#iphone-6 .screen .lock .keyboard .number.click { -webkit-animation-name: click; -moz-animation-name: click; -o-animation-name: click; animation-name: click;
}
#iphone-6 .screen .lock .keyboard .number.click lesshat-selector { -lh-property: 0; }
@-webkit-keyframes click{ 0%{ background: transparent;} 50%{background: #87bbf8} 100%{background: transparent}}
@-moz-keyframes click{ 0%{ background: transparent;} 50%{background: #87bbf8} 100%{background: transparent}}
@-o-keyframes click{ 0%{ background: transparent;} 50%{background: #87bbf8} 100%{background: transparent}}
@keyframes click{ 0%{ background: transparent;} 50%{background: #87bbf8} 100%{background: transparent}}
[not-existing] { zoom: 1;
}
#iphone-6 .screen .lock .keyboard .number.last { margin-right: 0;
}
#iphone-6 .screen .lock .keyboard .number.center { margin-right: 0; margin-left: 107px;
}
#iphone-6 .screen .lock .keyboard .number.center em { margin-top: 8px;
}
#iphone-6 .screen .lock .keyboard .number em { font-style: normal; font-size: 38px; font-weight: lighter; position: absolute; top: 10px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);
}
#iphone-6 .screen .lock .keyboard .number span { position: absolute; width: 100%; text-align: center; left: 0; bottom: 10px; font-size: 9px; letter-spacing: 1px; font-weight: lighter;
}
#iphone-6 .screen .lock .emergency,
#iphone-6 .screen .lock .delete { position: absolute; left: 45px; bottom: 30px; font-size: 14px; font-weight: lighter; letter-spacing: 1px; z-index: 2;
}
#iphone-6 .screen .lock .delete { left: auto; right: 45px;
}
#iphone-6 .screen .overlay { position: absolute; z-index: 9; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none;
}
#iphone-6 .screen .overlay .alert { position: absolute; top: 50%; left: 50%; text-align: center; background: #fff; color: #111; padding: 15px 0; width: 220px; -webkit-border-radius: 10px; -webkit-background-clip: padding-box; -moz-border-radius: 10px; -moz-background-clip: padding; border-radius: 10px; background-clip: padding-box; zoom: 1; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2); -moz-transform: translateX(-50%) translateY(-50%) scale(1.2); -ms-transform: translateX(-50%) translateY(-50%) scale(1.2); -o-transform: translateX(-50%) translateY(-50%) scale(1.2); transform: translateX(-50%) translateY(-50%) scale(1.2);
}
#iphone-6 .screen .overlay .alert.pop { zoom: 1; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
#iphone-6 .screen .overlay .alert .text { padding: 5px 5px 20px; margin-bottom: 15px; border-bottom: 1px solid #bebdb7;
}
#iphone-6 .screen .overlay .alert .text strong { display: block; font-size: 14px; margin-bottom: 5px;
}
#iphone-6 .screen .overlay .alert a { color: #0085FF; text-decoration: none; font-weight: bold;
}
#iphone-6.black { background: #4f4f4f;
}
#iphone-6.black:before,
#iphone-6.black .home:after { background: #0b0b0b;
}
#iphone-6.black .power,
#iphone-6.black .volume-switch,
#iphone-6.black .volume-plus,
#iphone-6.black .volume-minus { background: #333;
}

Interactive CSS3 iPhone 6 - Script Codes JS Codes

(function() { var IPHONE, iPhoneController; iPhoneController = (function() { function iPhoneController() {} iPhoneController.prototype.init = function() { this.setTime(); this.loading(); this.pin(); this.controls(); this.colors(); return this.parallaxBG(); }; iPhoneController.prototype.loading = function() { return setTimeout(function() { return $('.loading').fadeOut(200, function() {}); }, 3500); }; iPhoneController.prototype.controls = function() { $('.app a, .home a').on('click', function(e) { e.preventDefault(); return IPHONE.alert('show'); }); $('.alert a').on('click', function(e) { e.preventDefault(); return IPHONE.alert('hide'); }); return $('.power').on('click', function(e) { e.preventDefault(); $('.overlay').fadeOut(); return $('.lock').fadeIn(); }); }; iPhoneController.prototype.alert = function(action) { if (action === 'show') { return $('.overlay').fadeIn(200, function() { return $('.alert').addClass('pop'); }); } else { return $('.overlay').fadeOut(200, function() { return $('.alert').removeClass('pop'); }); } }; iPhoneController.prototype.colors = function() { return $('#switch a').on('click', function(e) { var color; e.preventDefault(); color = $(this).data('color'); return $('#iphone-6').removeClass().addClass(color); }); }; iPhoneController.prototype.setTime = function() { var hours, minutes, now; now = new Date(); hours = now.getHours() > 9 ? now.getHours() : '0' + now.getHours(); minutes = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes(); return $('.time').text(hours + ':' + minutes); }; iPhoneController.prototype.parallaxBG = function() { return $.parallaxify({ positionProperty: 'transform', responsive: true, motionType: 'natural', mouseMotionType: 'performance', motionAngleX: 70, motionAngleY: 70, alphaFilter: 0.5, adjustBasePosition: true, alphaPosition: 0.025 }); }; iPhoneController.prototype.pin = function() { var checkPin, count, input; input = ''; count = 0; $('.keyboard div').on('click', function(e) { var number, value; e.preventDefault(); number = $(this); value = number.find('em').text(); input += value; $('.keyboard div').removeClass('click'); number.addClass('click').delay(200).queue(function() { return $(this).removeClass('click'); }); $('.pills').removeClass('error').find('span').eq(count).addClass('fill'); count++; if (count === 4) { return checkPin(input); } }); return checkPin = function(check) { var pin; pin = '1234'; count = 0; input = ''; $('.pills').find('span').removeClass('fill'); if (check === pin) { return $('.lock').fadeOut(200); } else { return $('.pills').addClass('error'); } }; }; return iPhoneController; })(); IPHONE = new iPhoneController; IPHONE.init();
}).call(this);
Interactive CSS3 iPhone 6 - Script Codes
Interactive CSS3 iPhone 6 - Script Codes
Home Page Home
Developer Moreno Di Domenico
Username MorenoDiDomenico
Uploaded September 07, 2022
Rating 4.5
Size 11,365 Kb
Views 22,264
Do you need developer help for Interactive CSS3 iPhone 6?

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!

Moreno Di Domenico (MorenoDiDomenico) Script Codes
Name
JQuery Hmbrgr Plugin
OwlCarousel
Gallery
SVG Logo
Dependency
Canvas Wall
A Pen by Moreno Di Domenico
Wheel of Fortune
Bootstrap Clean Buttons
Orientation example
Create amazing marketing copy 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!