From f02e07700f2b1cc032ce46f3301115097d831b92 Mon Sep 17 00:00:00 2001 From: DevAG Date: Thu, 13 Apr 2023 14:13:22 -0700 Subject: [PATCH] Added scroll to anchor tag, made site responsive, and completed MySkills section --- css/index.css | 191 +++++++++++++++++++++++++++++++---- css/index.css.map | 2 +- css/partials/__aboutme.scss | 3 +- css/partials/__contact.scss | 16 ++- css/partials/__media.scss | 140 ++++++++++++++++++++++++- css/partials/__myskills.scss | 20 +++- css/partials/__nav.scss | 5 +- css/partials/__port.scss | 9 +- index.html | 74 ++++++++------ js/ancore__scroll.js | 16 +++ 10 files changed, 408 insertions(+), 68 deletions(-) create mode 100644 js/ancore__scroll.js diff --git a/css/index.css b/css/index.css index 2834dbd..6c6aeb3 100644 --- a/css/index.css +++ b/css/index.css @@ -82,7 +82,7 @@ nav ul { gap: 2rem; } -a { +.ancore__menu { color: #171717; font-size: 1.5rem; text-decoration: none; @@ -91,7 +91,7 @@ a { transition: 1s; } -a:hover { +.ancore__menu:hover { cursor: pointer; color: rgb(0, 54, 54); } @@ -126,8 +126,7 @@ a:hover { display: flex; flex-direction: column; align-items: flex-end; - margin-right: 15rem; - margin-left: 10rem; + margin: 10rem; } .about__info h2 { @@ -163,6 +162,7 @@ a:hover { .portafolio__flex a { opacity: 0.8; + transition: 1s; } .portafolio__flex a:hover { @@ -175,15 +175,6 @@ a:hover { border-radius: 1rem; } -.port__wave { - display: flex; - flex-wrap: wrap; - bottom: 0; - left: 0; - width: 100%; - height: 125px; -} - .skills__container { background-color: #f3f4f5; padding-top: 10rem; @@ -210,10 +201,27 @@ a:hover { font-size: 4.2rem; margin: 1rem; text-shadow: 2px 5px 20px rgba(144, 144, 144, 0.3); + transition: 0.5s; + padding: 1rem; + border-radius: 0.5rem; } -.skills__info I:hover { - transform: scale(125%); +.skills__info i:hover { + transform: scale(100%); + color: white; + background-color: #3A9ACA; + border-radius: 0.5rem; + padding: 1rem; + box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; +} + +.port__wave { + display: flex; + flex-wrap: wrap; + bottom: 0; + left: 0; + width: 100%; + height: 125px; } .contact__container { @@ -226,8 +234,20 @@ a:hover { gap: 5rem; } -.contact__info img { - width: 60%; +.contact__icons { + display: flex; + flex-direction: row; + margin-top: 1rem; + gap: 2rem; +} + +.contact__icons a { + font-size: 3rem; + color: white; +} + +.contact__icons a:hover { + cursor: pointer; } .contact__info { @@ -300,4 +320,141 @@ a:hover { .contact__form button:hover { background-color: #246180; +} + +@media only screen and (max-width: 768px) { + nav { + height: auto; + padding-top: 2rem; + padding-bottom: 3rem; + } + .nav__img { + width: 55%; + margin: 1rem 0; + } + nav h1 { + font-size: 3rem; + } + nav p { + font-size: 1rem; + } + nav ul { + flex-direction: column; + margin-top: 1rem; + gap: 1rem; + } + a { + font-size: 2rem; + } + .nav__wave { + position: relative; + top: 3.5rem; + bottom: 0rem; + left: 0; + width: 100%; + height: 50px; + } + .about__container { + flex-direction: column; + padding: 10rem 0; + height: auto; + } + .about__svg { + width: 50%; + margin: 0; + } + .about__info { + margin: 3rem 0; + align-items: center; + text-align: center; + } + .about__info h2 { + font-size: 2rem; + margin: 1.5rem 0; + } + .about__info p { + font-size: 1.2rem; + margin: 1.5rem 0; + } + .skills__container { + background-color: #f3f4f5; + padding-top: 10rem; + display: flex; + flex-direction: column; + justify-content: center; + flex-wrap: wrap; + align-items: center; + align-content: center; + gap: 3rem; + } + .skills__container h2 { + font-family: "Poppins", sans-serif; + color: black; + font-size: 2.3rem; + } + .skills__info { + padding-bottom: 10rem; + } + .skills__info i { + color: #3A9ACA; + display: flex; + flex-direction: column; + align-items: center; + font-size: 4.2rem; + margin: 1rem; + text-shadow: 2px 5px 20px rgba(144, 144, 144, 0.3); + transition: 0.5s; + padding: 1rem; + } + .skills__info i:hover { + transform: scale(100%); + color: white; + background-color: #3A9ACA; + border-radius: 0.5rem; + padding: 1rem; + box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; + } +} +@media only screen and (min-width: 768px) and (max-width: 1500px) { + .about__container { + padding: 15rem 0; + } + .about__svg { + width: 50%; + margin: 0; + } + .about__info { + margin: 0; + } + .about__info h2 { + font-size: 2rem; + margin: 1.5rem 0; + } + .about__info p { + font-size: 1.2rem; + margin: 1.5rem 0; + } +} +@media only screen and (min-width: 1500px) { + .about__container { + height: 50vh; + padding: 27rem 0; + } + .about__svg { + width: 70%; + margin-left: 15rem; + margin-right: 0; + } + .about__info { + margin-right: 15rem; + margin-left: 10rem; + } + .about__info h2 { + font-size: 2.3rem; + margin: 1rem; + } + .about__info p { + font-size: 1.5rem; + margin: 1rem 0; + } }/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/css/index.css.map b/css/index.css.map index 4f46556..5e7c411 100644 --- a/css/index.css.map +++ b/css/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["index.scss","partials/__nav.scss","partials/__reset.scss","index.css","partials/__aboutme.scss","partials/__port.scss","partials/__myskills.scss","partials/__contact.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file +{"version":3,"sources":["index.scss","partials/__nav.scss","partials/__reset.scss","index.css","partials/__aboutme.scss","partials/__port.scss","partials/__myskills.scss","partials/__contact.scss","partials/__media.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file diff --git a/css/partials/__aboutme.scss b/css/partials/__aboutme.scss index cafcc9e..616ac53 100644 --- a/css/partials/__aboutme.scss +++ b/css/partials/__aboutme.scss @@ -20,8 +20,7 @@ display: flex; flex-direction: column; align-items: flex-end; - margin-right: 15rem; - margin-left: 10rem; + margin: 10rem; } .about__info h2{ diff --git a/css/partials/__contact.scss b/css/partials/__contact.scss index 2d2aad6..929e1c7 100644 --- a/css/partials/__contact.scss +++ b/css/partials/__contact.scss @@ -7,8 +7,18 @@ padding: 5rem; gap: 5rem; } -.contact__info img{ - width: 60%; +.contact__icons{ + display: flex; + flex-direction: row; + margin-top: 1rem; + gap: 2rem; +} +.contact__icons a{ + font-size: 3rem; + color: white +} +.contact__icons a:hover{ + cursor: pointer; } .contact__info{ display: flex; @@ -16,6 +26,7 @@ justify-content: center; gap: 1rem; } + .contact__info h2{ color: white; font-family: "Poppins", sans-serif; @@ -60,7 +71,6 @@ height: 2rem; font-size: 1rem; } - .contact__form button { margin: 1rem; font-size: 1.5rem; diff --git a/css/partials/__media.scss b/css/partials/__media.scss index 0f55f6a..043d07c 100644 --- a/css/partials/__media.scss +++ b/css/partials/__media.scss @@ -1,2 +1,140 @@ -@media screen and (min-width: 480px) { +@media only screen and (max-width: 768px) { + nav { + height: auto; + padding-top: 2rem; + padding-bottom: 3rem; + } + .nav__img { + width: 55%; + margin: 1rem 0; + } + nav h1 { + font-size: 3rem; + } + nav p { + font-size: 1rem; + } + nav ul { + flex-direction: column; + margin-top: 1rem; + gap: 1rem; + } + a { + font-size: 2rem; + } + .nav__wave{ + position: relative; + top: 3.5rem; + bottom: 0rem; + left: 0; + width: 100%; + height: 50px; + } + .about__container{ + flex-direction: column; + padding: 10rem 0; + height: auto; + } + .about__svg{ + width: 50%; + margin: 0; + } + .about__info{ + margin: 3rem 0; + align-items: center; + text-align: center; + } + .about__info h2{ + font-size: 2rem; + margin: 1.5rem 0; + } + .about__info p{ + font-size: 1.2rem; + margin: 1.5rem 0; + } + .skills__container{ + background-color:#f3f4f5; + padding-top: 10rem; + display: flex; + flex-direction: column; + justify-content: center; + flex-wrap: wrap; + align-items: center; + align-content: center; + gap: 3rem; + + h2{ + font-family: "Poppins",sans-serif; + color: black; + font-size: 2.3rem; + } +} +.skills__info{ + padding-bottom: 10rem; +} +.skills__info i{ + color:#3A9ACA ; + display: flex; + flex-direction: column; + align-items: center; + font-size: 4.2rem; + margin: 1rem; + text-shadow: 2px 5px 20px rgba(144, 144, 144, 0.3); + transition: .5s; + padding: 1rem; +} +.skills__info i:hover{ + transform: scale(100%); + color: white; + background-color: #3A9ACA ; + border-radius: .5rem; + padding: 1rem; + box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; +} + } + + + @media only screen and (min-width: 768px) and (max-width: 1500px) { + .about__container{ + padding: 15rem 0; + } + .about__svg{ + width: 50%; + margin: 0; + } + .about__info{ + margin: 0; + } + .about__info h2{ + font-size: 2rem; + margin: 1.5rem 0; + } + .about__info p{ + font-size: 1.2rem; + margin: 1.5rem 0; + } + } + + @media only screen and (min-width: 1500px) { + .about__container{ + height: 50vh; + padding: 27rem 0; + } + .about__svg{ + width: 70%; + margin-left: 15rem; + margin-right: 0; + } + .about__info{ + margin-right: 15rem; + margin-left: 10rem; + } + .about__info h2{ + font-size: 2.3rem; + margin: 1rem; + } + .about__info p{ + font-size: 1.5rem; + margin: 1rem 0; + } } \ No newline at end of file diff --git a/css/partials/__myskills.scss b/css/partials/__myskills.scss index e9d4b86..6d318f6 100644 --- a/css/partials/__myskills.scss +++ b/css/partials/__myskills.scss @@ -23,7 +23,23 @@ font-size: 4.2rem; margin: 1rem; text-shadow: 2px 5px 20px rgba(144, 144, 144, 0.3); + transition: .5s; + padding: 1rem; + border-radius:.5rem ; } -.skills__info I:hover{ - transform: scale(125%); +.skills__info i:hover{ + transform: scale(100%); + color: white; + background-color: #3A9ACA ; + border-radius: .5rem; + padding: 1rem; + box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; +} +.port__wave{ + display: flex; + flex-wrap: wrap; + bottom: 0; + left: 0; + width: 100%; + height: 125px; } \ No newline at end of file diff --git a/css/partials/__nav.scss b/css/partials/__nav.scss index b07a8a0..f99f455 100644 --- a/css/partials/__nav.scss +++ b/css/partials/__nav.scss @@ -6,7 +6,6 @@ nav{ align-items: center; flex-direction: column; background-color: white; - gap: .5rem; background-color: #3A9ACA; height: 100vh; @@ -33,7 +32,7 @@ nav ul{ list-style: none; gap: 2rem; } -a{ +.ancore__menu{ color: #171717; font-size: 1.5rem; text-decoration: none; @@ -41,7 +40,7 @@ a{ font-family: 'Poppins', sans-serif; transition: 1s; } -a:hover{ +.ancore__menu:hover{ cursor: pointer; color: rgb(0, 54, 54); } diff --git a/css/partials/__port.scss b/css/partials/__port.scss index dafeb89..aa5c5ac 100644 --- a/css/partials/__port.scss +++ b/css/partials/__port.scss @@ -15,6 +15,7 @@ } .portafolio__flex a{ opacity: 0.8; + transition: 1s; } .portafolio__flex a:hover{ transform: scale(105%); @@ -23,12 +24,4 @@ .portafolio__flex img{ max-width: 30rem; border-radius: 1rem -} -.port__wave{ - display: flex; - flex-wrap: wrap; - bottom: 0; - left: 0; - width: 100%; - height: 125px; } \ No newline at end of file diff --git a/index.html b/index.html index 390202b..5f59e0e 100644 --- a/index.html +++ b/index.html @@ -25,11 +25,11 @@ />

Dev. Andrés García

Front End Jr.

-