style.css

@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova&family=Open+Sans:ital,wght@1,300&family=Raleway:ital,wght@1,100&display=swap');

:root {
    /* Inserta la variable de los otros colores inspeccionando el exemplo de figma */
    /*Se esforce para trabalhar com variáveis, é uma dica profissional valiosa*/
    --cor-de-fundo: #f5f5f5;
    --cor-de-link: #000;
    --color-titulos: #464646;
    --color-fondo-azul: #eaf2fd;
    --color-cajas: #fbfbfb;
    --azul-botones: #2a7ae4;
  }
  
  body {
    box-sizing: border-box;
    background-color: var(--cor-de-fundo);
    font-family: 'Ibarra Real Nova', serif;
    margin: 0;
    padding: 0;
    line-height: 1;
  }
  ol,
  ul,
  li {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: var(--cor-de-link);
  }
  
  @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500");
  
  /*En este desafío nosostros gustaríamos que ustedes intentaran utilizar la metodología BEM. 
  Lo que es el BEM?
  BEM (Bloque, Elemento, Modificador) es un enfoque basado en componentes para el 
  desarrollo web. La idea detrás de esto es dividir la interfaz de usuario en bloques
  independientes. Esto hace que el desarrollo de la interfaz sea fácil y rápido, incluso
  con una interfaz de usuario compleja, y permite la reutilización del código existente sin copiar y pegar.
  Enlace de la documentación oficial!
  https://en.bem.info/methodology/quick-start/*/
  
  /*Sección Menu*/
  
  section.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    height: 10vh;
    margin: 20px 70px;
  }
  /*cabecera*/
  header.menu__header {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-titulos);
  }
  /*items del menu*/
  section.menu nav ul.menu__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 16px;
    width: 750px;
  }
  
  section.menu nav ul.menu__list li:nth-child(6) {
    color: black;
    font-weight: 800;
    font-size: 22px;
    line-height: 0.6;
    transition: transform 0.2s;
  }
  
  section.menu nav ul.menu__list li:hover {
    transform: scale(1.1);
  }
  
  section.menu nav ul.menu__list li:nth-child(6):hover {
    transform: scale(1.3);
    color: burlywood;
  }
  
  /*Sección Title*/
  
  section.title {
    font-size: 16px;
    color: var(--color-titulos);
    margin: 0px 100px;
  }
  
  section.title div.title__div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    align-content: flex-start;
  }
  
  /*titulo principal*/
  section.title div.title__container h2 {
    font-size: 56px;
    font-weight: 700;
    line-height: 61px;
  }
  
  /*imagen de perfil*/
  section.title img.title__profile {
    width: 368px;
  }
  
  section.title div.title__div div.title__container h3 {
    font-size: 17px;
    line-height: 23px;
    /* width: 600px;*/
    margin-bottom: 30px;
  }
  
  /*container link redes*/
  section.title div.title__div div.title__container ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 500px;
    padding: 0px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
  }
  
  section.title div div.title__container ul li {
    transition: transform 0.2s;
  }
  
  section.title div div.title__container ul li:hover {
    transform: scale(1.1);
  }
  
  section.title div div.title__container ul li a:hover {
    color: cadetblue;
    font-weight: 500;
  }
  
  /*seção sobre*/
  section.about {
    padding: 0px 100px;
    background-color: var(--color-fondo-azul);
  }
  /*seção sobre*/
  section.about div.about__container {
    /*width: 700px;*/
  }
  /*titulo seção sobret */
  section.about h3.about__title {
    font-size: 32px;
  }
  /*texto seção sobre*/
  section.about div.about__container p {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
  }
  /* SEÇÃO SKILLS*/
  section.skills {
    margin: 50px 120px;
  }
  /*titulo de seção*/
  section.skills h3.skills__title {
    font-size: 40px;
    text-align: center;
  }
  /*icons*/
  section.skills div.skills__line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 120%;
  }
  /*Caixas skills*/
  section.skills div.skills__box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 16px;
    background-color: var(--color-cajas);
    margin: 22px 10px 15px 0px;
    width: 100px; 
    height: 130px;
  }
  
  section.skills div.skills__box ul {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: var(--color-titulos);
  }
  
  /*Seção HOBBIESs*/
  section.hobbies {
    margin: 20px 100px;
  }
  /*titulo*/
  section.hobbies h3.hobbies__title {
    font-size: 32px;
    text-align: center;
  }
  /*icons*/
  section.hobbies div.hobbies__line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
  }
  /*caixas hobbies*/
  section.hobbies div.hobbies__box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 16px;
    background-color: var(--color-cajas);
    margin: 30px 15px 20px 10px;
    width: 100px; 
    height: 130px;
  }
  
  section.hobbies div.hobbies__box ul {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: var(--color-titulos);
  }
  section.skills div.skills__box ul:hover,
  section.hobbies div.hobbies__box ul:hover {
    color: cornflowerblue;
  }
  
  /* Experiencia Academica*/
  section.academic {
    padding-top: 10px;
    background-color: var(--color-fondo-azul);
  }
  /*titulo academico*/
  section.academic h2.academic__title {
    font-size: 32px;
    text-align: center;
  }
  
  section.academic div.academic__courses {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  /*caixas academic*/
  section.academic div.academic__courses__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 286px;
    width: 362px;
  }
  
  section.academic div.academic__courses__box ul li.academic__courses__item__img {
    padding: 3%;
    justify-content: center;
    background-color: var(--color-cajas);
    transition: transform 0.2s;
  }
  
  section.academic
    div.academic__courses__box
    ul
    li.academic__courses__item__img:hover {
    transform: scale(1.5);
  }
  
  section.academic div.academic__courses__box ul li img:nth-child(1) {
    width: 100%;
  }
  
  section.academic
    div.academic__courses__box
    ul
    li.academic__courses__item__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: var(--color-titulos);
    line-height: 0;
  }
  
  section.academic
    div.academic__courses__box
    ul
    li.academic__courses__item__subtitle {
    font-weight: 500;
    font-size: 16px;
    color: #464646;
    line-height: 0;
  }
  
  /* experiencia*/
  section.experience {
    margin: 0px 100px;
  }
  /*titulo experiencia*/
  section.experience h2.experience__section__title {
    font-weight: 700;
    font-size: 32px;
    color: var(--color-titulos);
    margin-top: 30px;
    text-align: center;
  }
  
  /*cajas experiencia*/
  section.experience div.experience__box {
    display: flex;
    padding-top: 20px;
  }
  
  section.experience div div.experience__info-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    margin-right: 40px;
  }
  
  section.experience div div.experience__info-container h2.experience__title {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 20px;
    color: var(--color-titulos);
    line-height: 30px;
  }
  
  section.experience div div.experience__info-container h3.experience__text {
    margin: 0;
    padding: 0;
    line-height: 30px;
    font-size: 14px;
    color: #464646;
    font-weight: 100;
  }
  
  section.experience div.experience__box img.experience__img {
    width: 752px;
    height: 406px;
  }
  
  section.experience
    div
    div.experience__info-container
    div.experience__description
    span
    button.experiencia__boton--repo {
    color: var(--azul-botones);
    background-color: whitesmoke;
    padding: 16px;
    outline: none;
    font-weight: 400;
    border: 2px solid var(--azul-botones);
  }
  
  section.experience
    div
    div.experience__info-container
    div.experience__description
    span
    button.experiencia__boton--repo:hover {
    color: whitesmoke;
    background-color: var(--azul-botones);
    border: 2px solid var(--azul-botones);
  }
  
  section.experience
    div
    div.experience__info-container
    div.experience__description
    span
    button.experience__boton--demo {
    color: whitesmoke;
    background-color: var(--azul-botones);
    padding: 16px;
    outline: none;
    font-weight: 400;
    border: 2px solid var(--azul-botones);
  }
  
  section.experience
    div
    div.experience__info-container
    div.experience__description
    span
    button.experience__boton--demo:hover {
    color: var(--azul-botones);
    background-color: whitesmoke;
    border: 2px solid var(--azul-botones);
    font-weight: 600;
  }
  
  section.experience div.experience__box:nth-child(3),
  section.experience div.experience__box:nth-child(5),
  section.experience div.experience__box:nth-child(7) {
    flex-direction: row-reverse;
    justify-items: center;
  }
  
  section.experience div.experience__box:nth-child(8) {
    transition: transform 0.2s;
  }
  
  section.experience div.experience__box:nth-child(8):hover {
    transform: scale(1.2);
  }
  
  /*Contacto*/
  section.formcontacto {
    padding: 20px 60px;
  }
  
  section.formcontacto div.formcontacto__contacto {
    display: flex;
  }
  
  section.formcontacto div.formcontacto__contacto div.formcontacto__izquierda {
    margin-right: 10px;
  }
  
  section.formcontacto div.formcontacto__contacto div.formcontacto__text {
    height: 100%;
  }
  
  section.formcontacto div div.formcontacto__text h2.formcontacto__title {
    font-weight: 700;
    font-size: 32px;
    color: var(--color-titulos);
    margin-top: 15px;
  }
  
  section.formcontacto div div.formcontacto__text h3.formcontacto__subtitle,
  section.formcontacto div div.formcontacto__text h3.formcontacto__subtext {
    font-weight: 500;
    font-size: 16px;
    color: #464646;
    line-height: 14px;
  }
  
  section.formcontacto div div.formcontacto__text form.formcontacto__form {
    display: flex;
    flex-direction: column;
  }
  
  section.formcontacto div div.formcontacto__text form.formcontacto__form input {
    height: 50px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 10px;
    align-self: stretch;
    outline: none;
    line-height: 24px;
  }
  
  section.formcontacto
    div
    div.formcontacto__text
    form.formcontacto__form
    input:focus {
    border-radius: 4px;
    border: 2px solid var(--azul-botones);
  }
  
  section.formcontacto
    div
    div.formcontacto__text
    form.formcontacto__form
    textarea {
    height: 130px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 10px;
    align-self: stretch;
    outline: none;
  }
  
  section.formcontacto
    div
    div.formcontacto__text
    form.formcontacto__form
    textarea:focus {
    border-radius: 4px;
    border: 2px solid var(--azul-botones);
  }
  
  section.formcontacto div div.formcontacto__text form.formcontacto__form button {
    background: var(--azul-botones);
    color: whitesmoke;
    border: 1px solid var(--azul-botones);
    width: 140px;
    height: 40px;
    margin-top: 10px;
    outline: none;
    font-weight: 400;
    transition: transform 0.2s;
  }
  
  section.formcontacto
    div
    div.formcontacto__text
    form.formcontacto__form
    button:hover {
    background: var(--color-cajas);
    color: var(--azul-botones);
    font-weight: 600;
    border: 1px solid var(--azul-botones);
    transform: scale(1.5);
  }
  
  /*footeer*/
  section.footer {
    text-align: center;
    line-height: 3px;
  }
  
  /*Validacion*/
  .error {
    font-style: oblique;
    font-family: "Fredoka", sans-serif;
    color: red;
    margin-bottom: 4px;
    font-weight: bold;
  }
  
  /* Vamos a desafiarnos trabajando con responsividad?
  Utiliza las referencias de los breakpoints @media abajo */
  
  /*Tablet*/
  @media (max-width: 768px) {
    /* Menú */
    section.menu {
      margin: 5px 10px;
    }
  
    /*cabecera*/
    header.menu__header {
      justify-content: flex-start;
    }
  
    /*items del menu*/
    section.menu nav ul.menu__list {
      width: auto;
    }
  
    section.menu nav ul.menu__list li:nth-child(1),
    section.menu nav ul.menu__list li:nth-child(2),
    section.menu nav ul.menu__list li:nth-child(3),
    section.menu nav ul.menu__list li:nth-child(4),
    section.menu nav ul.menu__list li:nth-child(5) {
      display: none;
    }
  
    /*title*/
  
    /*Sección Title*/
  
    section.title {
      margin: 0 20px;
    }
  
    /*titulo principal*/
    section.title div.title__container h2 {
      font-size: 30px;
      padding: 10px;
      line-height: 30px;
      /* width: 100%; */
    }
  
    /*imagen de perfil*/
    section.title img.title__profile {
      width: 30%;
      height: 140px;
    }
  
    section.title div.title__div div.title__container h3 {
      font-size: 14px;
      line-height: 20px;
      width: 100%;
    }
  
    /*container link redes*/
    section.title div.title__div div.title__container ul {
      width: 100%;
      font-size: 13px;
    }
  
    /*about*/
    section.about {
      padding: 0 20px;
    }
  
    /*Skills*/
    section.skills {
      margin: 20px 10px;
    }
  
    section.skills div.skills__line {
      justify-content: center;
    }
  
    /*Hobbies*/
    section.hobbies {
      margin: 20px 10px;
    }
  
    section.hobbies div.hobbies__line {
      justify-content: center;
    }
    /*Formación Académica*/
  
    /*Experiencia Profesional*/
    section.experience {
      margin: 0 10px;
    }
  
    section.experience div.experience__box {
      flex-direction: column;
    }
  
    section.experience div.experience__box:nth-child(3),
    section.experience div.experience__box:nth-child(5),
    section.experience div.experience__box:nth-child(7) {
      flex-direction: column;
    }
  
    section.experience div.experience__box:nth-child(8) {
      width: 80%;
    }
  
    section.experience div.experience__box img.experience__img {
      width: 100%;
      height: auto;
    }
  
    section.about h3.about__title,
    section.skills h3.skills__title,
    section.hobbies h3.hobbies__title,
    section.academic h2.academic__title,
    section.experience h2.experience__section__title,
    section.formcontacto div div.formcontacto__text h2.formcontacto__title {
      font-size: 20px;
    }
  
    section.formcontacto {
      padding: 0;
    }
  
    section.formcontacto div div.formcontacto__izquierda {
      display: none;
    }
  }
  
  /*Mobile*/
  @media (max-width: 425px) {
    /*Menu*/
  
    /*Titulo*/
    section.title div.title__div {
      display: flex;
      flex-direction: column;
    }
  
    /*Sección sobre mi*/
    section.title img.title__profile {
      width: 30%;
      height: 100px;
    }
    /*Skills*/
  
    /*Hobbies*/
  
    /*Formación Académica*/
  
    /*Experiencia Profesional*/
    section.experience div div.experience__info-container h2.experience__title {
      font-size: 15px;
      line-height: 20px;
    }
  
    section.experience div div.experience__info-container h3.experience__text {
      font-size: 12px;
      line-height: 20px;
    }
  
    /*Contacto*/
  
    /*Footer*/
  }