diff --git a/styles/forms.css b/styles/forms.css index 605f729..1828e0e 100644 --- a/styles/forms.css +++ b/styles/forms.css @@ -1,3 +1,7 @@ +.shopping-form{ + margin-bottom: 32px; +} + .shopping-form-inputs { display: flex; align-items: flex-end; /*itens alinhados pela base de baixo*/ diff --git a/styles/items.css b/styles/items.css new file mode 100644 index 0000000..15d3919 --- /dev/null +++ b/styles/items.css @@ -0,0 +1,22 @@ +.shopping-result{ + max-width: 416px; +} + +.shopping-result-head, +.shopping-item{ + display: grid; + grid-template-columns: 3fr 1fr; /*de todo espaço disponivel, vai separa em 4 partes, sendo 3 partes pro primeiro e 1 pro segundo*/ + padding: 8px 16px; +} + +.shopping-result-head{ + background: var(--gray-100); +} + +.shopping-items{ + list-style: none; +} + +.shopping-item:nth-child(even){ /*cada shopping item que seja um elemento par vai receber backgroud*/ + background: var(--gray-100); +} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 0528c03..85953ee 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,6 +1,7 @@ @import "global.css"; @import "variables.css"; @import "forms.css"; +@import "items.css"; .shopping-container{ max-width: 1200px;