Mac OS X Mockup
How do I make an mac os x mockup?
What is a mac os x mockup? How do you make a mac os x mockup? This script and codes were developed by Collin Chappell on 03 February 2023, Friday.
Mac OS X Mockup - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mac OS X Mockup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
<div class="login"> <div class="login_area"> <div class="login_image"><img src="http://assets-cloud.enjin.com/users/11682587/avatar/avatar.1434484425.png"><br><br><span> Collin Chappell</span> <br> <br> <input type="password" name="login" placeholder="Password" id="password"></input> </div>
</div>
</div>
<div class="main"> <div class="dockWrap"> <div class="dock"> <div class="icon finder"> <div class="title"> <p>Finder</p> </div> <img src="http://ios-update.com/sites/default/files/styles/medium/public/blog/finder-icon.png?itok=ZTPsWAub"> </div> </div> <div class="icon settings"> <div class="title"> <p>Finder</p> </div> <img src="http://ios-update.com/sites/default/files/styles/medium/public/blog/finder-icon.png?itok=ZTPsWAub"> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Mac OS X Mockup - Script Codes CSS Codes
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: 'Source Sans Pro', sans-serif;
}
input[type=password], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none;
}
input[type=password]:focus, textarea:focus { background: rgba(255,255,255,0.4);
}
::-webkit-input-placeholder { /* WebKit browsers */ color: rgba(255,255,255,0.74);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: rgba(255,255,255,0.75);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: rgba(255,255,255,0.75);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: rgba(255,255,255,0.75);
}
.login { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://i.imgur.com/4axqtn6.jpg); background-size: cover; background-position: center center; background-attachment: fixed; transition: opacity 1.2s; z-index: 4000 !important;
}
.login .login_area { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 60%; min-height: 35%; height: 52.5%; margin: auto; transition: opacity 0.6s;
}
.login .login_area .login_image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 14px; color: rgba(255,255,255,0.9); width: 50%; height: 100%; margin: auto; text-align: center; padding: 0px 4px; box-sizing: border-box;
}
.login_image img { position: relative; border-radius: 100%; width: 22.5%; box-sizing: border-box; border-bottom: 2px solid rgba(0,0,0,0.)
}
.login_image input { display: block; margin: auto; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.3); border: none; border-radius: 10px; box-sizing: border-box; padding: 6px 6px;
}
.main { top: 0; left: 0; width: 100%; height: 100%; background: url(https://i.imgur.com/1XVspsc.jpg); background-size: cover; background-position: center center; background-attachment: fixed; transition: opacity 1.2s; opacity: 0; z-index: 1;
}
.dockWrap { position: fixed; bottom: 0px; left: 10%; width: 80%; height: 64px; background: url(https://i.imgur.com/4axqtn6.jpg); background-size: cover; background-position: center center; background-attachment: fixed;
}
.dock { position: fixed; bottom: 0px; left: 10%; width: 80%; height: 64px; background: rgba(255,255,255,0.2);
}
.dock .finder { position: relative; top: -16px; width: 128px; background: rgba(255,255,255,0.2);
}
.dock .icon img { position: relative; width: 64px; top: -34px; left: 22.5%;
}
.dock .icon .title { position: relative; top: -38px; text-align: center;
}
.settings { position: relative; left: 12.5%; top: -16px; background: rgba(255,255,255,0.2); width: 128px;
}
.settings img { width: 64px;
}
Mac OS X Mockup - Script Codes JS Codes
$('#password').keypress(function (e) { if (e.which == 13) { $('.login').css('opacity', '0'), $('.main').css('opacity', '1', function () { $() }); };
});
Developer | Collin Chappell |
Username | Keubix |
Uploaded | February 03, 2023 |
Rating | 3 |
Size | 2,794 Kb |
Views | 2,024 |
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 |
Parallax navigation | 2,505 Kb |
Frosted Glass Panels | 3,134 Kb |
A Pen by Collin Chappell | 3,162 Kb |
DART Website Design | 0 Kb |
Flip Out Navigation Concept | 3,854 Kb |
Info Revealing Hover Effects | 2,877 Kb |
Enjin Navigation Bar Creator | 6,599 Kb |
Minedrix | 0 Kb |
Profile Page | 2,900 Kb |
Frosted Glass Navigation Bar | 2,804 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 |
CardMove | Thompsonemerson | 3,699 Kb |
Twitch TV | Natester13 | 4,488 Kb |
Perforated foil | 0x04 | 2,617 Kb |
A cube | KyleDavidE | 18,627 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Improve | Gavra | 1,652 Kb |
Shopping List | Markmurray | 6,015 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!