From b71919cd6ff12fb8a872c7088bc3167619270204 Mon Sep 17 00:00:00 2001 From: shashwatdwi176 Date: Mon, 3 Jul 2023 15:48:12 +0530 Subject: [PATCH 1/3] fix responsiveness --- footer.css | 335 ++++++++++++++++++++++++++++++++++++++++++++++------- footer.js | 46 ++++---- 2 files changed, 316 insertions(+), 65 deletions(-) diff --git a/footer.css b/footer.css index 297ac6f..2a509ad 100644 --- a/footer.css +++ b/footer.css @@ -1,24 +1,30 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"); - .link { + + + + .footer-link { text-decoration: none; } footer { background: #000615; - width: 112.5rem; - margin-left: 10em; + max-width: 100%; + /* height: 40rem; */ + margin-left: 0em; + margin-top: 4rem;; background-size: cover; } - .red-image{ + .footer-red-image{ visibility: visible; } - .blur-img1 { + .footer-blur-img1 { filter: blur(6.25rem); } #blur-img1 { - margin: 0rem; + /* margin: 0rem; */ + padding: 0rem; height: 25.5rem; width: 20.75rem; @@ -26,7 +32,7 @@ right: 0rem; } - .blur-img2 { + .footer-blur-img2 { filter: blur(6.25rem); } @@ -44,53 +50,56 @@ } .footer-elements { width: calc(100% / 3); - padding: 0 0.9375rem; + padding: 0 1.9375rem; + margin-left: 3rem; } - .heading { + .footer-heading { margin-bottom: 0.9375rem; - font-size: 1.5rem; + font-size: 1.8rem; color:#f0f5f1 } - .paragraph{ - font-size: 1rem; - line-height: 1.3rem; + .footer-paragraph{ + font-size: 2rem; + color: #fff; } - .unorder-list { + .footer-unorder-list { list-style: none; margin: 0; padding: 0; + } - .list { + .footer-list { margin-bottom: 0.625rem; list-style: none; } - .link{ + .footer-link{ color: #f0f5f1; - font-size: 1rem; + font-size: 2rem; + } - .link:hover { + .footer-link:hover { color: #6af8d7; } - .social-icons { + .footer-social-icons { display: flex; - column-gap: 0.625rem; + column-gap: 1.7rem; width:2.5rem; height:2.5rem; } - .social-icons i { + .footer-social-icons i { color: white; } - .logo{ + .footer-logo{ width:10%; height: 25%; } - .social-icons li { + .footer-social-icons li { margin-bottom: 0rem; width:2.5rem; height:2.5rem; } - .social-icons li a { + .footer-social-icons li a { display:flex; place-content: center; width: 5rem; @@ -99,59 +108,301 @@ background-color: #6fabff00; } - .copyright { + .footer-copyright { text-align: center; color: #fff; padding: 0.6rem 0; } - .logo{ + .footer-logo{ margin-right: 10rem; - width:20rem; + width:18rem; height: 18rem; } - + /* Responsive adjustments */ - @media screen and (max-width: 768px) { + @media screen and (min-width: 320px) and (max-width: 480px) { + + footer { + background: #000615; + max-width: 100%; + height: 80rem; + margin-right: auto; + margin-left: auto; + margin-top: 4rem;; + background-size: cover; + + } .footer-elements { margin: 1rem 0; - width: 22.5rem; + width: 18.5rem; + padding: 0; display: flex; justify-content: space-around; } - .red-image{ + .footer-red-image{ visibility: hidden; } .footer-section { display: block; flex-wrap: wrap; - height: 38.125rem; + height: 45.125rem; } - .heading { + .footer-heading { font-size: 1.3125rem; + margin-top:2rem; } - .paragraph{ - font-size: 0.938rem; + .footer-paragraph{ + font-size: 1.38rem; + + padding: 0.938rem; + margin-left:5rem; + } + .footer-link { + font-size: 1.375rem; + + } + .footer-social-icons li a { + width: 1.875rem; + height: 1.875rem; + transform: translate(-2.5rem,5.375rem); + } + .footer-logo{ + width: 13rem; + margin-left:4.5rem; + margin-top:2rem; + + } + .footer-horizontal-line{ + margin-top: 1.5rem; + } + .footer-horizontal1-line{ + margin-top: 25.5rem; + } + .footer-copyright { + text-align: center; + color: #fff; + padding: 2rem ; + + } + + } + @media screen and (min-width: 480px) and (max-width: 767px) { + + footer { + background: #000615; + max-width: 100%; + height: rem; + margin-left: auto; + margin-right: auto; + margin-top: 4rem; + + background-size: cover; + } + + .footer-elements { + margin: 1rem ; + width:20rem; + margin-left: 5rem; + padding: 0; + display: flex; + justify-content: space-around; + } + .footer-red-image{ + visibility: hidden; + } + .footer-section { + display: block; + flex-wrap: wrap; + height: 45.125rem; + } + .footer-heading { + font-size: 1.3125rem; + margin-top:2rem; + } + .footer-paragraph{ + font-size: 1.38rem; text-align: center; padding: 0.938rem; } - .link { - font-size: 0.9375rem; + .footer-link { + font-size: 1.375rem; + width:20rem; + transform:translateX(10rem); + } - .social-icons li a { + .footer-social-icons li a { width: 1.875rem; height: 1.875rem; - transform: translate(-2.5rem,0.375rem); + transform: translate(-2.5rem,5.375rem); + } + .footer-logo{ + width: 13rem; + margin-left:3.5rem; + margin-top:2rem; + + } + .footer-horizontal-line{ + margin-top: 1.5rem; + width:100%; } - .logo{ - width: 9rem; + .footer-horizontal1-line{ + margin-top: 20.5rem; + width: 100%; + } + .footer-copyright { + text-align: center; + color: #fff; + padding: 1rem ; } - .horizontal-line{ + + } + + @media screen and (min-width: 320px) and (max-width: 480px) { + + footer { + background: #000615; + max-width: 100%; + height: 80rem; + margin-right: auto; + margin-left: auto; + margin-top: 4rem;; + background-size: cover; + + } + + .footer-elements { + margin: 1rem 0; + width: 18.5rem; + + padding: 0; + display: flex; + justify-content: space-around; + } + .footer-red-image{ + visibility: hidden; + } + .footer-section { + display: block; + flex-wrap: wrap; + height: 45.125rem; + } + .footer-heading { + font-size: 1.3125rem; + margin-top:2rem; + } + .footer-paragraph{ + font-size: 1.38rem; + + padding: 0.938rem; + margin-left:5rem; + } + .footer-link { + font-size: 1.375rem; + + } + .footer-social-icons li a { + width: 1.875rem; + height: 1.875rem; + transform: translate(-2.5rem,5.375rem); + } + .footer-logo{ + width: 13rem; + margin-left:4.5rem; + margin-top:2rem; + + } + .footer-horizontal-line{ + margin-top: 1.5rem; + } + .footer-horizontal1-line{ + margin-top: 25.5rem; + } + .footer-copyright { + text-align: center; + color: #fff; + padding: 2rem ; + + } + + } + @media screen and (min-width: 768px) and (max-width: 1024px) { + + footer { + background: #000615; + max-width: 100%; + height: 85rem; + margin-left: auto; + margin-right: auto; + margin-top: 4rem; + + background-size: cover; + } + + .footer-elements { + margin: 1rem ; + height: max-content; + width:30rem; + margin-left: 12rem; + padding: 0; + display: flex; + justify-content: space-around; + } + .footer-red-image{ + visibility: hidden; + } + .footer-section { + display: block; + flex-wrap: wrap; + height: 45.125rem; + } + .footer-heading { + font-size: 2rem; + margin-top:2rem; + } + .footer-paragraph{ + font-size: 2rem; + text-align:start; + padding: 0.938rem; + margin-left:5rem; + + } + .footer-link { + font-size: 2rem; + width:20rem; + transform:translateX(10rem); + + } + .footer-social-icons li a { + width: 2rem; + height: 2rem; + transform: translate(-2.5rem,5.375rem); + } + .footer-logo{ + width: 13rem; + margin-left:3.5rem; + margin-top:2rem; + + } + .footer-horizontal-line{ margin-top: 1.5rem; + width:100%; } + .footer-horizontal1-line{ + margin-top: 32.5rem; + width: 100%; + } + .footer-copyright { + text-align: center; + color: #fff; + padding: 1rem ; + margin-left: 5rem; + + } + } \ No newline at end of file diff --git a/footer.js b/footer.js index d43a3f3..8a55dc4 100644 --- a/footer.js +++ b/footer.js @@ -28,7 +28,7 @@ document.write(`
-
+
@@ -36,7 +36,7 @@ document.write(` -

Envision is the entrepreneurship cell of Indian Institute of Information Technology of +

Envision is the entrepreneurship cell of Indian Institute of Information Technology of Kalyani.

@@ -44,34 +44,34 @@ document.write(`
-

Envision

+

Envision

-
-

Links

+

Links

-
-
+
-

E-Cell | @ 2023 IIIT Kalyani- All Rights Reserved

+

E-Cell | @ 2023 IIIT Kalyani- All Rights Reserved

From 3c3cc85275fe89c6e9b278fe0dd7d182b2104ee7 Mon Sep 17 00:00:00 2001 From: shashwatdwi176 Date: Mon, 3 Jul 2023 18:19:30 +0530 Subject: [PATCH 2/3] fix minor responsive issues --- footer.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 84 insertions(+), 11 deletions(-) diff --git a/footer.css b/footer.css index 2a509ad..062aede 100644 --- a/footer.css +++ b/footer.css @@ -55,11 +55,11 @@ } .footer-heading { margin-bottom: 0.9375rem; - font-size: 1.8rem; + font-size: 2.2vh; color:#f0f5f1 } .footer-paragraph{ - font-size: 2rem; + font-size: 3vh; color: #fff; } @@ -75,7 +75,7 @@ } .footer-link{ color: #f0f5f1; - font-size: 2rem; + font-size: 3vh; } .footer-link:hover { @@ -90,10 +90,7 @@ .footer-social-icons i { color: white; } - .footer-logo{ - width:10%; - height: 25%; - } + .footer-social-icons li { margin-bottom: 0rem; width:2.5rem; @@ -116,8 +113,8 @@ } .footer-logo{ margin-right: 10rem; - width:18rem; - height: 18rem; + width:80%; + height: 60%; } /* Responsive adjustments */ @@ -262,7 +259,7 @@ } - @media screen and (min-width: 320px) and (max-width: 480px) { + /* @media screen and (min-width: 320px) and (max-width: 480px) { footer { background: #000615; @@ -329,7 +326,7 @@ } - } + } */ @media screen and (min-width: 768px) and (max-width: 1024px) { footer { @@ -364,6 +361,82 @@ font-size: 2rem; margin-top:2rem; } + .footer-paragraph{ + font-size: 2rem; + text-align:start; + padding: 0.938rem; + margin-left: 3rem; + + } + .footer-link { + font-size: 2rem; + width:20rem; + transform:translateX(10rem); + + } + .footer-social-icons li a { + width: 2rem; + height: 2rem; + transform: translate(-2.5rem,5.375rem); + } + .footer-logo{ + width: 13rem; + margin-left:3.5rem; + margin-top:2rem; + + } + .footer-horizontal-line{ + margin-top: 1.5rem; + width:100%; + } + .footer-horizontal1-line{ + margin-top: 32.5rem; + width: 100%; + } + .footer-copyright { + text-align: center; + color: #fff; + padding: 1rem ; + margin-left: 5rem; + + } + + } + + @media screen and (min-width: 1024px) and (max-width: 1280px) { + + footer { + background: #000615; + max-width: 100%; + height: 85rem; + margin-left: auto; + margin-right: auto; + margin-top: 4rem; + + background-size: cover; + } + + .footer-elements { + margin: 1rem ; + height: max-content; + width:30rem; + margin-left: 25rem; + padding: 0; + display: flex; + justify-content: space-around; + } + .footer-red-image{ + visibility: hidden; + } + .footer-section { + display: block; + flex-wrap: wrap; + height: 45.125rem; + } + .footer-heading { + font-size: 2rem; + margin-top:2rem; + } .footer-paragraph{ font-size: 2rem; text-align:start; From e667861654d8840b1a8e1cd28dcd16b6db31ac31 Mon Sep 17 00:00:00 2001 From: shashwatdwi176 Date: Mon, 3 Jul 2023 18:27:18 +0530 Subject: [PATCH 3/3] fix minor bugs --- footer.css | 70 +----------------------------------------------------- 1 file changed, 1 insertion(+), 69 deletions(-) diff --git a/footer.css b/footer.css index 062aede..6cd7fe5 100644 --- a/footer.css +++ b/footer.css @@ -258,75 +258,7 @@ } } - - /* @media screen and (min-width: 320px) and (max-width: 480px) { - - footer { - background: #000615; - max-width: 100%; - height: 80rem; - margin-right: auto; - margin-left: auto; - margin-top: 4rem;; - background-size: cover; - - } - - .footer-elements { - margin: 1rem 0; - width: 18.5rem; - - padding: 0; - display: flex; - justify-content: space-around; - } - .footer-red-image{ - visibility: hidden; - } - .footer-section { - display: block; - flex-wrap: wrap; - height: 45.125rem; - } - .footer-heading { - font-size: 1.3125rem; - margin-top:2rem; - } - .footer-paragraph{ - font-size: 1.38rem; - - padding: 0.938rem; - margin-left:5rem; - } - .footer-link { - font-size: 1.375rem; - - } - .footer-social-icons li a { - width: 1.875rem; - height: 1.875rem; - transform: translate(-2.5rem,5.375rem); - } - .footer-logo{ - width: 13rem; - margin-left:4.5rem; - margin-top:2rem; - - } - .footer-horizontal-line{ - margin-top: 1.5rem; - } - .footer-horizontal1-line{ - margin-top: 25.5rem; - } - .footer-copyright { - text-align: center; - color: #fff; - padding: 2rem ; - - } - - } */ + @media screen and (min-width: 768px) and (max-width: 1024px) { footer {