Update Archives

Dev-LopesT · Jan 31, 2025 · 8d098ba · 8d098ba
1 parent ed72b49
commit 8d098ba
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,154 @@
+/* Reset de Padrões Navegador */
+
+* {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-decoration: none;
+  box-sizing: border-box !important;
+}
+
+
+header {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  margin: 40px 140px;
+  flex-wrap: wrap;
+}
+
+.titulo {
+  font-family: var(--font-family-main);
+  font-weight: bold;
+  font-size: var(--font-size-titulo);
+}
+
+.nav-container-flex {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.nav-container-flex a {
+  display: inline-block;
+  font-family: var(--font-family-secundaria);
+  color: var(--color-black-1);
+  font-size: var(--font-size-p);
+  position: relative;
+}
+
+.nav-container-flex a::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -4px;
+  width: 50%;
+  height: 4px;
+  background-color: var(--color-black-1);
+  transform: translateX(-50%) scaleX(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+.nav-container-flex a:hover::after {
+  transform: translateX(-50%) scaleX(1);
+}
+
+@media (max-width: 1150px) {
+  header {
+    margin: 30px 30px; 
+  }
+
+}
+
+@media (max-width: 900px) {
+
+  header {
+    justify-content: center;
+    gap: 20px;
+    text-align: center;
+  }
+
+}
+
+
+/* Main  */
+
+/* Primeira Seção */
+main {
+  padding: 40px 0;
+  margin: 0 140px;  
+}
+
+.grid-container-conteudo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  justify-items: center;
+  position: relative;
+  gap: 60px;
+}
+
+
+.img-perfil {
+  display: block;
+  max-width: 360px;
+  height: 100%;
+  object-fit: cover;
+  object-position: top center;
+}
+
+.nome-desenvolvedor {
+  position: relative;
+  font-size: 4.5rem;
+  font-family: var(--font-family-main);
+  font-weight: bold;
+  line-height: 1;
+  max-width: 600px;
+  margin-bottom: 22px;
+}
+
+.grid-container-conteudo div {
+  justify-self: start;
+}
+
+
+.nome-desenvolvedor::before {
+  content: url("../img/detalhe.svg");
+  position: absolute;
+  top: -28px;
+  left: -40px;
+  grid-column: 2;
+  z-index: -1;
+
+}
+
+.local-desenvolvedor {
+  font-size: 1.5rem;
+  font-family: var(--font-family-secundaria);
+  color: var(--color-gray-c10);
+  font-weight: 400;
+}
+
+@media (max-width: 1200px) {
+
+  main {
+    margin: 0 60px;
+  }
+
+  .grid-container-conteudo {
+    display: flex !important;
+    flex-direction: column;
+    gap: 80px;
+  } 
+
+  .grid-container-conteudo div {
+    text-align: center;
+    justify-content: center;
+  }
+  .nome-desenvolvedor::before {
+    left: 14px;
+  }
+}
diff --git a/css/variaveis.css b/css/variaveis.css
@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+
+:root {
+  --font-family-main: "Playfair Display", serif, arial;
+  --font-family-secundaria: "Fira Sans", serif;
+  --color-black-1: #141414;
+  --font-size-p: 1.2rem;
+  --font-size-titulo: 3rem;
+  --color-gray-c10: #525252;
+}
diff --git a/img/119-DSC_4419.png b/img/119-DSC_4419.png
diff --git a/img/deco.png b/img/deco.png
diff --git a/img/detalhe.svg b/img/detalhe.svg
diff --git a/img/menu_book_black_24dp 1.png b/img/menu_book_black_24dp 1.png
diff --git a/img/translate_black_24dp 1.png b/img/translate_black_24dp 1.png
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Portifólio - Thiago Lopes</title>
+  <link rel="stylesheet" href="./css/style.css">
+  <link rel="stylesheet" href="./css/variaveis.css">
+</head>
+<body>
+  <header>
+    <h1 class="titulo">Portifólio Thiago Lopes</h1>
+    <nav aria-label="Primaria">
+      <ul class="nav-container-flex">
+        <li><a href="" class="list-item">Experiência</a></li>
+        <li><a href="" class="list-item">Formação</a></li>
+        <li><a href="" class="list-item">Contato</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <article class="grid-container-conteudo">
+      <img class="img-perfil" src="./img/119-DSC_4419.png" alt="Foto-Thiago-Lopes">
+      <div>
+      <h2 class="nome-desenvolvedor">Desenvolvedor Front End & UX/UI Designer</h2>
+      <p class="local-desenvolvedor">Localizado em São Paulo 🏖</p>
+      </div>
+    </article>
+
+
+
+
+  </main>
+
+
+</body>
+</html>