style.css

/*RESET*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none
}

img {
  width: 100%;
  height: auto;
}

ul,
li {
  list-style: none;
}

section {
  width: 100%;
}

/*VARIABLES*/
:root {
  /*COLORS*/
  --color: 0;
  --background-color: hsla(var(--color), 65%, 55%, 0.9);
  --text-color: hsla(0, 0%, 96%, 1);
  --title-color: hsla(0, 0%, 15%, 1);
  --section-color: hsla(0, 0%, 95%, 1);
  --footer-color: hsla(var(--color), 18%, 35%, 0.65);
  --white: hsla(0, 0%, 100%, 0.6);

  /*FONTS*/
  --title-fontsize: 2rem;
  --text-fontsize: 1.5rem;
  --font: 'Ubuntu', sans-serif;
}


/* BASE */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--section-color);

  overflow-x: hidden;
}

.container {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.grid {
  display: grid;
  gap: 6rem;
}

.divider {
  height: 1px;
  width: 100%;

  background: linear-gradient(
    270deg,
    hsla(var(--color), 36%, 57%, 1) 0%,
    hsla(var(--color), 65%, 88%, 0.34) 100%
  );
}

.lang{
  font: 400 var(--text-fontsize) calc(var(--font)/2);
  color: var(--title-color);
  background: transparent;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 1;
}
/*OLA*/
#ola {
  background: rgb(231, 225, 225);
  padding-top: 6rem;
  padding-bottom: 3rem;
}

#ola .boas-vindas {
  text-align: center;
}

#ola .boas-vindas .text {
  padding-top: 2rem;
}

#ola .boas-vindas h2,
#ola .boas-vindas .text p {
  padding-top: 1rem;
  font-weight: bold;
  color: var(--title-color);
}

#ola .boas-vindas h2 {
  font: 700 calc(1.5 * var(--title-fontsize)) var(--font);
}

#ola .boas-vindas .text p {
  font: 300 calc(1.5 * var(--text-fontsize)) var(--font);
}

#ola .boas-vindas .divider {
  background: black;
  margin: 5.5rem 2rem;
  width: auto;
}

/*APRESENTAÇÃO*/

#apresentação {
  background: var(--section-color);
}

#apresentação .container {
  padding-top: 5rem;
  padding-bottom: 6rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

#apresentação .eu {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#apresentação .card {
  background: var(--background-color);
  text-align: center;
  align-self: center;

  border-radius: 2rem;
}

#apresentação .card .title {
  color: var(--text-color);
  font: 700 var(--title-fontsize) var(--font);
  padding: 1rem;
}

#apresentação .text {
  color: var(--title-color);
  font: 400 var(--text-fontsize) var(--font);

  width: 20%;
}

#apresentação .eu .image {
  width: 150%;
  max-width: 18rem;
  height: auto;

  border-radius: 50%;
  box-shadow: 0px 0px 0px 2px rgb(75, 75, 75);

  margin-left: 4rem;
  margin-right: 4rem;
}

/*PERFIL*/
#perfil {
  background: var(--white);
  padding-top: 5rem;
}

#perfil .container {
  display: flex;
  flex-direction: column;
}

#perfil .painel {
  padding-bottom: 4rem;

  display: flex;
  flex-direction: row;
}

#perfil .painel .text,
#perfil .painel .image {
  margin: 0 5rem;
}

#perfil .painel .image {
  z-index: 0;
  
}

#perfil .painel .text {
  z-index: 1;
}

#perfil .painel .text h2 {
  font: 700 var(--title-fontsize) var(--font);
}

#perfil .painel .text p {
  padding-top: 2rem;

  font: 300 var(--text-fontsize) var(--font);
}

#perfil .painel .text:nth-of-type(1) p,
#perfil .painel .text:nth-of-type(1) h2 {
  text-align: left;
}

#perfil .painel .text:nth-of-type(2) p,
#perfil .painel .text:nth-of-type(2) h2 {
  text-align: right;
}

#perfil .painel .image {
  position: relative;
}
#perfil .painel .image::before {
  content: '';

  background: hsla(var(--color), 55%, 65%, 0.8);

  position: absolute;
}
#perfil .painel .image img {
  clip-path: circle();
  
}

