Newsletter Popup Design with Mobile Responsive

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsletter Popup Design with Mobile Responsive</title>
</head>

<body>
    <div class="area-popup" id="areaClose">
        <div class="area-popup-stripe" id="areaPopup">
            <div class="area-popup-content">
                <div class="area-form-box">
                    <form action="#">
                        <div class="area-message-success" style="display:block;">
                            <div class="area-content-title">
                                <div class="area-image">
                                    <h2>Subscribe to<br />our newslater</h2>
                                    <h1>Get all deals notification</h1>
                                </div>
                            </div>
                            <div class="area-sale">
                                <h3>DISCOUNT<br /><b>30</b> %</h3>
                            </div>
                            <div class="area-content">
                                
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna.</p>
                                <div class="area-message-error">
                                    
                                </div>
                                <input type="text" name="email" value="" placeholder="edu@teknowize.com" />
                                <input type="submit" value="SUBMIT" />
                            </div>
                            <div class="area-privacy">
                                Created by<a
                                    href="#" target="_blank"> @teknowize</a>.
                            </div>
                        </div>
                    </form>
                    <button onclick="document.getElementById('areaClose').remove()" class="area-close"><img class="area-close"
                            src="https://www.teknowize.com/attachments/file_1693745929.png"></button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS Copied

@-ms-viewport {
	width: device-width;
}
body {
	margin: 0;
	padding: 0;
}

