From 712da6dbd89d29230a86ba401aa74aa50303d9c0 Mon Sep 17 00:00:00 2001 From: Ayush Deb Date: Fri, 7 Jun 2024 01:30:53 +0530 Subject: [PATCH] updated footer --- assets/css/style.css | 119 ++++++++++++++++++++---------- index.html | 168 ++++++++++++++++++------------------------- 2 files changed, 151 insertions(+), 136 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 3d19f19841..b79bf4f2d5 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -133,24 +133,15 @@ 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; @@ -158,37 +149,24 @@ footer { .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; } @@ -204,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; @@ -230,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; } @@ -270,13 +234,11 @@ a:hover svg { .footer-menu ul li { padding-right: 10px; - display: block; } .footer-menu ul li a { color: #cfd2d6; - text-decoration: none; } @@ -284,6 +246,87 @@ a:hover svg { 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; diff --git a/index.html b/index.html index e06858977d..7147968fe2 100644 --- a/index.html +++ b/index.html @@ -167,9 +167,7 @@ - -
- +
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 @@ -180,7 +178,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! -



@@ -240,6 +237,16 @@

+ +
+ +
+ + +
+ +
+ @@ -260,110 +267,75 @@

-
+
-
-
+

+ -
+
+
+ +
+

Quick Links

+ +
+ + + +
Developed with 💗 by Kunj
-

Make sure you - checkout - my - socials and also - ⭐ GameZone on - github

- +

+ Make sure you checkout my socials and also ⭐ GameZone on github +

- + +
+ +
+

- -
+
@@ -410,4 +382,4 @@