Blackberry Mock
How do I make an blackberry mock?
What is a blackberry mock? How do you make a blackberry mock? This script and codes were developed by Zachary Olson on 10 November 2022, Thursday.
Blackberry Mock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blackberry Mock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="blackberry"> <div class="blackberry-content"></div> <div class="blackberry-inputs"></div>
</div>
</body>
</html>
Blackberry Mock - Script Codes CSS Codes
.blackberry-content { background-position: top center; background-size: cover; background-color: purple; /* use background url to showcase whatever screenshot you want. It will strech. background-image: url('somethingawesome.jpg'); */
}
.blackberry { position: relative; width: 200px; height: 250px; margin: 0 auto; background: #222; border-radius: 6% 6% 50% 50% / 6% 6% 12% 12%;
}
.blackberry:before { padding-top: 7%;
}
.blackberry:after { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: linear-gradient(50deg, rgba(204, 204, 204, 0) 0%,rgba(204, 204, 204, 0) 58%,rgba(204, 204, 204, 0.1) 59%,rgba(204, 204, 204, 0) 100%)
}
.blackberry-content { width: 86%; height: 59%; margin: 0 auto; border-radius: 2%;
}
.blackberry:after, .blackberry:before, .blackberry-inputs:before, .blackberry-inputs:after { display: block; content: '';
}
.blackberry-inputs { height: 32%;
}
.blackberry-inputs:before { width: 5%; margin: 3% auto; padding-top: 5%; border-radius: 50%; background-color: #555;
}
.blackberry-inputs:after { width: 86%; height: 65%; margin: 0 auto; background-color: #333; border-radius: 0 0 50% 50% / 0 0 35% 35%;
}
/* Codepen styling - ignore */
body { padding-top: 5%; background-color: #F1E0FF;
}
Developer | Zachary Olson |
Username | zacharyolson |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 1,865 Kb |
Views | 18,216 |
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 |
Convert JSON to ruby hash | 2,000 Kb |
Border Radius Bouncer | 2,415 Kb |
Nerdventure Feed | 4,817 Kb |
IPad Mock | 2,008 Kb |
Scroll Position Indicators | 5,711 Kb |
D3 version of animated chart dribbble | 4,327 Kb |
Direction-aware hover with pure css | 3,596 Kb |
A Pen by Zachary Olson | 1,163 Kb |
No JS Modals | 2,843 Kb |
Hovers with popups | 2,380 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 |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Basic template | Tomcat | 1,675 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 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!