.area-popup {
	/* master mandatory container, required by Mailocator */
	/* z-index must be higher in DOM structure */
	z-index: 109999999;
  font-family: 'Trebuchet MS', TrebuchetMSStatic, Arial, sans-serif;
  font-weight: 400;
}
.area-popup .area-popup-stripe {
	/* customize stripe */
	text-align: center;
	/* stripe defaults */
	position: fixed;
	bottom: 0px;
	width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  padding: 0;
  border: 0;
  z-index: 109999999;
  box-sizing: border-box;
}
/* Close via CSS;alternative to mailocator.action.do('close') */
.area-popup:target {
	display: none;
	visibility: hidden;
}
/* customizable popup content... */
.area-popup-content {
  position: relative;
	width: 100%;
  height: 100%;
	margin: 0;
  padding: 0px;
	text-align: center;
	color: #000;
	box-sizing: border-box;
}
.area-content-title {
  position: relative;
	width: 100%;
  margin: 0;
  padding: 5% 0 0 0;
	text-align: center;
  z-index: 9996;
}
.area-content {
	position: relative;
	width: 100%;
	background-color: #f0ba6e;
	text-align: center;
  margin: -8% 0 0 0;
  border-radius: 0;
  box-shadow: 0px 5px 20px RGBA(0,0,0,0.15);
  padding: 6% 0 10px 0;
  z-index: 9990;
}
.area-form-box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
  max-width: 440px;
  min-width: 220px;
  background-color: transparent;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%) scale(1.0, 1.0);
  -webkit-font-smoothing: subpixel-antialiased;
  border: 0;
	margin: 0px auto;
  padding: 0;
	box-shadow: 0;
	text-align: center;
}
.area-popup-content * {
	box-sizing: border-box;
}
.area-popup-content a {
	color: #d75755;
  font-weight: 600;
}
.area-popup-content form {
	width: 100%;
	border: none;
}
.area-popup-content h1 {
	width: 100%;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  color: #d75755;
  padding: 0;
  margin: 5% 0 0;
	box-sizing: border-box;
}
.area-popup-content h1.area-thx {
  margin: 4% 0 0;
}
.area-popup-content h2 {
  font-size: 32px;
  line-height: 38px;
  font-weight: 800;
  color: #000;
  padding: 0 15%;
  margin: 0;
	box-sizing: border-box;
}
.area-popup-content h3 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  color: #fff;
  padding: 0;
  margin: 0;
	box-sizing: border-box;
}
.area-popup-content h3 b {
  font-size: 1.5em;
  font-weight: 800;
}
.area-image {
  width: 100%;
  height: 450px;
	margin: -5% 0 -1px 0;
  padding: 1% 0 27% 0;
	position: relative;
  display: block;
  background: url(https://www.teknowize.com/attachments/file_1693745916.png) 53% bottom no-repeat;
  background-size: 65%;
  box-sizing: border-box;
}
.area-sale {
	position: absolute;
  bottom: 41%;
  left: 12%;
  width: 26%;
	margin: 0;
  padding: 2.2% 0;
  display: block;
  background-color: #d75755;
  box-sizing: border-box;
  z-index: 9999;
}
.area-popup-content p {
	width: 100%;
  font-size: 16px;
  line-height: 22px;
  padding: 4% 14% 0;
  color: #000000;
  font-weight: 300;
  margin: 0;
	box-sizing: border-box;
}
.area-popup-content p b {
  font-weight: 700;
}
.area-popup-content p.area-thx {
  padding: 4.5% 12%;
}
.area-message-error {
  display: block;
  min-height: 10px;
  font-size: 15px;
  line-height: 18px;
  margin: 2% 0 1% 0;
  padding: 0 10%;
  font-weight: 700;
  text-align: center;
  color: #d75755;
}
.area-popup-content input[type="text"] {
	height: 50px;
  width: 100%;
  max-width: 340px;
	font-size: 16px;
  line-height: 18px;
	color: #000;
	padding: 2px 10px 2px 10px;
	margin: 4px 0;
  font-family: 'Trebuchet MS', TrebuchetMSStatic, Arial, sans-serif;
  font-weight: 300;
	background-color: #fff;
  border: 0;
  border-bottom: 2px solid #000;
  border-radius: 0;
  -webkit-transition: border ease-in-out .15s;
  -moz-transition: border ease-in-out .15s;
  transition: border ease-in-out .15s;
  text-align: center;
	box-sizing: border-box;
	display: inline-block;
  outline: 0;
}

.area-popup-content input[type="text"]:focus {
  border-bottom: 2px solid #d75755;
  outline: 0;
}
.area-popup-content input[type="submit"], .area-popup-content input[type="button"] {
  position: relative;
	height: 50px;
  width: 100%;
  max-width: 340px;
  font-size: 20px;
  line-height: 28px;
  padding: 0;
  margin: 1vw 0 0 0;
  background-color: #000;
	border: 0px;
  border-radius: 0;
  color: #ffffff;
  cursor: pointer;
  font-family: 'Trebuchet MS', TrebuchetMSStatic, Arial, sans-serif;
  font-weight: 700;
  box-sizing: border-box;
	display: inline-block;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
  outline: 0;
}

.area-popup-content input[type="submit"]:hover, .area-popup-content input[type="button"]:hover {
  background-color: #d75755;
}
.area-popup-content input[type="button"] {
  margin: 5vw 0 0 0;
}
.area-popup-content input[type="submit"]:active, .area-popup-content input[type="button"]:active {
  font-size: 19px;
  outline: 0;
}
.area-privacy {
  display: block;
  background: none;
  color: #000;
  padding: 3% 12% 2%;
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  height: auto;
}
button.area-close {
    border: none;
  display: block;
  position: fixed;
  right: 0px;
  top: 0px;
	width: calc(24px + 2.2vw);
  opacity: 1;
  background: none;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.1s;
  -moz-transition: -moz-transform 0.1s;
  -o-transition: -o-transform 0.1s;
  transition: transform 0.1s;
  z-index: 9999;
}
img.area-close {
	width: calc(24px + 2.2vw);
	max-width: 50px;
}
.area-close:hover {
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}
.area-close:active {
  opacity: 0.8;
}

@media screen and (max-width: 500px) {
.area-form-box {
  width: 85%;
}
.area-popup-content h1 {
  font-size: 5.3vw;
  line-height: 6.2vw;
  margin: 4% 0 0;
}
.area-popup-content h2 {
  font-size: 6.2vw;
  line-height: 6.6vw;
}
.area-popup-content h3 {
  font-size: 4.2vw;
  line-height: 5.7vw;
}
.area-popup-content p {
  font-size: 3.3vw;
  line-height: 4.3vw;
}
.area-message-error {
  font-size: 3.2vw;
  line-height: 4vw;
  padding: 0 8%;
}
.area-image {
	height: 85vw;
  min-width: 212px;
}
.area-sale {
  bottom: calc(38% + 18px);
}
.area-popup-content input[type="text"] {
  max-width: 82%;
  background-size: 4vw auto;
  background-position: 4% center;
  font-size: calc(0.5em + 1.3vw);
	height: calc(10px + 6.5vw);
  margin: 1vw 0;
}
.area-popup-content input[type="submit"], .area-popup-content input[type="button"] {
  max-width: 82%;
	height: calc(10px + 6.5vw);
  font-size: calc(0.5em + 2.2vw);
  line-height: calc(0.5em + 3.2vw);
}
.area-popup-content input[type="submit"]:active, .area-popup-content input[type="button"]:active {
  font-size: calc(0.48em + 2.2vw);
  line-height: calc(0.52em + 3.2vw);
}
.area-privacy {
  font-size: calc(0.2em + 1.9vw);
  line-height: calc(0.4em + 2.1vw);
}
button.area-close {
	width: calc(8px + 4.5vw);
}
img.area-close {
	width: calc(8px + 4.5vw);
}
}

@media screen and (max-width: 262px) {
.area-image {
  min-height: 220px;
}
.area-popup-content h1 {
  font-size: 14px;
  line-height: 16.3px;
}
.area-popup-content h2 {
  font-size: 15.5px;
  line-height: 16.5px;
}
.area-popup-content h3 {
  font-size: 11px;
  line-height: 14.7px;
}
.area-popup-content p {
  font-size: 9px;
  line-height: 11px;
}
.area-sale {
  bottom: 42.5%;
}
.area-message-error {
  font-size: 8.8px;
  line-height: 10px;
}
.area-privacy {
  font-size: 8.1px;
  line-height: 8.6px;
}
}
  
@media screen and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 5/4) {
.area-form-box {
	top: calc(15% - 50px);
}
}

