Mobile Modal Error Message - Retina

Tutorials of (Mobile modal error message - retina) by Sarah eskew holley

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Mobile Modal Error Message - Retina</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="modal_mobile_retina openSansText">
  <div class="title openSansText boldText">Error Header</div>
  <span class="content openSansText">Your order could not be processed. Please try again.</span>
  <div class="button openSansText">OK</div>
</div>


<div class="black_back"></div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.openSansText {
	font-family: 'Open Sans', sans-serif;
	color: black;
  font-size: 13px;
  line-height: 20px;
}

.boldText {
	font-weight: 700;
}

.black_back {
	position: fixed;
	background: rgba(0,0,0,0.2) left top;
	width: 100%;
	height:100%;
	z-index: 99;
}

/* don't include above styles in final! */


.modal_mobile_retina {
  width: 560px;
  position: fixed;
  padding: 60px 0 0 0;
  background-color: #fff;
  z-index: 100;
  border-radius: 10px;
}

.modal_mobile_retina div.title.openSansText.boldText {
	font-size: 40px;
	text-align: center;
}

.modal_mobile_retina .content {
	font-size: 28px;
	line-height: 40px;
  text-align: center;
  display: inline-block;
	margin: 40px 40px 60px 40px;
}

.modal_mobile_retina .button {
	border-top: 2px solid #E9E9E9;
	font-size: 32px;
	color: #3d7ac3;
	line-height: 88px;
	text-align: center;
	width: 100%;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Mobile Modal Error Message - Retina ) is write by Sarah Eskew Holley, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Sarah Eskew Holley