Unsubscribe dialog

Developer
Yuri Morini
Size
2,584 Kb
Views
10,120
  1. Unsubscribe dialog Previews
  2. Unsubscribe dialog HTML Codes
  3. Unsubscribe dialog CSS Codes

How do I make an unsubscribe dialog?

What is a unsubscribe dialog? How do you make a unsubscribe dialog? This script and codes were developed by Yuri Morini on 24 November 2022, Thursday.

Unsubscribe dialog Previews
IQ Test

Unsubscribe dialog - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>unsubscribe dialog</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="dialog"> <h2>Sei sicuro di volerti disiscrivere ?</h2> <p> Ci dispiace vederti andare via. Se sei sicuro, conferma la disiscrizione. </p> <form method="post" action="#"> <button>Non voglio più ricevere messaggi</button> </form> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Unsubscribe dialog - Script Codes CSS Codes

html, body { margin:0; padding:0; background: #e0e0ea; font-family: sans-serif; font-size: 16px; height:100%;
}
.wrapper { display: flex; justify-content: center; align-items: center; height:100%;
}
.dialog { background: #fff; max-width: 500px; box-shadow: 0 5px 3px -5px rgba(0,0,0,.2); box-sizing: border-box; padding:50px; font-size:1.25rem; border-radius: 5px; color: #668; line-height: 1.9rem; position:relative;
}
.dialog-complete {	text-align:center;
}
.dialog-user {	font-weight: bold;	color: #333;	display:block;	margin-top:1em;
}
.dialog h2 { font-weight: bold; font-size: 1.75rem; margin:0; color: #335;
}
.dialog::before { content: ' '; display:block; position:absolute; width: 95.3px; height:58.7px; top: -121px; left:50%; transform: translateX(-50%); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NS4zIDU4LjciPg0KICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMCAwaDk1LjJ2NTguN0gweiIvPg0KICA8cGF0aCBmaWxsPSIjRURFREVEIiBkPSJNOTMuOSAxLjJINDcuNnY0NC4xIi8+DQogIDxwYXRoIGZpbGw9IiNGN0Y3RjciIGQ9Ik00Ny42IDEuMkgxLjNsNDYuMyA0NC4xIi8+DQogPCEtLSA8cGF0aCBmaWxsPSIjRURERkRGIiBkPSJNNDcuNiAxLjJoNDYuM3Y1Ni4zSDQ3LjZ6Ii8+DQogIDxwYXRoIGZpbGw9IiNGNEU2RTUiIGQ9Ik0xLjMgMS4yaDQ2LjN2NTYuM0gxLjN6Ii8+IC0tPg0KICA8cGF0aCBmaWxsPSIjQzRCOUI5IiBkPSJNOTQgMS4ySDQ3LjZ2NDQuMSIvPg0KICA8cGF0aCBmaWxsPSIjRTFEM0QzIiBkPSJNNDcuNiAxLjJIMS4zbDQ2LjMgNDQuMSIvPg0KICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNNDcuNiAzNy4xTDEuMyAxLjJIOTQiLz4NCjwvc3ZnPg0K"); animation-duration: .8s; animation-name: boinc; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.77,0,0.18,1); animation-direction: alternate
}
.dialog button { background: #fff; border: 0; padding:10px 20px; display: inline-block; background: #23a9d8; color:#fff; font-size: 1.1rem; margin-top:.5em; cursor: pointer;
}
.dialog button:hover { background-color: #28C1F6;
}
@keyframes boinc { 0% { transform: translateX(-50%) translateY(-5px); animation-timing-function: ease-in; } 100% { transform: translateX(-50%) translateY(5px); animation-timing-function: ease-out; }
}
Unsubscribe dialog - Script Codes
Unsubscribe dialog - Script Codes
Home Page Home
Developer Yuri Morini
Username yurimorini
Uploaded November 24, 2022
Rating 3
Size 2,584 Kb
Views 10,120
Do you need developer help for Unsubscribe dialog?

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!

Yuri Morini (yurimorini) Script Codes
Name
A Pen by Yuri Morini
Test animation
Testing minimal input field
Animated number transition.
Page slider
Albino button
Fixed rotated square loader test
Line spinner
Extra canvas menu
Animation test
Create amazing sales emails with AI!

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!