From ee9cc0b23cdffadb709a5253e1984a177533e630 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Gabriel?= <=> Date: Sat, 12 Nov 2022 16:30:48 -0300 Subject: [PATCH] feat: feito html e css --- index.html | 28 +++++++++++++- styles/form.css | 90 ++++++++++++++++++++++++++++++++++++++++++++ styles/global.css | 2 +- styles/style.css | 9 +++++ styles/variables.css | 15 ++++++++ 5 files changed, 141 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4e6c5c2..5dbe009 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,32 @@ - - +
+
+

Shopping List

+ +
+
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+
+
+ \ No newline at end of file diff --git a/styles/form.css b/styles/form.css index e69de29..426d764 100644 --- a/styles/form.css +++ b/styles/form.css @@ -0,0 +1,90 @@ +.shopping-form-inputs { + display: flex; + align-items: flex-end; + margin-bottom: 24px; +} + +.shopping-form-item-wrapper { + flex: 1; + max-width: 256px; +} + +.shopping-form-label { + display: block; + margin-bottom: 4px; +} + +.shopping-form-item-input, +.shopping-form-quantity-input { + width: 100%; + height: 32px; + padding: 0 12px; + border: 1px solid var(--gray-300); + border-radius: 4px; + background: var(--white); +} + +.shopping-form-quatity-warapper { + display: flex; + align-items: center; + margin-left: 24px; +} + +.shopping-form-quantity-input { + max-width: 64px; + text-align: center; + margin: 0 4px; +} + +.shopping-form-quatity-button { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: 0; + border-radius: 4px; + background: var(--gray-100); + transition: background-color 0.2s ease-in-out; +} + +.shopping-form-quatity-button:hover { + background: var(--orange-500); +} + +.shopping-form-quatity-button:active { + background: var(--orange-300); +} + +.shopping-form-quatity-button::before, +.shopping-form-increment-button::after { + content: ''; + position: absolute; + width: 16px; + height: 4px; + border-radius: 4px; + background: var(--white); +} +.shopping-form-increment-button::after { + transform: rotate(90deg); +} + +.shopping-form-submit-button { + width: 100%; + max-width: 128px; + height: 32px; + border: 0; + border-radius: 4px; + color: var(--white); + font-weight: 700; + background: var(--orange-500); + transition: background-color 0.25s linear; +} + +.shopping-form-submit-button:hover { + background-color: var(--orange-300); +} + +.shopping-form-submit-button:active { + background-color: var(--orange-500); +} diff --git a/styles/global.css b/styles/global.css index e1b3be1..5b85695 100644 --- a/styles/global.css +++ b/styles/global.css @@ -5,7 +5,7 @@ text-decoration: none; box-sizing: border-box; } -body{ +body,input,button{ font-family: 'Roboto', sans-serif; font-size: 16px; color: var(--gray-500); diff --git a/styles/style.css b/styles/style.css index e69de29..ec15a98 100644 --- a/styles/style.css +++ b/styles/style.css @@ -0,0 +1,9 @@ +@import "global.css"; +@import "variables.css"; +@import "form.css"; + +.shopping-container { + max-width: 500px; + margin: 0 auto; + margin: 0 15px; +} \ No newline at end of file diff --git a/styles/variables.css b/styles/variables.css index e69de29..87a0247 100644 --- a/styles/variables.css +++ b/styles/variables.css @@ -0,0 +1,15 @@ +:root { + --white: #ffffff; + + --gray-100: #e5e5e5; + --gray-300: #bdbdbd; + --gray-500: #333333; + + --orange-300: #f6ad55; + --orange-500: #ed8936; +} + +.shopping-title { + margin: 32px 0; + font-size: 32px; +} \ No newline at end of file