meu site wg

Willyang10x · Mar 24, 2024 · aa71da6 · aa71da6
commit aa71da6
Show file tree

Hide file tree

Showing 19 changed files with 369 additions and 0 deletions.
diff --git a/img/bone-wg.jpg b/img/bone-wg.jpg
diff --git a/img/cartao de visita.jpg b/img/cartao de visita.jpg
diff --git a/img/hamburguer.jpg b/img/hamburguer.jpg
diff --git a/img/image-removebg-preview (10).png b/img/image-removebg-preview (10).png
diff --git a/img/image-removebg-preview (11).png b/img/image-removebg-preview (11).png
diff --git a/img/image-removebg-preview (12).png b/img/image-removebg-preview (12).png
diff --git a/img/image-removebg-preview (13).png b/img/image-removebg-preview (13).png
diff --git a/img/image-removebg-preview (9).png b/img/image-removebg-preview (9).png
diff --git a/img/interruptor.png b/img/interruptor.png
diff --git a/img/logo wg.jpg b/img/logo wg.jpg
diff --git a/img/parede-will.jpg b/img/parede-will.jpg
diff --git a/img/pj-po.jpg b/img/pj-po.jpg
diff --git a/img/post.71 copiar.jpg b/img/post.71 copiar.jpg
diff --git a/img/post.71.jpg b/img/post.71.jpg
diff --git a/img/post.72.jpg b/img/post.72.jpg
diff --git a/img/sao jose.psd b/img/sao jose.psd
diff --git a/index.html b/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WG - Designer</title>
+  <link rel="icon" type="image/x.icon" href="img/post.71 copiar.jpg"> 
+  <link rel="stylesheet" href="site_WG.css">
+
+</head>
+<body>
+
+  <button id="modeToggleBtn" class="mode-toggle-btn">
+    <img src="img/interruptor.png" alt="Alterar Modo">
+
+  </button>
+
+  <div class="containerButtons">
+
+    <div class="buttons">
+
+      <button class="button" onclick="window.location.href='https://wa.me/+5583988688864'">
+        <img src="img/image-removebg-preview (11).png" alt="Descrição da Imagem 1">
+      </button>
+      <button class="button" onclick="window.location.href='https://www.instagram.com/wg.design07/'">
+        <img src="img/image-removebg-preview (12).png" alt="Descrição da Imagem 2">
+      </button>
+
+    </div>
+
+  </div>
+
+
+  <div class="container">
+
+    <img src="img/post.71 copiar.jpg" alt="Minha Foto" class="perfil">
+
+    <h1 class="titulo">WG - Designer</h1>
+
+    <h2>Um Pouco sobre meu trabalho...</h2>
+
+  </div>
+
+    <div class="texto">
+
+        <h3><p>Olá! Meu nome é Willyan Gabriel</p></h3>
+        <p>Sou um jovem designer apaixonado por criar experiências visuais únicas e impactantes. Com apenas 17 anos, estou animado para compartilhar minha jornada criativa e meus projetos aqui neste portfólio.</p>
+        <p>Desde experimentos de design gráfico até conceitos de interface de usuário, cada projeto representa uma oportunidade de aprendizado e expressão criativa para mim. Estou constantemente buscando desafios que me permitam expandir meu conhecimento e aprimorar minhas habilidades.</p>
+        <p>Se você estiver interessado em colaborar ou apenas quiser trocar ideias, ficarei feliz em ouvir de você! Obrigado por visitar meu portfólio e por fazer parte da minha jornada de design emocionante.</p>
+
+      </div>
+
+    <div id="myModal" class="modal">
+
+      <span class="close">&times;</span>
+      <img class="modal-content" id="img01">
+
+    </div>
+
+
+        <div class="image-container">
+
+          <div class="texto1"><p>Algumas artes de identidade visual:</p> </div>
+          <img src="img/post.71.jpg" alt="Descrição da imagem 1" onclick="openModal(this);">
+          <img src="img/cartao de visita.jpg" alt="Descrição da imagem 2" onclick="openModal(this);">
+          <img src="img/post.72.jpg" alt="Descrição da imagem 3" onclick="openModal(this);">
+          <img src="img/pj-po.jpg" alt="Descrição da imagem 4" onclick="openModal(this);">
+
+        </div>
+
+        <div class="texto2">
+
+          <p>Artes desenvolvidas para sua identidade visual</p>
+          <p>Desde criança, sempre fui fascinado pelo poder da arte e do design. Essa paixão me levou a explorar diversas áreas criativas, desde ilustração até design de interfaces.</p>
+        <p>Com anos de experiência, desenvolvi habilidades sólidas em softwares como Adobe Photoshop, além de dominar os princípios fundamentais do design.</p>
+          <p>Obrigado por visitar meu portfólio e por fazer parte da minha jornada de design!</p>
+
+        </div>
+
+
+      <footer>Copyright ® 2024 | Willyan Gabriel</footer>
+
+  <script src="site.js"></script>
+</body>
+
+
+</html>
diff --git a/site.js b/site.js
@@ -0,0 +1,30 @@
+const modeToggleBtn = document.getElementById("modeToggleBtn");
+const body = document.body;
+
+modeToggleBtn.addEventListener("click", () => {
+    body.classList.toggle("dark-mode");
+});
+
+
+function openModal(imgElement) {
+    var modal = document.getElementById("myModal");
+    var modalImg = document.getElementById("img01");
+    modal.style.display = "block";
+    modalImg.src = imgElement.src;
+  }
+
+  // Função para fechar o modal
+  function closeModal() {
+    var modal = document.getElementById("myModal");
+    modal.style.display = "none";
+  }
+
+  // Fechar o modal quando clicar fora da imagem
+  window.onclick = function(event) {
+    var modal = document.getElementById("myModal");
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  }
+
+
diff --git a/site_WG.css b/site_WG.css
@@ -0,0 +1,252 @@
+    body {
+        margin: 0;
+        padding: 0;
+        background: linear-gradient(#000000, #0011ff,#000000);
+        font-family: Arial, sans-serif; 
+        transition: background-color 0.5s ease;
+        color: #ffffff;
+    }
+
+    .dark-mode {
+        background: linear-gradient(#0011ff,#ffffff,#0011ff);
+    }
+
+    body.dark-mode {
+        color: #000000; 
+    }
+
+    body.dark-mode p {
+        color: #000000; 
+    }
+
+    body.dark-mode h1,
+    body.dark-mode h2,
+    body.dark-mode h3{
+        color: #000000; 
+    }
+
+
+    .mode-toggle-btn {
+        background: transparent;
+        border: none;
+        padding: 0;
+        margin-left: 20px;
+    }
+
+    .mode-toggle-btn img {
+        width: 75px;
+        height: auto;
+    }
+
+    .containerButtons {
+        max-width: 800px;
+        padding: 20px;
+        color: #ffffff;
+        margin: 0 auto; 
+    }
+
+    .perfil:hover {
+    transform: scale(1.1); 
+    transition: transform 0.3s ease;
+}
+
+    .perfil {
+        width: 170px; 
+        height: 170px; 
+        border-radius: 100%; 
+        object-fit: cover;
+        margin-top: -90px;
+    }
+
+    .titulo {
+        font-size: 26px;
+        margin-top: 20px;
+    }
+
+    h1{
+        color: #ffffff;
+    }
+
+    h2 {
+        color: #ffffff;
+        margin-top: 20px; 
+    }
+
+
+
+    .image-container {
+        overflow: hidden;
+    }
+
+    .image-container img {
+        float: left;
+        width: 25%; 
+        padding: 5px;
+        box-sizing: border-box;
+        border-radius: 10px; 
+        background-color: transparent
+    }
+
+
+    .modal {
+        display: none; 
+        position: fixed; 
+        z-index: 1; 
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto; 
+        background-color: rgba(0,0,0,0.9); 
+      }
+
+      .modal-content {
+        margin: auto;
+        display: block;
+        width: 1000%; 
+        max-width: 500px; 
+      }
+
+
+      .close {
+        position: absolute;
+        top: 20px;
+        right: 35px;
+        color: #fff;
+        font-size: 40px;
+        font-weight: bold;
+        transition: 0.3s;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: #bbb;
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+    .texto {
+        color: #ffffff;
+        font-size: 22px; 
+        line-height: 1.3; 
+        max-width: 0 auto;
+        margin: 20px 0; 
+        text-align: center; 
+    }
+
+    .texto1 {
+        color: #ffffff;
+        font-size: 30px; 
+        line-height: 1.3; 
+        max-width: 0 auto;
+        margin: 20px 0; 
+        text-align: center;  
+    }
+
+
+
+    .texto2 {
+        color: #ffffff;
+        font-size: 22px; 
+        line-height: 1.3; 
+        max-width: 0 auto;
+        margin: 20px 0; 
+        text-align: center; 
+    }
+
+    footer{
+        background: linear-gradient(500deg, #000000, #0011ff,#000000);
+        font-family: Impact, Impact, HaettenschweilerS, 'Arial Narrow Bold', sans-serif;
+        color: #ffffff;
+        text-align: center;
+        font-size: 20px;
+        padding: 10px 0;
+        box-sizing: border-box;
+        border-radius: 10px; 
+    }
+
+    .container {
+        position: relative;
+        text-align: center;
+        max-width: 800px;
+        padding: 20px;
+        color: #000000;
+        margin: 0 auto;
+    }
+
+    .buttons {
+        position: absolute;
+        top: 10px; 
+        right: 20px; 
+    }
+
+    .button {
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+    }
+
+    .button img {
+        width: 70px; 
+        height: 70px; 
+    }
+
+
+
+
+    @media only screen and (max-width: 768px) {
+
+    .perfil {
+      width: 100px;
+      height: 100px;
+      margin-top: -50px;
+    }
+
+    .titulo {
+      font-size: 20px;
+    }
+
+    .texto,
+    .texto1,
+    .texto2 {
+      font-size: 16px;
+    }
+
+    .buttons {
+      position: static;
+      display: flex;
+      justify-content: center;
+      margin-top: 10px;
+    }
+
+    .button {
+      margin: 0 5px;
+    }
+
+    .button img {
+      width: 50px;
+      height: 50px;
+    }
+
+    .container {
+      max-width: 90%;
+    }
+
+    .image-container img {
+      width: 45%;
+    }
+
+    .texto,
+    .texto1,
+    .texto2 {
+      margin: 10px auto;
+      text-align: left;
+    }
+
+    footer {
+      font-size: 16px;
+    }
+  }
+