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

[Feature]: Footer Enhancement #4378

Merged
merged 3 commits into from
Jun 16, 2024
Merged

[Feature]: Footer Enhancement #4378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
712da6d
updated footer
ayush-848 Jun 6, 2024
71fc56f
Merge branch 'main' into main
ayush-848 Jun 9, 2024
486c114
Merge branch 'main' into main
ayush-848 Jun 11, 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
120 changes: 81 additions & 39 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,63 +133,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 @@ -205,12 +182,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 @@ -231,29 +202,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 @@ -271,20 +234,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
Open in desktop
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">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is not fully functional right its only frontend

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry @ishita-43 I didn't get you

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how the entries enter by the user eg email in newsletter will be reached to the admin

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ishita-43 Yes I only did the frontend intentionally. While creating the issue I mentioned that I will design the footer part.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ishita-43 won't this PR get merged. Its been days

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

working on this!

<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 @@ -365,6 +427,7 @@ <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB',
</div>
</div>
</footer>

</div>


Expand Down Expand Up @@ -411,4 +474,4 @@ <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB',

</body>

</html>
</html>
Loading