-
+
diff --git a/styles/form.css b/styles/form.css
new file mode 100644
index 0000000..3aa8d89
--- /dev/null
+++ b/styles/form.css
@@ -0,0 +1,89 @@
+.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-wrapper{
+ display: flex;
+ align-items: center;
+ margin-left: 24px;
+}
+.shopping-form-quantity-input{
+ max-width: 64px;
+ text-align: center;
+ margin: 0 4px;
+}
+
+.shopping-form-quantity-button{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ width: 32px;
+ height: 32px;
+ border: 0;
+ border-radius: 4px;
+ background: var(--gray-100);
+ transition: background-color 0.2s linear;
+}
+
+.shopping-form-quantity-button:hover{
+ background: var(--orange-500);
+}
+
+.shopping-form-quantity-button:active{
+ background: var(--orange-300);
+}
+
+.shopping-form-quantity-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-color: var(--orange-500);
+ transition: background-color .2s linear;
+}
+
+.shopping-form-submit-button:hover{
+ background-color: var(--orange-300);
+}
+
+.shopping-form-submit-button:active{
+ background-color: var(--orange-500);
+}
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
new file mode 100644
index 0000000..b1f6d1e
--- /dev/null
+++ b/styles/global.css
@@ -0,0 +1,15 @@
+*{
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+body,
+input,
+button{
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ color: var(--gray-500);
+}
+button{
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..1730ec8
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,14 @@
+@import "/styles/global.css";
+@import "/styles/varibles.css";
+@import "/styles/form.css";
+
+.shopping-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 15px;
+}
+
+.shopping-title{
+ margin: 32px 0;
+ font-size: 32px;
+}
\ No newline at end of file
diff --git a/styles/varibles.css b/styles/varibles.css
new file mode 100644
index 0000000..0e39d09
--- /dev/null
+++ b/styles/varibles.css
@@ -0,0 +1,10 @@
+:root{
+ --white:#fff;
+ --gray-100: #e5e5ee;
+ --gray-300: #bdbdbd;
+ --gray-500: #333;
+
+ --orange-300: #f6ad55;
+ --orange-500: #ed8936;
+
+}
\ No newline at end of file