@media (min-aspect-ratio: 5/4) {
.area-form-box {
  width: 70%;
  max-width: 780px;
  max-height: 90%;
  padding: 0;
}
.area-LS-hide {
  display: none!important;
}
.area-popup-content h1 {
  margin: 0;
  font-size: 34px;
  line-height: 40px;
  padding: 2% 15% 0 56%;
}
.area-popup-content h2 {
  text-align: left;
  padding: 0 3% 0 56%;
  font-size: 40px;
  line-height: 52px;
}
.area-popup-content h2 b {
  font-size: 1.6em;
}
.area-popup-content p {
  position: absolute;
  top: -52%;
  left: 56.2%;
  width: 40%;
  text-align: left;
  font-size: 15px;
  line-height: 20px;
  padding: 0;
}
.area-popup-content p.area-thx {
  position: relative;
  width: 40%;
  text-align: left;
  font-size: 15px;
  line-height: 20px;
  padding: 1.5% 0;
}
.area-message-error {
  padding: 0 3% 1% 56%;
  margin: 0;
}
.area-content-title {
  position: relative;
  left: 0;
  top: 0;
  vertical-align: middle;
  padding: 0;
  pointer-events: none;
}
.area-content {
  position: relative;
  vertical-align: middle;
  margin: -19% 0 0 0;
  padding: 1% 0 10px 0;
}
.area-content.area-thx {
  padding: 1% 0 0 0;
}
.area-image {
  position: relative;
  width: 100%;
  background-position: 5% center;
  background-size: 50%;
  height: 500px;
	margin: 0;
  padding: 5% 0 0 0;
  text-align: left;
}
.area-sale {
  bottom: 11.5%;
  left: 3%;
  width: 18%;
  padding: 1.5% 0;
}
.area-popup-content input[type="text"] {
  width: 40%;
	max-height: 46px;
  background-size: 22px auto;
  background-position: 4% center;
  margin: 0 3% 0 56%;
  padding: 0 5% 0 5%;
  height: calc(12px + 5.0vh);
}
.area-popup-content input[type="submit"], .area-popup-content input[type="button"] {
  width: 40%;
	max-height: 46px;
  font-size: 18px;
  height: calc(12px + 5.0vh);
  margin: 2% 3% 0 56%;
  padding: 0 0 2px 0;
}
.area-popup-content input[type="submit"]:active, .area-popup-content input[type="button"]:active {
  font-size: 17px;
}
button.area-close {
  top: calc(5px + 3.2vh);
  right: calc(5px + 1.2vh);
	width: calc(10px + 1vw);
  max-width: 50px;
  z-index: 995;
}
img.area-close {
	width: calc(15px + 1.5vw);
	max-width: 50px;
}
.area-privacy {
  padding: 1.5% 0;
}
}

@media screen and (max-width: 1110px) and (min-aspect-ratio: 5/4) {
.area-content {
  margin: calc(-17% - 20px) 0 0 0;
}
.area-popup-content h1 {
  font-size: 3.05vw;
  line-height: 3.4vw;
}
.area-popup-content h2 {
  font-size: 3.6vw;
  line-height: 4.4vw;
}
.area-popup-content h3 {
  font-size: 2.0vw;
  line-height: 2.6vw;
}
.area-popup-content p, .area-popup-content p.area-thx {
  top: calc(6vh + 30px - 100%);
  font-size: 1.35vw;
  line-height: 1.8vw;
}
.area-message-error {
  font-size: 1.3vw;
  line-height: 1.7vw;
}
.area-image {
	height: 45vw;
}
.area-popup-content input[type="text"] {
  font-size: calc(0.3em + 1.0vw);
  padding: 0 5% 0 5%;
  background-size: 2vw auto;
  background-position: 3.5% center;
}
.area-popup-content input[type="submit"], .area-popup-content input[type="button"] {
  font-size: calc(0.3em + 1.8vh);
  line-height: calc(0.5em + 3.2vh);
  padding: 0 0 1px 0;
}
.area-popup-content input[type="submit"]:active, .area-popup-content input[type="button"]:active {
  font-size: calc(0.26em + 1.8vh);
  line-height: calc(0.52em + 3.2vh);
}
.area-privacy {
  font-size: 1.2vw;
  line-height: 1.5vw;
}
}

@media screen and (min-aspect-ratio: 20/11) {
.area-sale {
  bottom: calc(60vh - 27vw);
  z-index: 9999;
}
}

Newsletter Popup Design with Mobile Responsive

JS Copied

Output