adicionando novos projetos

maahbatistaa · Jul 22, 2024 · 2120956 · 2120956
1 parent 69bae9f
commit 2120956
Show file tree

Hide file tree

Showing 114 changed files with 4,159 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -4,8 +4,36 @@
 ***Front-end:*** HTML, CSS e JavaScript
 
 <a href="https://maahbatistaa.github.io/projects-origamid/animais-fantasticos/">
-<img src="./assets/animais-fantasticos.jpeg" />
+  <img src="./assets/animais-fantasticos.jpeg" />
 </a>
 
+## Wildbeast
+
+### Stack utilizada
+***Front-end:*** HTML e CSS
+
+<a href="https://maahbatistaa.github.io/projects-origamid/wildbeast/">
+  <img src="./assets/wildbeast.png">
+</a>
+
+
+## FlexBlog
+
+### Stack utilizada
+***Front-end:*** HTML e CSS
+
+<a href="maahbatistaa.github.io/projects-origamid/flexblog/">
+  <img src="./assets/flexblog.png">
+</a>
+
+
+## Bikcraft
+
+### Stack utilizada
+***Front-end:*** HTML e CSS
+
+<a href="maahbatistaa.github.io/projects-origamid/bikcraft/">
+  <img src="./assets/bikcraft.png">
+</a>
 
 
diff --git a/assets/bikcraft.png b/assets/bikcraft.png
diff --git a/assets/flexblog.png b/assets/flexblog.png
diff --git a/assets/wildbeast.png b/assets/wildbeast.png
diff --git a/bikcraft/README.md b/bikcraft/README.md
@@ -0,0 +1,14 @@
+
+## Bikcraft
+O Bikcraft foi o projeto final do curso de HTML e CSS para iniciantes. 
+
+### Aprendizados
+Além de ter feito todo o prototipo no curso de UI Design, eu pude colocar em prática tudo que aprendi ao longo do curso, o que inclui: Posicionamento; Tags semânticas; Responsividade; Boas práticas no CSS;
+
+### Stack utilizada
+***Front-end:*** HTML, CSS e JavaScript
+
+### Demonstração
+[Bikcraft](https://bikcraft-chi-puce.vercel.app)
+<hr>
+
diff --git a/bikcraft/bicicletas.html b/bikcraft/bicicletas.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Bicicletas | Bikcraft</title>
+  <meta name="description" content="Bicicletas">
+
+  <link rel="icon" href="./favicon.svg" type="image/svg+xml">
+  <link rel="preload" href="./css/style.min.css" as="style">
+  <link rel="stylesheet" href="./css/style.min.css">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,900&family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+  <script> document.documentElement.classList.add("js");</script>
+</head>
+
+<body id="bicicletas">
+  <header class="header-bg">
+    <div class="header container">
+      <a href="./"><img src="./img/bikcraft.svg" width="136" height="32" alt="Bikcraft"></a>
+      <nav aria-label="primaria">
+        <ul class="header-menu font-1-m cor-0">
+          <li><a href="./bicicletas.html">Bicicletas</a></li>
+          <li><a href="./seguros.html">Seguros</a></li>
+          <li><a href="./contato.html">Contato</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <div class="titulo-bg">
+      <div class="titulo container">
+        <p class="font-2-l-b cor-5">Escolha a melhora para você</p>
+        <h1 class="font-1-xxl cor-0">nossas bicicletas<span class="cor-p1">.</span></h1>
+      </div>
+    </div>
+
+
+    <div class="bicicletas container">
+      <div class="bicicletas-imagem">
+        <img src="./img/bicicletas/nimbus.jpg" width="1120" height="680" alt="Bicicleta preta">
+        <span class="font-2-m cor-0">R$ 4999</span>
+      </div>
+
+      <div class="bicicletas-conteudo">
+        <h2 class="font-1-xl">Nimbus Stark</h2>
+        <p class="font-2-s cor-8">A Nimbus Stark é a melhor Bikcraft já criada pela nossa equipe. Ela vem equipada com os melhores acessórios, o que garante maior velocidade</p>
+        <ul class="font-1-m cor-8">
+          <li>
+            <img src="./img/icones/eletrica.svg" width="32" height="32" alt="">
+            Motor Elétrico
+          </li>
+          <li>
+            <img src="./img/icones/carbono.svg" width="32" height="32" alt="">
+            Fibra de Carbono
+          </li>
+          <li>
+            <img src="./img/icones/velocidade.svg" width="32" height="32" alt="">
+            50 km/h
+          </li>
+          <li>
+            <img src="./img/icones/rastreador.svg" width="32" height="32" alt="">
+            Rastreador
+          </li>
+        </ul>
+        <a href="./bicicletas/nimbus.html" class="botao seta">Mais sobre</a>
+      </div>
+    </div>
+
+
+    <div class="bicicletas-bg">
+      <div class="bicicletas container">
+        <div class="bicicletas-imagem">
+          <img src="./img/bicicletas/magic.jpg" width="1120" height="680" alt="Bicicleta preta">
+          <span class="font-2-m cor-0">R$ 2499</span>
+        </div>
+
+        <div class="bicicletas-conteudo">
+          <h2 class="font-1-xl cor-0">Magic Might</h2>
+          <p class="font-2-s cor-5">A Magic Might é a melhor Bikcraft já criada pela nossa equipe. Ela vem equipada com os melhores acessórios, o que garante maior velocidade</p>
+          <ul class="font-1-m cor-5">
+            <li>
+              <img src="./img/icones/eletrica.svg" width="32" height="32" alt="">
+              Motor Elétrico
+            </li>
+            <li>
+              <img src="./img/icones/carbono.svg" width="32" height="32" alt="">
+              Fibra de Carbono
+            </li>
+            <li>
+              <img src="./img/icones/velocidade.svg" width="32" height="32" alt="">
+              45 km/h
+            </li>
+            <li>
+              <img src="./img/icones/rastreador.svg" width="32" height="32" alt="">
+              Rastreador
+            </li>
+          </ul>
+          <a href="./bicicletas/magic.html" class="botao seta">Mais sobre</a>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="bicicletas container">
+      <div class="bicicletas-imagem">
+        <img src="./img/bicicletas/nebula.jpg" width="1120" height="680" alt="Bicicleta preta">
+        <span class="font-2-m cor-0">R$ 3999</span>
+      </div>
+
+      <div class="bicicletas-conteudo">
+        <h2 class="font-1-xl">Nebula Cosmic</h2>
+        <p class="font-2-s cor-8">A Nebula Cosmic é a melhor Bikcraft já criada pela nossa equipe. Ela vem equipada com os melhores acessórios, o que garante maior velocidade</p>
+        <ul class="font-1-m cor-8">
+          <li>
+            <img src="./img/icones/eletrica.svg" width="32" height="32" alt="">
+            Motor Elétrico
+          </li>
+          <li>
+            <img src="./img/icones/carbono.svg" width="32" height="32" alt="">
+            Fibra de Carbono
+          </li>
+          <li>
+            <img src="./img/icones/velocidade.svg" width="32" height="32" alt="">
+            50 km/h
+          </li>
+          <li>
+            <img src="./img/icones/rastreador.svg" width="32" height="32" alt="">
+            Rastreador
+          </li>
+        </ul>
+        <a href="./bicicletas/nebula.html" class="botao seta">Mais sobre</a>
+      </div>
+    </div>
+
+  </main>
+
+  <footer class="footer-bg">
+    <div class="footer container">
+      <img src="./img/bikcraft.svg" width="136" height="32" alt="">
+      <div class="footer-contato">
+        <h3 class="font-2-l-b cor-0">Contato</h3>
+        <ul class="cor-5 font-2-m">
+          <li><a href="tel:+552199999999">+ 55 21 9999-9999</a></li>
+          <li><a href="mailto:[email protected]">[email protected]</a></li>
+          <li>Rua Ali Perto, 42 - Botafogo</li>
+          <li>Rio de Janeiro</li>
+        </ul>
+        <div class="footer-redes">
+          <a href="./">
+            <img src="./img/redes/instagram.svg" width="32" height="32" alt="Instagram">
+          </a>
+          <a href="./">
+            <img src="./img/redes/facebook.svg" width="32" height="32" alt="Facebook">
+          </a>
+          <a href="./">
+            <img src="./img/redes/youtube.svg" width="32" height="32" alt="Youtube">
+          </a>
+        </div>
+      </div>
+      <div class="footer-informacoes">
+        <h3 class="font-2-l-b cor-0">Informações</h3>
+        <nav>
+          <ul class="font-1-m cor-5">
+            <li><a href="./bicicletas.html">Bicicletas</a></li>
+            <li><a href="./seguros.html">Seguros</a></li>
+            <li><a href="./contato.html">Contato</a></li>
+            <li><a href="./termos.html">Termos e Condições</a></li>
+          </ul>
+        </nav>
+      </div>
+      <p class="footer-copy font-2-m cor-6">Bikcraft © Alguns direitos reservados</p>
+    </div>
+  </footer>
+  <script src="./js/script.js"></script>
+</body>
+
+</html>