-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7b2e3fd
commit 16d4ba2
Showing
7 changed files
with
815 additions
and
3 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> | ||
| <meta http-equiv="Permissions-Policy" content="interest-cohort=()"> | ||
| <meta http-equiv="content-language" content="en"> | ||
| <meta name="referrer" content="strict-origin-when-cross-origin"> | ||
| <meta name="author" content="DarkSoul"> | ||
|
|
||
| <!-- Favicon --> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> | ||
| <link rel="manifest" href="/site.webmanifest"> | ||
|
|
||
| <meta name="keywords" content="DarkSoul CodePen, Preview Pop-Up Box, Live Output Pop-Up Box Codepen ,Pop-Up Box , Pop-Up Box live preview, Pop-Ups live output, Dark Soul Codepens, DarkSoul CodePen How To's Blogs, DarkSoul UI/UX Designs, DarkSoul Codedamn" /> | ||
| <meta name="description" content="Live preview an interactive Pop-Up Box on DarkSoul CodePen. Explore its sleek design and functionality, perfect for enhancing your UI/UX projects. Easily follow the steps and download the source code."> | ||
|
|
||
| <title>Preview - Pop-Up Box</title> | ||
|
|
||
| <!-- Google tag (gtag.js) --> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-0XRHJTRGGH"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag(){dataLayer.push(arguments);} | ||
| gtag('js', new Date()); | ||
|
|
||
| gtag('config', 'G-0XRHJTRGGH'); | ||
| </script> | ||
|
|
||
| <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9669180356185936" | ||
| crossorigin="anonymous"></script> | ||
|
|
||
| <!-- Clarity tracking code for https://darksoul-codepen.github.io/ --> | ||
| <script> | ||
| (function(c,l,a,r,i,t,y){ | ||
| c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; | ||
| t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i+"?ref=bwt"; | ||
| y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); | ||
| })(window, document, "clarity", "script", "k6ctefq607"); | ||
| </script> | ||
|
|
||
| <style> | ||
| @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); | ||
| body | ||
| { | ||
| margin: 0; | ||
| width: 100%; | ||
| height: 100vh; | ||
| display: flex; | ||
| font-family: "Poppins", sans-serif; | ||
| background-color: rgb(204, 231, 254); | ||
| } | ||
| h1 | ||
| { | ||
| margin: auto; | ||
| font-weight: 900; | ||
| font-size: 12vw; | ||
| } | ||
| h1 span | ||
| { | ||
| background-color: rgb(231, 243, 255); | ||
| padding: 15px; | ||
| border-radius: 2vw; | ||
| } | ||
| .darksoul-pop-up | ||
| { | ||
| position: absolute; | ||
| bottom: 0; | ||
| right: 0; | ||
| margin: auto; | ||
| margin-right: 3%; | ||
| width: 300px; | ||
| height: fit-content; | ||
| min-height: 150px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| opacity: 0%; | ||
| animation: pop-up 1s 0s 1 linear forwards; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-top | ||
| { | ||
| margin: auto; | ||
| width: 100%; | ||
| height: 30px; | ||
| display: flex; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-top img | ||
| { | ||
| margin: auto; | ||
| margin-right: 0px; | ||
| padding: 5px; | ||
| border-radius: 50%; | ||
| cursor: pointer; | ||
| background-color: rgb(0, 0, 0); | ||
|
|
||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-top img:hover | ||
| { | ||
| background-color: rgb(0, 0, 0); | ||
| padding: 5px; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-content | ||
| { | ||
| margin: auto; | ||
| margin-left: 0px; | ||
| width: 90%; | ||
| height: 70%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: rgb(255, 255, 255); | ||
| border-radius: 30px; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-content p | ||
| { | ||
| width: 80%; | ||
| margin: auto; | ||
| margin-top: 20px; | ||
| margin-bottom: 10px; | ||
| font-size: smaller; | ||
| text-align: left; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-content a | ||
| { | ||
| text-decoration: none; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-content button | ||
| { | ||
| all: unset; | ||
| margin: auto; | ||
| margin-top: 10px; | ||
| margin-bottom: 20px; | ||
| text-align: center; | ||
| width: fit-content; | ||
| min-width: 100px; | ||
| height: 30px; | ||
| padding-left: 10px; | ||
| padding-right: 10px; | ||
| padding-top: 5px; | ||
| padding-bottom: 5px; | ||
| background-color: rgb(255, 255, 255); | ||
| border: 0.5px solid black; | ||
| border-radius: 30px; | ||
| cursor: pointer; | ||
| font-size: small; | ||
| font-weight: 500; | ||
| color: rgb(0, 0, 0); | ||
| display: flex; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-content button:hover | ||
| { | ||
| background-color: black; | ||
| color: white; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-content button p | ||
| { | ||
| margin: auto; | ||
| width: 80%; | ||
| } | ||
| .darksoul-pop-up .darksoul-pop-up-content button img | ||
| { | ||
| margin: auto; | ||
| width: 20%; | ||
| } | ||
|
|
||
| @keyframes pop-up | ||
| { | ||
| 0% | ||
| { | ||
| opacity: 0%; | ||
| margin-bottom: 0px; | ||
| } | ||
| 100% | ||
| { | ||
| opacity: 100%; | ||
| margin-bottom: 5%; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 500px) | ||
| { | ||
| .darksoul-pop-up | ||
| { | ||
| zoom: 0.8; | ||
| } | ||
|
|
||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1><span>Pop-up</span> Box</h1> | ||
|
|
||
| <div class="darksoul-pop-up" id="pop-up"> | ||
| <div class="darksoul-pop-up-top"> | ||
| <img id="close-btn" onclick="closepopup()" width="15" height="15" src="https://img.icons8.com/ios-glyphs/100/ffffff/delete-sign.png" alt="delete-sign" /> | ||
| </div> | ||
| <div class="darksoul-pop-up-content"> | ||
| <p>Discover 20+ UI designs on DarkSoul CodePen. Your hub to discover and learn Creative UI/UX Designs using my How-To Guides.</p> | ||
| <a href="https://darksoul-codepen.github.io/"><button type="button"><p>Give a try now </p><img width="15" height="15" src="https://img.icons8.com/ios-filled/100/5C7CFA/sent.png" alt="sent"/></button></a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script async> | ||
| var popup = document.getElementById("pop-up"); | ||
| var closebtn = document.getElementById("close-btn"); | ||
| function closepopup() | ||
| { | ||
| popup.style.display = "none"; | ||
| } | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
Binary file not shown.
Binary file added
BIN
+13.4 KB
assets/images/How-to-create-an-animated-pop-up-box-post-cover-image.webp
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters