Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Newsletter Subscription Form #569

Merged
merged 4 commits into from
Feb 17, 2024
Merged

Added Newsletter Subscription Form #569

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e3baa90
Addd newsletter subscription form
saurav2208 Feb 11, 2024
604a47b
updated
saurav2208 Feb 12, 2024
336ba26
updated
saurav2208 Feb 17, 2024
7499ffe
Merge remote-tracking branch 'origin/main' into newsletter
saurav2208 Feb 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions Components/Forms/Newsletter-Signup-Form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsletter Subscription Form</title>
<link rel="stylesheet" href="./style.css">


</head>
<body>


<div class="sign-up-container">
<div class="envelope">
<div class="paper">
<h1>Subscribe to our Newsletter</h1>
<form class="sign-up-form">
<input type="text" placeholder="Name" class="text-input"/>
<input type="email" placeholder="Email" class="text-input"/>
<button type="submit" class="button">Sign up</button>
</form>
</div>
<div class="bottom-flap"></div>
</div>
<div class="thanks-text"> <span>Thanks for subscribing!</span></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('.sign-up-form').on('submit', submit);
$('.reset-button').on('click', reset);
});

function submit(e) {
$('.sign-up-container').addClass('submitted');
e.preventDefault();
}

function reset() {
$('.sign-up-container').removeClass('submitted');
$('.sign-up-form')[0].reset();
}

</script>
</body>
</html>
267 changes: 267 additions & 0 deletions Components/Forms/Newsletter-Signup-Form/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@

body {
font-size: 26px;
}

body {
background-color: #fff;
}

.sign-up-container {
width: 100%;
padding-top: 280px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
}

.paper {
width: 85%;
box-sizing: border-box;
margin: 0 auto;
position: relative;
top: -205px;
padding: 1rem 1.4rem 125px 1.4rem;
background: #fff;
background: -webkit-linear-gradient(top, #f1f1f1 43%, #fff 100%);
background: linear-gradient(to bottom, #f1f1f1 43%, #eee2b4 100%);
color: #db4344;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border-radius: 4px;
}

h1 {
margin-bottom: 1rem;
margin-top: 0;
text-align: center;
font-size: 1em;
font-weight: 300;
}

.text-input,
.button {
box-sizing: border-box;
padding: 0.8em 0.67em;
margin-bottom: 0.5rem;
background: transparent;
border: none;
border-radius: 2em;
outline: none;
}

.button {
border: 1px solid #999;
-webkit-transition: background 0.1s, color 0.1s;
transition: background 0.1s, color 0.1s;
}
.button:hover {
background: #db4344;
color: #fef8e1;
}

.text-input {
background: #fff;
color: #333;
}
.text-input::-webkit-input-placeholder {
color: inherit;
font-style: italic;
}
.text-input::-moz-placeholder {
color: inherit;
font-style: italic;
}
.text-input:-ms-input-placeholder {
color: inherit;
font-style: italic;
}
.text-input::placeholder {
color: inherit;
font-style: italic;
}

.sign-up-form {
width: 100%;
}
.sign-up-form * {
width: 100%;
}

.envelope {
position: relative;
width: 400px;
height: 250px;
margin: auto;
background: #fa5b5c;
border-radius: 24px;
}
.envelope:before {
content: '';
display: block;
position: absolute;
top: -240px;
width: 0;
height: 0;
z-index: -1;
border-width: 125px 200px;
border-color: transparent;
border-style: solid;
border-bottom-color: #fa5b5c;
border-radius: 24px;
}
.envelope:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 0;
pointer-events: none;
border-width: 125px 200px;
border-style: solid;
border-color: #db4344;
border-top-color: transparent;
border-radius: 24px;
}
.envelope .bottom-flap {
width: 400px;
height: 250px;
display: block;
position: absolute;
top: 0;
z-index: 1;
border-radius: 24px;
overflow: hidden;
pointer-events: none;
}
.envelope .bottom-flap:after {
content: '';
display: block;
position: absolute;
width: 400px;
height: 400px;
top: 40%;
border-radius: 24px;
background: #fa5b5c;
-webkit-transform: scaleY(0.7) rotate(45deg);
transform: scaleY(0.7) rotate(45deg);
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.thanks-text {
position: absolute;
width: 100%;
top: 320px;
z-index: -1;
text-align: center;
font-weight: 500;
font-size:30px;
}

.submitted .paper {
-webkit-animation: paper-in 0.8s ease-out;
animation: paper-in 0.8s ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.submitted.sign-up-container {
overflow: hidden;
}
.submitted .envelope {
-webkit-animation: fly-away 0.5s ease-in;
animation: fly-away 0.5s ease-in;
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.submitted .envelope:before {
-webkit-animation: fold 0.5s ease-in;
animation: fold 0.5s ease-in;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes paper-in {
30% {
-webkit-transform: translateY(-80px);
transform: translateY(-80px);
padding-bottom: 125px;
}
to {
top: 10px;
padding-bottom: 0;
}
}

@keyframes paper-in {
30% {
-webkit-transform: translateY(-80px);
transform: translateY(-80px);
padding-bottom: 125px;
}
to {
top: 10px;
padding-bottom: 0;
}
}
@-webkit-keyframes fly-away {
to {
-webkit-transform: translateX(200%) rotate(10deg);
transform: translateX(200%) rotate(10deg);
opacity: 0;
}
}
@keyframes fly-away {
to {
-webkit-transform: translateX(200%) rotate(10deg);
transform: translateX(200%) rotate(10deg);
opacity: 0;
}
}
@-webkit-keyframes fold {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
z-index: 10;
}
to {
z-index: 10;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotateX(-180deg) translateY(10px);
transform: rotateX(-180deg) translateY(10px);
border-bottom-color: #5eb6e0;
}
}
@keyframes fold {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
z-index: 10;
}
to {
z-index: 10;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotateX(-180deg) translateY(10px);
transform: rotateX(-180deg) translateY(10px);
border-bottom-color: #fa5b5c;
}
}
.reset-button {
display: block;
padding: 0.6em 1em;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
background: transparent;
border: 1px solid black;
}
.reset-button:hover {
color: white;
background: black;
}

13 changes: 13 additions & 0 deletions assets/html_files/forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,19 @@ <h1>Animated Border Login Form</h1>
</a>
</div>
</div>
<div class="box">
<h1>Newsletter SignupForm</h1>
<div class="preview">
<a href="../../Components/Forms/Newsletter-Signup-Form/index.html" title="Live Preview" target="_blank">
<img src="../images/link.png">
</a>
</div>
<div class="source">
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Forms/Newsletter-Signup-Form" title="Source Code" target="_blank">
<img src="../images/github.png">
</a>
</div>
</div>
</div>
</section>

Expand Down
Loading