Skip to content

Commit

Permalink
Merge pull request #4378 from ayush-848/main
Browse files Browse the repository at this point in the history 
[Feature]: Footer Enhancement
  • Loading branch information
@kunjgit
kunjgit authored Jun 16, 2024
2 parents b311c51 + 486c114 commit 69576c5
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 52 deletions.
120 changes: 81 additions & 39 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,63 +134,40 @@ a {
text-decoration: none;
color: #fff;
}

footer {
position: absolute;

bottom: 0;

left: 0;

right: 0;

height: auto;

position: static;
bottom: 0;
width: 100%;

/* width: 100vw; */


padding-top: 40px;
margin-top: auto;
color: #fff;
}

.footer-content {
display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

text-align: center;

/* margin-top: auto; */
}

.footer-content h3 {
font-size: 2.1rem;

font-weight: 500;

text-transform: capitalize;

line-height: 3rem;
}

.footer-content p {
max-width: 500px;

margin: 10px auto;

line-height: 28px;

font-size: 14px;

color: #cacdd2;
}

Expand All @@ -206,12 +183,6 @@ footer {
margin: 0 10px;
}

/* .socials a {
text-decoration: none;
color: #fff;
padding: 5px;
} */

.socials a i {
font-size: 1.7rem;
width: 20px;
Expand All @@ -232,29 +203,21 @@ a:hover svg {

.footer-bottom {
background: #000;

width: 100vw;

padding: 20px;

padding-bottom: 40px;

text-align: center;
}

.footer-bottom p {
float: left;

font-size: 14px;

word-spacing: 2px;
}

.footer-bottom p a {
color: #ccc;

font-size: 16px;

text-decoration: none;
}

Expand All @@ -272,20 +235,99 @@ a:hover svg {

.footer-menu ul li {
padding-right: 10px;

display: block;
}

.footer-menu ul li a {
color: #cfd2d6;

text-decoration: none;
}

.footer-menu ul li a:hover {
color: #27bcda;
}

/* Additional styles for newsletter and quick links */
.footer-links {
display: flex;
justify-content: space-around;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(to right, #d966b1, #bd40c1);
border-radius: 10px;
}
.quick-links{
font-family: var(--ff-poppins);
}

.quick-links ul {
list-style-type: none;
padding: 0;
}

.quick-links ul li {
margin-bottom: 10px;
}

.quick-links ul li a {
margin-top: 10px;
font-size: 0.9rem;
line-height: 1.2;
text-decoration: none;
color: #fff;
transition: color 0.3s ease;
}

.quick-links ul li a:hover {
color: #4242ff;

transform:scale(1.1) translateY(-2px);
}

.quick-links h3{
color: #dcf54e;
font-size: 1.2rem;
}

.newsletter h3 {
color: #dcf54e;
font-size: 1.2rem;
font-family: var(--ff-poppins);
margin-bottom: 15px;
}

.newsletter form {
display: flex;
flex-direction: column;
align-items: center;
}

.newsletter input[type="email"] {
background: white;
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 5px;
width: 250px;
}

.newsletter button {
padding: 10px 20px; /* Decreased padding to make the button smaller */
border: none;
border-radius: 5px;
background-image: linear-gradient(to right, #b367f9, #1d58aa);
color: #fff;
cursor: pointer;
transition: background-image 0.3s ease;
}


.newsletter button:hover {
transform: scale(1.1);
background-image: linear-gradient(to right, #1d58aa, #b367f9);
}


@media (max-width: 500px) {
.footer-bottom p {
float: none;
Expand Down
89 changes: 76 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,9 +167,13 @@
</div>

<!-- About section -->

<div id="about" class="zoomIn">


<div class="zoomIn" id="about" style="color:aqua;">


Welcome to our website! Your ultimate destination for a vast collection of free-to-play games. Dive into a world of
endless entertainment and excitement as you explore our diverse selection of games, ranging from timeless classics to
modern masterpieces. With something for everyone, our website offers an immersive gaming experience that is accessible
Expand All @@ -180,7 +184,6 @@
Whether you're a seasoned gamer or just looking for some casual fun, our platform has you covered. Join our community
of gamers and embark on an epic journey through the world of online gaming. Get ready to play, explore, and discover
new adventures—all for free!

</div>

<br><br><br>
Expand Down Expand Up @@ -240,6 +243,16 @@ <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB',
<div class="pagination" id="pagination"></div>
</div>

<!-- Contact section -->
<div id="contact">
<!-- Add your Contact content here -->
</div>

<!-- Contribute section -->
<div id="contribute">
<!-- Add your Contribute content here -->
</div>

<!--
FOOTER
-->
Expand All @@ -260,22 +273,71 @@ <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB',
</div>









<footer class="page-footer font-small unique-color-dark pt-4">
<div class="container1">
<div class="container" style="margin-left: 50px;">
<div class="list-unstyled list-inline text-center py-2 text-black">
<br>
<br>
<br><br>

<!-- Created div Tag with Proper Styling for Footer Text aligned to Center just above Social Links -->
<div class="socials-text" classstyle="text-align: center; margin-bottom:50px">
<div class="socials-text" style="text-align: center; margin-bottom: 50px;">
<div class="footer-links" style="display: flex; justify-content: space-around; margin-bottom: 30px;">
<!-- Quick Links Section -->
<div class="quick-links">
<h3>Quick Links</h3>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contribute">Contribute Here</a></li>
</ul>
</div>

<!-- Subscribe to Newsletter Section -->
<div class="newsletter">
<h3>Subscribe to our newsletter</h3>
<form action="submit" method="post">
<input type="email" name="email" placeholder="Email" id="mail" class="contact-form-email" required />
<button type="submit">Submit</button>
</form>
</div>
</div>
<h7>Developed with 💗 by Kunj</h7>
<br>
<p style="font-size: 20px; font-style: cursive; cursor: pointer; color: rgb(215, 213, 85); font-family: 'Agency FB', Times, serif;">
Make sure you checkout my socials and also ⭐ GameZone on github
</p>
</div>

<div>
<ul class="example-2" style="display: flex; justify-content: center; padding: 0;">
<li class="icon-content" style="margin: 0 10px;">
<a href="https://www.linkedin.com/in/kunj199/" aria-label="LinkedIn" data-social="linkedin">
<div class="filled"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16" xml:space="preserve">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" fill="currentColor"></path>
</svg>
</a>
</li>
<li class="icon-content" style="margin: 0 10px;">
<a href="https://x.com/kunj_199" aria-label="Twitter" data-social="twitter">
<div class="filled"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16" xml:space="preserve">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" fill="currentColor"></path>
</svg>
</a>
</li>
<li class="icon-content" style="margin: 0 10px;">
<a href="https://github.com/kunjgit" aria-label="GitHub" data-social="github">
<div class="filled"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16" xml:space="preserve">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" fill="currentColor"></path>
</svg>
</a>
</li>
</ul>
</div>
</br></br>
<!-- Copyright -->
<p id="copyright">&copy; 2024 GameZone. All Rights Reserved.</p>
<p style="font-size: 20px; padding: 20px; font-style:cursive;cursor: pointer;color: rgb(254, 253, 186);font-family: 'Agency FB', Times, serif;">Make sure you
checkout
my
Expand Down Expand Up @@ -378,6 +440,7 @@ <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB',
</div>
</div>
</footer>

</div>


Expand Down Expand Up @@ -435,4 +498,4 @@ <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB',
</script>
</body>

</html>
</html>

0 comments on commit 69576c5

Please sign in to comment.