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;

style/form.css

@@ -1,3 +1,7 @@
+.shopping-form {
+  margin-bottom: 32px;
+}
+
 .shopping-form-inputs {
   display: flex;
   align-items: flex-end;

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);
+}

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;