diff --git a/index.html b/index.html index ca717a9..da36c6c 100644 --- a/index.html +++ b/index.html @@ -19,15 +19,13 @@ font-family: Arial, sans-serif; } .translate-button { - position: fixed; - top: 160px; - left: 20px; - background-color: #007bff; - color: white; + + + background-color: transparent; border: none; border-radius: 50%; - padding: 15px; - font-size: 20px; + + font-size: 30px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } @@ -37,17 +35,19 @@ } #google_translate_element { - position: fixed; - top: 90px; - left: 0px; + z-index: 1000; display: none; - background-color: white; - border: 1px solid #ddd; + + padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } + .nav-links{ + align-items: center; + } + .slideshow-container { position: relative; max-width: 100%; @@ -256,9 +256,7 @@ position: relative; } .image-button1 { - position: fixed; - top: 5px; - left: 10px; /* Aligns the button to the left side */ + background-color: transparent; /* Transparent background */ border: none; border-radius: 50%; @@ -286,6 +284,7 @@ justify-content: space-between; align-items: center; background-color: #2b2b28; + text-align: center; padding: 10px 20px; position: sticky; height: 80px; @@ -293,36 +292,283 @@ z-index: 1000; } .navbar .logo { - margin-left: 65px; + gap: 13px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + } + .navbar .logo h2{ + margin-top: 10px; + } + + .navbar li span{ + display: none; + opacity: 0; + transition: opacity 1.2s ease-in-out; } + .navbar li{ + display: flex; + } + .nav-links li a i{ + color: #000; + } + .navbar li:hover span{ + opacity: 1; + display:inline; + } + .theme-switch { + --toggle-size: 15px; + /* the size is adjusted using font-size, + this is not transform scale, + so you can choose any size */ + --container-width: 5.625em; + --container-height: 2.5em; + --container-radius: 6.25em; + /* radius 0 - minecraft mode :) */ + --container-light-bg: #3D7EAE; + --container-night-bg: #1D1F2C; + --circle-container-diameter: 3.375em; + --sun-moon-diameter: 2.125em; + --sun-bg: #ECCA2F; + --moon-bg: #C4C9D1; + --spot-color: #959DB1; + --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1); + --stars-color: #fff; + --clouds-color: #F3FDFF; + --back-clouds-color: #AACADF; + --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); + --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17); +} + +.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after { + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + font-size: var(--toggle-size); +} + +.theme-switch__container { + width: var(--container-width); + height: var(--container-height); + background-color: var(--container-light-bg); + border-radius: var(--container-radius); + overflow: hidden; + cursor: pointer; + -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94); + box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94); + -webkit-transition: var(--transition); + -o-transition: var(--transition); + transition: var(--transition); + position: relative; +} + +.theme-switch__container::before { + content: ""; + position: absolute; + z-index: 1; + inset: 0; + -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset; + box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset; + border-radius: var(--container-radius) +} + +.theme-switch__checkbox { + display: none; +} + +.theme-switch__circle-container { + width: var(--circle-container-diameter); + height: var(--circle-container-diameter); + background-color: rgba(255, 255, 255, 0.1); + position: absolute; + left: var(--circle-container-offset); + top: var(--circle-container-offset); + border-radius: var(--container-radius); + -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-transition: var(--circle-transition); + -o-transition: var(--circle-transition); + transition: var(--circle-transition); + pointer-events: none; +} + +.theme-switch__sun-moon-container { + pointer-events: auto; + position: relative; + z-index: 2; + width: var(--sun-moon-diameter); + height: var(--sun-moon-diameter); + margin: auto; + border-radius: var(--container-radius); + background-color: var(--sun-bg); + -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset; + box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset; + -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25)); + filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25)); + overflow: hidden; + -webkit-transition: var(--transition); + -o-transition: var(--transition); + transition: var(--transition); +} + +.theme-switch__moon { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + width: 100%; + height: 100%; + background-color: var(--moon-bg); + border-radius: inherit; + -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset; + box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset; + -webkit-transition: var(--transition); + -o-transition: var(--transition); + transition: var(--transition); + position: relative; +} + +.theme-switch__spot { + position: absolute; + top: 0.75em; + left: 0.312em; + width: 0.75em; + height: 0.75em; + border-radius: var(--container-radius); + background-color: var(--spot-color); + -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset; + box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset; +} + +.theme-switch__spot:nth-of-type(2) { + width: 0.375em; + height: 0.375em; + top: 0.937em; + left: 1.375em; +} + +.theme-switch__spot:nth-last-of-type(3) { + width: 0.25em; + height: 0.25em; + top: 0.312em; + left: 0.812em; +} + +.theme-switch__clouds { + width: 1.25em; + height: 1.25em; + background-color: var(--clouds-color); + border-radius: var(--container-radius); + position: absolute; + bottom: -0.625em; + left: 0.312em; + -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color); + box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color); + -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25); + -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25); + transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25); +} + +.theme-switch__stars-container { + position: absolute; + color: var(--stars-color); + top: -100%; + left: 0.312em; + width: 2.75em; + height: auto; + -webkit-transition: var(--transition); + -o-transition: var(--transition); + transition: var(--transition); +} + +/* actions */ + +.theme-switch__checkbox:checked + .theme-switch__container { + background-color: var(--container-night-bg); +} + +.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container { + left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter)); +} + +.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover { + left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em) +} + +.theme-switch__circle-container:hover { + left: calc(var(--circle-container-offset) + 0.187em); +} + +.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { + -webkit-transform: translate(0); + -ms-transform: translate(0); + transform: translate(0); +} + +.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { + bottom: -4.062em; +} + +.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container { + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +}
- - +