update

antigo/Assets/css/style.css

@@ -0,0 +1,511 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap");
+
+:root {
+  --text: #170f1f;
+  --background: #e8e0f0;
+  --primary-button: #7d52a7;
+  --secondary-button: #ded3e9;
+  --accent: #8a62b2;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: "Outfit", sans-serif;
+  text-decoration: none;
+  list-style: none;
+
+  margin: 0;
+  padding: 0;
+
+  color: var(--text);
+}
+
+html {
+  scroll-behavior: smooth !important;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  background-color: var(--background);
+}
+
+.tcenter {
+  text-align: center;
+}
+
+.ttext1 {
+  font-size: 3rem;
+}
+
+.bborder {
+  border-bottom: solid 2px var(--accent);
+}
+
+.sbox {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  width: 95%;
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+.button {
+  background-color: var(--primary-button);
+  color: var(--secondary-button);
+  font-size: 18px;
+  font-weight: 800;
+  font-style: normal;
+  text-decoration: none;
+  padding: 10px 10px;
+  border: 0px solid #000;
+  border-radius: 10px;
+  display: inline-block;
+  transition:
+    background-color 0.3s ease,
+    transform 0.3s ease;
+}
+.button:hover {
+  transform: scale(1.05);
+}
+.button:active {
+  transform: scale(0.95);
+}
+
+.select {
+  border: solid 2px var(--primary-button);
+  border-radius: 12px;
+  color: var(--text);
+  background-color: var(--secondary-button);
+  padding: 4px;
+  outline: none;
+}
+
+.img {
+  display: block;
+  height: 100%;
+}
+
+.img1 {
+  display: block;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: auto;
+  width: 100%;
+  border-radius: 12px;
+}
+
+/* ---------- header ---------- */
+header {
+  position: fixed;
+  width: 100%;
+  top: 0;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  padding: 10px;
+  background-color: var(--secondary-button);
+  border-radius: 0 0 12px 12px;
+  justify-content: space-between;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  color: var(--color-Accent);
+  gap: 0.5rem;
+}
+
+.Menu_options {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.Menu_options ul {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.Menu_options ul a {
+  font-weight: 500;
+}
+
+.Menu_options ul li:hover {
+  transform: scale(1.05);
+}
+.Menu_options ul li:active {
+  transform: scale(0.95);
+}
+
+/* ---------- Section 1 ---------- */
+
+section {
+  padding: 2rem 0 2rem 0;
+}
+
+.section_1 {
+  display: flex;
+  margin-top: 50px;
+  align-items: center;
+  justify-content: center;
+}
+
+.conteudo_1 {
+  display: flex;
+  height: auto;
+  gap: 2rem;
+  width: 90%;
+  align-items: center;
+  justify-content: center;
+}
+
+.conteudo_1 h1 {
+  font-size: 2rem;
+}
+
+.text_home {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.accent {
+  color: var(--accent);
+}
+
+.social_icons {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.conteudo_1 i {
+  display: flex;
+  font-size: 2rem;
+  background-color: var(--accent);
+  color: var(--secondary-button);
+  border-radius: 50%;
+  height: 50px;
+  width: 50px;
+  justify-content: center;
+  align-items: center;
+  transition: transform ease 0.2s;
+}
+
+.conteudo_1 i:hover {
+  transform: scale(1.05);
+}
+
+.conteudo_1 i:active {
+  transform: scale(0.95);
+}
+
+.img_inicio {
+  border-radius: 50%;
+  max-width: 50%;
+  border: solid 5px var(--accent);
+}
+
+/* ---------- Section 2 ---------- */
+
+.section_2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background-color: var(--secondary-button);
+}
+
+.section_2 h2 {
+  font-size: 3rem;
+}
+
+.conteudo_2 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  width: 50%;
+}
+
+/* ---------- Section 3 ---------- */
+
+.section_3 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3rem;
+}
+
+.section_3 h2 {
+  font-size: 3rem;
+}
+
+.conteudo_3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  align-items: center;
+  justify-items: center;
+  width: 50%;
+  font-weight: 600;
+}
+
+.conteudo_3 i {
+  display: flex;
+  font-size: 3rem;
+  background-color: var(--accent);
+  color: var(--secondary-button);
+  border-radius: 50%;
+  height: 100px;
+  width: 100px;
+  justify-content: center;
+  align-items: center;
+  transition: transform ease 0.2s;
+}
+
+.skill_icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* ---------- Section 4 ---------- */
+
+.section_4 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: 2rem;
+  margin: auto;
+  background-color: var(--secondary-button);
+  border-radius: 12px;
+}
+
+.section_4 h1 {
+  font-size: 3rem;
+}
+
+.conteudo_4 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
+  gap: 1rem;
+  width: 90%;
+}
+
+.slot {
+  background-color: var(--background);
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  padding: 2rem;
+  border-radius: 12px;
+  margin: 20px 0 20px 0;
+  gap: 1rem;
+}
+
+.tech {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.tech span {
+  background-color: var(--primary-button);
+  color: var(--secondary-button);
+  border-radius: 28px;
+  padding: 5px;
+  font-size: 12px;
+}
+
+/* ---------- Section 5 ---------- */
+
+.section_5 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.section_5 h1 {
+  font-size: 3rem;
+}
+
+.conteudo_5 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 2rem;
+  font-weight: 600;
+}
+
+.contatos_icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 2rem;
+}
+
+.contatos_icons1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 300px;
+}
+
+.contatos_icons1 i {
+  display: flex;
+  font-size: 3rem;
+  background-color: var(--accent);
+  color: var(--secondary-button);
+  border-radius: 50%;
+  height: 100px;
+  width: 100px;
+  justify-content: center;
+  align-items: center;
+  transition: transform ease 0.2s;
+}
+
+.contatos_icons1 i:hover {
+  transform: scale(1.05);
+}
+
+.contatos_icons1 i:active {
+  transform: scale(0.95);
+}
+
+/* ---------- footer ---------- */
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 1rem;
+  border-radius: 12px 12px 0 0;
+  background-color: var(--secondary-button);
+}
+
+/* ---------- responsive ---------- */
+
+#menu_bar_button i {
+  color: var(--secondary-button);
+}
+
+.menu_bar_nav {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  height: auto;
+  background-color: var(--secondary-button);
+  border-radius: 0 0 12px 12px;
+  padding: 2rem;
+}
+
+.Menu_bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.Menu_bar ul {
+  align-items: center;
+  justify-content: center;
+}
+
+.Menu_bar li {
+  width: 100%;
+  text-align: center;
+}
+
+.Menu_bar a {
+  width: 100%;
+}
+
+#menu_bar_button {
+  display: none;
+}
+
+@media screen and (min-width: 901px) {
+  #menu_bar_nav,
+  #menu_bar_button {
+    display: none;
+  }
+}
+@media screen and (max-width: 900px) {
+  .menu_bar_nav,
+  .Menu_options ul {
+    display: none;
+  }
+
+  #menu_bar_button {
+    display: flex;
+  }
+
+  .conteudo_1 {
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .social_icons {
+    justify-content: center;
+  }
+
+  .section_2 {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+  }
+
+  .conteudo_2 {
+    width: 80%;
+  }
+
+  .img_inicio {
+    width: 80%;
+    height: auto;
+  }
+
+  .section_3 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .conteudo_3 {
+    grid-template-columns: repeat(2, 1fr);
+    width: 90%;
+  }
+
+  .conteudo_4 {
+    grid-template-columns: 1fr;
+  }
+
+  .contatos_icons {
+    flex-direction: column;
+  }
+  .contatos_icons1 {
+    width: 90%;
+  }
+}

antigo/Assets/img/code-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>

antigo/Assets/js/index.js

@@ -0,0 +1,11 @@
+function toggleDiv() {
+  var div = document.getElementById("menu_bar_nav");
+  var header = document.getElementById("header_css");
+  if (div.style.display === "flex") {
+    div.style.display = "none";
+    header.style.borderRadius = "0 0 12px 12px";
+  } else {
+    div.style.display = "flex";
+    header.style.borderRadius = "0 0 0 0";
+  }
+}