From 3b0366a50ca4885b35ae1a10d96a400d49f84c20 Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Tue, 8 Nov 2022 15:02:06 -0300
Subject: [PATCH] feat: finalizado

---
 main.js         |  2 +-
 style/form.css  |  4 ++++
 style/items.css | 23 +++++++++++++++++++++++
 style/main.css  |  1 +
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 style/items.css

diff --git a/main.js b/main.js
index adf25db..58e3c5e 100644
--- a/main.js
+++ b/main.js
@@ -55,7 +55,7 @@ document.addEventListener("DOMContentLoaded", () => {
         <li class="shopping-item">
             <span>${item.name}</span>
             <span>${item.quantity}</span>
-        </li
+        </li>
       `;
     });
     items.innerHTML = itemsStructure;
diff --git a/style/form.css b/style/form.css
index 9426db3..b59be1f 100644
--- a/style/form.css
+++ b/style/form.css
@@ -1,3 +1,7 @@
+.shopping-form {
+  margin-bottom: 32px;
+}
+
 .shopping-form-inputs {
   display: flex;
   align-items: flex-end;
diff --git a/style/items.css b/style/items.css
new file mode 100644
index 0000000..44ebc75
--- /dev/null
+++ b/style/items.css
@@ -0,0 +1,23 @@
+.shopping-result {
+  max-width: 416px;
+}
+
+.shopping-result-head,
+.shopping-item {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  padding: 8px 16px;
+}
+
+.shopping-result-head {
+  background: var(--gray-100);
+}
+
+.shopping-items {
+  list-style: none;
+}
+
+/*intercalar com os pares*/
+.shopping-item:nth-child(even) {
+  background: var(--gray-100);
+}
diff --git a/style/main.css b/style/main.css
index ab7e7c2..e3f3a4a 100644
--- a/style/main.css
+++ b/style/main.css
@@ -2,6 +2,7 @@
 @import url("global.css");
 @import url("variables.css");
 @import url("form.css");
+@import url("items.css");
 
 .shopping-container {
   max-width: 1200px;
-- 
2.34.1