IPad Mock
How do I make an ipad mock?
What is a ipad mock? How do you make a ipad mock? This script and codes were developed by Zachary Olson on 10 November 2022, Thursday.
IPad Mock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iPad Mock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ipad ipad-horiz"> <i class="ipad-camera" ></i> <div class="ipad-screen"> <div class="ipad-content"></div> </div> <i class="ipad-btn" ></i>
</div>
<div class="ipad ipad-vert"> <i class="ipad-camera" ></i> <div class="ipad-screen"> <div class="ipad-content"></div> </div> <i class="ipad-btn" ></i>
</div>
</body>
</html>
IPad Mock - Script Codes CSS Codes
.ipad-content { background-position: top center; background-size: cover; background-color: purple;
}
.ipad { position: relative; margin: 0 auto; background-color: #FFF; border-radius: 4px; border: 1px solid rgba(204, 204, 204, 0.5); box-shadow: 0 2px 2px #CCC;
}
.ipad:before, .ipad:after { display: block; content: '';
}
.ipad:after { width: 1px; }
.ipad-horiz:after { padding-top: 70%; }
.ipad-vert:after { padding-top: 140%; }
.ipad:before { position: absolute; z-index: 2; width: 100%; height: 100%;
}
.ipad-horiz { width: 80%;
}
.ipad-horiz:before { 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%)
}
.ipad-vert { width: 60%;
}
.ipad-vert:before { background: linear-gradient(58deg, rgba(204, 204, 204, 0) 0%,rgba(204, 204, 204, 0) 65%,rgba(204, 204, 204, 0.2) 66%,rgba(204, 204, 204, 0) 100%);
}
.ipad-camera, .ipad-btn { display: block; border-radius: 50%;
}
.ipad-vert .ipad-camera, .ipad-vert .ipad-btn { margin-right: auto; margin-left: auto;
}
.ipad-camera { background-color: #000; width: 1%; padding-top: 1%;
}
.ipad-horiz .ipad-camera { position: absolute; top: 49%; left: 2%;
}
.ipad-vert .ipad-camera { margin-top: 3%;
}
.ipad-btn { background-color: #EEE; }
.ipad-vert .ipad-btn { position: absolute; top: 93%; right: 47%; width: 6%; padding-top: 6%;
}
.ipad-horiz .ipad-btn { position: absolute; width: 4%; padding-top: 4%; top: 48%; right: 0; margin-right: 3%;
}
.ipad-screen { background-color: #222; border-radius: 2px; border: 1px solid #CCC;
}
.ipad-vert .ipad-screen { width: 90%; height: 83%; margin: 0 auto; padding-top: 2%; position: absolute; top: 5%; left: 5%;
}
.ipad-horiz .ipad-screen { width: 83%; height: 90%; padding-left: 2%; position: absolute; top: 5%; left: 5%;
}
.ipad-content { height: 100%;
}
.ipad-vert .ipad-content { border-radius: 0 0 2px 2px;
}
.ipad-horiz .ipad-content { border-radius: 0 2px 2px 0;
}
/* Codepen styling - ignore */
body { padding-top: 5%; background-color: #F1E0FF;
}
.ipad-vert { margin-top: 5%; }
Developer | Zachary Olson |
Username | zacharyolson |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 2,008 Kb |
Views | 12,144 |
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 |
Scroll Position Indicators | 5,711 Kb |
No JS Modals | 2,843 Kb |
Nerdventure Feed | 4,817 Kb |
A Pen by Zachary Olson | 1,163 Kb |
Hovers with popups | 2,380 Kb |
Blackberry Mock | 1,865 Kb |
Direction-aware hover with pure css | 3,596 Kb |
Convert JSON to ruby hash | 2,000 Kb |
IMac Mock | 2,046 Kb |
Css version of macbook dribbble | 2,919 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 |
Ball physics | Blackkbot | 3,874 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Addthis_button | Esambino | 1,691 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Image grid with captions | Mchernin34 | 2,222 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
SCSS Social Icons Flat | Mattsince87 | 3,482 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!