diff --git a/public/css/gallery.css b/public/css/gallery.css new file mode 100644 index 00000000..646829dd --- /dev/null +++ b/public/css/gallery.css @@ -0,0 +1,505 @@ +@import url(./main.css); + +.bar-fixed { + display: inline-block; +} + +.bar-menu { + opacity: 1; + justify-content: initial; +} + +main { + padding: 10px; + margin-bottom: 100vh; + padding-bottom: 10vh; + background-color: var(--primary-color); + transition: all 1s; +} + +h1 { + color: var(--title-color); +} + +a > i { + font-size: 2em; + margin-right: 20px; +} + +a > i:hover { + color: gray; +} + +.profile { + max-width: 1000px; + margin: auto; + margin-top: 80px; + margin-bottom: 20px; + padding-bottom: 30px; + border-bottom: 1px solid gainsboro; +} + +.profile > header { + display: flex; + max-width: 900px; + margin: auto; + justify-content: space-between; +} + +.user-container { + display: flex; + justify-content: center; + margin-right: 10px; + gap: 25px; +} + +.circle { + position: relative; + width: 200px; + height: 200px; +} + +.circle svg { + width: 100%; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + margin: auto; + fill: none; + stroke: url(#gradient); + stroke-linecap: round; + stroke-width: 2; + stroke-dasharray: 1; + cursor: pointer; +} + +.loader-animation { + animation: loader-animation 3s ease-out alternate-reverse; +} + +.profile img { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + margin: auto; + width: 150px; + height: 150px; + border-radius: 50%; +} + +.user { + margin-top: 20px; +} + +.user-container h2, +p { + font-size: 20px; + text-align: start; +} + +.user-container p { + font-size: 14px; +} + +.profile .btns-container { + margin-top: 20px; + display: flex; +} + +.profile .follow-btn { + position: relative; + appearance: none; + outline: none; + font-size: 14px; + font-family: "Helvetica"; + font-weight: 600; + height: 32px; + width: 120px; + margin-right: 25px; + cursor: pointer; +} + +.follow-btn:after { + content: "Seguir"; + height: 100%; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid; + border-radius: 4px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) + forwards; +} + +.follow-btn:checked:after { + content: "Siguiendo"; + animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) + forwards; +} + +.profile .fa-ellipsis-h { + color: var(--title-color); +} + +.profile .options-btn i:hover { + color: grey; +} + +.profile .options-btn { + height: 34px; + display: inline-flex; + align-items: center; + justify-content: center; + outline: none; + background: transparent; + border: none; + font-size: 1.5em; + cursor: pointer; + transition: color 250ms; +} + +.social-counts { + display: flex; + justify-content: center; + margin-top: 30px; + gap: 5%; +} + +.social-counts span { + color: var(--text-color); +} + +.social-counts .count { + font-weight: 800; +} + +.photos-grid { + max-width: 900px; + margin: auto; + gap: 15px; + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.photos-grid > div { + position: relative; +} + +.photos-grid span { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + left: 0; + top: 0; + right: 0; + bottom: 0; + margin: auto; + z-index: 5; + color: transparent; + font-size: 1.5em; + font-family: "Dancing Script", cursive; + padding: 10px; + transition: all 250ms; + cursor: pointer; +} + +.photos-grid img { + width: 100%; + height: 100%; +} + +.photos-grid span:hover { + background-color: rgba(0, 0, 0, 0.8); + color: whitesmoke; +} + +.photo-viewer { + display: none; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 20; + background-color: black; +} + +.main-photo-container { + display: flex; + width: 100%; + height: 100%; + color: white; +} + +.main-photo-container > div { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +div.photo-container { + position: relative; + height: 100%; + width: 65%; + flex: none; +} + +.photo { + position: absolute; + width: 100%; + left: 0; + right: 0; + margin: auto; +} + +.photo-viewer > img { + position: absolute; + width: 50%; + height: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + z-index: 15; +} + +img.thumbnail { + width: 100%; + margin: 0; + z-index: -10; + filter: blur(12px); + opacity: 0.4; +} + +.btn { + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + z-index: 12; + color: white; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 50%; + font-size: 1.5em; + top: 15px; + right: 15px; + cursor: pointer; +} + +.right-btn, +.left-btn { + position: initial; +} + +.btn:hover { + background-color: rgba(255, 255, 255, 0.3); +} + +.parallax-efect { + opacity: 0; + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -10; + transition: opacity 500ms; +} + +.parallax-efect p { + color: rgba(0, 0, 0, 0.8); +} + +.parallax-efect > div { + max-height: 100vh; + width: 100%; + position: absolute; + bottom: 0; +} + +.parallax-efect > div > img { + width: 100%; + max-height: 100vh; +} + +.balloon { + position: absolute; + text-transform: uppercase; + font-size: 12px; + border-radius: var(--border); + padding: var(--border); + --border: 1em; + font-family: sans-serif; + z-index: 1; + background-color: white; + filter: drop-shadow(0px 0px 1px black); + animation: 2000ms balloon-cody linear infinite; + animation-direction: alternate-reverse; +} + +.balloon.size { + width: 150px; + height: 60px; + bottom: 0; + top: 0; + right: 0; + left: 0; + margin: auto; +} + +.balloon::before { + content: ""; + position: absolute; + z-index: -1; + width: var(--tail); + height: var(--tail); +} + +.balloon.left-bottom::before { + --tail: 50px; + left: 10px; + bottom: calc(var(--tail) / -1.5); + border-radius: 0 0 10em 0; + box-shadow: inset calc(var(--tail) / -3) calc(var(--tail) / 4) 0 0 white; +} + +.disable { + display: none; +} + +.active { + display: flex; +} + +@media (max-width: 1100px) and (orientation: portrait) { + main { + margin-bottom: 0; + box-shadow: none; + } + + .parallax-efect { + display: none; + } + + .photos-grid { + padding-bottom: 10px; + } + + .theme-float-btn { + display: inline-block; + visibility: visible; + } +} + +@media (max-width: 576px) { + .profile { + margin-top: 60px; + } + + .profile .follow-btn { + width: 70px; + } + + .photos-grid { + gap: 5px; + } + + .photos-grid span { + font-size: 0.8em; + } + + .user-container { + gap: 10px; + } + + .profile img { + width: 80px; + height: 80px; + } + + .circle { + width: 160px; + height: 150px; + } + + .circle svg { + width: 110px; + } + + .profile .follow-btn { + padding: 0 10px; + margin-right: 0; + } + + .btns-container { + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + justify-content: flex-end; + gap: 10px; + } +} + +@keyframes balloon-cody { + from { + transform: translateY(0); + } + + to { + transform: translateY(-10px); + } +} + +@keyframes loader-animation { + from { + stroke-dasharray: 1; + } + to { + transform: rotate(180deg); + stroke-dasharray: 6; + } +} + +@keyframes follow-animation { + from { + background: white; + color: #166fe5; + border-color: #166fe5; + width: 80%; + } + to { + background: #1bbc9b; + border-color: #0b6855; + color: whitesmoke; + width: 100%; + } +} + +@keyframes unfollow-animation { + from { + background: #2eb82e; + color: whitesmoke; + width: 100%; + } + to { + background: white; + border-color: #166fe5; + color: #166fe5; + width: 80%; + } +} diff --git a/public/css/index.css b/public/css/index.css new file mode 100644 index 00000000..e32dfce4 --- /dev/null +++ b/public/css/index.css @@ -0,0 +1,721 @@ +@import url(./main.css); + +.banner { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + padding-bottom: calc(100vh - 200px); + background: var(--banner-gradient); + border-bottom: solid 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); + overflow: hidden; + z-index: 20; +} + +.sun { + display: block; + position: absolute; + top: 100px; + border-radius: 50%; + height: 80px; + width: 80px; + background: var(--sun-primary-color); + box-shadow: 0 0 10px var(--sun-primary-color), + 0 0 60px var(--sun-primary-color), 0 0 100px var(--sun-secondary-color), + inset 0 0 80px var(--sun-secondary-color); + z-index: 2; +} + +.cloud { + display: inline-block; + background: white; + width: 100px; + height: 100px; + border-radius: 50%; + position: relative; + top: 15px; + filter: blur(6px); + z-index: 6; + left: -50px; + animation: 15000ms cloud-animation linear infinite; + animation-direction: alternate-reverse; + opacity: 0.76; +} + +.cloud:before { + content: ""; + display: inline-block; + background: white; + width: 100px; + height: 100px; + filter: blur(3px); + position: relative; + border-radius: 50%; + top: -30px; + left: 60px; +} + +.cloud:after { + content: ""; + display: inline-block; + background: white; + width: 200px; + height: 100px; + filter: blur(3px); + position: relative; + border-radius: 50%; + top: -80px; + left: 70px; +} + +.cloud:first-child { + zoom: 1.2; +} + +img.island { + position: absolute; + z-index: 7; + filter: brightness(var(--brightness)); + max-height: 80vh; + width: 40vw; + bottom: 0; + right: 0; + transition: all 1s; +} + +.sea { + width: 100%; + height: 100px; + background: #023e8a; + position: absolute; + bottom: 0; + z-index: 5; + filter: brightness(var(--brightness)); + transition: all 1s; +} + +.banner > header { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 8; +} + +.banner > header > h2 { + color: rgba(255, 255, 2500, 0.8); +} + +.banner > header > p { + display: inline-block; + max-width: 768px; + margin-top: 20px; + text-align: center; + font-size: 1.3em; + color: #ebebeb; +} + +.separator { + margin-top: 100px; +} + +.margin-separator { + margin-top: 200px; +} + +.courses-card { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 50px; + margin-top: 50px; +} + +.courses-card div { + position: relative; + background-color: #21262d; + max-width: 220px; + border-radius: 5px; + padding: 20px; + display: inline-block; + box-shadow: 0px 8px 6px rgba(0, 0, 0, 0.3); +} + +.courses-card > div p { + margin: 20px 0; + font-size: 16px; + line-height: 1.5em; + text-align: center; + color: #ebebeb; +} + +.card-button { + width: 140px; + height: 42px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + left: 0; + right: 0; + margin: auto; + font-weight: 600; + border-radius: 20px; + background: radial-gradient( + ellipse farthest-corner at right bottom, + #f6e491 0%, + #be9f5f 2%, + #a98737 30%, + #a98737 40%, + transparent 80% + ), + radial-gradient( + ellipse farthest-corner at left top, + #ffffff 0%, + #ffffac 8%, + #e7c871 25%, + #9c7b2d 62.5%, + #ffffff 100% + ); + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); + transition: all 250ms; +} + +.card-button:hover { + background: radial-gradient( + ellipse farthest-corner at right bottom, + #f6e491 0%, + #be9f5f 2%, + #977931 30%, + #9b7b32 40%, + transparent 80% + ), + radial-gradient( + ellipse farthest-corner at left top, + #ffffff 0%, + #ffffac 8%, + #e7c871 25%, + #9c7b2d 62.5%, + #ffffff 100% + ); + transform: scale(1.1); +} + +.courses-card-img { + width: 50%; +} + +.learning-rute-list { + margin-top: 50px; +} + +.learning-rute-list li { + position: relative; + width: 150px; + display: inline-flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 20px; + text-align: center; +} + +.learning-rute-list > li > img { + width: 50px; +} + +.learning-rute-list > li > i { + display: flex; + justify-content: center; + align-items: center; + width: 16px; + height: 16px; + background-color: #badce6; + border-radius: 50%; + padding: 12px; + color: #000; + font-size: 13px; +} + +.learning-rute-list > li > i::after { + position: absolute; + content: ""; + width: 260px; + height: 3px; + background-color: #badce6; + z-index: -1; +} + +.learning-rute-list > li:first-child i::after { + width: 80px; + right: 0; +} + +.learning-rute-list > li:last-child i::after { + width: 80px; + left: 0; +} + +.video-card { + position: relative; + width: 60%; + padding-bottom: 35%; + border-radius: 5px; + margin: auto; + margin-top: 50px; +} + +.video-card > iframe { + position: absolute; + width: 100%; + height: 100%; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: 5px; +} + +.photos { + max-width: 768px; + margin: auto; + padding: 5em 2em; +} + +.photos img { + width: 100%; + height: 100%; +} + +.photos > a { + visibility: hidden; + display: inline-block; + position: relative; + width: 300px; + height: 200px; + border: solid 15px #804000; + background-color: #804000; + cursor: pointer; + transition: all 250ms; + box-shadow: 0 5px 9px rgba(0, 0, 0, 0.3); +} + +.photos > a:nth-child(1) { + transform: rotate(-20deg); +} + +.photos > a:nth-child(2) { + transform: rotate(20deg); +} + +.photos > a:nth-child(3) { + transform: rotate(5deg); +} + +.photos > a:hover { + z-index: 5; + transform: rotate(15deg) scale(1.2); + box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3); +} + +.photos > a:nth-child(1):hover { + z-index: 5; + transform: rotate(-15deg) scale(1.2); +} + +.corners { + position: absolute; + width: 40px; + height: 40px; + border: 1px solid #555; + background: #f4ca62; +} + +.corners::before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + background-color: rgb(233, 233, 233); + border: solid 1px rgb(141, 140, 140); + border-radius: 50%; +} + +.left-bottom { + left: -22px; + bottom: -22px; + border-radius: 10% 100% 10% 10%; + box-shadow: 0 5px 6px rgba(0, 0, 0, 0.3); +} + +.left-bottom.corners::before { + left: 10px; + bottom: 10px; +} + +.right-bottom.corners { + right: -22px; + bottom: -22px; + border-radius: 100% 10% 10% 10%; + box-shadow: 0 5px 6px rgba(0, 0, 0, 0.3); +} + +.right-bottom.corners::before { + right: 10px; + bottom: 10px; +} + +.right-top.corners { + right: -22px; + top: -22px; + border-radius: 10% 10% 10% 100%; +} + +.right-top.corners::before { + right: 10px; + top: 10px; +} + +.left-top.corners { + left: -22px; + top: -22px; + border-radius: 10% 10% 100% 10%; +} + +.left-top.corners::before { + left: 10px; + top: 10px; +} + +.desc-gallery { + display: flex; + flex-direction: column; + align-items: center; +} + +.gallery-btn { + display: block; + position: relative; + width: 140px; + height: 42px; + margin-top: 20px; + background-color: #db9825; + border-radius: 20px; + overflow: hidden; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); + transition: all 250ms; +} + +.gallery-btn:hover { + transform: scale(1.03); +} + +.gallery-btn > div { + position: relative; + width: 100%; + height: 100%; + border-radius: 20px; + background-color: #804000; +} + +.gallery-btn > div::after { + position: absolute; + content: ""; + width: 24px; + top: 0; + bottom: 0; + background-image: linear-gradient( + 90deg, + #db9825, + #db9825, + #ffcb32, + #ffcb32, + #db9825, + #db9825 + ); + filter: blur(2px); + transform: skew(20deg); + left: -28px; +} + +.gallery-btn > span { + position: absolute; + color: #ebebeb; + font-size: 1.1em; + display: flex; + align-items: center; + justify-content: center; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 2; +} + +.fade-shake { + animation: fade-shake-animation 1s forwards; +} + +.start-animation::after { + animation: btn-animation 1s; +} + +main > section:last-child { + margin-bottom: 30px; +} + +.rest-benefits-list { + margin-top: 40px; + display: flex; + justify-content: space-between; + gap: 30px; + flex-wrap: wrap; + list-style: none; +} + +.rest-benefits-list li { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + gap: 10px; + text-align: left; +} + +.rest-benefits-list > li > div { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +.rest-benefits-list span { + display: block; + width: 200px; + font-weight: 500; + color: var(--title-color); +} + +span.number { + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + background-color: red; + color: #ebebeb; + border-radius: 50%; + border: solid gainsboro 3px; + font-weight: bold; +} + +@media (max-width: 1024px) { + img.island { + width: 60vw; + } +} + +@media (max-width: 767px) { + .banner header { + bottom: 5%; + } + + .learning-rute-list > li i::after { + display: none; + } + + .learning-rute-list { + margin: 0; + } + + .learning-rute-list > li { + margin-top: 50px; + } +} + +@media (max-width: 576px) { + .sea { + height: 50px; + } + + .banner > header > p { + font-size: 1.2em; + margin: 5px; + } + + .banner > header > h2 { + margin-top: 50px; + font-size: 1.5em; + } + + .video-card { + width: 100%; + padding-bottom: 60%; + } + + .photos > a { + width: 170px; + height: 130px; + border-width: 8px; + } + + .corners { + width: 20px; + height: 20px; + } + + .corners::before { + width: 4px; + height: 4px; + } + + .left-bottom { + left: -12px; + bottom: -12px; + } + + .left-bottom.corners::before { + left: 4px; + bottom: 4px; + } + + .right-bottom.corners { + right: -12px; + bottom: -12px; + } + + .right-bottom.corners::before { + right: 4px; + bottom: 4px; + } + + .right-top.corners { + right: -12px; + top: -12px; + border-radius: 10% 10% 10% 100%; + } + + .right-top.corners::before { + right: 4px; + top: 4px; + } + + .left-top.corners { + left: -12px; + top: -12px; + border-radius: 10% 10% 100% 10%; + } + + .left-top.corners::before { + left: 4px; + top: 4px; + } + + .rest-benefits-list li { + justify-content: flex-start; + } +} + +@media (max-height: 500px) and (orientation: landscape) { + img.island { + display: none; + } + + .sea { + display: none; + } + + .banner > header { + bottom: 5%; + top: initial; + left: initial; + transform: none; + } + + .banner > header > p { + font-size: initial; + } + + .theme-switch { + display: inline-block; + } + + .theme-float-btn { + visibility: hidden; + } +} + +@media (max-height: 768px) and (orientation: landscape) { + img.island { + width: 35vw; + } +} + +@keyframes cloud-animation { + 0% { + transform: translate(-100px, 0); + } + 100% { + transform: translate(100%, 0); + } +} + +@keyframes fade-shake-animation { + 0%, + 80% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 15% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + + 30% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + 40% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + + 50% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + 60% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + + 70% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + + from { + visibility: hidden; + opacity: 0; + } + to { + visibility: visible; + opacity: 1; + } +} + +@keyframes btn-animation { + from { + left: -28px; + } + to { + left: 150px; + } +} diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 00000000..ab17940b --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,515 @@ +:root { + --primary-color: #ffffff; + --secondary-color: #ffffff; + --text-color: #ffffff; + --banner-gradient: linear-gradient(#badce6, #badce6 30%, #56c7ec 60%); + --sun-primary-color: orange; + --sun-secondary-color: yellow; + --brightness: 1; + + --title-color: rgba(0, 0, 0, 0.9); + --text-color: rgb(88, 88, 88); +} + +body { + background-color: var(--primary-color); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "IBM Plex Sans", sans-serif; + line-height: 1.5em; + color: rgb(36, 36, 36); +} + +ul { + list-style: none; +} + +html::-webkit-scrollbar { + width: 9px; +} + +html::-webkit-scrollbar-thumb { + background: gainsboro; + border-radius: 4px; +} + +html::-webkit-scrollbar-track { + background: transparent; + border-radius: 4px; +} + +main { + text-align: center; + margin: 0 auto; +} + +h1 { + font-size: 26px; +} + +h2 { + font-size: 2em; + margin-bottom: 10px; + color: var(--title-color); +} + +.justify-text p { + text-align: justify; +} + +.margin-text { + margin-top: 15px; +} + +p { + font-family: "Roboto", sans-serif; + font-size: 18px; + letter-spacing: 0.5px; + color: var(--text-color); +} + +div > i { + color: whitesmoke; +} + +span { + letter-spacing: 0.5px; + font-size: 16px; +} + +a { + text-decoration: none; + cursor: pointer; +} + +.margin-section { + max-width: 1100px; + margin: auto; + padding: 10px; +} + +.bar-fixed { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10; + background-color: var(--secondary-color); + border-bottom: solid 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); +} + +.bar-menu { + opacity: 0; + max-width: 1100px; + margin: auto; + display: flex; + background-color: var(--secondary-color); + justify-content: space-between; + align-items: center; + padding: 6px 10px; + transition: opacity 250ms; +} + +.logo-nav-bar { + display: flex; + align-items: center; + gap: 10px; + font-size: 0.8em; + cursor: pointer; +} + +.logo-nav-bar > img { + height: 40px; + width: 40px; +} + +header ul { + padding: 15px 0; + display: flex; + flex-wrap: wrap; + gap: 1em; +} + +header ul > li > a { + display: flex; + align-items: center; + font-size: 15px; + padding: 0 12px; + gap: 5px; +} + +header a > i { + color: var(--title-color); +} + +span.indicator-nav { + letter-spacing: 1.42px; + color: whitesmoke; + position: relative; +} + +header span.indicator-nav { + color: var(--title-color); +} + +span.indicator-nav:after { + content: ""; + height: 2px; + background: #ffa600; + left: 0; + right: 0; + bottom: -6px; + position: absolute; + opacity: 0; + transform-origin: left center; + transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; + transform: scaleX(0); +} + +ul > li > a:hover .indicator-nav::after { + opacity: 1; + transform: scaleX(1); +} + +.footer-container { + max-width: 1100px; + width: 100%; + display: grid; + grid-template-rows: auto; + grid-template-columns: 1fr 1fr 1fr; + justify-items: center; + align-items: center; + gap: 15px; + padding: 30px 15px 20px; + margin: auto; +} + +footer { + background-color: #532a00; + margin-top: 50px; +} + +footer ul { + display: flex; + flex-wrap: wrap; + gap: 25px; +} + +footer .left { + grid-column: 1; + grid-row: 1; +} + +footer .right { + grid-column: 3; + grid-row: 1; +} + +footer span { + color: whitesmoke; +} + +footer span.indicator-nav:after { + background: whitesmoke; +} + +footer .copy-right-span { + grid-column: 1/4; + grid-row: 3; + font-size: 12px; +} + +.logo-footer { + grid-column: 2; + grid-row: 1; + align-self: end; +} + +.logo-footer > img { + width: 100%; + max-width: 200px; +} + +footer .social-networks { + grid-column: 1/4; + grid-row: 2; + width: 100%; + display: flex; + align-items: flex-end; + justify-content: center; + flex-direction: row; + flex-wrap: nowrap; + gap: 10px; + background-color: transparent; + border-top: solid 1px rgba(255, 255, 255, 0.6); +} + +i.footer-icons { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + color: whitesmoke; + font-size: 1em; + border: solid 1px whitesmoke; + border-radius: 50%; + margin: 40px 0 20px; +} + +.footer-icons:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.theme-switch-wrapper { + display: flex; + align-items: center; + position: absolute; + top: 15px; + right: 15px; +} + +.theme-switch { + display: inline-block; + height: 34px; + position: relative; + width: 60px; +} + +.theme-switch input, +.theme-btn input { + display: none; + appearance: none; + outline: none; +} + +.slider { + background-color: #fff; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: 0.4s; +} + +.slider:before { + background-color: #ccc; + display: flex; + align-items: center; + justify-content: center; + bottom: 4px; + content: "\f185"; + height: 26px; + left: 4px; + position: absolute; + transition: 0.4s; + width: 26px; +} + +.theme-switch input:checked + .slider { + background-color: #66bb6a; +} + +.theme-switch input:checked + .slider:before { + content: "\f186"; + background-color: rgb(10, 10, 10); + color: yellow; + transform: translateX(26px) rotate(360deg); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +.theme-float-btn { + display: none; + visibility: hidden; + position: fixed; + right: 15px; + bottom: 30px; + z-index: 5; +} + +div.float-btn { + width: 52px; + height: 52px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + background-color: slateblue; + border: solid 2px gainsboro; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + color: whitesmoke; + cursor: pointer; + transition: 0.4s; +} + +.float-btn:before { + content: "\f185"; + font-size: 24px; + transition: 0.4s; +} + +.theme-float-btn input:checked + .float-btn:before { + content: "\f186"; +} + +.page-loader { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: var(--primary-color); + z-index: 100; +} + +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} + +.lds-ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background-color: red; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} + +.lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} + +.lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} + +.lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} + +.lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} + +.set-visibility { + display: inline-block !important; +} + +.set-opacity { + opacity: 1 !important; +} + +@media (max-width: 768px) { + footer .right, + footer .left { + width: 120px; + display: flex; + flex-direction: column; + grid-column: 3; + gap: 5px; + } + + footer .left { + grid-row: 1; + } + + footer .right { + grid-row: 2; + } + + .logo-footer { + grid-column: 1/3; + grid-row: 1; + } + + footer .social-networks { + grid-column: 1/3; + grid-row: 2; + } + + footer .copy-right-span { + grid-column: 1/3; + grid-row: 3; + margin-top: 25px; + } + + .theme-switch { + display: none; + } + + .theme-float-btn { + visibility: visible; + } +} + +@media (max-width: 576px) { + header span.indicator-nav { + display: none; + } + + header .fas { + font-size: 24px; + } + + ul a { + font-size: 18px; + } + + footer .copy-right-span { + grid-column: 1/4; + font-size: 10px; + } +} + +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} + +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} + +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} diff --git a/public/css/style.css b/public/css/style.css deleted file mode 100644 index 8beed2d4..00000000 --- a/public/css/style.css +++ /dev/null @@ -1,38 +0,0 @@ -nav{ - background-color: aliceblue; - padding: 15px; - display: flex; - gap:1em; -} - -main{ - text-align: center; - max-width: 960px; - margin:0 auto; -} - -section{ - margin-top: 3rem; -} - -.cursos div{ - background-color: black; - color: white; - max-width: 200px; - display: inline-block; - box-shadow: 5px 5px 10px black; -} -.fotos img{ - max-width: 450px; - display: inline-block; -} -ul li{ - text-align: left; -} -ul li::marker { - content: "🚀"; -} - -ol li{ - text-align: left; -} \ No newline at end of file diff --git a/public/fotos.html b/public/fotos.html deleted file mode 100644 index 643ad2a7..00000000 --- a/public/fotos.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - Mis vacaciones - - - - -
-
- -

Galería completa de mis vacaciones

-
-
- Cody en la playa - Cody acampando - Cody en una alberca - Cody en una alberca - Cody en una alberca - Cody en una alberca - -
- -
- - - \ No newline at end of file diff --git a/public/gallery.html b/public/gallery.html new file mode 100644 index 00000000..c3462ffe --- /dev/null +++ b/public/gallery.html @@ -0,0 +1,175 @@ + + + + + + + Galeria vacaciones + + + + + + + + + + + + + + + +
+
+ +

Galería

+
+
+ +
+
+
+
+
+ cody + + + + + + + + + +
+
+

@CODY

+

Me encanta la programación🧡

+

Aspirante a DEV💻

+
+
+
+ + +
+
+ +
+ +
+
+ Cody en la playa + Paseando ⛵ +
+
+ Cody acampando + En alguna parte del mundo ✨ +
+
+ Cody en una alberca + Relax en la alberca 🤿 +
+
+ Cody en la playa + Descansando 🥥 +
+
+ Cody en un callejon + Llegando a mi destino 🌊 +
+
+ Cody en el aeropuerto + Vámonos 😎 +
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+ cody ciesta en la alberca +

Esas fueron mis vacaciones!

+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + + + diff --git a/public/images/badges-AJAX.png b/public/images/badges-AJAX.png new file mode 100644 index 00000000..2ef8f0d3 Binary files /dev/null and b/public/images/badges-AJAX.png differ diff --git a/public/images/badges-AJAX.svg b/public/images/badges-AJAX.svg new file mode 100644 index 00000000..8d665ef4 --- /dev/null +++ b/public/images/badges-AJAX.svg @@ -0,0 +1,203 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/images/badges-JavaScript.png b/public/images/badges-JavaScript.png new file mode 100644 index 00000000..c24923a7 Binary files /dev/null and b/public/images/badges-JavaScript.png differ diff --git a/public/images/badges-flexbox.png b/public/images/badges-flexbox.png new file mode 100644 index 00000000..9a622148 Binary files /dev/null and b/public/images/badges-flexbox.png differ diff --git a/public/images/bagdes-html.png b/public/images/bagdes-html.png new file mode 100644 index 00000000..ee6d15d9 Binary files /dev/null and b/public/images/bagdes-html.png differ diff --git a/public/images/ball.png b/public/images/ball.png new file mode 100644 index 00000000..07e20279 Binary files /dev/null and b/public/images/ball.png differ diff --git a/public/images/cody-profile.jpg b/public/images/cody-profile.jpg new file mode 100644 index 00000000..1b402260 Binary files /dev/null and b/public/images/cody-profile.jpg differ diff --git a/public/images/cody.png b/public/images/cody.png new file mode 100644 index 00000000..24b77f8b Binary files /dev/null and b/public/images/cody.png differ diff --git a/public/images/frontend-2018.png b/public/images/frontend-2018.png new file mode 100644 index 00000000..91a2688a Binary files /dev/null and b/public/images/frontend-2018.png differ diff --git a/public/images/git-hub.png b/public/images/git-hub.png new file mode 100644 index 00000000..eb703d14 Binary files /dev/null and b/public/images/git-hub.png differ diff --git a/public/images/island.png b/public/images/island.png new file mode 100644 index 00000000..e8834e05 Binary files /dev/null and b/public/images/island.png differ diff --git a/public/images/logo-cf.svg b/public/images/logo-cf.svg new file mode 100644 index 00000000..2a1c7a9b --- /dev/null +++ b/public/images/logo-cf.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/others.png b/public/images/others.png new file mode 100644 index 00000000..429a8779 Binary files /dev/null and b/public/images/others.png differ diff --git a/public/images/pagina-2019.png b/public/images/pagina-2019.png new file mode 100644 index 00000000..5cecdeb1 Binary files /dev/null and b/public/images/pagina-2019.png differ diff --git a/public/images/sunny.png b/public/images/sunny.png new file mode 100644 index 00000000..ecf5fe75 Binary files /dev/null and b/public/images/sunny.png differ diff --git a/public/images/youtube.png b/public/images/youtube.png new file mode 100644 index 00000000..38b288e4 Binary files /dev/null and b/public/images/youtube.png differ diff --git a/public/index.html b/public/index.html index 40da9c9d..5d529c9d 100644 --- a/public/index.html +++ b/public/index.html @@ -1,100 +1,383 @@ - - - - - - Mis vacaciones - - - -
-
- -

Estas son mis Vacaciones

-

Soy Cody, un aspirante a Dev, en 2019, organicé un viaje para desestresarme del código, y en esta página quiero compartirlo contigo.

+ + + + + + + Mis vacaciones + + + + + + + + + + +
+
+
+ cody vacacionando +

Mis vacaciones

+
+ +
-
-
-

Mis vacaciones Frontend

-
-

Durante el verano de 2019, decidí comenzar a aprender desarrollo frontend, por lo que durante mi viaje, estuve aprendiendo HTML, CSS, y JavaScript

-

Cada tarde, después de conocer nuevos lugares en mis vacaciones, practicaba mis habilidades en tecnologías frontend, construyendo esta página

-

Estos son los cursos que estuve tomando

-
-
-

Curso profesional de Desarrollo Web

+
+ + +
+ pelota +
+ +
+
+

Mis vacaciones Frontend

+
+

+ Durante el verano de 2019, decidí comenzar a aprender desarrollo + frontend, por lo que durante mi viaje, estuve aprendiendo HTML, CSS, y + JavaScript. +

+

+ Cada tarde, después de conocer nuevos lugares en mis vacaciones, + practicaba mis habilidades en tecnologías frontend, construyendo esta + página. +

+

Estos son los cursos que estuve tomando

+
+
+ Curso profesional de Desarrollo Web +

Curso profesional de Desarrollo Web

+ Alistarme +
+
+ Curso para crear mi primera página web +

Curso para crear mi primera página web

+ Alistarme +
+
+ +
+ pelota +
+ +
+
+

Ruta de aprendizaje 2021

+

También me propuse aprender nuevas tecnologías durante 2021

+
+
    +
  • + HTML + +

    HTML semántico

    +
    • +
  • + Flexbox y Grid + +

    Flexbox, y Grid

    +
    • +
  • + JavaScript y animaciones + +

    Animaciones con CSS y JavaScript

    +
    • +
  • + AJAX + +

    AJAX

    +
    • +
  • + otros + +

    Entre otros

    +
    • +
+
+ +
+ pelota
-
- -
-
-

Ruta de aprendizaje 2021

-

También me propuse aprender nuevas tecnologías durante 2021

-
-
    -
  • Flexbox, y Grid
    • -
  • Animaciones con CSS y JavaScript
    • -
  • AJAX
    • -
  • HTML semántico
    • -
  • Entre otros
    • -
-
-
-
-

Colabora en mi página

-
-

- Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, por lo que decidí subir mi código a GitHub -

-

- Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request. -

-

- Si nunca antes has colaborado con un repositorio, en Código Facilito hay un tutorial que lo explica - Ir al tutorial - -

-
-
-
-

Aquí te comparto algunas fotos de mis vacaciones

-

¡Bien! Sé que estás aquí por mis vacaciones, aquí te comparto algunas fotos que tomé:

-
-
- Cody en la playa - Cody acampando - Cody en una alberca + +
+
+

Colabora en mi página

+

- Puedes ver más, en la galería de fotos de mi página - Ir a la galería + Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, + por lo que decidí subir mi código a GitHub. Puedes ayudarme a mejorar + mi página, haciendo un fork de mi página, y enviando un pull request. +

+

+ Si nunca antes has colaborado con un repositorio, en Código Facilito + hay un tutorial que lo explica!

+
+ +
+
+ +
+ pelota
-
- -
-
-

La importancia de las vacaciones

-

Aprender a programar y escribir código, puede ser estresante, por eso es muy importante que periódicamente nos desconectemos y descansemos apropiadamente

-

Durante mis vacaciones aprendí que existen distintos beneficios de descansar:

-
    -
  1. Mejora la salud mental
    2. -
  2. Incrementa la motivación
    3. -
  3. Reduce el burnout
    4. -
  4. Mejora tu productividad y creatividad
    5. + +
    +
    +

    Aquí te comparto algunas fotos de mis vacaciones

    +

    + ¡Bien! Sé que estás aquí por mis vacaciones, aquí te comparto + algunas fotos que tomé +

    +
    +
    + + Cody en la playa +
    +
    +
    +
    +     + + Cody acampando +
    +
    +
    +
    +     + + Cody en una alberca +
    +
    +
    +
    +     +
    +
    +

    Puedes ver más, en la galería de fotos de mi página

    + + Galeria +
    +     +
    +
    + +
    + pelota +
    + +
    +
    +

    La importancia de las vacaciones

    +

    + Aprender a programar y escribir código, puede ser estresante, por + eso es muy importante que periódicamente nos desconectemos y + descansemos apropiadamente. +

    +

    + Durante mis vacaciones aprendí que existen distintos beneficios de + descansar: +

    +
    +
      +
    1. +
      + 1 + Mejora la salud mental +
      +
      2. +
    2. +
      + 2 + Incrementa la motivación +
      +
      3. +
    3. +
      + 3 + Reduce el burnout +
      +
      4. +
    4. +
      + 4 + Mejora tu productividad y creatividad +
      +
    -
- -
- -
- - \ No newline at end of file + + + + + +
+ +
+ +
+
+
+
+
+
+
+
+ + + + diff --git a/public/js/gallery.js b/public/js/gallery.js new file mode 100644 index 00000000..5d7d73c7 --- /dev/null +++ b/public/js/gallery.js @@ -0,0 +1,225 @@ +const photo_viewer = document.querySelector(".photo-viewer"); +const close_btn = document.querySelector(".close-btn"); +const right_btn = document.querySelector(".right-btn"); +const left_btn = document.querySelector(".left-btn"); +const photos_container = document.querySelectorAll(".photos-grid div"); +const photos = document.querySelectorAll(".photos-grid img"); +const thumbnail = document.querySelector(".thumbnail"); +const photo = document.querySelector("#photo"); +const follow_btn = document.querySelector(".follow-btn"); + +const circle = document.querySelector(".circle svg"); +const post_counter = document.querySelector("#post_counter"); + +const bar_menu = document.querySelector(".bar-fixed"); +const photos_grid = document.querySelector(".photos-grid"); +const parallax = document.querySelector(".parallax-efect"); +const main_container = document.querySelector("main"); +const page_loader = document.querySelector(".page-loader"); +const togglefloat_btn = document.querySelector( + '.theme-float-btn input[type="checkbox"]' +); + +const MIN = 0; +const MAX = 1; +const clamp = (num, min, max) => Math.min(Math.max(num, min), max); + +init(); + +window.addEventListener( + "load", + () => { + var result = getQueryVariable("photoId"); + + setTimeout(() => { + page_loader.style.display = "none"; + }, 1000); + + post_counter.innerHTML = photos.length; + circle.classList.add("loader-animation"); + + if (isNaN(result) || result == -1 || result >= 6) { + return; + } + + openPhotoViewer(result); + }, + false +); + +window.addEventListener( + "scroll", + function (e) { + const scrollHeight = main_container.clientHeight; + const hiddeNav = scrollHeight - bar_menu.clientHeight / 2; + var scrollTop = document.documentElement.scrollTop; + var opacity = scrollTop / scrollHeight; + + if (opacity >= 0.5) { + parallax.style.opacity = clamp(opacity, MIN, MAX); + } else { + parallax.style.opacity = 0; + } + + if (scrollTop >= hiddeNav) { + bar_menu.style.visibility = "hidden"; + } else { + bar_menu.style.visibility = "visible"; + } + }, + false +); + +togglefloat_btn.addEventListener( + "change", + function (e) { + changeMode(e.target.checked); + }, + false +); + +follow_btn.addEventListener( + "change", + function (e) { + localStorage.setItem("following", e.target.checked); + }, + false +); + +circle.addEventListener( + "mouseover", + function (e) { + circle.classList.add("loader-animation"); + }, + false +); + +circle.addEventListener( + "animationend", + function (e) { + if (e.type === "animationend") { + circle.classList.remove("loader-animation"); + } + }, + false +); + +photos_container.forEach((container) => { + container.addEventListener( + "click", + () => openPhotoViewer(container.id), + false + ); +}); + +left_btn.addEventListener( + "click", + function (e) { + var newphotoId = parseInt(photo.id, 10) - 1; + + setPhoto(newphotoId); + + setButtons(newphotoId); + }, + false +); + +right_btn.addEventListener( + "click", + function (e) { + var newphotoId = parseInt(photo.id, 10) + 1; + + setPhoto(newphotoId); + + setButtons(newphotoId); + }, + false +); + +close_btn.addEventListener( + "click", + function (e) { + photo_viewer.classList.remove("active"); + right_btn.classList.remove("disable"); + left_btn.classList.remove("disable"); + circle.classList.add("loader-animation"); + }, + false +); + +function getQueryVariable(variable) { + var query = window.location.search.substring(1); + var vars = query.split("&"); + + for (var i = 0; i < vars.length; i++) { + var pair = vars[i].split("="); + if (pair[0] == variable) { + return parseInt(pair[1]); + } + } + + return -1; +} + +function openPhotoViewer(photoId) { + setPhoto(photoId); + + setButtons(photoId); + + photo_viewer.classList.add("active"); +} + +function setPhoto(photoId) { + photo.src = photos[photoId].currentSrc; + thumbnail.src = photos[photoId].currentSrc; + photo.id = photoId; +} + +function setButtons(photoId) { + if (photoId == 0) { + left_btn.classList.add("disable"); + } else if (photoId >= photos.length - 1) { + right_btn.classList.add("disable"); + } else { + left_btn.classList.remove("disable"); + right_btn.classList.remove("disable"); + } +} + +function changeMode(isChecked = false) { + document.body.style.transition = "all 1s"; + if (isChecked) { + document.documentElement.style.setProperty("--primary-color", "#11091e"); + document.documentElement.style.setProperty("--secondary-color", "#21262D"); + document.documentElement.style.setProperty("--text-color", "whitesmoke"); + document.documentElement.style.setProperty("--title-color", "whitesmoke"); + localStorage.setItem("theme", "dark"); + } else { + document.documentElement.style.setProperty("--primary-color", "#fff"); + document.documentElement.style.setProperty("--secondary-color", "#fff"); + document.documentElement.style.setProperty( + "--text-color", + "rgb(88, 88, 88,)" + ); + document.documentElement.style.setProperty( + "--title-color", + "rgba(0, 0, 0, 0.9)" + ); + localStorage.setItem("theme", "light"); + } + + togglefloat_btn.checked = isChecked; +} + +function init() { + const currentTheme = localStorage.getItem("theme"); + const isFollowing = localStorage.getItem("following"); + + if (currentTheme) { + changeMode(currentTheme === "dark"); + } + + if (isFollowing) { + follow_btn.checked = isFollowing === "true"; + } +} diff --git a/public/js/index.js b/public/js/index.js new file mode 100644 index 00000000..b83fc071 --- /dev/null +++ b/public/js/index.js @@ -0,0 +1,200 @@ +const banner = document.querySelector(".banner"); +const bar_container = document.querySelector(".bar-fixed"); +const bar_menu = document.querySelector(".bar-menu"); +const galery_btn = document.querySelector(".gallery-btn"); +const bright_btn = document.querySelector(".bright"); +const photos_container = document.querySelector(".photos"); +const photos = document.querySelectorAll(".photos > a"); +const title = document.querySelector("#title"); +const logo = document.querySelector("#goTop"); +const logo_icon = document.querySelector(".logo-nav-bar > img"); +const footer = document.querySelector("footer"); +const page_loader = document.querySelector(".page-loader"); +const float_btn = document.querySelector(".theme-float-btn"); +const toggleSwitch = document.querySelector( + '.theme-switch input[type="checkbox"]' +); +const togglefloat_btn = document.querySelector( + '.theme-float-btn input[type="checkbox"]' +); + +const MIN = 0; +const MAX = 1; +const screenHeight = window.screen.height; +const scrollHeight = document.documentElement.scrollHeight - screenHeight; +const clamp = (num, min, max) => Math.min(Math.max(num, min), max); + +const currentTheme = localStorage.getItem("theme"); + +if (currentTheme) { + changeMode(currentTheme === "dark"); +} + +window.addEventListener( + "load", + function () { + let isDarkTheme = currentTheme === "dark"; + + setTimeout(() => { + page_loader.style.display = "none"; + }, 1000); + + toggleSwitch.checked = isDarkTheme; + togglefloat_btn.checked = isDarkTheme; + }, + false +); + +window.addEventListener( + "scroll", + function (e) { + var moveFloatBtn = -(footer.getBoundingClientRect().top - screenHeight); + var scrollTop = document.documentElement.scrollTop; + var opacity = 1 - scrollTop / screenHeight; + var scrollProgress = + ((scrollTop - screenHeight) / (scrollHeight - screenHeight)) * 100; + + banner.style.opacity = clamp(opacity, MIN, MAX); + + if (scrollTop >= banner.clientHeight) { + bar_container.classList.add("set-visibility"); + float_btn.classList.add("set-visibility"); + bar_menu.classList.add("set-opacity"); + } else { + bar_container.classList.remove("set-visibility"); + float_btn.classList.remove("set-visibility"); + bar_menu.classList.remove("set-opacity"); + } + + title.style.color = "hsl(39, " + scrollProgress + "%, 50%)"; + logo_icon.style.transform = "rotate(" + scrollTop + "deg )"; + + if (isOver(bright_btn, 1, 0.8)) bright_btn.classList.add("start-animation"); + + animate(); + + if (isOver(photos_container, 0.1, 1)) { + photos.forEach((photo) => { + photo.classList.remove("fade-shake"); + }); + } + + if (moveFloatBtn > 0) { + float_btn.style.bottom = moveFloatBtn + 20 + "px"; + } else { + float_btn.style.bottom = 20 + "px"; + } + }, + false +); + +toggleSwitch.addEventListener("change", switchTheme, false); +togglefloat_btn.addEventListener("change", switchTheme, false); + +function isOver(object, objSlide, Y) { + var objectPosition = object.getBoundingClientRect().top; + var scroll = screenHeight * Y - objectPosition; + const end = object.clientHeight * objSlide; + + return scroll >= 0 && scroll <= end ? true : false; +} + +function animate(index = 0) { + if (index == 3) return; + + if (isOver(photos[2], 10, 0.5)) { + setTimeout(() => { + photos[2].classList.add("fade-shake"); + }, 200); + } + + if (isOver(photos[index], 10, 0.5)) { + setTimeout(() => { + photos[index].classList.add("fade-shake"); + animate(++index); + }, 500); + } +} + +galery_btn.addEventListener( + "mouseover", + function (e) { + bright_btn.classList.add("start-animation"); + }, + false +); + +bright_btn.addEventListener( + "animationend", + function (e) { + if (e.type === "animationend") { + bright_btn.classList.remove("start-animation"); + } + }, + false +); + +logo.addEventListener( + "click", + function (e) { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }, + false +); + +function changeMode(isChecked = false) { + document.body.style.transition = "all 1s"; + if (isChecked) { + document.documentElement.style.setProperty("--primary-color", "#11091e"); + document.documentElement.style.setProperty("--secondary-color", "#21262D"); + document.documentElement.style.setProperty( + "--banner-gradient", + "linear-gradient(#264a69, #264a69 30%, #050928 60%)" + ); + document.documentElement.style.setProperty( + "--sun-primary-color", + "#FDF6EC" + ); + document.documentElement.style.setProperty( + "--sun-secondary-color", + "#D7DBD7" + ); + + document.documentElement.style.setProperty("--brightness", "0.6"); + document.documentElement.style.setProperty("--text-color", "whitesmoke"); + document.documentElement.style.setProperty("--title-color", "whitesmoke"); + localStorage.setItem("theme", "dark"); + } else { + document.documentElement.style.setProperty("--primary-color", "#fff"); + document.documentElement.style.setProperty("--secondary-color", "#fff"); + document.documentElement.style.setProperty( + "--banner-gradient", + "linear-gradient(#badce6, #badce6 30%, #56c7ec 60%)" + ); + document.documentElement.style.setProperty("--sun-primary-color", "orange"); + document.documentElement.style.setProperty( + "--sun-secondary-color", + "yellow" + ); + document.documentElement.style.setProperty("--brightness", "1"); + document.documentElement.style.setProperty( + "--text-color", + "rgb(88, 88, 88,)" + ); + document.documentElement.style.setProperty( + "--title-color", + "rgba(0, 0, 0, 0.9)" + ); + localStorage.setItem("theme", "light"); + } + + toggleSwitch.checked = isChecked; + togglefloat_btn.checked = isChecked; +} + +function switchTheme(e) { + changeMode(e.target.checked); +}