diff --git a/dist/assets/img/Border.png b/dist/assets/img/Border.png new file mode 100644 index 000000000..bea3871cc Binary files /dev/null and b/dist/assets/img/Border.png differ diff --git a/dist/assets/img/IMG_7011.jpg b/dist/assets/img/IMG_7011.jpg new file mode 100644 index 000000000..11f0e174e Binary files /dev/null and b/dist/assets/img/IMG_7011.jpg differ diff --git a/dist/assets/img/IMG_7012.jpg b/dist/assets/img/IMG_7012.jpg new file mode 100644 index 000000000..eec425258 Binary files /dev/null and b/dist/assets/img/IMG_7012.jpg differ diff --git a/dist/assets/img/IMG_7012.jpg.jfif b/dist/assets/img/IMG_7012.jpg.jfif new file mode 100644 index 000000000..ab9572db5 Binary files /dev/null and b/dist/assets/img/IMG_7012.jpg.jfif differ diff --git a/dist/css/styles.css b/dist/css/styles.css index b519889a7..991fad74b 100644 --- a/dist/css/styles.css +++ b/dist/css/styles.css @@ -11,7 +11,7 @@ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ :root { - --bs-blue: #0d6efd; + --bs-blue: #00c0ff; --bs-indigo: #6610f2; --bs-purple: #7464a1; --bs-pink: #d63384; @@ -55,7 +55,7 @@ --bs-white-rgb: 255, 255, 255; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; - --bs-body-rgb: 33, 37, 41; + --bs-body-rgb: #00c0ff; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); @@ -90,6 +90,7 @@ body { background-color: var(--bs-body-bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background-color: #07c1fa; } hr { @@ -602,8 +603,30 @@ progress { } .img-fluid { - max-width: 100%; + max-width: 55%; height: auto; + +} +img:hover { + /* Start the shake animation and make the animation last for 0.5 seconds */ + animation: shake 0.5s; + + /* When the animation is finished, start again */ + /* animation-iteration-count: infinite; */ +} + +@keyframes shake { + 0% { transform: translate(1px, 1px) rotate(0deg); } + 10% { transform: translate(-1px, -2px) rotate(-1deg); } + 20% { transform: translate(-3px, 0px) rotate(1deg); } + 30% { transform: translate(3px, 2px) rotate(0deg); } + 40% { transform: translate(1px, -1px) rotate(1deg); } + 50% { transform: translate(-1px, 2px) rotate(-1deg); } + 60% { transform: translate(-3px, 1px) rotate(0deg); } + 70% { transform: translate(3px, 1px) rotate(-1deg); } + 80% { transform: translate(-1px, -1px) rotate(1deg); } + 90% { transform: translate(1px, 2px) rotate(0deg); } + 100% { transform: translate(1px, -2px) rotate(-1deg); } } .img-thumbnail { @@ -1392,7 +1415,9 @@ progress { .col-lg-6 { flex: 0 0 auto; - width: 50%; + width: 30%; + display: flex; + justify-content: center; } .col-lg-7 { @@ -7407,6 +7432,10 @@ textarea.form-control-lg { .mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; + margin-top: 1rem !important; + font-size: calc(1.600rem + 1.5vw) !important; + color: rgb(255, 255, 255) + } .mx-3 { @@ -7897,6 +7926,8 @@ textarea.form-control-lg { .text-info { --bs-text-opacity: 1; color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important; + + margin-bottom: 1rem !important; } .text-warning { @@ -8002,7 +8033,7 @@ textarea.form-control-lg { .bg-light { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; + /* background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; */ } .bg-dark { @@ -8012,7 +8043,7 @@ textarea.form-control-lg { .bg-black { --bs-bg-opacity: 1; - background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; + /* background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; */ } .bg-white { @@ -11546,14 +11577,14 @@ body { .masthead { position: relative; width: 100%; - height: auto; + height: fit-content; min-height: 35rem; padding: 15rem 0; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("../assets/img/bg-masthead.jpg"); - background-position: center; + background: url("../assets/img/IMG_7012.jpg"); + background-position: bottom; background-repeat: no-repeat; background-attachment: scroll; - background-size: cover; + background-size: 100%; } .masthead h1, .masthead .h1 { font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -11593,7 +11624,7 @@ body { .about-section { padding-top: 10rem; - background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 75%, rgba(0, 0, 0, 0.8) 100%); + background: rgb(145, 88, 9) } .about-section p { margin-bottom: 5rem; @@ -11608,7 +11639,7 @@ body { @media (min-width: 992px) { .projects-section .featured-text { padding: 0 0 0 2rem; - border-left: 0.5rem solid #64a19d; + border-left: 0.5rem solid #915809; } } .projects-section .project-text { @@ -11628,7 +11659,7 @@ body { .signup-section { padding: 10rem 0; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 75%, #000 100%), url("../assets/img/bg-signup.jpg"); + background: rgb(145, 88, 9); background-position: center; background-repeat: no-repeat; background-attachment: scroll; diff --git a/dist/index.html b/dist/index.html index 24c1a6c73..7dfdb2a47 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,7 +6,7 @@ Grayscale - Start Bootstrap Theme - + @@ -19,7 +19,7 @@