IMac Mock
How do I make an imac mock?
What is a imac mock? How do you make a imac mock? This script and codes were developed by Zachary Olson on 10 November 2022, Thursday.
IMac Mock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iMac Mock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="desktop"> <div class="desktop-monitor"> <div class="desktop-screen"> <div class="desktop-content"></div> </div> </div> <div class="desktop-stand"></div>
</div>
</body>
</html>
IMac Mock - Script Codes CSS Codes
.desktop-content { /*background-image: url('whatever.jpg');*/
}
.desktop { width: 80%;
}
.desktop, .desktop-stand { margin: 0 auto;
}
.desktop:before, .desktop:after,
.desktop-content:after,
.desktop-monitor:before,
.desktop-stand:before, .desktop-stand:after { content: ''; display: block;
}
.desktop:before { float: left; width: 1px; padding-top: 80%;
}
.desktop:after { clear: both;
}
.desktop-monitor { position: relative; z-index: 2; width: 100%; box-shadow: 0px 2px 5px #CCC; padding-bottom: 10%; background-color: #E5E5E5; border-radius: 5px;
}
.desktop-screen { padding: 3%; background-color: #000; border-radius: 5px 5px 0 0;
}
.desktop-content { position: relative; padding-top: 60%; background-position: top center; background-size: cover; background-color: purple;
}
.desktop-content:after { position: absolute; bottom: -18%; left: 50%; width: 6%; padding-top: 6%; margin-left: -3%; background-color: #DDD; border-radius: 50%;
}
.desktop-monitor:before { position: absolute; z-index: 2; width: 100%; height: 100%; background: linear-gradient(30deg, rgba(204, 204, 204, 0) 0%,rgba(204, 204, 204, 0) 55%,rgba(204, 204, 204, 0.2) 56%,rgba(204, 204, 204, 0) 100%);
}
.desktop-stand{ margin-top: -1%; width: 30%;
}
.desktop-stand:before { width: 78%; padding-top: 25%; margin: 0 auto; background-image: linear-gradient(to bottom, #DADADA 40%, #B9B9B9 100%);
}
.desktop-stand:after { width: 82%; margin: 0 auto; padding-top: 20%; background: linear-gradient(to bottom, #B9B9B9 0%,#D5D5D5 50%,#DADADA 100%); -webkit-transform: perspective(100px) rotate3d(1, 0, 0, 40deg) translateZ(10px); -o-transform: perspective(100px) rotate3d(1, 0, 0, 40deg) translateZ(10px); transform: perspective(100px) rotate3d(1, 0, 0, 40deg) translateZ(10px); border-radius: 0 0 5px 5px; border-bottom: 3px solid #AAA;
}
/* Codepen styling - ignore */
body { padding-top: 5%; background-color: #F1E0FF;
}
Developer | Zachary Olson |
Username | zacharyolson |
Uploaded | November 10, 2022 |
Rating | 3.5 |
Size | 2,046 Kb |
Views | 20,240 |
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 |
D3 version of animated chart dribbble | 4,327 Kb |
Css version of macbook dribbble | 2,919 Kb |
A Pen by Zachary Olson | 1,163 Kb |
Direction-aware hover with pure css | 3,596 Kb |
Scroll Position Indicators | 5,711 Kb |
Blackberry Mock | 1,865 Kb |
Hovers with popups | 2,380 Kb |
Convert JSON to ruby hash | 2,000 Kb |
Border Radius Bouncer | 2,415 Kb |
Nerdventure Feed | 4,817 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 |
Next Word Predictor | Rfalor | 2,776 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
Table Exercise | Fresco | 9,585 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Horizontal scroll fixed element | HerrSerker | 0 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!