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

Enhanced the footer with the contact details #1258

Closed
wants to merge 1 commit into from
Closed

Enhanced the footer with the contact details #1258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 18 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,11 @@ <h2>Transfer Lists</h2>

<div class="footer" id="about">
<footer>
<div class="footer-left">

<h3>Beautiify</h3>
<p>Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.</p>
</div>
<ul class="social-icon">
<li>
<a href="https://rakesh9100.bio.link/" target="_blank"><i class="fas fa-link"></i></a>
Expand All @@ -318,15 +323,26 @@ <h2>Transfer Lists</h2>
<a href="https://discord.com/users/944144134950748170" target="_blank"><i class="fab fa-discord"></i></a>
</li>
</ul>

<!-- Newsletter Form -->
<div class="newsletter-form">
<h3>Subscribe to our Newsletter</h3>
<form action="your-newsletter-endpoint" method="post">
<input type="email" name="email" placeholder="Enter your email" required>
<button type="submit">Subscribe</button>
</form>
</div>
<div class="footer-bottom">
<hr>
<p>
Created By <a href="https://rakeshroshan.netlify.app/" target="_blank">Rakesh Roshan ❤️</a> | ©
<script>
document.write(new Date().getFullYear());
</script>: All Rights Reserved
</p>
</div>
</footer>
</div>

</div>
<!-- Scroll To Top Button -->
<div id="progress">
<span id="progress-value" class="bi bi-arrow-up-short"></span>
Expand Down
106 changes: 96 additions & 10 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,11 +608,16 @@ section {

.footer {
display: flex;
justify-content: center;
align-items: flex-end;
min-height: 25vh;
min-height: 45vh;
position: relative;
font-family: Arial, sans-serif;
box-shadow: 0px -2.5px 6px rgb(30, 30, 30);
padding: 30px 20px;
justify-content: space-between;
display: flex;
padding-bottom: 30px;
}

/*
footer {
position: relative;
width: 100%;
Expand All @@ -622,19 +627,49 @@ footer {
display: flex;
justify-content: center;
align-items: center;

flex-direction: column;
}
*/
.footer h3 {
width: 250px;
height: auto;
margin-right: 10px;
margin-top: -15px;
font-size: 35px;
color: white; /* Example color */
margin-bottom: 0px;
}

.footer p {
font-size: 14px;
text-align: left;
color: white; /* Example color */
line-height: 1.5;
}

.footer-left {
float: left;
width: 33.33%; /* Adjust width as needed */
padding: 0px;
text-align: left;
box-sizing: content-box;
}
footer .social-icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
list-style-type: none; /* Remove default list styles */
padding: 0;
margin: 0;
text-align: inherit; /* Center align the social icons */
margin-bottom: 20px; /* Bottom margin for social icons */
left: 0; /* Align to the left */
right: 0; /* Align to the right */
}

footer .social-icon li {
list-style: none;
display: inline-block; /* Display social icons inline */
margin: 4 1px; /* Margin between social icons */
vertical-align: middle; /* Align icons vertically */
}

footer .social-icon li a {
Expand All @@ -653,7 +688,59 @@ footer .social-icon li a:hover {
transform: translateY(-10px);
color: red;
}
/* Add styles for the newsletter form */
.newsletter-form {
position: absolute; /* Absolute positioning for newsletter form */
top: 30px; /* Align to the top */
right: 20px; /* Adjust the right position as needed */
text-align: center; /* Center align content */
width: 20.33%; /* Width of the newsletter form */
}

.newsletter-form h3 {
font-size: 18px; /* Newsletter heading font size */
margin-bottom: 10px; /* Bottom margin for newsletter heading */
}

.newsletter-form form {
display: flex; /* Use flexbox for layout */
flex-direction: column; /* Stack form elements vertically */
align-items: center; /* Center align form elements */
}

.newsletter-form input[type="email"] {
width: 250px; /* Input field width */
padding: 10px; /* Padding inside the input field */
font-size: 16px; /* Input field font size */
border: 1px solid #ccc; /* Border color */
border-radius: 5px; /* Border radius */
margin-bottom: 10px; /* Bottom margin for input field */
}

.newsletter-form button {
padding: 10px 20px; /* Padding inside the button */
font-size: 16px; /* Button font size */
border: none; /* Remove border */
background-color: #ff3131; /* Button background color */
color: #fff; /* Button text color */
border-radius: 5px; /* Button border radius */
cursor: pointer; /* Cursor style */
}
.newsletter-form button:hover {
background-color: #d62121; /* Button background color on hover */
}

.footer-bottom {
position: absolute; /* Fixed positioning for bottom footer */
bottom: 0; /* Align to the bottom of the viewport */
left: 0; /* Align to the left */
right: 0; /* Align to the right */
text-align: center; /* Center align the copyright notice */
padding: 10px 0; /* Padding top and bottom */
font-size: 14px; /* Font size for footer bottom text */
color: #ccc; /* Text color for footer bottom */
width: 100%; /* Full width */
}
footer p {
color: var(--secondary);
text-align: center;
Expand All @@ -671,7 +758,6 @@ footer p a {
font-size: 1.1em;
display: inline-block;
}

#progress {
position: fixed;
bottom: 20px;
Expand Down