diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..f052255
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,432 @@
+body {
+  margin: 0;
+  background-color: #e2cebc;
+
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Inter, sans-serif;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 120px;
+  background-color: #ede3da;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+#menu_mobile svg {
+  display: none;
+}
+
+nav {
+  display: flex;
+  gap: 34px;
+}
+
+nav a,
+nav button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: #3c3a36;
+  text-decoration: none;
+  background-color: inherit;
+  text-transform: uppercase;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+nav a:hover,
+nav button:hover {
+  background-color: #3c3a360d;
+  transition: background-color 0.3s;
+}
+
+nav a.active,
+nav button.active {
+  background-color: #e2cebc;
+}
+
+.dropdown-menu {
+  display: none;
+}
+
+nav button {
+  border: none;
+}
+
+.shop-main {
+  display: flex;
+}
+
+.shop-main h2 {
+  font-size: 18px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.main-filter {
+  padding: 30px;
+}
+
+.main-filter section {
+  padding: 20px 0px;
+  width: max-content;
+}
+
+.main-filter .form-item {
+  margin-top: 5px;
+}
+
+.product-footer button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: #3c3a36;
+  text-decoration: none;
+  background-color: inherit;
+  text-transform: uppercase;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Inter, sans-serif;
+}
+
+.product-footer button:hover {
+  background-color: #3c3a360d;
+  transition: background-color 0.3s;
+}
+
+.products-wapper {
+  margin-top: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 30px;
+  justify-content: center;
+}
+
+/* Section Product */
+.product-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px #c0bcb9 solid;
+  border-radius: 13px;
+  width: 300px;
+}
+
+.product-image {
+  border-radius: 12px 12px 0 0;
+}
+
+.product-content {
+  display: flex;
+  flex-direction: column;
+  background-color: #ede3da;
+  padding: 20px 15px;
+  border-radius: 0 0 12px 12px;
+}
+
+.product-title {
+  font-size: 22px;
+  font-weight: bold;
+  color: #3c3a36;
+}
+
+.product-description {
+  font-size: 18px;
+  margin-top: 10px;
+  color: #5e5c59;
+}
+
+.product-variations {
+  font-size: 18px;
+  margin-top: 10px;
+  color: #5e5c59;
+  font-style: italic;
+}
+
+.product-price {
+  margin-top: 8px;
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.product-image-wrapper {
+  display: flex;
+}
+
+.product-image-wrapper img {
+  width: 100%;
+  height: 400px;
+  object-fit: cover;
+}
+
+.product-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.product-cart-button {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+.product-cart-button svg {
+  width: 20px;
+}
+
+main {
+  padding: 40px;
+}
+
+.shop-title h1 {
+  font-size: 36px;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.shop-title p {
+  margin-top: 10px;
+  font-size: 18px;
+  color: #5e5c59;
+}
+
+@media (max-width: 875px) {
+  .navbar {
+    position: relative;
+  }
+
+  nav {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    background-color: #ede3da;
+    left: 0px;
+    width: 100%;
+    top: 80px;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+    gap: 0px;
+  }
+
+  nav a,
+  nav button {
+    padding: 20px 0px;
+    font-size: 16px;
+  }
+
+  .navbar {
+    padding: 10px 30px;
+  }
+
+  #menu_mobile svg {
+    display: block;
+    width: 45px;
+  }
+
+  #menu_open {
+    animation: fade-out 1s;
+    transition: display 1s;
+  }
+
+  .hide {
+    display: none;
+  }
+
+  .logo svg {
+    width: 10rem;
+  }
+
+  nav a.active,
+  nav button.active {
+    background-color: inherit;
+  }
+
+  .dropdown {
+    display: flex;
+    justify-content: center;
+  }
+
+  main {
+    padding: 40px 10px;
+  }
+
+  .shop-title h1 {
+    font-size: 28px;
+  }
+
+  .shop-title p {
+    font-size: 16px;
+  }
+
+  .main-filter {
+    display: none;
+  }
+}
+
+ /* Estilos básicos para o navbar */
+ .navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #fff;
+}
+
+.navbar nav {
+  display: flex;
+  gap: 15px;
+}
+
+.navbar a {
+  text-decoration: none;
+  color: #3C3A36;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #fff;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.dropdown-menu > a {
+  padding: 12px 24px;
+}
+
+.dropdown:hover .dropdown-menu {
+  display: block;
+}
+
+/* Estilos para o menu responsivo */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.hamburger div {
+  width: 25px;
+  height: 3px;
+  background-color: #3C3A36;
+  margin: 4px 0;
+}
+
+.mobile-menu {
+  display: none;
+  flex-direction: column;
+  gap: 15px;
+}
+
+@media (max-width: 768px) {
+  .navbar nav {
+    display: none;
+  }
+
+  .hamburger {
+    display: flex;
+  }
+
+  .mobile-menu.active {
+    display: flex;
+  }
+}
+
+.content {
+  margin-top: 200px;
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown:hover .dropdown-menu {
+  display: block;
+}
+
+.products {
+  display: flex;
+  margin-top: 50px;
+  flex-direction: row;
+  gap: 20px;
+}
+
+.product {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  gap: 15px;
+  align-items: center;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background: white;
+}
+
+#cart {
+  margin-top: 20px;
+  border-top: 1px solid #ccc;
+  padding-top: 10px;
+}
+
+.form-container {
+  margin-bottom: 20px;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.form-container input {
+  margin: 5px 0;
+  padding: 10px;
+  width: calc(100% - 22px);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #333;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #aaa;
+  cursor: not-allowed;
+}
+
+#userInfo {
+  background: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
diff --git a/index.html b/index.html
index 69763a7..73d11cb 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,92 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-BR">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Zara - HOME</title>
+  <link rel="stylesheet" href="css/styles.css">
 </head>
+
 <body>
-  
+  <div class="navbar">
+    <a class="logo">
+      <svg width="180" height="56" viewBox="0 0 180 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M43.1539 40.2603C43.1539 42.685 41.1235 44.6538 39.5946 44.6538H22.3115L44.0503 10.0009H14.9831V15.7406H16.4771C16.4771 13.3141 18.0506 11.348 19.5804 11.348H34.515L12.6487 46H44.1796L44.1814 40.2594H43.1539V40.2603ZM68.4897 44.877C70.5987 44.877 72.6484 44.0051 72.1871 43.1977L68.1463 35.1954H53.9255L50.2193 43.2178C49.8288 44.1202 51.4556 44.8761 52.981 44.8761V46H44.7781L44.7772 44.8761C46.8854 44.8761 48.368 43.9528 48.6389 43.2256L64.0514 10L80.8705 43.1968C81.4078 44.0687 82.9848 44.8761 85.5691 44.8761L85.5657 46H68.4897V44.877ZM54.5432 33.8997L60.6956 20.4245L67.5644 33.8997H54.5432ZM87.5297 11.3916C90.0328 11.3916 92.0955 12.035 92.0955 12.8128C92.0955 18.9876 92.0815 43.1663 92.0955 43.1663C92.0955 43.992 90.0564 44.9119 87.555 44.9119L87.5515 46H104.27V44.9868C101.785 44.9868 99.7742 43.9955 99.7742 43.1716V11.0838H104.593C109.238 11.0838 112.997 14.9324 112.997 19.3006C112.997 23.6697 109.234 27.2105 104.59 27.2105H101.254C101.254 27.2105 112.556 44.285 112.571 44.285C113.018 44.9302 113.238 46 113.238 46H125.422V44.9868C123.077 44.9868 121.85 44.0147 121.171 43.1681L110.29 29.0031C115.512 28.6587 119.557 24.4431 119.557 19.4436C119.557 14.2191 115.059 10.0009 109.506 10.0009H87.5297V11.3916ZM150.268 44.9127C152.381 44.9127 154.429 44.0051 153.967 43.1977L149.925 35.1954H135.706L132 43.2178C131.611 44.1202 133.237 44.9868 134.762 44.9868V46H126.558V44.9119C128.667 44.9119 130.149 43.9528 130.419 43.2256L145.834 10L162.654 43.1968C163.189 44.0687 164.766 44.9494 167.351 44.9494L167.348 46H150.268V44.9127ZM136.324 33.8997L142.475 20.4245L149.347 33.8997H136.324Z"
+          fill="#3C3A36" />
+      </svg>
+    </a>
+
+    <nav>
+      <a href="#">home</a>
+      <div class="dropdown">
+        <button class="dropdown-toggle" type="button">
+          collections
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.175 7.15L10 10.975L13.825 7.15L15 8.33333L10 13.3333L5 8.33333L6.175 7.15Z" fill="#3C3A36" />
+          </svg>
+        </button>
+        <div class="dropdown-menu">
+          <a href="#">Link 1</a>
+          <a href="#">Link 2</a>
+          <a href="#">Link 3</a>
+        </div>
+      </div>
+      <a href="#">about</a>
+      <a href="#">contact</a>
+      <a href="#">shop</a>
+      <a href="#" class="active">cart</a>
+    </nav>
+    </ul>
+  </div>
+
+  <div class="content">
+    <div class="form-container">
+      <h3>Carrinho</h3>
+
+      <form id="cartForm">
+        <input type="text" id="name" placeholder="Nome">
+        <input type="email" id="email" placeholder="Email">
+        <button id="saveButton" type="submit">Salvar</button>
+      </form>
+    </div>
+
+    <div id="userInfo" class="hide"></div>
+
+    <div class="products">
+      <div class="product">
+        <span>Item 1</span>
+        <span class="price">R$ 10,00</span>
+        <button class="add-to-cart" onclick="adicionarAoCarrinho('Item 1', 10)" disabled>Adicionar ao Carrinho</button>
+      </div>
+      <div class="product">
+        <span>Item 2</span>
+        <span class="price">R$ 20,00</span>
+        <button class="add-to-cart" onclick="adicionarAoCarrinho('Item 2', 20)" disabled>Adicionar ao Carrinho</button>
+      </div>
+      <div class="product">
+        <span>Item 3</span>
+        <span class="price">R$ 30,00</span>
+        <button class="add-to-cart" onclick="adicionarAoCarrinho('Item 3', 30)" disabled>Adicionar ao Carrinho</button>
+      </div>
+      <div class="product">
+        <span>Item 4</span>
+        <span class="price">R$ 27,37</span>
+        <button class="add-to-cart" onclick="adicionarAoCarrinho('Item 3', 27.37)" disabled>Adicionar ao Carrinho</button>
+      </div>
+      <div class="product">
+        <span>Item 5</span>
+        <span class="price">R$ 399,80</span>
+        <button class="add-to-cart" onclick="adicionarAoCarrinho('Item 3', 399.80)" disabled>Adicionar ao Carrinho</button>
+      </div>
+    </div>
+
+    <div id="cart">
+      <h2>Carrinho</h2>
+      <ul id="cartItems"></ul>
+      <p>Total: R$ <span id="totalPrice">0,00</span></p>
+    </div>
+  </div>
 </body>
-</html>
\ No newline at end of file
+</html>