Blackberry Mock

What is a blackberry mock How do you make a blackberry mock? This script and codes were developed by Zachary Olson on 14 January 2022, Friday.

How do I make an blackberry mock?
  1. Blackberry Mock Previews
  2. Blackberry Mock HTML Codes
  3. Blackberry Mock CSS Codes
Blackberry Mock Previews

Blackberry Mock 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 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;
}
Do you want hide your ip address?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.