diff --git a/css/navbar.css b/css/navbar.css index 0043b55..3b54471 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -1,157 +1,285 @@ +:root { + --ease: cubic-bezier(0.4, -0.3, 0.6, 1.3); + --clr-background-day: #1b7fcc; + --clr-background-night: #070b34; + + --clr-sun: #fce570; + --clr-sun-lgt: #ffffe3; + + --clr-moon: hsl(212, 13%, 75%); + + --button-width: 2.5em; +} + /* ====================== navbar section ====================== */ -nav{ - height: 100px; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background-color: #000000a8; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - position: sticky; - top: 0; - left: 0; - padding-left: 50px; - padding-right: 50px; - padding-top: 10px; - padding-bottom: 10px; - overflow: hidden; - z-index: 5; +nav { + height: 100px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #000000a8; + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + position: sticky; + top: 0; + left: 0; + padding-left: 50px; + padding-right: 50px; + padding-top: 10px; + padding-bottom: 10px; + overflow: hidden; + z-index: 5; } /* ========= nav items ========= */ -.nav-items{ - background-color: #a6a6a44b; - padding: 10px; - border-radius: 50px; - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - -} -.nav-items a{ - padding: 10px 15px; - border-radius: 50px; - font-size: 18px; - color: var(--white); - font-weight: 500; - text-transform: capitalize; - transition: all 0.1s linear; -} -.nav-items a:hover{ - color: var(--black); - background-color: var(--light-gray); +.nav-items { + background-color: #a6a6a44b; + padding: 10px; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; } - -.user-button{ - display: flex; - justify-content: center; - align-items: center; - gap: 15px; +.nav-items a { + padding: 10px 15px; + border-radius: 50px; + font-size: 18px; + color: var(--white); + font-weight: 500; + text-transform: capitalize; + transition: all 0.1s linear; +} +.nav-items a:hover { + color: var(--black); + background-color: var(--light-gray); } +.user-button { + display: flex; + justify-content: center; + align-items: center; + gap: 15px; +} /* ========= nav links ========= */ -.nav-links{ - - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - +.nav-links { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; } -.nav-links img{ - width: 40px; - cursor: pointer; - transition: all 0.2s ease; +.nav-links img { + width: 40px; + cursor: pointer; + transition: all 0.2s ease; } -.nav-links img:hover{ - transform: scale(1.1); +.nav-links img:hover { + transform: scale(1.1); } /* ========= nav-buttons ========= */ -.nav-buttons{ - position: sticky; - top: 0; - right: 0; - padding: 15px; - height: fit-content; - width: 100%; - text-align: right; - backdrop-filter: blur(16px) saturate(180%); - -webkit-backdrop-filter: blur(16px) saturate(180%); - z-index: 10; - display: none; -} -.fa-solid{ - color: white; - font-size: 30px; +.nav-buttons { + position: sticky; + top: 0; + right: 0; + padding: 15px; + height: fit-content; + width: 100%; + text-align: right; + backdrop-filter: blur(16px) saturate(180%); + -webkit-backdrop-filter: blur(16px) saturate(180%); + z-index: 10; + display: none; +} +.fa-solid { + color: white; + font-size: 30px; +} +.fa-solid.fa-close { + display: none; +} +/* ========= nav toggle ========= */ +#button-wrapper { + --x: 6px; + --y: 10px; + --spread: 8px; + --offset: 0px; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: var(--clr-background-day); + width: 7em; + height: 3em; + border-radius: 2em; + font-size: 0.8em; + border: none; + overflow: hidden; + /* box-shadow: var(--x) var(--y) var(--spread) var(--offset) #000, + var(--x) var(--y) var(--spread) var(--offset) #000, + inset var(--x) var(--y) var(--spread) var(--offset) #000; */ + isolation: isolate; + transition: all 0.3s var(--ease); + margin-top: auto; +} +#button-wrapper #button { + position: absolute; + left: 0.25em; + right: auto; + top: 50%; + transform: translate(0, -50%); + width: var(--button-width); + height: var(--button-width); + border-radius: 50%; + background: radial-gradient(var(--clr-sun-lgt), transparent); + background-color: var(--clr-sun); + cursor: pointer; + /* box-shadow: 0px 0px 0em 1em #000, 0px 0px 0em 2em #000, 0px 0px 0em 3em #000, 0 0 0.5em 0 #fff; */ + transition: all 0.75s var(--ease); +} +#button-wrapper #button::after { + content: ""; + position: absolute; + left: 50%; + top: 60%; + width: 25%; + height: 25%; + background-color: #c5c5c5 0; + border-radius: 50%; + overflow: hidden; + transition: all 0.3s ease; + box-shadow: -0.95em -0.75em 0 0.1em #d5d5d5 0, 0.1em -1em 0 -0.1em #d5d5d5 0; } -.fa-solid.fa-close{ - display: none; +#button-wrapper::before { + content: ""; + position: absolute; + width: 2.5em; + aspect-ratio: 1; + background-color: #fff; + border-radius: 50%; + right: -0.25em; + bottom: 0.4em; + box-shadow: -1em 1em 0 -0.25em #fff, -2em 1.25em 0 -0.5em #fff, + -3em 1.5em 0 -0.25em #fff, -4em 1.5em 0 -0.6em #fff, + -5em 1.75em 0 -0.5em #fff; + opacity: 0.5; + transition: all 0.75s ease; +} +#button-wrapper::after { + content: ""; + position: absolute; + width: var(--button-width); + height: var(--button-width); + background-color: #fff; + border-radius: 50%; + right: -1em; + bottom: 0em; + box-shadow: -1em 1em 0 -0.25em #fff, -2em 1.25em 0 -0.5em #fff, + -3em 1.5em 0 -0.25em #fff, -4em 1.5em 0 -0.6em #fff, + -5em 1.75em 0 -0.5em #fff; + transition: all 0.75s ease; +} +#button-wrapper[data-time="night"] { + background-color: var(--clr-background-night); +} +#button-wrapper[data-time="night"] #button { + background: radial-gradient(#eee, transparent); + background-color: var(--clr-moon); + left: calc(100% - 0.25em - var(--button-width)); + /* box-shadow: 0px 0px 0em 1em #000, 0px 0px 0em 2em #000, 0px 0px 0em 3em #000, */ + /* 0 0 0.5em 0 #fff; */ +} +#button-wrapper[data-time="night"] #button::after { + transition-delay: 0.5s; + background-color: #c5c5c5 ff; + box-shadow: -0.95em -0.75em 0 0.1em #d5d5d5 ff, 0.1em -1em 0 -0.1em #d5d5d5 ff; +} +#button-wrapper[data-time="night"]::before { + right: -5em; + bottom: -1em; + scale: 2; +} +#button-wrapper[data-time="night"]::after { + right: -5em; + bottom: -2em; + scale: 3; +} +#button-wrapper[data-time="night"] canvas#stars { + opacity: 1; +} +#button-wrapper canvas#stars { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + opacity: 0; + transition: all 0.75s ease; +} +label[for="scale"] { + font-size: 24px; + position: absolute; + right: 32px; + top: 16px; } /* ====================== nav title responsive ====================== */ -.navTitle{ - position: absolute; - top: 5px; - left: 20px; - color: var(--orange); +.navTitle { + position: absolute; + top: 5px; + left: 20px; + color: var(--orange); } -.navTitle img{ - width: 50px; - height: 50px; - border-radius: 50%; +.navTitle img { + width: 50px; + height: 50px; + border-radius: 50%; } -.navTitle.active{ - display: none; +.navTitle.active { + display: none; } - - /* ====================== navbar responsive ====================== */ -@media only screen and (max-width: 860px) -{ - nav{ - position: fixed; - top: 0; - left: -900px; - height: 100vh; - background-color: var(--black); - flex-direction: column; - justify-content: center; - transition: all 0.2s ease-in-out; - gap: 30px; - padding-left: 0px; +@media only screen and (max-width: 860px) { + nav { + position: fixed; + top: 0; + left: -900px; + height: 100vh; + background-color: var(--black); + flex-direction: column; + justify-content: center; + transition: all 0.2s ease-in-out; + gap: 30px; + padding-left: 0px; padding-right: 0px; - } - .nav-items{ - flex-direction: column; - justify-content: center; - width: 100%; - background-color: transparent; - } - .nav-items a{ - font-size: 20px; - width: 50%; - text-align: center; - } - .nav-buttons{ - display: block; - } - .nav .button{ - font-size: 20px; - } - .nav-links{ - gap: 30px; - } - .nav-links img{ - width: 50px; - } + } + .nav-items { + flex-direction: column; + justify-content: center; + width: 100%; + background-color: transparent; + } + .nav-items a { + font-size: 20px; + width: 50%; + text-align: center; + } + .nav-buttons { + display: block; + } + .nav .button { + font-size: 20px; + } + .nav-links { + gap: 30px; + } + .nav-links img { + width: 50px; + } } - - diff --git a/css/style.css b/css/style.css index fc296b3..899db81 100644 --- a/css/style.css +++ b/css/style.css @@ -1,89 +1,87 @@ /* ====================== google fonts ====================== */ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); /* ====================== global declaration section ====================== */ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - scroll-behavior: smooth; - font-family: 'Inter', sans-serif; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + scroll-behavior: smooth; + font-family: "Inter", sans-serif; } -:root{ - --orange: #E75F00; - --white: #FFFFFF; - --light-gray: #D7D7D7; - --gray: #A6A6A4; - --black: #000000; +:root { + --orange: #e75f00; + --white: #ffffff; + --light-gray: #d7d7d7; + --gray: #a6a6a4; + --black: #000000; } /* ====================== Theme css ====================== */ -.light-theme{ - --white: #000000; - --black: #FFFFFF; - --light-gray: #969696; - --gray: #515151; +.light-theme { + --white: #000000; + --black: #ffffff; + --light-gray: #969696; + --gray: #515151; } /* ====================== body and main css ====================== */ - -body{ - background-color: var(--black); - overflow-x: hidden; +body { + background-color: var(--black); + overflow-x: hidden; } -main{ - background-color: var(--black); - position: relative; +main { + background-color: var(--black); + position: relative; } /* ====================== button css ====================== */ - -.button{ - padding: 10px 15px; - border-radius: 50px; - background-color: var(--orange); - border: 2px solid var(--orange); - cursor: pointer; - font-size: 15px; - text-transform: capitalize; - font-weight: 500; - letter-spacing: 2px; - color: var(--white); - transition: all 0.1s linear; - +.button { + padding: 10px 15px; + border-radius: 50px; + background-color: var(--orange); + border: 2px solid var(--orange); + cursor: pointer; + font-size: 15px; + text-transform: capitalize; + font-weight: 500; + letter-spacing: 2px; + color: var(--white); + transition: all 0.1s linear; } -.button:hover{ - background-color: transparent; +.button:hover { + background-color: transparent; } /* ====================== page css ====================== */ - -.page{ - height: 100vh; - max-width: 1350px; - margin-left: auto; - margin-right: auto; +.page { + height: 100vh; + max-width: 1350px; + margin-left: auto; + margin-right: auto; } -#change-theme{ - padding: 10px 15px; - border-radius: 50px; - background-color: var(--orange); - border: 2px solid var(--orange); - cursor: pointer; - font-size: 15px; - text-transform: capitalize; - font-weight: 500; - letter-spacing: 2px; - color: var(--white); - transition: all 0.1s linear; - +#change-theme { + padding: 10px 15px; + border-radius: 50px; + background-color: var(--orange); + border: 2px solid var(--orange); + cursor: pointer; + font-size: 15px; + text-transform: capitalize; + font-weight: 500; + letter-spacing: 2px; + color: var(--white); + transition: all 0.1s linear; +} +#change-theme:hover { + background-color: transparent; } #change-theme:hover{ background-color: transparent; diff --git a/index.html b/index.html index dd79fd0..0f0e7f0 100644 --- a/index.html +++ b/index.html @@ -53,9 +53,12 @@ -
- -
+ + +
Coding Community of MSIT
+
@@ -117,9 +121,7 @@

Our Members

- +
@@ -182,7 +184,6 @@

Photo Gallery

-