Skip to content

Commit 848dca1

Browse files
AkashKobalAkashKobal
committed
email subscription
1 parent 005936b commit 848dca1

File tree

9 files changed

+141
-0
lines changed

9 files changed

+141
-0
lines changed

‎11. Toast Notification/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Stopwatch _(HTML, CSS, and Js)_
2+
![alt text](https://github.com/AkashKobal/web-development/blob/main/10.%20Stopwatch/output.png)

‎12. Email Subscription/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Email Subscription _(HTML, CSS, and Js)_
2+
![alt text](https://github.com/AkashKobal/web-development/blob/main/10.%20Email%20Subscription/output.png)

‎12. Email Subscription/background.png‎

2.15 MB
Loading

‎12. Email Subscription/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Email Subscription</title>
8+
<link rel="stylesheet" href="style.css">
9+
<script defer src="script.js"></script>
10+
</head>
11+
12+
<body>
13+
<img class="backgroundImage" src="background.png" alt="downloade for github">
14+
<div class="container">
15+
<div class="details">
16+
<h3>Coming Soon!</h3>
17+
<h1>Our Brand New <br> Website is on it's way.</h1>
18+
<p>Subscribe for more details.</p>
19+
<div class="inputs" name="submit-to-google-sheet">
20+
<input type="email" id="email" name="email" placeholder="Your email id..">
21+
<img type="submit" src="send-icon.png" id="submit" name="submit" onclick="submit()">
22+
</div>
23+
<output id="display">Thank You For Subscribing!</output>
24+
</div>
25+
</div>
26+
27+
</body>
28+
29+
</html>

‎12. Email Subscription/output.png‎

733 KB
Loading

‎12. Email Subscription/script.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
let display = document.getElementById("display");
2+
const scriptURL = 'https://script.google.com/macros/s/AKfycbxddXwW6Woibs9-cTURwJIk5KaeYTZj7zrpOsirZXAQ_adO9vfYU_wJnjp5W4XuojjB/exec'
3+
const form = document.forms['submit-to-google-sheet']
4+
5+
form.addEventListener('submit', e => {
6+
e.preventDefault()
7+
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
8+
.then(response => console.log('Success!', response))
9+
.catch(error => console.error('Error!', error.message))
10+
})
11+
12+
function submit(){
13+
const msg = "Thank You For Subscribing!";
14+
display.innerHTML(msg);
15+
16+
}

‎12. Email Subscription/send-icon.png‎

4.02 KB
Loading

‎12. Email Subscription/style.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Poppins', sans-serif;
6+
}
7+
.container{
8+
background-color: #171010cf;
9+
width: 100%;
10+
/* border-radius: 10px; */
11+
height: 100%;
12+
position: absolute;
13+
top: 50%;
14+
left: 50%;
15+
transform: translate(-50%, -50%);
16+
text-align: left;
17+
color: white;
18+
padding: 20px;
19+
20+
21+
}
22+
.details h3{
23+
font-size: 20px;
24+
font-weight: 400;
25+
color: #fff;
26+
margin-bottom: 10px;
27+
text-transform: uppercase;
28+
letter-spacing: 1px;
29+
30+
31+
}
32+
.details h1{
33+
font-size: 50px;
34+
font-weight: 600;
35+
color: #fff;
36+
margin-bottom: 20px;
37+
}
38+
39+
.backgroundImage {
40+
width: 100%;
41+
height: 800px;
42+
filter: blur(4px);
43+
}
44+
45+
.details {
46+
position: absolute;
47+
top: 50%;
48+
left: 50%;
49+
transform: translate(-50%, -50%);
50+
51+
52+
}
53+
54+
#email {
55+
padding: 8px;
56+
width: 300px;
57+
border: 1px solid #ccc;
58+
border-radius: 4px;
59+
font-size: 16px;
60+
outline: none;
61+
color: #333;
62+
background-color: #fff;
63+
transition: 0.3s;
64+
}
65+
66+
#submit {
67+
/* height: 18px; */
68+
background: rgba(40, 213, 40, 0.725);
69+
height: 35px;
70+
margin-left: 3px;
71+
border-radius: 5px;
72+
padding: 8px;
73+
}
74+
.inputs{
75+
width: 300px;
76+
border-radius: 4px;
77+
font-size: 16px;
78+
outline: none;
79+
color: #333;
80+
transition: 0.3s;
81+
display: flex;
82+
margin-top: 10px;
83+
margin-bottom: 8px;
84+
85+
}
86+
.container output{
87+
color:rgba(40, 213, 40, 0.725);
88+
89+
}

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,7 @@
3636
## Stopwatch _(HTML, CSS, and Js)_
3737
![alt text](https://github.com/AkashKobal/web-development/blob/main/10.%20Stopwatch/output.png)
3838

39+
## Email Subscription _(HTML, CSS, and Js)_
40+
![alt text](https://github.com/AkashKobal/web-development/blob/main/10.%20Email%20Subscription/output.png)
41+
3942

0 commit comments

Comments
 (0)