From 98eb65b7720a2ff01efd36585cfef3e19ffe0446 Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Mon, 5 Aug 2024 21:59:07 +0530 Subject: [PATCH 01/11] Fixed structure --- events.css => assets/styles/events.css | 0 explore.css => assets/styles/explore.css | 0 .../styles/githubbadge.css | 0 assets/styles/styles.css | 539 +++++++++++++++ events.html => pages/events.html | 13 +- exploremore.html => pages/exploremore.html | 10 +- pages/githubbadge.html | 640 ++++++++++++++++++ pages/index.html | 139 ++++ 8 files changed, 1330 insertions(+), 11 deletions(-) rename events.css => assets/styles/events.css (100%) rename explore.css => assets/styles/explore.css (100%) rename githubbadge.css => assets/styles/githubbadge.css (100%) create mode 100644 assets/styles/styles.css rename events.html => pages/events.html (93%) rename exploremore.html => pages/exploremore.html (91%) create mode 100644 pages/githubbadge.html create mode 100644 pages/index.html diff --git a/events.css b/assets/styles/events.css similarity index 100% rename from events.css rename to assets/styles/events.css diff --git a/explore.css b/assets/styles/explore.css similarity index 100% rename from explore.css rename to assets/styles/explore.css diff --git a/githubbadge.css b/assets/styles/githubbadge.css similarity index 100% rename from githubbadge.css rename to assets/styles/githubbadge.css diff --git a/assets/styles/styles.css b/assets/styles/styles.css new file mode 100644 index 00000000..e7c1b4bf --- /dev/null +++ b/assets/styles/styles.css @@ -0,0 +1,539 @@ +body { + font-family: "Roboto", sans-serif; + background-color: #f0f0f0; + color: #333; + margin: 0; + padding: 0; + transition: background-color 0.3s ease, color 0.3s ease; + } + + .container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + text-align: center; + } + + .main-heading { + margin-bottom: 40px; + } + + .tags { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 20px; + } + + .tag { + display: inline-block; + margin: 5px; + padding: 10px 15px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.3s ease; + } + .tag:hover{ + background-color: #ebebeb; + + } + .search-bar { + margin-bottom: 20px; + } + + .search-input { + width: 50%; + padding: 15px; + font-size: 16px; + border: 2px solid #ddd; + border-radius: 25px; + box-shadow: none; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + } + + .search-input:hover, + .search-input:focus { + border-color: #aaa; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + .profiles { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + .profile { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 10px; + margin: 10px; + width: 250px; + padding: 15px; + margin-top: 30; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + animation: fadeIn 0.5s ease-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; + } + + .profile:hover { + transform: scale(1.05); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + } + + .profile img { + max-width: 100%; + border-radius: 10px; + } + + .profile p { + color: #333; + } + + .grey-banner { + background-color: #333333; + color: white; + padding: 10px 15px; + border-bottom-left-radius: 10px; + font-size: 0.8em; + font-weight: 500; + width: 200px; + text-align: center; + display: inline-block; + margin: 20px auto; + cursor: pointer; + } + + /* Dark Mode Styles */ + body.dark-mode { + background-color: #000000; + color: #f0f0f0; + } + + body.dark-mode .tag { + background-color: #555; + border-color: #444; + color: #fff; + } + body.dark-mode .tag:hover{ + background-color: #3f3f3f; + } + body.dark-mode .search-input { + background-color: #555; + border-color: #444; + color: #fff; + } + + body.dark-mode .profile { + background-color: #444; + border-color: #555; + } + + body.dark-mode .profile p { + color: #f0f0f0; + } + + /* Switch Label */ + .toggle-switch label { + position: relative; + top: 0px; + left: 7px; + width: 55px; /* Adjust width to fit switch button and icons */ + height: 30px; /* Adjust height if needed */ + background-color: #ccc; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; + } + + /* Switch Button */ + .switch-button { + position: absolute; + top: 2px; + left: 3px; + width: 27px; + height: 27px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transition: transform 0.5s ease, background-color 0.5s ease; + } + + /* Icon Styles */ + .sun-icon, + .moon-icon { + user-select: none; + font-size: 25px; + position: absolute; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.5s ease, color 0.5s ease; + } + + /* Sun Icon */ + .sun-icon { + color: #f39c12; + left: 1px; /* Position from the left edge */ + opacity: 1; /* Initially visible */ + } + + /* Moon Icon */ + .moon-icon { + color: #bdc3c7; + right: 1px; /* Position from the right edge */ + opacity: 0; /* Initially hidden */ + } + + /* Hide the checkbox itself */ + #theme-toggle { + opacity: 0; + position: absolute; + width: 0; + height: 0; + } + + + /* Checkbox Checked State */ + #theme-toggle:checked + label { + background-color: #555; + } + + #theme-toggle:checked + label .sun-icon { + opacity: 0; /* Hide sun icon when checked */ + } + + #theme-toggle:checked + label .moon-icon { + opacity: 1; /* Show moon icon when checked */ + } + + #theme-toggle:checked + label .switch-button { + transform: translateX(30px); /* Adjust to fit switch width */ + background-color: black; + } + + body.dark-mode .toggle-label { + color: #f0f0f0; + } + + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + } + + .navbar-left { + display: flex; + cursor: pointer; + align-items: center; + } + + .navbar-icon { + width: 30px; + height: 30px; + margin-right: 10px; + } + + .navbar-text { + font-size: 18px; + font-weight: bold; + } + + .navbar-right { + display: flex; + align-items: center; + } + + .navbar-link { + text-decoration: none; + color: #333; + font-size: 16px; + padding: 5px 10px; + border-radius: 5px; + transition: background-color 0.3s ease; + margin-right: 5px; + } + + .navbar-link:hover { + background-color: #c5c5c5; + } + + .toggle-switch { + margin-left: 5px; + } + + /* Dark mode adjustments */ + body.dark-mode .navbar { + background-color: #333; + color: #f0f0f0; + } + + body.dark-mode .navbar-link { + color: #f0f0f0; + } + + body.dark-mode .navbar-link:hover { + background-color: #555; + } + + .footer-2 { + background-color: #dedede; + margin-top: 80px; + } + + .footer-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; + } + + .footer-content { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 2rem 0; + } + + .footer-info { + flex: 0 1 200px; + margin-top: 2rem; + margin-right: 2rem; + } + + .footer-links { + flex: 1 1 auto; + display: flex; + justify-content: flex-start; + max-width: 500px; + gap: 50px; + } + + .footer-description { + flex: 1 1 300px; + max-width: 400px; + } + + .footer-logo { + max-width: 100%; + height: auto; + cursor: pointer; + } + + .footer-section { + margin-right: 3rem; + } + + .footer-heading { + font-size: 1.125rem; + font-weight: bold; + text-transform: uppercase; + margin-bottom: 1rem; + } + + .footer-link { + display: block; + color: #000; + text-decoration: none; + margin-bottom: 0.5rem; + } + + .footer-link:hover { + text-decoration: underline; + } + + .footer-description h5 { + font-size: 1rem; + font-weight: normal; + margin-bottom: 1rem; + } + + .footer-link:hover{ + display: inline-block; + text-decoration: underline; + } + + .footer-description h5 { + font-size: 1rem; + font-weight: normal; + margin-bottom: 1rem; + } + + .footer-button { + display: inline-block; + background-color: #000; + color: #fff; + padding: 0.5rem 1rem; + border-radius: 0.25rem; + text-decoration: none; + transition: background-color 0.3s; + } + + .footer-button:hover { + background-color: #333; + } + + .footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding: 1rem 0; + } + + .footer-copyright { + text-align: center; + font-size: 0.875rem; + } + + /* Dark mode styles */ + body.dark-mode .footer-2 { + background: #333; + } + + body.dark-mode .footer-link{ + color: #fff; + } + + body.dark-mode .footer-info img{ + filter: brightness(0) invert(1) ; + } + + body.dark-mode .footer-button { + background-color: #fff; + color: #000; + } + + body.dark-mode .footer-button:hover { + background-color: #e0e0e0; + } + + /* Responsive adjustments */ +@media (max-width: 768px) { + .footer-content { + flex-direction: column; + } + .footer-links{ + gap: 0px !important; + } + .footer-info{ + width: 250px; + margin-bottom: 2rem; + } + .footer-links, .footer-description { + width: 100%; + margin-bottom: 2rem; + } + + .footer-links { + flex-direction: column; + margin-bottom: 10px !important; + } + + .footer-section { + margin-right: 0; + /* margin-bottom: 1rem; */ + } + .footer-heading{margin-top: 25px !important;} + .footer-info{ + flex: 0 1; + margin-bottom: 10px; + }.footer-description{ + flex: 1 1; + margin-bottom: 0px !important; + } + +} + +.img-container { + height: 250px; /* Set the height of the container */ + width: 100%; /* Adjust width if necessary */ + overflow: hidden; + position: relative; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.img-container::-webkit-scrollbar { + width: 0; + height: 0; +} + +.scroll-on-hover { + height: 250px; + width: 100%; + overflow: hidden; + position: relative; +} + +.scroll-on-hover img { + transition: transform 1.5s ease-in-out; +} + +.side-icons{ + position: fixed; + right: 0px; + top: 30%; + height: 260px; + width: 70px; + align-items: center; + padding-top: 20px; + padding-bottom: 20px; + background-color: white; + display: flex; + flex-direction: column; + gap: 20px; + +} +body.dark-mode .side-icons { + background: #333; +} + +.icons{ + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; +} + +.side-icons a { + color: #374151; /* Gray color for the icons */ + font-size: 24px; /* Size of the icons */ + text-decoration: none; +} + +.icons:hover{ + background-color: #777; +} + +.side-icons .icons:hover a{ + color: #fff; +} + +body.dark-mode .side-icons .icons:hover a{ + color: #333 !important; +} + +body.dark-mode .side-icons .icons:hover{ + background-color: #fff; +} + +body.dark-mode .side-icons a{ + color: white !important; +} diff --git a/events.html b/pages/events.html similarity index 93% rename from events.html rename to pages/events.html index 32600a1b..51c0b995 100644 --- a/events.html +++ b/pages/events.html @@ -4,15 +4,16 @@ Events | Recode Hive - - + + +