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 |
Pick the lock | 10,025 Kb |
Skeumorphic Switch | 3,559 Kb |
OK Go WTF Effect | 2,010 Kb |
Epic Editor | 2,079 Kb |
Puertofolio | 6,190 Kb |
Grid Using Golden Ratio and floats | 9,695 Kb |
Base64 encoded animated loading folder gif | 2,440 Kb |
GPX to JSON | 19,708 Kb |
Clock loader | 1,775 Kb |
Breaking out of overflow hidden | 7,877 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 |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Hello People | Danburrows | 2,365 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Testing Portfolio Page | Sideshowli | 3,395 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!