From d58863827e42b5ea7236ba05c87d29f25c596027 Mon Sep 17 00:00:00 2001 From: SwastikaPradhan Date: Fri, 27 Sep 2024 11:54:15 +0530 Subject: [PATCH] bug fixed for the footer position --- new-website/index.html | 197 ++++++++++++++++++++++++++++++-------- new-website/mainstyle.css | 46 +++++---- new-website/style.css | 113 +++++++++------------- 3 files changed, 230 insertions(+), 126 deletions(-) diff --git a/new-website/index.html b/new-website/index.html index e9182a07..66f323b2 100644 --- a/new-website/index.html +++ b/new-website/index.html @@ -17,6 +17,7 @@ + @@ -41,6 +42,46 @@ top: 0; left: 0; } + + +.footer-container { + padding: 20px; + background-color: #f8f8f8; /* Light background color */ +} + +.footer-title { + font-size: 1.5em; + margin: 0; +} + +.footer-description { + margin: 10px 0; +} + +.footer-links { + list-style: none; + padding: 0; +} + +.footer-links li { + margin: 5px 0; +} + +.footer-icons { + display: flex; + gap: 10px; /* Space between icons */ +} + +.footer-bottom { + text-align: center; + margin-top: 20px; +} + +.footer-horizontal-line { + border-top: 1px solid #ccc; /* Example horizontal line */ + margin: 20px 0; +} + @@ -425,61 +466,133 @@

License

-
-
-
-
- ResourceHub Image -

ResourceHub

+ + + +
+
+
+
+ ResourceHub Image +

ResourceHub

+
+

ResourceHub is an open-source project that serves as a
one-stop repository of + valuable resources curated by the
amazing contributors in the community

+
+
+ + + + + + + + + + +
+
+
+ +
+

+
+
+

Copyright © 2024 ResourceHub. All Rights Reserved.

+
+
+
-

-
-
-

Copyright © 2024 ResourceHub. All Rights Reserved.

-
-
- +
+
+ + + +
+
-
-
- - - -
-
-
-
+
+ + + + + + + + + diff --git a/new-website/mainstyle.css b/new-website/mainstyle.css index 9f0febfc..7e65c0a1 100644 --- a/new-website/mainstyle.css +++ b/new-website/mainstyle.css @@ -1450,36 +1450,46 @@ body::-webkit-scrollbar-thumb:hover { } /* FOOTER STYLES */ +.footer-container { + padding: 20px; + background-color: #f8f8f8; /* Light background color */ +} -.footerclass a{ - transition:all 0.3s linear; +.footer-title { + font-size: 1.5em; + margin: 0; } -.footerclass a:hover{ - color:#00aaff; - font:bolder; - text-decoration: underline; +.footer-description { + margin: 10px 0; +} + +.footer-links { + list-style: none; + padding: 0; +} + +.footer-links li { + margin: 5px 0; } -/* CONTENT DISPLAY PAGE STYLES */ +.footer-icons { + display: flex; + gap: 10px; /* Space between icons */ +} -#project-title { +.footer-bottom { text-align: center; - font-size: 48px; margin-top: 20px; - font-family: 'Arial', sans-serif; } -.dark-mode { - background-color: #000000; - color: white; +.footer-horizontal-line { + border-top: 1px solid #ccc; /* Example horizontal line */ + margin: 20px 0; } -.light-mode -{ - background-color: white; - color: black; -} + + /* Toggle button style */ diff --git a/new-website/style.css b/new-website/style.css index d4a2b126..7359408d 100644 --- a/new-website/style.css +++ b/new-website/style.css @@ -1398,12 +1398,13 @@ body{ flex-direction: column; align-items: center; width: 100%; - max-width: 100%; + max-width:100%; background-color: #e0e0e0d0; color: black; padding: 20px; box-sizing: border-box; - margin: 40px auto; + + margin: 0; /* Removed unnecessary margin */ } .footer-content { @@ -1411,6 +1412,8 @@ body{ justify-content: space-between; align-items: flex-start; width: 100%; + max-width: 1200px; + flex-wrap: wrap; } .footer-left, @@ -1423,18 +1426,21 @@ body{ .logo-and-title { display: flex; - align-items: center; /* Align items vertically */ + align-items: center; + + } .logo-and-title img { - width: 50px; /* Adjust the width as needed */ - height: auto; /* Maintain aspect ratio */ - margin-right: 10px; /* Adjust the margin as needed */ + width: 50px; + height: auto; + margin-right: 10px; margin-top: -15px; } .footer-right { - margin-top: 6%; + margin-top: 3%; + } .footer-title { @@ -1452,12 +1458,13 @@ body{ .footer-icons { display: flex; - color: black; - align-items: center; /* Align items vertically in the center */ + color:black; + align-items: center; + margin-top: 10px; } .footer-icons a { - margin-right: 10px; + margin-right: 10px; /* Fixed spacing between icons */ color: black; } @@ -1465,41 +1472,43 @@ body{ list-style: none; color: white; padding: 0; - padding-left: 300px; /* Add right padding to move the links towards the right */ + padding-left: 300px; } .footer-links li { margin-bottom: 10px; - position: relative; /* To position the pseudo-element */ + position: relative; } .footer-links a { color: black; text-decoration: underline; font-size: 1em; - padding-left: 30px; /* Increased padding to make space for the larger arrow */ - position: relative; /* Position relative for absolute positioning of arrow */ + padding-left: 30px; + position: relative; } .footer-links a::before { - content: '→'; /* Unicode for right arrow */ + content: '→'; position: absolute; left: 0; top: 50%; - transform: translateY(-50%); /* Center the arrow vertically */ + transform: translateY(-50%); color: black; - font-size: 1.5em; /* Increase the font size to make the arrow larger */ - height: 1.5em; /* Set the height of the arrow */ - width: 1.5em; /* Set the width of the arrow */ + font-size: 1.5em; + height:1.5rem; + width:1.5rem; } .bottom{ - background-color: #e1b6b6; + background-color:#e1b6b6; } + .footer-horizontal-line { border: 1px solid #000; margin: 3px 0; padding-inline-end: 100%; } + .footer-bottom { text-align: center; margin-top: 20px; @@ -1511,6 +1520,7 @@ body{ color: rgb(68 110 201); font-weight: bold; } + .footer-links-below { text-align: center; margin-top: 10px; @@ -1537,16 +1547,17 @@ body{ .footer-links-below a:hover { color: #555; } -/* Back-to-top */ +/* Back-to-top */ footer { position: relative; padding: 50px 0; } + #back-to-top-container { position: fixed; bottom: 30px; - right: 30px; + right: 30px; cursor: pointer; z-index: 1000; } @@ -1561,35 +1572,36 @@ footer { } #back-to-top { - width: 40px; - height: 40px; + width: 40px; + height: 40px; fill: currentColor; transition: fill 0.3s; } #back-to-top:hover { fill: rgb(83, 79, 79); - transform: scale(1.06); - transition: all .2s ease-in-out; + transform: scale(1.06); + transition: all 0.2s ease-in-out; } .dark .circle1 { - background-color: #000000; + background-color: #000; } .dark #back-to-top:hover { fill: rgb(207, 200, 200); - transform: scale(1.06); - transition: all .2s ease-in-out; } + @media (max-width: 670px) { .footer-content { flex-direction: column; text-align: center; } - .footer-left, .footer-right { - min-width: 100%; + .footer-left, + .footer-right { + width: 100%; + padding-right: 0; } .footer-right { @@ -1597,16 +1609,13 @@ footer { } .footer-icons { - display: flex; justify-content: center; - width: 100%; gap: 20px; } .footer-links { - align-items: center; + padding-left: 0; text-align: center; - padding: 0px; } } @@ -1616,47 +1625,19 @@ footer { } .footer-links { - align-items: center; text-align: start; } } +/* Dark mode adjustments */ .dark svg path { - fill: rgb(255, 255, 255); + fill: #fff; } .dark svg path:hover { - fill: rgb(207, 200, 200); + fill: #cfc8c8; } .hov:hover { color: rgba(58, 113, 224, 0.755); } - -#back-to-top-container { - position: fixed; - bottom: 30px; - right: 30px; - cursor: pointer; - z-index: 1000; -} - -.circle1 { - background-color: #fff; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - transition: background-color 0.3s; -} - -#back-to-top { - width: 40px; - height: 40px; - fill: currentColor; - transition: fill 0.3s; -} - -#back-to-top:hover { - fill: rgba(58, 55, 55); -}