Added scroll to anchor tag, made site responsive, and completed MySki…

…lls section
EliteDev · Apr 13, 2023 · f02e077 · f02e077
1 parent 13aa034
commit f02e077
Show file tree

Hide file tree

Showing 10 changed files with 408 additions and 68 deletions.
diff --git 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 */
diff --git a/css/index.css.map b/css/index.css.map
diff --git 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
@@ -7,15 +7,26 @@
     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;
     flex-direction: column;
     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;