Skip to content

Commit 254e868

Browse files
komal-agarwal5komal-agarwal5
authored
Added Subscription Footer (#1234)
1 parent 653d4db commit 254e868

File tree

4 files changed

+224
-0
lines changed

4 files changed

+224
-0
lines changed

‎Components/Footers/Subscription-Footer/assets/logo.jpeg‎

6.18 KB
Loading

‎Components/Footers/Subscription-Footer/index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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+
<link rel="stylesheet" href="style.css">
8+
<title>Subscription Footer</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<footer class="footer">
14+
<div class="logo">
15+
<img src="./assets/logo.jpeg" alt="logo">
16+
</div>
17+
<div class="column">
18+
<h3>Column One</h3>
19+
<a href="#">Link One</a>
20+
<a href="#">Link Two</a>
21+
<a href="#">Link Three</a>
22+
<a href="#">Link Four</a>
23+
<a href="#">Link Five</a>
24+
</div>
25+
<div class="column">
26+
<h3>Column Two</h3>
27+
<a href="#">Link Six</a>
28+
<a href="#">Link Seven</a>
29+
<a href="#">Link Eight</a>
30+
<a href="#">Link Nine</a>
31+
<a href="#">Link Ten</a>
32+
</div>
33+
<div class="column">
34+
<h3>Column Three</h3>
35+
<a href="#">Link Eleven</a>
36+
<a href="#">Link Twelve</a>
37+
<a href="#">Link Thirteen</a>
38+
<a href="#">Link Fourteen</a>
39+
<a href="#">Link Fifteen</a>
40+
</div>
41+
<div class="subscribe">
42+
<h3>Subscribe</h3>
43+
<p>Join our newsletter to stay up to date on features and releases.</p>
44+
<input type="email" placeholder="Enter your email">
45+
<button>Subscribe</button>
46+
<p>By subscribing you agree to with our <a href="#">Privacy Policy</a> and provide consent to receive
47+
updates from our company.</p>
48+
</div>
49+
</footer>
50+
<div class="footer-bottom">
51+
<div class="footer-terms">
52+
<p>&copy; 2024 Beautify. All rights reserved.</p>
53+
<a href="#">Privacy Policy</a>
54+
<a href="#">Terms of Service</a>
55+
<a href="#">Cookies Settings</a>
56+
</div>
57+
<div class="social-icons">
58+
<a href="#"><i class="fab fa-facebook"></i></a>
59+
<a href="#"><i class="fab fa-instagram"></i></a>
60+
<a href="#"><i class="fab fa-twitter"></i></a>
61+
<a href="#"><i class="fab fa-linkedin"></i></a>
62+
<a href="#"><i class="fab fa-youtube"></i></a>
63+
</div>
64+
</div>
65+
</div>
66+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
67+
</body>
68+
69+
</html>

‎Components/Footers/Subscription-Footer/style.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.container {
2+
font-family: Arial, sans-serif;
3+
position: absolute;
4+
bottom: 0;
5+
width: 100%;
6+
overflow-x: hidden;
7+
background-color: rgb(247, 250, 250);
8+
}
9+
10+
.footer {
11+
display: flex;
12+
flex-wrap: wrap;
13+
justify-content: space-between;
14+
padding: 20px;
15+
border: 1px solid #000;
16+
margin: 20px;
17+
}
18+
19+
.footer .logo {
20+
font-size: 24px;
21+
font-weight: bold;
22+
margin-bottom: 20px;
23+
}
24+
25+
.footer .column {
26+
display: flex;
27+
flex-direction: column;
28+
margin-bottom: 20px;
29+
}
30+
31+
.footer .column h3 {
32+
margin-bottom: 10px;
33+
font-size: 20px;
34+
}
35+
36+
.footer .column a {
37+
text-decoration: none;
38+
color: #000;
39+
margin-bottom: 5px;
40+
font-size: 16px;
41+
}
42+
43+
.footer .subscribe {
44+
display: flex;
45+
flex-direction: column;
46+
max-width: 200px;
47+
margin-right: 10px;
48+
margin-bottom: 20px;
49+
}
50+
51+
.footer .subscribe h3 {
52+
margin-bottom: 10px;
53+
font-size: 20px;
54+
}
55+
56+
.footer .subscribe p {
57+
margin-bottom: 10px;
58+
font-size: 14px;
59+
}
60+
61+
.footer .subscribe input[type="email"] {
62+
padding: 5px;
63+
margin-bottom: 10px;
64+
border: 1px solid #000;
65+
border-radius: 3px;
66+
font-size: 14px;
67+
}
68+
69+
.footer .subscribe button {
70+
padding: 5px 10px;
71+
border: 1px solid #000;
72+
border-radius: 3px;
73+
cursor: pointer;
74+
font-size: 14px;
75+
}
76+
77+
.footer-bottom {
78+
display: flex;
79+
justify-content: space-between;
80+
padding: 10px 20px;
81+
border-top: 1px solid #000;
82+
}
83+
84+
.footer-terms {
85+
display: flex;
86+
justify-content: space-between;
87+
gap: 20px;
88+
}
89+
90+
.footer-bottom a {
91+
text-decoration: none;
92+
color: #000;
93+
margin-top: 15px;
94+
}
95+
96+
.footer-bottom .social-icons {
97+
display: flex;
98+
align-items: center;
99+
}
100+
101+
.social-icons a {
102+
margin-left: 10px;
103+
text-decoration: none;
104+
color: #000;
105+
font-size: 18px;
106+
}
107+
108+
@media (max-width: 768px) {
109+
.footer {
110+
flex-direction: column;
111+
align-items: center;
112+
}
113+
114+
.footer .logo,
115+
.footer .column,
116+
.footer .subscribe {
117+
align-items: center;
118+
text-align: center;
119+
}
120+
121+
.footer .column {
122+
margin-bottom: 20px;
123+
}
124+
125+
.footer-bottom {
126+
flex-direction: column;
127+
align-items: center;
128+
}
129+
130+
.footer-terms {
131+
flex-direction: column;
132+
align-items: center;
133+
}
134+
135+
.footer-terms a {
136+
margin-top: 5px;
137+
}
138+
139+
.footer-bottom .social-icons {
140+
margin-top: 10px;
141+
}
142+
}

‎assets/html_files/footers.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,19 @@ <h1>Sticky Footer</h1>
235235
</a>
236236
</div>
237237
</div>
238+
<div class="box">
239+
<h1>Subscription Footer</h1>
240+
<div class="preview">
241+
<a href="../../Components/Footers/Subscription-Footer/index.html" title="Live Preview" target="_blank">
242+
<img src="../images/link.png">
243+
</a>
244+
</div>
245+
<div class="source">
246+
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Footers/Subscription-Footer" title="Source Code" target="_blank">
247+
<img src="../images/github.png">
248+
</a>
249+
</div>
250+
</div>
238251
<div class="box">
239252
<h1>Waves Footer</h1>
240253
<div class="preview">

0 commit comments

Comments
 (0)