#perfil .painel:nth-child(1) .image {
  right: 100px;
  top: 50px;
}
#perfil .painel:nth-child(1) .image::before {
  top: -100px;
  right: -200px;

  height: 20rem;
  width: 20rem;

  clip-path: circle();
}
#perfil .painel:nth-child(1) .image img {
  width: 80%;
}

#perfil .painel:nth-child(2) .image {
  right: 100px;
}

#perfil .painel:nth-child(2) .image::before {
  width: 40rem;
  height: 40rem;

  top: -100px;
  right: -250px;

  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
#perfil .painel:nth-child(2) .image img {
  width: 140%;
}

#perfil .painel:nth-child(3) .image {
  top: auto;
  right: auto;
}

#perfil .painel:nth-child(3) .image::before {
  top: -50px;
  right: 100px;

  height: 25rem;
  width: 25rem;

  clip-path: circle(50% at 50% 50%);
}

#perfil .painel:nth-child(3) .image img {
  width: 110%;
}

/*conhecimentos*/
#conhecimentos {
  background: var(--section-color);
}

#conhecimentos .title {
  padding-top: 2rem;
  display: flex;

  font: 700 var(--title-fontsize) var(--font);

  justify-content: center;
}

#conhecimentos .cards {
  display: flex;
  flex-flow: row;
  justify-content: center;

  height: max-content;

  gap: 6rem;
}

#conhecimentos .container.grid {
  padding: 6rem 1rem;
}

#conhecimentos .list-container {
  margin: 0.5rem 0;
  height: 80%;
}

#conhecimentos .cards .card-title {
  font: 700 var(--title-fontsize) var(--font);
  padding-top: 1rem;
}

#conhecimentos .cards .list {
  font: 300 var(--text-fontsize) var(--font);
  display: flex;
  flex-flow: column;
  justify-content: space-around;

  transition-duration: 0.4s;
  height: 100%;
}

#conhecimentos .card1,
#conhecimentos .card2 {
  display: flex;
  flex-flow: column;
  text-align: center;
  height: 20rem;
  border-radius: 1.5rem;
  width: 33%;

  box-shadow: 1px 1px 10px 1.2px rgba(0, 0, 0, 0.1);
  transition: 0.4s;
}

#conhecimentos .card2 {
  background: var(--background-color);
}

#conhecimentos .card1 {
  background: var(--white);
}

#card1:hover,
#card2:hover,
#card3:hover {
  box-shadow: 0.6rem 0.6rem rgb(39, 37, 37);

  margin-right: 2rem;
  height: fit-content;

  transition-duration: 0.4s;
}

#conhecimentos .card2 .list,
#conhecimentos .card2 .card-title {
  color: var(--text-color);
}

#conhecimentos .card1:hover .list,
#conhecimentos .card2:hover .list {
  font-size: calc(1.5 * var(--text-fontsize));
  transition-duration: 0.4s;

  height: fit-content;

  margin: 1rem 0;
}

#conhecimentos .card1:hover .card-title,
#conhecimentos .card2:hover .card-title {
  font-size: calc(1.5 * var(--title-fontsize));
  transition: 0.4s;
  transition-duration: 0.6s;
}

#conhecimentos .card1:hover .list li,
#conhecimentos .card2:hover .list li {
  margin-top: 2rem;
}

/*FOOTER*/
footer {
  background: var(--footer-color);
}

footer .container {
  padding: 2rem;
}

footer .contatos h2 {
  font: 400 var(--title-fontsize) var(--font);
}

footer .contatos .grid {
  display: flex;
  flex-direction: row;

  gap: 2rem;

  padding-top: 2rem;
}

footer .autoria {
  align-self: center;

  font: 400 var(--text-fontsize) var(--font);
}

footer a {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  font: 400 calc(0.8 * var(--text-fontsize)) var(--font);

  color: black;
}

footer a p {
  transition-duration: 0.3s;
}

footer a:hover p {
  color: blue;
}

footer i {
  font-size: 1.5rem;
  line-height: 0;
}

footer .contatos .gmail {
  display: flex;
  align-items: center;
}

footer .gmail p {
  padding-left: 0.5rem;
  font: 400 calc(0.8 * var(--text-fontsize)) var(--font);
}

footer .contatos .whatsapp {
  display: flex;
  align-items: center;
}

footer .contatos .github {
  display: flex;
  align-items: center;
}

footer .contatos a .icon-github:before {
  font-size: 2rem;
}