Sony Xperia Z3 Flat MockUp
How do I make an sony xperia z3 flat mockup?
With costum website preview.Part of the collection Flat MockUps, by me.. What is a sony xperia z3 flat mockup? How do you make a sony xperia z3 flat mockup? This script and codes were developed by Dapinitial on 11 August 2022, Thursday.
Sony Xperia Z3 Flat MockUp - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sony Xperia Z3 Flat MockUp</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="display"> <div class="voice"></div> <div class="dot-left one"></div> <div class="dot-left two"></div> <div class="dot-right"></div> <iframe id="screen" name="screen" src=""></iframe> <div class="button"></div>
</div>
<div class="shadow"></div>
<div class="max-width"> <form method="post" target="browser" class="hidden"> <input id="website" value="http://www.spacelabforever.com" type="url" /> <input class="submit" value="GO" type="button" onclick="setBrowserFrameSource(); return false;" /> <div class="icon"></div> <a href="http://twitter.com/nilvila2000" target="_blank" class="under">Made by Nil Vila</a> </form>
</div>
<h1>Xperia Z3</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sony Xperia Z3 Flat MockUp - Script Codes CSS Codes
/* Resources ----------------------- */
@import "http://fonts.googleapis.com/css?family=Roboto:500";
/* Variables and mixings ----------- */
/* General ------------------------- */
*,
*:before,
*:after { padding: 0px; margin: 0px; border: none; color: #38393e; font-family: "Roboto"; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; box-sizing: border-box; outline: none;
}
body { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; height: 100%; width: 100%; background-color: #4e57c4; overflow: hidden; cursor: default;
}
a { text-decoration: none; cursor: pointer;
}
/* Settigns -------------------------- */
.max-width { max-width: 75%; margin: 0px auto;
}
form { -webkit-transform: translateY(-50px); transform: translateY(-50px);
}
form .icon { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 50px; width: 50px; background-color: #e1e1e1; font-size: 30px; cursor: pointer;
}
form .icon:before { font-family: "FontAwesome"; content: "\f013";
}
form .icon:hover:before { -webkit-transform: rotate(900deg); transform: rotate(900deg);
}
form a { float: right; display: block; height: 50px; width: calc(100% - 50px); font-size: 20px; text-align: right; text-transform: uppercase; color: #fafafa; line-height: 50px; -webkit-transform: translateY(-100px); transform: translateY(-100px);
}
form a.hover { -webkit-transform: translateY(-50px); transform: translateY(-50px);
}
form #website { float: left; height: 50px; width: calc(100% - 50px); padding: 0px 20px; background-color: #fafafa; font-size: 20px;
}
form .submit { float: left; height: 50px; width: 50px; background-color: #e1e1e1; font-size: 20px; text-align: center; cursor: pointer;
}
form.visible { -webkit-transform: none; transform: none;
}
/* iPhone ---------------------------- */
.display { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; height: 530px; width: 255px; border-radius: 15px; background-color: #fafafa;
}
.display .voice { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; height: 4px; width: 37px; border-radius: 20px; background-color: #38393e; -webkit-transform: translateY(-248px); transform: translateY(-248px);
}
.display .dot-left { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; height: 7px; width: 7px; border-radius: 20px; background-color: #38393e;
}
.display .dot-left.one { -webkit-transform: translate(-63px, -235px); transform: translate(-63px, -235px);
}
.display .dot-left.two { -webkit-transform: translate(-56px, -235px); transform: translate(-56px, -235px);
}
.display .dot-right { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; height: 9px; width: 9px; border-radius: 20px; background-color: #38393e; -webkit-transform: translate(60px, -234.5px); transform: translate(60px, -234.5px);
}
.display #screen { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; height: 425px; width: 242px; border-radius: 2px; background-color: #38393e;
}
.display .button { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; height: 4px; width: 40px; border-radius: 20px; background-color: #38393e; -webkit-transform: translateY(249px); transform: translateY(249px);
}
.shadow { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; -webkit-filter: blur(6px); filter: blur(6px); height: 4px; width: 300px; border-radius: 100%; background-color: #38393e; -webkit-transform: translateY(267px); transform: translateY(267px); z-index: -1;
}
h1 { position: absolute; bottom: 12px; left: 17px; display: block; font-size: 20px; font-weight: 500; text-transform: uppercase; color: #fafafa;
}
Sony Xperia Z3 Flat MockUp - Script Codes JS Codes
function setBrowserFrameSource(){ var browserFrame = document.getElementById("screen"); browserFrame.src= document.getElementById("website").value;
}
/////////////////////////////
$(document).ready(function () { $(".icon").click(function () { if($("form").hasClass("hidden")) { $("form").removeClass("hidden").addClass("visible"); $("form a").removeClass("under").addClass("hover"); } else if($("form").hasClass("visible")) { $("form").removeClass("visible").addClass("hidden"); $("form a").removeClass("hover").addClass("under"); } });
});
Developer | Dapinitial |
Username | dapinitial |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 4,379 Kb |
Views | 46,552 |
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 |
A Pen by dapinitial | 2,132 Kb |
Clock loader | 1,775 Kb |
A Pen by dapinitial | 3,631 Kb |
Pick the lock | 10,025 Kb |
Skeumorphic Switch | 3,559 Kb |
OK Go WTF Effect | 2,010 Kb |
This is how we do it | 3,283 Kb |
GPX to JSON | 19,708 Kb |
Puertofolio | 6,190 Kb |
Base64 encoded animated loading folder gif | 2,440 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 |
Header | Er40 | 1,542 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Search field | Jamesbarnett | 2,100 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
Heartbeat | Apetrov | 2,079 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!