diff --git a/challenges/01-nesting/01/sass/style.sass b/challenges/01-nesting/01/sass/style.sass
new file mode 100644
index 0000000..72547b8
--- /dev/null
+++ b/challenges/01-nesting/01/sass/style.sass
@@ -0,0 +1,6 @@
+.primary-article
+ padding: 3rem 1rem
+
+
+.pointing-list
+ margin: 2rem 0
diff --git a/challenges/01-nesting/01/sass/style.scss b/challenges/01-nesting/01/sass/style.scss
new file mode 100644
index 0000000..8359b1c
--- /dev/null
+++ b/challenges/01-nesting/01/sass/style.scss
@@ -0,0 +1,7 @@
+.primary-article {
+ padding: 3rem 1rem;
+}
+
+.pointing-list {
+ margin: 2rem 0;
+}
diff --git a/challenges/01-nesting/02/finished-example/css/styles.css b/challenges/01-nesting/02/finished-example/css/styles.css
new file mode 100644
index 0000000..6af1222
--- /dev/null
+++ b/challenges/01-nesting/02/finished-example/css/styles.css
@@ -0,0 +1,38 @@
+body {
+ margin: 4rem;
+ font-size: 1.25rem;
+ font-family: system-ui, sans-serif;
+ text-align: center;
+}
+
+.btn {
+ display: inline-block;
+ padding: 1em 2em;
+ cursor: pointer;
+ border: 0;
+ text-decoration: none;
+ text-transform: uppercase;
+ color: white;
+}
+.btn__primary {
+ background: #3f637d;
+}
+.btn__primary:hover,
+.btn__primary:focus {
+ background: #2b4355;
+}
+.btn__secondary {
+ background: #4c4171;
+}
+.btn__secondary:hover,
+.btn__secondary:focus {
+ background: #2b2541;
+}
+.btn__accent {
+ background: #efca5d;
+ color: black;
+}
+.btn__accent:hover,
+.btn__accent:focus {
+ background: #d1a215;
+}
diff --git a/challenges/01-nesting/02/finished-example/nesting-challenge.html b/challenges/01-nesting/02/finished-example/nesting-challenge.html
new file mode 100644
index 0000000..a57c79f
--- /dev/null
+++ b/challenges/01-nesting/02/finished-example/nesting-challenge.html
@@ -0,0 +1,11 @@
+Nesting Challenge
+Style the following buttons so that they look like the provided sample. When you're done, not only should it look similar , but the file structure and final CSS file should match the provided files.
+
+
+Primary button
+Secondary button
+Accent button
\ No newline at end of file
diff --git a/challenges/01-nesting/02/img/file-structure.png b/challenges/01-nesting/02/img/file-structure.png
new file mode 100644
index 0000000..d603bbb
Binary files /dev/null and b/challenges/01-nesting/02/img/file-structure.png differ
diff --git a/challenges/01-nesting/02/img/final-css.png b/challenges/01-nesting/02/img/final-css.png
new file mode 100644
index 0000000..f47401d
Binary files /dev/null and b/challenges/01-nesting/02/img/final-css.png differ
diff --git a/challenges/01-nesting/02/img/final-layout.png b/challenges/01-nesting/02/img/final-layout.png
new file mode 100644
index 0000000..0ef86e5
Binary files /dev/null and b/challenges/01-nesting/02/img/final-layout.png differ
diff --git a/challenges/01-nesting/02/nesting-challenge.html b/challenges/01-nesting/02/nesting-challenge.html
new file mode 100644
index 0000000..a57c79f
--- /dev/null
+++ b/challenges/01-nesting/02/nesting-challenge.html
@@ -0,0 +1,11 @@
+Nesting Challenge
+Style the following buttons so that they look like the provided sample. When you're done, not only should it look similar , but the file structure and final CSS file should match the provided files.
+
+
+Primary button
+Secondary button
+Accent button
\ No newline at end of file
diff --git a/challenges/01-nesting/02/sass/styles.sass b/challenges/01-nesting/02/sass/styles.sass
new file mode 100644
index 0000000..e79d84a
--- /dev/null
+++ b/challenges/01-nesting/02/sass/styles.sass
@@ -0,0 +1,16 @@
+$clr-primary: hsl(206, 33%, 37%)
+$clr-secondary: hsl(253, 27%, 35%)
+$clr-accent: hsl(45, 82%, 65%)
+
+body
+ margin: 4rem
+ font:
+ size: 1.25rem
+ family: system-ui, sans-serif
+ text-align: center
+
+.btn
+ /* your code starts here */
+
+ /* your code ends here */
+
diff --git a/challenges/01-nesting/02/scss/styles.scss b/challenges/01-nesting/02/scss/styles.scss
new file mode 100644
index 0000000..1d78451
--- /dev/null
+++ b/challenges/01-nesting/02/scss/styles.scss
@@ -0,0 +1,18 @@
+$clr-primary: hsl(206, 33%, 37%);
+$clr-secondary: hsl(253, 27%, 35%);
+$clr-accent: hsl(45, 82%, 65%);
+
+body {
+ margin: 4rem;
+ font: {
+ size: 1.25rem;
+ family: system-ui, sans-serif;
+ }
+ text-align: center;
+}
+
+.btn {
+ /* your code starts here */
+
+ /* your code ends here */
+}
diff --git a/challenges/01-nesting/03/finished-example/css/styles.css b/challenges/01-nesting/03/finished-example/css/styles.css
new file mode 100644
index 0000000..46bc9eb
--- /dev/null
+++ b/challenges/01-nesting/03/finished-example/css/styles.css
@@ -0,0 +1,67 @@
+body {
+ margin: 4rem 0 0;
+ font-size: 1.25rem;
+ font-family: system-ui, sans-serif;
+ text-align: center;
+}
+
+section {
+ padding-block: 3rem;
+}
+
+.container {
+ width: min(100% - 4rem, 50rem);
+ margin-inline: auto;
+}
+
+.surface-primary {
+ background: #3f637d;
+ color: white;
+}
+
+.surface-secondary {
+ background: #4c4171;
+ color: white;
+}
+
+.surface-accent {
+ background: #efca5d;
+ color: black;
+}
+
+.btn {
+ display: inline-block;
+ padding: 1em 2em;
+ cursor: pointer;
+ border: 0;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+.surface-primary .btn,
+.surface-secondary .btn {
+ background: white;
+ color: black;
+}
+.surface-accent .btn {
+ color: white;
+ background: black;
+}
+.btn:hover,
+.btn:focus {
+ background: inherit;
+ color: inherit;
+ outline: currentColor 2px solid;
+}
+
+.text-subdued {
+ font-size: 1rem;
+}
+.surface-primary .text-subdued {
+ opacity: 0.8;
+}
+.surface-secondary .text-subdued {
+ opacity: 0.7;
+}
+.surface-accent .text-subdued {
+ opacity: 0.6;
+}
diff --git a/challenges/01-nesting/03/finished-example/nesting-challenge-02.html b/challenges/01-nesting/03/finished-example/nesting-challenge-02.html
new file mode 100644
index 0000000..f634142
--- /dev/null
+++ b/challenges/01-nesting/03/finished-example/nesting-challenge-02.html
@@ -0,0 +1,36 @@
+Nesting Challenge 02
+
+
+
Lorem, ipsum dolor.
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error similique, at incidunt consequuntur, eveniet
+ dignissimos asperiores sequi quas adipisci repellat placeat! Pariatur praesentium explicabo consequatur.
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum dicta voluptatum
+ amet ipsam sed
+ accusamus quia illum quibusdam maxime.
+
Lorem, ipsum
+
+
+
+
Illum, quos architecto!
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error similique, at incidunt consequuntur, eveniet
+ dignissimos asperiores sequi quas adipisci repellat placeat! Pariatur praesentium explicabo consequatur.
+
Quibusdam assumenda obcaecati nostrum, eos, necessitatibus sequi quod iure ratione,
+ molestiae quaerat alias
+ molestias rem. Aut eligendi laborum quae veritatis!
+
Quod, ducimus
+
+
+
+
Culpa, dolorum aliquid.
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error similique, at incidunt consequuntur, eveniet
+ dignissimos asperiores sequi quas adipisci repellat placeat! Pariatur praesentium explicabo consequatur.
+
Praesentium veniam excepturi quia possimus sint nulla repellendus aperiam nemo, saepe
+ dicta, ad, deleniti
+ mollitia optio vitae eligendi est a.
+
Doloribus, voluptatibus
+
\ No newline at end of file
diff --git a/challenges/01-nesting/03/img/file-structure.png b/challenges/01-nesting/03/img/file-structure.png
new file mode 100644
index 0000000..6bb34a6
Binary files /dev/null and b/challenges/01-nesting/03/img/file-structure.png differ
diff --git a/challenges/01-nesting/03/img/final-css.png b/challenges/01-nesting/03/img/final-css.png
new file mode 100644
index 0000000..eebfae0
Binary files /dev/null and b/challenges/01-nesting/03/img/final-css.png differ
diff --git a/challenges/01-nesting/03/img/final-layout.png b/challenges/01-nesting/03/img/final-layout.png
new file mode 100644
index 0000000..a238a18
Binary files /dev/null and b/challenges/01-nesting/03/img/final-layout.png differ
diff --git a/challenges/01-nesting/03/nesting-challenge-02.html b/challenges/01-nesting/03/nesting-challenge-02.html
new file mode 100644
index 0000000..f634142
--- /dev/null
+++ b/challenges/01-nesting/03/nesting-challenge-02.html
@@ -0,0 +1,36 @@
+Nesting Challenge 02
+
+
+
Lorem, ipsum dolor.
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error similique, at incidunt consequuntur, eveniet
+ dignissimos asperiores sequi quas adipisci repellat placeat! Pariatur praesentium explicabo consequatur.
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum dicta voluptatum
+ amet ipsam sed
+ accusamus quia illum quibusdam maxime.
+
Lorem, ipsum
+
+
+
+
Illum, quos architecto!
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error similique, at incidunt consequuntur, eveniet
+ dignissimos asperiores sequi quas adipisci repellat placeat! Pariatur praesentium explicabo consequatur.
+
Quibusdam assumenda obcaecati nostrum, eos, necessitatibus sequi quod iure ratione,
+ molestiae quaerat alias
+ molestias rem. Aut eligendi laborum quae veritatis!
+
Quod, ducimus
+
+
+
+
Culpa, dolorum aliquid.
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error similique, at incidunt consequuntur, eveniet
+ dignissimos asperiores sequi quas adipisci repellat placeat! Pariatur praesentium explicabo consequatur.
+
Praesentium veniam excepturi quia possimus sint nulla repellendus aperiam nemo, saepe
+ dicta, ad, deleniti
+ mollitia optio vitae eligendi est a.
+
Doloribus, voluptatibus
+
\ No newline at end of file
diff --git a/challenges/01-nesting/03/sass/styles.sass b/challenges/01-nesting/03/sass/styles.sass
new file mode 100644
index 0000000..e79d84a
--- /dev/null
+++ b/challenges/01-nesting/03/sass/styles.sass
@@ -0,0 +1,16 @@
+$clr-primary: hsl(206, 33%, 37%)
+$clr-secondary: hsl(253, 27%, 35%)
+$clr-accent: hsl(45, 82%, 65%)
+
+body
+ margin: 4rem
+ font:
+ size: 1.25rem
+ family: system-ui, sans-serif
+ text-align: center
+
+.btn
+ /* your code starts here */
+
+ /* your code ends here */
+
diff --git a/challenges/01-nesting/03/scss/styles.scss b/challenges/01-nesting/03/scss/styles.scss
new file mode 100644
index 0000000..8ae218d
--- /dev/null
+++ b/challenges/01-nesting/03/scss/styles.scss
@@ -0,0 +1,54 @@
+@use "mixins";
+
+$clr-primary-400: hsl(206, 33%, 37%);
+$clr-primary-500: hsl(206, 33%, 25%);
+$clr-secondary-400: hsl(253, 27%, 35%);
+$clr-secondary-500: hsl(253, 27%, 20%);
+$clr-accent-400: hsl(45, 82%, 65%);
+$clr-accent-500: hsl(45, 82%, 45%);
+
+body {
+ margin: 4rem 0 0;
+ font: {
+ size: 1.25rem;
+ family: system-ui, sans-serif;
+ }
+ text-align: center;
+}
+
+section {
+ padding-block: 3rem;
+}
+
+.container {
+ width: min(100% - 4rem, 50rem);
+ margin-inline: auto;
+}
+
+.surface-primary {
+ background: $clr-primary-400;
+ color: white;
+}
+
+.surface-secondary {
+ background: $clr-secondary-400;
+ color: white;
+}
+
+.surface-accent {
+ background: $clr-accent-400;
+ color: black;
+}
+
+.btn {
+ display: inline-block;
+ padding: 1em 2em;
+ cursor: pointer;
+ border: 0;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+
+.text-subdued {
+ font-size: 1rem;
+}
diff --git a/challenges/02-variables/01/colors.md b/challenges/02-variables/01/colors.md
new file mode 100644
index 0000000..577adfd
--- /dev/null
+++ b/challenges/02-variables/01/colors.md
@@ -0,0 +1,19 @@
+# Colors
+
+## White: #f8f7f7
+
+- page background
+- outline button background
+
+## Black: #201e1f
+
+- body color
+- button hover/focus background
+- shadow color on the card
+
+## Red: #da3f0b
+
+- title color
+- button borders
+- primary button background
+- button hover/focus shadow
diff --git a/challenges/02-variables/01/finished-example/css/variable-challenge.css b/challenges/02-variables/01/finished-example/css/variable-challenge.css
new file mode 100644
index 0000000..ca7176d
--- /dev/null
+++ b/challenges/02-variables/01/finished-example/css/variable-challenge.css
@@ -0,0 +1,53 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+}
+
+body {
+ font-size: 1.75rem;
+ font-family: system-ui, sans-serif;
+ line-height: 1.6;
+ background: #f8f7f7;
+ color: #201e1f;
+ /* this is being used to center the content on the screen */
+ display: grid;
+ height: 100vh;
+ place-items: center;
+}
+
+.card {
+ display: grid;
+ gap: 0.75em;
+ width: min(90%, 60rem);
+ padding: 2em;
+ box-shadow: 0 0 2rem #201e1f;
+ border-radius: 0.5rem;
+}
+.card__title {
+ color: #da3f0b;
+}
+
+.btn {
+ display: inline-block;
+ padding: 0.5em 1.5em;
+ text-decoration: none;
+ border: #da3f0b solid 3px;
+ border-radius: 0.5rem;
+}
+.btn--primary {
+ background: #da3f0b;
+ color: #f8f7f7;
+}
+.btn--outline {
+ color: #da3f0b;
+}
+.btn:hover, .btn:focus {
+ background: #201e1f;
+ color: #f8f7f7;
+ box-shadow: 0 0 1rem #da3f0b;
+}
+
+.flex-group {
+ display: flex;
+ gap: 1rem;
+}/*# sourceMappingURL=variable-challenge.css.map */
\ No newline at end of file
diff --git a/challenges/02-variables/01/finished-example/index.html b/challenges/02-variables/01/finished-example/index.html
new file mode 100644
index 0000000..d2d4994
--- /dev/null
+++ b/challenges/02-variables/01/finished-example/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ Variable challenge
+
+
This is a card
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+ ex
+ ea commodo consequat.
+
+
Variable challenge
+
+
This is a card
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+ ex
+ ea commodo consequat.
+
+
Mixin Challenge
+
+
Section Three
+
badge
+
badge
+
Mixin Challenge
+
+
Section Three
+
badge
+
badge
+
+
+
+
\ No newline at end of file
diff --git a/challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/shoes.jpg b/challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/shoes.jpg differ
diff --git a/challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/w-jacket.jpg b/challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/w-jacket.jpg differ
diff --git a/challenges/03-mixins/02-tshirts-themes/design-and-assets/design-info.md b/challenges/03-mixins/02-tshirts-themes/design-and-assets/design-info.md
new file mode 100644
index 0000000..01006df
--- /dev/null
+++ b/challenges/03-mixins/02-tshirts-themes/design-and-assets/design-info.md
@@ -0,0 +1,31 @@
+# Design info - t-shirt project
+
+## Typography
+
+### Fonts
+
+- Roboto
+
+ - Regular / 400
+ - Bold / 700
+ - Black / 900
+
+- Sizes
+ - 400: 1.125rem
+ - 500: 1.25rem
+ - 600: 2rem
+ - 700: 3rem
+
+### Colors
+
+- red-400: hsla(357, 100%, 68%, 1);
+- red-500: hsl(357, 74%, 40%);
+- blue-800: hsla(216, 71%, 16%, 1);
+- neutral-100: hsl(0 0% 100%);
+
+### Sizes
+
+- size-8: .5rem
+- size-16: 1rem
+- size-32: 2rem
+- size-36: 3rem
diff --git a/challenges/03-mixins/02-tshirts-themes/design-and-assets/the-design.png b/challenges/03-mixins/02-tshirts-themes/design-and-assets/the-design.png
new file mode 100644
index 0000000..59ac15c
Binary files /dev/null and b/challenges/03-mixins/02-tshirts-themes/design-and-assets/the-design.png differ
diff --git a/challenges/finsihed-versoins/01/css/styles.css b/challenges/finsihed-versoins/01/css/styles.css
new file mode 100644
index 0000000..fa4f473
--- /dev/null
+++ b/challenges/finsihed-versoins/01/css/styles.css
@@ -0,0 +1,80 @@
+body {
+ font-family: system-ui;
+ margin: 0;
+}
+
+.section-one,
+.section-two,
+.section-three {
+ text-align: center;
+ padding: 10vh 0;
+}
+
+.title::after {
+ content: "";
+ display: block;
+ width: 5rem;
+ height: 1px;
+ background-color: #12a7cc;
+ margin: 1rem auto;
+}
+
+.section-one {
+ background-image: linear-gradient(45deg, red, blue);
+ color: white;
+}
+
+.section-two {
+ background-image: linear-gradient(-72deg, purple, limegreen);
+ color: white;
+}
+
+.section-three {
+ background-image: linear-gradient(0deg, orange, yellow);
+}
+
+.button-one {
+ display: inline-block;
+ padding: 0.5em 1.5em;
+ color: white;
+ background-color: black;
+}
+.button-one:hover, .button-one:focus {
+ color: black;
+ background-color: white;
+}
+
+.button-two {
+ display: inline-block;
+ padding: 1em 3em;
+ color: yellow;
+ background-color: #3b0f0f;
+}
+.button-two:hover, .button-two:focus {
+ color: #3b0f0f;
+ background-color: yellow;
+}
+
+.badge-one {
+ display: inline-block;
+ padding: 0.5em 1.5em;
+ color: black;
+ background-color: white;
+}
+.badge-one:hover, .badge-one:focus {
+ color: black;
+ background-color: white;
+}
+
+.badge-two {
+ display: inline-block;
+ padding: 0.25em 0.75em;
+ color: #006eff;
+ background-color: #0f0f1d;
+}
+.badge-two:hover, .badge-two:focus {
+ color: #006eff;
+ background-color: #0f0f1d;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/challenges/finsihed-versoins/01/css/styles.css.map b/challenges/finsihed-versoins/01/css/styles.css.map
new file mode 100644
index 0000000..a91c736
--- /dev/null
+++ b/challenges/finsihed-versoins/01/css/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/styles.scss"],"names":[],"mappings":"AA2BA;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AA/BA;EACE;EACA;EACA,OAgCwB;EA/BxB,QA+B8B;EA9B9B,kBA8BmC;EA7BnC;;;AAgCJ;EA1CE;EA4CA;;;AAGF;EA/CE;EAiDA;;;AAGF;EApDE;;;AAwDF;EAzCE;EACA;EACA,OAwC2B;EAvC3B,kBAuCkC;;AAtClC;EAEE,OAoCuC;EAnCvC,kBAmC8C;;;AAGlD;EA7CE;EACA;EACA,OA4CyB;EA3CzB,kBA2CiC;;AA1CjC;EAEE,OAwCgD;EAvChD,kBAuCiE;;;AAGrE;EAjDE;EACA;EACA,OAgD2B;EA/C3B,kBA+CkC;;AA9ClC;EAEE,OA4CyB;EA3CzB,kBA2CgC;;;AAGpC;EArDE;EACA;EACA,OAoD4B;EAnD5B,kBAmD8C;;AAlD9C;EAEE,OAgD0B;EA/C1B,kBA+C4C","file":"styles.css"}
\ No newline at end of file
diff --git a/challenges/finsihed-versoins/01/finished-example/css/styles.css b/challenges/finsihed-versoins/01/finished-example/css/styles.css
new file mode 100644
index 0000000..a53cde5
--- /dev/null
+++ b/challenges/finsihed-versoins/01/finished-example/css/styles.css
@@ -0,0 +1,80 @@
+body {
+ font-family: system-ui;
+ margin: 0;
+}
+
+.section-one,
+.section-two,
+.section-three {
+ text-align: center;
+ padding: 10vh 0;
+}
+
+.title::after {
+ content: "";
+ display: block;
+ width: 5rem;
+ height: 1px;
+ background-color: black;
+ margin: 2rem auto;
+}
+
+.section-one {
+ background-image: linear-gradient(45deg, red, blue);
+ color: white;
+}
+
+.section-two {
+ background-image: linear-gradient(-72deg, purple, limegreen);
+ color: white;
+}
+
+.section-three {
+ background-image: linear-gradient(0deg, orange, yellow);
+}
+
+.button-one {
+ display: inline-block;
+ padding: 0.5em 1.5em;
+ color: white;
+ background-color: black;
+}
+.button-one:hover, .button-one:focus {
+ color: black;
+ background-color: white;
+}
+
+.button-two {
+ display: inline-block;
+ padding: 1em 3em;
+ color: yellow;
+ background-color: #3b0f0f;
+}
+.button-two:hover, .button-two:focus {
+ color: #3b0f0f;
+ background-color: yellow;
+}
+
+.badge-one {
+ display: inline-block;
+ padding: 0.5em 1.5em;
+ color: black;
+ background-color: white;
+}
+.badge-one:hover, .badge-one:focus {
+ color: black;
+ background-color: white;
+}
+
+.badge-two {
+ display: inline-block;
+ padding: 0.25em 0.75em;
+ color: #006eff;
+ background-color: #0f0f1d;
+}
+.badge-two:hover, .badge-two:focus {
+ color: #006eff;
+ background-color: #0f0f1d;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/challenges/finsihed-versoins/01/finished-example/index.html b/challenges/finsihed-versoins/01/finished-example/index.html
new file mode 100644
index 0000000..0ac7fa5
--- /dev/null
+++ b/challenges/finsihed-versoins/01/finished-example/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+ Mixin Challenge
+
+
Section Three
+
badge
+
badge
+
Mixin Challenge
+
+
Section Three
+
badge
+
badge
+
Hosting Plans
+ Hosting Plans
+ Hosting Plans
+
+
+
+
+
Free
+
+
+ 1 domain
+
+
+ 5gb of bandwidth
+
+
+ 1gb of diskspace
+
+
+ 5,000 monthly uniques
+
+
+
$0/month
+
Get started
+
+
+
+
Tiny
+
+
+ 5 domain
+
+
+ 250gb of bandwidth
+
+
+ 5gb of diskspace
+
+
+ 15,000 monthly uniques
+
+
+
$19/month
+
Get started
+
+
+
+
Large
+
+
+ 15 domain
+
+
+ 750gb of bandwidth
+
+
+ 20gb of diskspace
+
+
+ 50,000 monthly uniques
+
+
+
$49/month
+
Get started
+
+
+
+
+
Hosting Plans
+ Hosting Plans
+
+
+
+
+
Free
+
+
+ 1 domain
+
+
+ 5gb of bandwidth
+
+
+ 1gb of diskspace
+
+
+ 5,000 monthly uniques
+
+
+
$0/month
+
Get started
+
+
+
+
Tiny
+
+
+ 5 domain
+
+
+ 250gb of bandwidth
+
+
+ 5gb of diskspace
+
+
+ 15,000 monthly uniques
+
+
+
$19/month
+
Get started
+
+
+
+
Large
+
+
+ 15 domain
+
+
+ 750gb of bandwidth
+
+
+ 20gb of diskspace
+
+
+ 50,000 monthly uniques
+
+
+
$49/month
+
Get started
+
+
+
+
+
Hosting Plans
+ Hosting Plans
+
+
+
+
+
Free
+
+
+ 1 domain
+
+
+ 5gb of bandwidth
+
+
+ 1gb of diskspace
+
+
+ 5,000 monthly uniques
+
+
+
$0/month
+
Get started
+
+
+
+
Tiny
+
+
+ 5 domain
+
+
+ 250gb of bandwidth
+
+
+ 5gb of diskspace
+
+
+ 15,000 monthly uniques
+
+
+
$19/month
+
Get started
+
+
+
+
Large
+
+
+ 15 domain
+
+
+ 750gb of bandwidth
+
+
+ 20gb of diskspace
+
+
+ 50,000 monthly uniques
+
+
+
$49/month
+
Get started
+
+
+
+
+
Hosting Plans
+ Hosting Plans
+
+
+
+
+
Free
+
+
+ 1 domain
+
+
+ 5gb of bandwidth
+
+
+ 1gb of diskspace
+
+
+ 5,000 monthly uniques
+
+
+
$0/month
+
Get started
+
+
+
+
Tiny
+
+
+ 5 domain
+
+
+ 250gb of bandwidth
+
+
+ 5gb of diskspace
+
+
+ 15,000 monthly uniques
+
+
+
$19/month
+
Get started
+
+
+
+
Large
+
+
+ 15 domain
+
+
+ 750gb of bandwidth
+
+
+ 20gb of diskspace
+
+
+ 50,000 monthly uniques
+
+
+
$49/month
+
Get started
+
+
+
+
+
Hosting Plans
+ Hosting Plans
+
+
+
+
+
Free
+
+
+ 1 domain
+
+
+ 5gb of bandwidth
+
+
+ 1gb of diskspace
+
+
+ 5,000 monthly uniques
+
+
+
$0/month
+
Get started
+
+
+
+
Tiny
+
+
+ 5 domain
+
+
+ 250gb of bandwidth
+
+
+ 5gb of diskspace
+
+
+ 15,000 monthly uniques
+
+
+
$19/month
+
Get started
+
+
+
+
Large
+
+
+ 15 domain
+
+
+ 750gb of bandwidth
+
+
+ 20gb of diskspace
+
+
+ 50,000 monthly uniques
+
+
+
$49/month
+
Get started
+
+
+
+
+
Hosting Plans
+ Hosting Plans
+
+
+
+
+
Free
+
+
+ 1 domain
+
+
+ 5gb of bandwidth
+
+
+ 1gb of diskspace
+
+
+ 5,000 monthly uniques
+
+
+
$0/month
+
Get started
+
+
+
+
Tiny
+
+
+ 5 domain
+
+
+ 250gb of bandwidth
+
+
+ 5gb of diskspace
+
+
+ 15,000 monthly uniques
+
+
+
$19/month
+
Get started
+
+
+
+
Large
+
+
+ 15 domain
+
+
+ 750gb of bandwidth
+
+
+ 20gb of diskspace
+
+
+ 50,000 monthly uniques
+
+
+
$49/month
+
Get started
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/00-blank-starter/src/assets/shoes.jpg b/projects/02-tshirts/00-blank-starter/src/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/projects/02-tshirts/00-blank-starter/src/assets/shoes.jpg differ
diff --git a/projects/02-tshirts/00-blank-starter/src/assets/w-jacket.jpg b/projects/02-tshirts/00-blank-starter/src/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/projects/02-tshirts/00-blank-starter/src/assets/w-jacket.jpg differ
diff --git a/projects/02-tshirts/00-blank-starter/src/index.html b/projects/02-tshirts/00-blank-starter/src/index.html
new file mode 100644
index 0000000..8339692
--- /dev/null
+++ b/projects/02-tshirts/00-blank-starter/src/index.html
@@ -0,0 +1,121 @@
+
+
+
+ T-shirts
+
+
+
T-Shirts
+
Browse our selection of high-quality t-shirts
+
+
+
+
+
+
+
+
+
+
+
Men's shirts
+
Out Cast
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
Woman's shirts
+
Feline
+
+
+
+
+ add to cart
+
+
+
+
+
+
Browser other categories
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/00-blank-starter/src/scss/style.scss b/projects/02-tshirts/00-blank-starter/src/scss/style.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/02-tshirts/01-the-html/.gitignore b/projects/02-tshirts/01-the-html/.gitignore
new file mode 100644
index 0000000..18d5e87
--- /dev/null
+++ b/projects/02-tshirts/01-the-html/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+public/
\ No newline at end of file
diff --git a/projects/02-tshirts/01-the-html/package.json b/projects/02-tshirts/01-the-html/package.json
new file mode 100644
index 0000000..ecb966f
--- /dev/null
+++ b/projects/02-tshirts/01-the-html/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "project-name",
+ "version": "1.0.0",
+ "description": "Project description",
+ "main": "public/index.html",
+ "author": "author name",
+ "scripts": {
+ "build:sass": "sass --no-source-map src/sass:public/css",
+ "copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
+ "copy:html": "copyfiles -u 1 ./src/*.html public",
+ "copy": "npm-run-all --parallel copy:*",
+ "watch:assets": "onchange 'src/assest/**/*' -- npm run copy:assets",
+ "watch:html": "onchange \"src/*.html\" -- npm run copy:html",
+ "watch:sass": "sass --watch src/sass:public/css",
+ "watch": "npm-run-all --parallel watch:*",
+ "serve": "browser-sync start --server public --files public",
+ "start": "npm-run-all copy --parallel watch serve",
+ "build": "npm-run-all copy:html build:*",
+ "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
+ },
+ "dependencies": {
+ "autoprefixer": "^10.4.2",
+ "browser-sync": "^2.27.7",
+ "copyfiles": "^2.4.1",
+ "cssnano": "^5.0.17",
+ "npm-run-all": "^4.1.5",
+ "onchange": "^7.1.0",
+ "postcss-cli": "^9.1.0",
+ "sass": "^1.49.8"
+ }
+}
diff --git a/projects/02-tshirts/01-the-html/src/assets/feline.jpg b/projects/02-tshirts/01-the-html/src/assets/feline.jpg
new file mode 100644
index 0000000..6f30690
Binary files /dev/null and b/projects/02-tshirts/01-the-html/src/assets/feline.jpg differ
diff --git a/projects/02-tshirts/01-the-html/src/assets/m-jacket.jpg b/projects/02-tshirts/01-the-html/src/assets/m-jacket.jpg
new file mode 100644
index 0000000..26a4bcc
Binary files /dev/null and b/projects/02-tshirts/01-the-html/src/assets/m-jacket.jpg differ
diff --git a/projects/02-tshirts/01-the-html/src/assets/outcast.jpg b/projects/02-tshirts/01-the-html/src/assets/outcast.jpg
new file mode 100644
index 0000000..5c723f3
Binary files /dev/null and b/projects/02-tshirts/01-the-html/src/assets/outcast.jpg differ
diff --git a/projects/02-tshirts/01-the-html/src/assets/peace.jpg b/projects/02-tshirts/01-the-html/src/assets/peace.jpg
new file mode 100644
index 0000000..de44ffb
Binary files /dev/null and b/projects/02-tshirts/01-the-html/src/assets/peace.jpg differ
diff --git a/projects/02-tshirts/01-the-html/src/assets/plus-icon.svg b/projects/02-tshirts/01-the-html/src/assets/plus-icon.svg
new file mode 100644
index 0000000..f1b7771
--- /dev/null
+++ b/projects/02-tshirts/01-the-html/src/assets/plus-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/01-the-html/src/assets/shoes.jpg b/projects/02-tshirts/01-the-html/src/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/projects/02-tshirts/01-the-html/src/assets/shoes.jpg differ
diff --git a/projects/02-tshirts/01-the-html/src/assets/w-jacket.jpg b/projects/02-tshirts/01-the-html/src/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/projects/02-tshirts/01-the-html/src/assets/w-jacket.jpg differ
diff --git a/projects/02-tshirts/01-the-html/src/index.html b/projects/02-tshirts/01-the-html/src/index.html
new file mode 100644
index 0000000..8339692
--- /dev/null
+++ b/projects/02-tshirts/01-the-html/src/index.html
@@ -0,0 +1,121 @@
+
+
+
+ T-shirts
+
+
+
T-Shirts
+
Browse our selection of high-quality t-shirts
+
+
+
+
+
+
+
+
+
+
+
Men's shirts
+
Out Cast
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
Woman's shirts
+
Feline
+
+
+
+
+ add to cart
+
+
+
+
+
+
Browser other categories
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/01-the-html/src/scss/style.scss b/projects/02-tshirts/01-the-html/src/scss/style.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/02-tshirts/02-abstracts/.gitignore b/projects/02-tshirts/02-abstracts/.gitignore
new file mode 100644
index 0000000..18d5e87
--- /dev/null
+++ b/projects/02-tshirts/02-abstracts/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+public/
\ No newline at end of file
diff --git a/projects/02-tshirts/02-abstracts/package.json b/projects/02-tshirts/02-abstracts/package.json
new file mode 100644
index 0000000..ecb966f
--- /dev/null
+++ b/projects/02-tshirts/02-abstracts/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "project-name",
+ "version": "1.0.0",
+ "description": "Project description",
+ "main": "public/index.html",
+ "author": "author name",
+ "scripts": {
+ "build:sass": "sass --no-source-map src/sass:public/css",
+ "copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
+ "copy:html": "copyfiles -u 1 ./src/*.html public",
+ "copy": "npm-run-all --parallel copy:*",
+ "watch:assets": "onchange 'src/assest/**/*' -- npm run copy:assets",
+ "watch:html": "onchange \"src/*.html\" -- npm run copy:html",
+ "watch:sass": "sass --watch src/sass:public/css",
+ "watch": "npm-run-all --parallel watch:*",
+ "serve": "browser-sync start --server public --files public",
+ "start": "npm-run-all copy --parallel watch serve",
+ "build": "npm-run-all copy:html build:*",
+ "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
+ },
+ "dependencies": {
+ "autoprefixer": "^10.4.2",
+ "browser-sync": "^2.27.7",
+ "copyfiles": "^2.4.1",
+ "cssnano": "^5.0.17",
+ "npm-run-all": "^4.1.5",
+ "onchange": "^7.1.0",
+ "postcss-cli": "^9.1.0",
+ "sass": "^1.49.8"
+ }
+}
diff --git a/projects/02-tshirts/02-abstracts/src/assets/feline.jpg b/projects/02-tshirts/02-abstracts/src/assets/feline.jpg
new file mode 100644
index 0000000..6f30690
Binary files /dev/null and b/projects/02-tshirts/02-abstracts/src/assets/feline.jpg differ
diff --git a/projects/02-tshirts/02-abstracts/src/assets/m-jacket.jpg b/projects/02-tshirts/02-abstracts/src/assets/m-jacket.jpg
new file mode 100644
index 0000000..26a4bcc
Binary files /dev/null and b/projects/02-tshirts/02-abstracts/src/assets/m-jacket.jpg differ
diff --git a/projects/02-tshirts/02-abstracts/src/assets/outcast.jpg b/projects/02-tshirts/02-abstracts/src/assets/outcast.jpg
new file mode 100644
index 0000000..5c723f3
Binary files /dev/null and b/projects/02-tshirts/02-abstracts/src/assets/outcast.jpg differ
diff --git a/projects/02-tshirts/02-abstracts/src/assets/peace.jpg b/projects/02-tshirts/02-abstracts/src/assets/peace.jpg
new file mode 100644
index 0000000..de44ffb
Binary files /dev/null and b/projects/02-tshirts/02-abstracts/src/assets/peace.jpg differ
diff --git a/projects/02-tshirts/02-abstracts/src/assets/plus-icon.svg b/projects/02-tshirts/02-abstracts/src/assets/plus-icon.svg
new file mode 100644
index 0000000..f1b7771
--- /dev/null
+++ b/projects/02-tshirts/02-abstracts/src/assets/plus-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/02-abstracts/src/assets/shoes.jpg b/projects/02-tshirts/02-abstracts/src/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/projects/02-tshirts/02-abstracts/src/assets/shoes.jpg differ
diff --git a/projects/02-tshirts/02-abstracts/src/assets/w-jacket.jpg b/projects/02-tshirts/02-abstracts/src/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/projects/02-tshirts/02-abstracts/src/assets/w-jacket.jpg differ
diff --git a/projects/02-tshirts/02-abstracts/src/index.html b/projects/02-tshirts/02-abstracts/src/index.html
new file mode 100644
index 0000000..8339692
--- /dev/null
+++ b/projects/02-tshirts/02-abstracts/src/index.html
@@ -0,0 +1,121 @@
+
+
+
+ T-shirts
+
+
+
T-Shirts
+
Browse our selection of high-quality t-shirts
+
+
+
+
+
+
+
+
+
+
+
Men's shirts
+
Out Cast
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
Woman's shirts
+
Feline
+
+
+
+
+ add to cart
+
+
+
+
+
+
Browser other categories
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/02-abstracts/src/scss/style.scss b/projects/02-tshirts/02-abstracts/src/scss/style.scss
new file mode 100644
index 0000000..5379d5f
--- /dev/null
+++ b/projects/02-tshirts/02-abstracts/src/scss/style.scss
@@ -0,0 +1,42 @@
+// variables
+
+$font-family: "Roboto", sans-serif;
+
+$fw-400: 400;
+$fw-700: 700;
+$fw-900: 900;
+
+$fs-400: 1.125rem;
+$fs-500: 1.25rem;
+$fs-600: 2rem;
+$fs-700: 3rem;
+
+$red-400: hsla(357, 100%, 68%, 1);
+$red-500: hsl(357, 74%, 40%);
+$blue-800: hsla(216, 71%, 16%, 1);
+$neutral-100: hsl(0 0% 100%);
+
+$size-8: 0.5rem;
+$size-16: 1rem;
+$size-32: 2rem;
+$size-36: 3rem;
+
+// Placeholders
+
+%shadow {
+ box-shadow: 0.25rem 0.25rem 1rem rgb(0 0 0 / 0.15);
+}
+
+// Mixins
+
+@mixin interative-scale($color, $bg, $scale: 1.05) {
+ transform: scale(1);
+ transition: transform 350ms ease;
+
+ &:hover,
+ &:focus {
+ transform: scale($scale);
+ color: $color;
+ background-color: $bg;
+ }
+}
diff --git a/projects/02-tshirts/03-base/.gitignore b/projects/02-tshirts/03-base/.gitignore
new file mode 100644
index 0000000..18d5e87
--- /dev/null
+++ b/projects/02-tshirts/03-base/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+public/
\ No newline at end of file
diff --git a/projects/02-tshirts/03-base/package.json b/projects/02-tshirts/03-base/package.json
new file mode 100644
index 0000000..ecb966f
--- /dev/null
+++ b/projects/02-tshirts/03-base/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "project-name",
+ "version": "1.0.0",
+ "description": "Project description",
+ "main": "public/index.html",
+ "author": "author name",
+ "scripts": {
+ "build:sass": "sass --no-source-map src/sass:public/css",
+ "copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
+ "copy:html": "copyfiles -u 1 ./src/*.html public",
+ "copy": "npm-run-all --parallel copy:*",
+ "watch:assets": "onchange 'src/assest/**/*' -- npm run copy:assets",
+ "watch:html": "onchange \"src/*.html\" -- npm run copy:html",
+ "watch:sass": "sass --watch src/sass:public/css",
+ "watch": "npm-run-all --parallel watch:*",
+ "serve": "browser-sync start --server public --files public",
+ "start": "npm-run-all copy --parallel watch serve",
+ "build": "npm-run-all copy:html build:*",
+ "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
+ },
+ "dependencies": {
+ "autoprefixer": "^10.4.2",
+ "browser-sync": "^2.27.7",
+ "copyfiles": "^2.4.1",
+ "cssnano": "^5.0.17",
+ "npm-run-all": "^4.1.5",
+ "onchange": "^7.1.0",
+ "postcss-cli": "^9.1.0",
+ "sass": "^1.49.8"
+ }
+}
diff --git a/projects/02-tshirts/03-base/src/assets/feline.jpg b/projects/02-tshirts/03-base/src/assets/feline.jpg
new file mode 100644
index 0000000..6f30690
Binary files /dev/null and b/projects/02-tshirts/03-base/src/assets/feline.jpg differ
diff --git a/projects/02-tshirts/03-base/src/assets/m-jacket.jpg b/projects/02-tshirts/03-base/src/assets/m-jacket.jpg
new file mode 100644
index 0000000..26a4bcc
Binary files /dev/null and b/projects/02-tshirts/03-base/src/assets/m-jacket.jpg differ
diff --git a/projects/02-tshirts/03-base/src/assets/outcast.jpg b/projects/02-tshirts/03-base/src/assets/outcast.jpg
new file mode 100644
index 0000000..5c723f3
Binary files /dev/null and b/projects/02-tshirts/03-base/src/assets/outcast.jpg differ
diff --git a/projects/02-tshirts/03-base/src/assets/peace.jpg b/projects/02-tshirts/03-base/src/assets/peace.jpg
new file mode 100644
index 0000000..de44ffb
Binary files /dev/null and b/projects/02-tshirts/03-base/src/assets/peace.jpg differ
diff --git a/projects/02-tshirts/03-base/src/assets/plus-icon.svg b/projects/02-tshirts/03-base/src/assets/plus-icon.svg
new file mode 100644
index 0000000..f1b7771
--- /dev/null
+++ b/projects/02-tshirts/03-base/src/assets/plus-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/03-base/src/assets/shoes.jpg b/projects/02-tshirts/03-base/src/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/projects/02-tshirts/03-base/src/assets/shoes.jpg differ
diff --git a/projects/02-tshirts/03-base/src/assets/w-jacket.jpg b/projects/02-tshirts/03-base/src/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/projects/02-tshirts/03-base/src/assets/w-jacket.jpg differ
diff --git a/projects/02-tshirts/03-base/src/index.html b/projects/02-tshirts/03-base/src/index.html
new file mode 100644
index 0000000..fd2b59e
--- /dev/null
+++ b/projects/02-tshirts/03-base/src/index.html
@@ -0,0 +1,124 @@
+
+
+
+ T-shirts
+
+
+
T-Shirts
+
Browse our selection of high-quality t-shirts
+
+
+
+
+
+
+
+
+
+
+
Men's shirts
+
Out Cast
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
Woman's shirts
+
Feline
+
+
+
+
+ add to cart
+
+
+
+
+
+
Browser other categories
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/03-base/src/sass/style.scss b/projects/02-tshirts/03-base/src/sass/style.scss
new file mode 100644
index 0000000..f92cf9d
--- /dev/null
+++ b/projects/02-tshirts/03-base/src/sass/style.scss
@@ -0,0 +1,118 @@
+// variables
+
+$font-family: "Roboto", sans-serif;
+
+$fw-400: 400;
+$fw-700: 700;
+$fw-900: 900;
+
+$fs-400: 1.125rem;
+$fs-500: 1.25rem;
+$fs-600: 2rem;
+$fs-700: 3rem;
+
+$red-400: hsla(357, 100%, 68%, 1);
+$red-500: hsl(357, 74%, 40%);
+$blue-800: hsla(216, 71%, 16%, 1);
+$neutral-100: hsl(0 0% 100%);
+
+$size-8: 0.5rem;
+$size-16: 1rem;
+$size-32: 2rem;
+$size-36: 3rem;
+
+// Placeholders
+
+%shadow {
+ box-shadow: 0.25rem 0.25rem 1rem rgb(0 0 0 / 0.15);
+}
+
+// Mixins
+
+@mixin interative-scale($color, $bg, $scale: 1.05) {
+ transform: scale(1);
+ transition: transform 350ms ease;
+
+ &:hover,
+ &:focus {
+ transform: scale($scale);
+ color: $color;
+ background-color: $bg;
+ }
+}
+
+// reset
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ font: inherit;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+}
+
+body {
+ font-family: $font-family;
+ font-size: $fs-400;
+ color: $blue-800;
+
+ // for demo
+ margin: $size-36 0;
+}
+
+// composition
+
+.container {
+ width: min(58rem, 100% - 2rem);
+ margin-inline: auto;
+}
+
+.even-columns {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr;
+ gap: var(--gap, $size-16);
+}
+
+// Utilities
+
+.margin-block-xl {
+ margin-block: $size-36;
+}
+
+.fw-bold {
+ font-weight: 700;
+}
+.fw-black {
+ font-weight: 900;
+}
+
+.text-center {
+ text-align: center;
+}
+.text-accent {
+ color: $red-400;
+}
+
+.page-title {
+ font-size: $fs-700;
+ font-weight: 900;
+}
+
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
diff --git a/projects/02-tshirts/04-the-product-card/.gitignore b/projects/02-tshirts/04-the-product-card/.gitignore
new file mode 100644
index 0000000..18d5e87
--- /dev/null
+++ b/projects/02-tshirts/04-the-product-card/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+public/
\ No newline at end of file
diff --git a/projects/02-tshirts/04-the-product-card/package.json b/projects/02-tshirts/04-the-product-card/package.json
new file mode 100644
index 0000000..ecb966f
--- /dev/null
+++ b/projects/02-tshirts/04-the-product-card/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "project-name",
+ "version": "1.0.0",
+ "description": "Project description",
+ "main": "public/index.html",
+ "author": "author name",
+ "scripts": {
+ "build:sass": "sass --no-source-map src/sass:public/css",
+ "copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
+ "copy:html": "copyfiles -u 1 ./src/*.html public",
+ "copy": "npm-run-all --parallel copy:*",
+ "watch:assets": "onchange 'src/assest/**/*' -- npm run copy:assets",
+ "watch:html": "onchange \"src/*.html\" -- npm run copy:html",
+ "watch:sass": "sass --watch src/sass:public/css",
+ "watch": "npm-run-all --parallel watch:*",
+ "serve": "browser-sync start --server public --files public",
+ "start": "npm-run-all copy --parallel watch serve",
+ "build": "npm-run-all copy:html build:*",
+ "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
+ },
+ "dependencies": {
+ "autoprefixer": "^10.4.2",
+ "browser-sync": "^2.27.7",
+ "copyfiles": "^2.4.1",
+ "cssnano": "^5.0.17",
+ "npm-run-all": "^4.1.5",
+ "onchange": "^7.1.0",
+ "postcss-cli": "^9.1.0",
+ "sass": "^1.49.8"
+ }
+}
diff --git a/projects/02-tshirts/04-the-product-card/src/assets/feline.jpg b/projects/02-tshirts/04-the-product-card/src/assets/feline.jpg
new file mode 100644
index 0000000..6f30690
Binary files /dev/null and b/projects/02-tshirts/04-the-product-card/src/assets/feline.jpg differ
diff --git a/projects/02-tshirts/04-the-product-card/src/assets/m-jacket.jpg b/projects/02-tshirts/04-the-product-card/src/assets/m-jacket.jpg
new file mode 100644
index 0000000..26a4bcc
Binary files /dev/null and b/projects/02-tshirts/04-the-product-card/src/assets/m-jacket.jpg differ
diff --git a/projects/02-tshirts/04-the-product-card/src/assets/outcast.jpg b/projects/02-tshirts/04-the-product-card/src/assets/outcast.jpg
new file mode 100644
index 0000000..5c723f3
Binary files /dev/null and b/projects/02-tshirts/04-the-product-card/src/assets/outcast.jpg differ
diff --git a/projects/02-tshirts/04-the-product-card/src/assets/peace.jpg b/projects/02-tshirts/04-the-product-card/src/assets/peace.jpg
new file mode 100644
index 0000000..de44ffb
Binary files /dev/null and b/projects/02-tshirts/04-the-product-card/src/assets/peace.jpg differ
diff --git a/projects/02-tshirts/04-the-product-card/src/assets/plus-icon.svg b/projects/02-tshirts/04-the-product-card/src/assets/plus-icon.svg
new file mode 100644
index 0000000..f1b7771
--- /dev/null
+++ b/projects/02-tshirts/04-the-product-card/src/assets/plus-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/04-the-product-card/src/assets/shoes.jpg b/projects/02-tshirts/04-the-product-card/src/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/projects/02-tshirts/04-the-product-card/src/assets/shoes.jpg differ
diff --git a/projects/02-tshirts/04-the-product-card/src/assets/w-jacket.jpg b/projects/02-tshirts/04-the-product-card/src/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/projects/02-tshirts/04-the-product-card/src/assets/w-jacket.jpg differ
diff --git a/projects/02-tshirts/04-the-product-card/src/index.html b/projects/02-tshirts/04-the-product-card/src/index.html
new file mode 100644
index 0000000..2e68995
--- /dev/null
+++ b/projects/02-tshirts/04-the-product-card/src/index.html
@@ -0,0 +1,124 @@
+
+
+
+ T-shirts
+
+
+
T-Shirts
+
Browse our selection of high-quality t-shirts
+
+
+
+
+
+
+
+
+
+
+
Men's shirts
+
Out Cast
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
+
Woman's shirts
+
Feline
+
+
+
+ add to cart
+
+
+
+
+
+
+
Browser other categories
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/04-the-product-card/src/sass/style.scss b/projects/02-tshirts/04-the-product-card/src/sass/style.scss
new file mode 100644
index 0000000..59679cb
--- /dev/null
+++ b/projects/02-tshirts/04-the-product-card/src/sass/style.scss
@@ -0,0 +1,160 @@
+// variables
+
+$font-family: "Roboto", sans-serif;
+
+$fw-400: 400;
+$fw-700: 700;
+$fw-900: 900;
+
+$fs-400: 1.125rem;
+$fs-500: 1.25rem;
+$fs-600: 2rem;
+$fs-700: 3rem;
+
+$red-400: hsla(357, 100%, 68%, 1);
+$red-500: hsl(357, 74%, 40%);
+$blue-800: hsla(216, 71%, 16%, 1);
+$neutral-100: hsl(0 0% 100%);
+
+$size-8: 0.5rem;
+$size-16: 1rem;
+$size-32: 2rem;
+$size-36: 3rem;
+
+// Placeholders
+
+%shadow {
+ box-shadow: 0.25rem 0.25rem 1rem rgb(0 0 0 / 0.15);
+}
+
+// Mixins
+
+@mixin interactive-scale($color, $bg, $scale: 1.05) {
+ scale: 1;
+ transition: scale 350ms ease;
+
+ &:hover,
+ &:focus {
+ scale: $scale;
+ color: $color;
+ background-color: $bg;
+ }
+}
+
+// reset
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ font: inherit;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+}
+
+body {
+ font-family: $font-family;
+ font-size: $fs-400;
+ color: $blue-800;
+
+ // for demo
+ margin: $size-36 0;
+}
+
+// composition
+
+.container {
+ width: min(58rem, 100% - 2rem);
+ margin-inline: auto;
+}
+
+.even-columns {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr;
+ gap: var(--gap, $size-16);
+}
+
+// Utilities
+
+.margin-block-xl {
+ margin-block: $size-36;
+}
+
+.fw-bold {
+ font-weight: 700;
+}
+.fw-black {
+ font-weight: 900;
+}
+
+.text-center {
+ text-align: center;
+}
+.text-accent {
+ color: $red-400;
+}
+
+.page-title {
+ font-size: $fs-700;
+ font-weight: 900;
+}
+
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+// block
+
+.card {
+ $parent: &;
+ border-radius: $size-32;
+ overflow: hidden;
+ background-color: $neutral-100;
+ @extend %shadow;
+
+ &[data-type="product"] {
+ h2 {
+ font-size: $fs-600;
+ font-weight: 900;
+ text-transform: uppercase;
+ }
+ #{$parent}__content {
+ position: relative;
+ padding: $size-32 $size-16 $size-16;
+ display: flex;
+ align-items: end;
+ gap: $size-16;
+ justify-content: space-between;
+ }
+ }
+
+ &[data-type="link-with-image"] {
+ }
+}
+
+.button {
+ display: inline-block;
+ border: 0;
+ text-decoration: none;
+ cursor: pointer;
+ padding: $size-16;
+ background: $red-400;
+ color: $neutral-100;
+ border-radius: 100vw;
+ @extend %shadow;
+ @include interactive-scale($neutral-100, $red-500);
+}
diff --git a/projects/02-tshirts/05-button-position/.gitignore b/projects/02-tshirts/05-button-position/.gitignore
new file mode 100644
index 0000000..18d5e87
--- /dev/null
+++ b/projects/02-tshirts/05-button-position/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+public/
\ No newline at end of file
diff --git a/projects/02-tshirts/05-button-position/package.json b/projects/02-tshirts/05-button-position/package.json
new file mode 100644
index 0000000..ecb966f
--- /dev/null
+++ b/projects/02-tshirts/05-button-position/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "project-name",
+ "version": "1.0.0",
+ "description": "Project description",
+ "main": "public/index.html",
+ "author": "author name",
+ "scripts": {
+ "build:sass": "sass --no-source-map src/sass:public/css",
+ "copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
+ "copy:html": "copyfiles -u 1 ./src/*.html public",
+ "copy": "npm-run-all --parallel copy:*",
+ "watch:assets": "onchange 'src/assest/**/*' -- npm run copy:assets",
+ "watch:html": "onchange \"src/*.html\" -- npm run copy:html",
+ "watch:sass": "sass --watch src/sass:public/css",
+ "watch": "npm-run-all --parallel watch:*",
+ "serve": "browser-sync start --server public --files public",
+ "start": "npm-run-all copy --parallel watch serve",
+ "build": "npm-run-all copy:html build:*",
+ "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
+ },
+ "dependencies": {
+ "autoprefixer": "^10.4.2",
+ "browser-sync": "^2.27.7",
+ "copyfiles": "^2.4.1",
+ "cssnano": "^5.0.17",
+ "npm-run-all": "^4.1.5",
+ "onchange": "^7.1.0",
+ "postcss-cli": "^9.1.0",
+ "sass": "^1.49.8"
+ }
+}
diff --git a/projects/02-tshirts/05-button-position/src/assets/feline.jpg b/projects/02-tshirts/05-button-position/src/assets/feline.jpg
new file mode 100644
index 0000000..6f30690
Binary files /dev/null and b/projects/02-tshirts/05-button-position/src/assets/feline.jpg differ
diff --git a/projects/02-tshirts/05-button-position/src/assets/m-jacket.jpg b/projects/02-tshirts/05-button-position/src/assets/m-jacket.jpg
new file mode 100644
index 0000000..26a4bcc
Binary files /dev/null and b/projects/02-tshirts/05-button-position/src/assets/m-jacket.jpg differ
diff --git a/projects/02-tshirts/05-button-position/src/assets/outcast.jpg b/projects/02-tshirts/05-button-position/src/assets/outcast.jpg
new file mode 100644
index 0000000..5c723f3
Binary files /dev/null and b/projects/02-tshirts/05-button-position/src/assets/outcast.jpg differ
diff --git a/projects/02-tshirts/05-button-position/src/assets/peace.jpg b/projects/02-tshirts/05-button-position/src/assets/peace.jpg
new file mode 100644
index 0000000..de44ffb
Binary files /dev/null and b/projects/02-tshirts/05-button-position/src/assets/peace.jpg differ
diff --git a/projects/02-tshirts/05-button-position/src/assets/plus-icon.svg b/projects/02-tshirts/05-button-position/src/assets/plus-icon.svg
new file mode 100644
index 0000000..f1b7771
--- /dev/null
+++ b/projects/02-tshirts/05-button-position/src/assets/plus-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/05-button-position/src/assets/shoes.jpg b/projects/02-tshirts/05-button-position/src/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/projects/02-tshirts/05-button-position/src/assets/shoes.jpg differ
diff --git a/projects/02-tshirts/05-button-position/src/assets/w-jacket.jpg b/projects/02-tshirts/05-button-position/src/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/projects/02-tshirts/05-button-position/src/assets/w-jacket.jpg differ
diff --git a/projects/02-tshirts/05-button-position/src/index.html b/projects/02-tshirts/05-button-position/src/index.html
new file mode 100644
index 0000000..81e9e9d
--- /dev/null
+++ b/projects/02-tshirts/05-button-position/src/index.html
@@ -0,0 +1,124 @@
+
+
+
+ T-shirts
+
+
+
T-Shirts
+
Browse our selection of high-quality t-shirts
+
+
+
+
+
+
+
+
+
+
+
Men's shirts
+
Out Cast
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
Woman's shirts
+
Feline
+
+
+
+
+ add to cart
+
+
+
+
+
+
Browser other categories
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/05-button-position/src/sass/style.scss b/projects/02-tshirts/05-button-position/src/sass/style.scss
new file mode 100644
index 0000000..4bdc7cf
--- /dev/null
+++ b/projects/02-tshirts/05-button-position/src/sass/style.scss
@@ -0,0 +1,166 @@
+// variables
+
+$font-family: "Roboto", sans-serif;
+
+$fw-400: 400;
+$fw-700: 700;
+$fw-900: 900;
+
+$fs-400: 1.125rem;
+$fs-500: 1.25rem;
+$fs-600: 2rem;
+$fs-700: 3rem;
+
+$red-400: hsla(357, 100%, 68%, 1);
+$red-500: hsl(357, 74%, 40%);
+$blue-800: hsla(216, 71%, 16%, 1);
+$neutral-100: hsl(0 0% 100%);
+
+$size-8: 0.5rem;
+$size-16: 1rem;
+$size-32: 2rem;
+$size-36: 3rem;
+
+// Placeholders
+
+%shadow {
+ box-shadow: 0.25rem 0.25rem 1rem rgb(0 0 0 / 0.15);
+}
+
+// Mixins
+
+@mixin interactive-scale($color, $bg, $scale: 1.05) {
+ transform: scale(1);
+ transition: transform 350ms ease;
+
+ &:hover,
+ &:focus {
+ transform: scale($scale);
+ color: $color;
+ background-color: $bg;
+ }
+}
+
+// reset
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ font: inherit;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+}
+
+body {
+ font-family: $font-family;
+ font-size: $fs-400;
+ color: $blue-800;
+
+ // for demo
+ margin: $size-36 0;
+}
+
+// composition
+
+.container {
+ width: min(58rem, 100% - 2rem);
+ margin-inline: auto;
+}
+
+.even-columns {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr;
+ gap: var(--gap, $size-16);
+}
+
+// Utilities
+
+.margin-block-xl {
+ margin-block: $size-36;
+}
+
+.fw-bold {
+ font-weight: 700;
+}
+.fw-black {
+ font-weight: 900;
+}
+
+.text-center {
+ text-align: center;
+}
+.text-accent {
+ color: $red-400;
+}
+
+.page-title {
+ font-size: $fs-700;
+ font-weight: 900;
+}
+
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+// block
+
+.card {
+ $parent: &;
+ border-radius: $size-32;
+ overflow: hidden;
+ background-color: $neutral-100;
+ @extend %shadow;
+
+ &[data-type="product"] {
+ h2 {
+ font-size: $fs-600;
+ font-weight: 900;
+ text-transform: uppercase;
+ }
+ #{$parent}__content {
+ padding: $size-32 $size-16 $size-16;
+ display: flex;
+ align-items: end;
+ gap: $size-16;
+ justify-content: space-between;
+ }
+
+ .button {
+ position: absolute;
+ top: 0;
+ right: $size-16;
+ transform: translateY(-50%);
+ }
+ }
+
+ &[data-type="link-with-image"] {
+ }
+}
+
+.button {
+ display: inline-block;
+ border: 0;
+ text-decoration: none;
+ cursor: pointer;
+ padding: $size-16;
+ background: $red-400;
+ color: $neutral-100;
+ border-radius: 100vw;
+ @extend %shadow;
+ @include interactive-scale($neutral-100, $red-500);
+}
diff --git a/projects/02-tshirts/06-the-categories-card/.gitignore b/projects/02-tshirts/06-the-categories-card/.gitignore
new file mode 100644
index 0000000..18d5e87
--- /dev/null
+++ b/projects/02-tshirts/06-the-categories-card/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+public/
\ No newline at end of file
diff --git a/projects/02-tshirts/06-the-categories-card/package.json b/projects/02-tshirts/06-the-categories-card/package.json
new file mode 100644
index 0000000..ecb966f
--- /dev/null
+++ b/projects/02-tshirts/06-the-categories-card/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "project-name",
+ "version": "1.0.0",
+ "description": "Project description",
+ "main": "public/index.html",
+ "author": "author name",
+ "scripts": {
+ "build:sass": "sass --no-source-map src/sass:public/css",
+ "copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
+ "copy:html": "copyfiles -u 1 ./src/*.html public",
+ "copy": "npm-run-all --parallel copy:*",
+ "watch:assets": "onchange 'src/assest/**/*' -- npm run copy:assets",
+ "watch:html": "onchange \"src/*.html\" -- npm run copy:html",
+ "watch:sass": "sass --watch src/sass:public/css",
+ "watch": "npm-run-all --parallel watch:*",
+ "serve": "browser-sync start --server public --files public",
+ "start": "npm-run-all copy --parallel watch serve",
+ "build": "npm-run-all copy:html build:*",
+ "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
+ },
+ "dependencies": {
+ "autoprefixer": "^10.4.2",
+ "browser-sync": "^2.27.7",
+ "copyfiles": "^2.4.1",
+ "cssnano": "^5.0.17",
+ "npm-run-all": "^4.1.5",
+ "onchange": "^7.1.0",
+ "postcss-cli": "^9.1.0",
+ "sass": "^1.49.8"
+ }
+}
diff --git a/projects/02-tshirts/06-the-categories-card/src/assets/feline.jpg b/projects/02-tshirts/06-the-categories-card/src/assets/feline.jpg
new file mode 100644
index 0000000..6f30690
Binary files /dev/null and b/projects/02-tshirts/06-the-categories-card/src/assets/feline.jpg differ
diff --git a/projects/02-tshirts/06-the-categories-card/src/assets/m-jacket.jpg b/projects/02-tshirts/06-the-categories-card/src/assets/m-jacket.jpg
new file mode 100644
index 0000000..26a4bcc
Binary files /dev/null and b/projects/02-tshirts/06-the-categories-card/src/assets/m-jacket.jpg differ
diff --git a/projects/02-tshirts/06-the-categories-card/src/assets/outcast.jpg b/projects/02-tshirts/06-the-categories-card/src/assets/outcast.jpg
new file mode 100644
index 0000000..5c723f3
Binary files /dev/null and b/projects/02-tshirts/06-the-categories-card/src/assets/outcast.jpg differ
diff --git a/projects/02-tshirts/06-the-categories-card/src/assets/peace.jpg b/projects/02-tshirts/06-the-categories-card/src/assets/peace.jpg
new file mode 100644
index 0000000..de44ffb
Binary files /dev/null and b/projects/02-tshirts/06-the-categories-card/src/assets/peace.jpg differ
diff --git a/projects/02-tshirts/06-the-categories-card/src/assets/plus-icon.svg b/projects/02-tshirts/06-the-categories-card/src/assets/plus-icon.svg
new file mode 100644
index 0000000..f1b7771
--- /dev/null
+++ b/projects/02-tshirts/06-the-categories-card/src/assets/plus-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/06-the-categories-card/src/assets/shoes.jpg b/projects/02-tshirts/06-the-categories-card/src/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/projects/02-tshirts/06-the-categories-card/src/assets/shoes.jpg differ
diff --git a/projects/02-tshirts/06-the-categories-card/src/assets/w-jacket.jpg b/projects/02-tshirts/06-the-categories-card/src/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/projects/02-tshirts/06-the-categories-card/src/assets/w-jacket.jpg differ
diff --git a/projects/02-tshirts/06-the-categories-card/src/index.html b/projects/02-tshirts/06-the-categories-card/src/index.html
new file mode 100644
index 0000000..1c29a33
--- /dev/null
+++ b/projects/02-tshirts/06-the-categories-card/src/index.html
@@ -0,0 +1,124 @@
+
+
+
+ T-shirts
+
+
+
T-Shirts
+
Browse our selection of high-quality t-shirts
+
+
+
+
+
+
+
+
+
+
+
Men's shirts
+
Out Cast
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
+
+
+ add to cart
+
+
+
+
+
+
+
+
+
Woman's shirts
+
Feline
+
+
+
+ add to cart
+
+
+
+
+
+
+
Browser other categories
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/06-the-categories-card/src/sass/style.scss b/projects/02-tshirts/06-the-categories-card/src/sass/style.scss
new file mode 100644
index 0000000..e9a0df2
--- /dev/null
+++ b/projects/02-tshirts/06-the-categories-card/src/sass/style.scss
@@ -0,0 +1,183 @@
+// variables
+
+$font-family: "Roboto", sans-serif;
+
+$fw-400: 400;
+$fw-700: 700;
+$fw-900: 900;
+
+$fs-400: 1.125rem;
+$fs-500: 1.25rem;
+$fs-600: 2rem;
+$fs-700: 3rem;
+
+$red-400: hsla(357, 100%, 68%, 1);
+$red-500: hsl(357, 74%, 40%);
+$blue-800: hsla(216, 71%, 16%, 1);
+$neutral-100: hsl(0 0% 100%);
+
+$size-8: 0.5rem;
+$size-12: 0.75rem;
+$size-16: 1rem;
+$size-32: 2rem;
+$size-36: 3rem;
+
+// Placeholders
+
+%shadow {
+ box-shadow: 0.25rem 0.25rem 1rem rgb(0 0 0 / 0.15);
+}
+
+// Mixins
+
+@mixin interactive-scale($color, $bg, $scale: 1.05) {
+ transform: scale(1);
+ transition: transform 350ms ease;
+
+ &:hover,
+ &:focus {
+ transform: scale($scale);
+ color: $color;
+ background-color: $bg;
+ }
+}
+
+// reset
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ font: inherit;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+}
+
+body {
+ font-family: $font-family;
+ font-size: $fs-400;
+ color: $blue-800;
+
+ // for demo
+ margin: $size-36 0;
+}
+
+// composition
+
+.container {
+ width: min(58rem, 100% - 2rem);
+ margin-inline: auto;
+}
+
+.even-columns {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr;
+ gap: var(--gap, $size-16);
+}
+
+// Utilities
+
+.margin-block-xl {
+ margin-block: $size-36;
+}
+
+.fw-bold {
+ font-weight: 700;
+}
+.fw-black {
+ font-weight: 900;
+}
+
+.text-center {
+ text-align: center;
+}
+.text-accent {
+ color: $red-400;
+}
+
+.page-title {
+ font-size: $fs-700;
+ font-weight: 900;
+}
+
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+// block
+
+.card {
+ $parent: &;
+ border-radius: $size-32;
+ overflow: hidden;
+ background-color: $neutral-100;
+ @extend %shadow;
+
+ &[data-type="product"] {
+ h2 {
+ font-size: $fs-600;
+ font-weight: 900;
+ text-transform: uppercase;
+ }
+ #{$parent}__content {
+ position: relative;
+ padding: $size-32 $size-16 $size-16;
+ display: flex;
+ align-items: end;
+ gap: $size-16;
+ justify-content: space-between;
+ }
+
+ .button {
+ position: absolute;
+ top: 0;
+ right: $size-16;
+ transform: translateY(-50%);
+ }
+ }
+
+ &[data-type="link-with-image"] {
+ text-decoration: none;
+ color: $red-500;
+
+ @include interactive-scale($neutral-100, $blue-800);
+
+ #{$parent}__content {
+ padding: $size-16 $size-12;
+ }
+
+ img {
+ height: 8.75rem;
+ width: 100%;
+ object-fit: cover;
+ object-position: top center;
+ }
+ }
+}
+
+.button {
+ display: inline-block;
+ border: 0;
+ text-decoration: none;
+ cursor: pointer;
+ padding: $size-16;
+ background: $red-400;
+ color: $neutral-100;
+ border-radius: 100vw;
+ @extend %shadow;
+ @include interactive-scale($neutral-100, $red-500);
+}
diff --git a/projects/02-tshirts/design-and-assets/assets/feline.jpg b/projects/02-tshirts/design-and-assets/assets/feline.jpg
new file mode 100644
index 0000000..6f30690
Binary files /dev/null and b/projects/02-tshirts/design-and-assets/assets/feline.jpg differ
diff --git a/projects/02-tshirts/design-and-assets/assets/m-jacket.jpg b/projects/02-tshirts/design-and-assets/assets/m-jacket.jpg
new file mode 100644
index 0000000..26a4bcc
Binary files /dev/null and b/projects/02-tshirts/design-and-assets/assets/m-jacket.jpg differ
diff --git a/projects/02-tshirts/design-and-assets/assets/outcast.jpg b/projects/02-tshirts/design-and-assets/assets/outcast.jpg
new file mode 100644
index 0000000..5c723f3
Binary files /dev/null and b/projects/02-tshirts/design-and-assets/assets/outcast.jpg differ
diff --git a/projects/02-tshirts/design-and-assets/assets/peace.jpg b/projects/02-tshirts/design-and-assets/assets/peace.jpg
new file mode 100644
index 0000000..de44ffb
Binary files /dev/null and b/projects/02-tshirts/design-and-assets/assets/peace.jpg differ
diff --git a/projects/02-tshirts/design-and-assets/assets/plus-icon.svg b/projects/02-tshirts/design-and-assets/assets/plus-icon.svg
new file mode 100644
index 0000000..f1b7771
--- /dev/null
+++ b/projects/02-tshirts/design-and-assets/assets/plus-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/projects/02-tshirts/design-and-assets/assets/shoes.jpg b/projects/02-tshirts/design-and-assets/assets/shoes.jpg
new file mode 100644
index 0000000..8a39734
Binary files /dev/null and b/projects/02-tshirts/design-and-assets/assets/shoes.jpg differ
diff --git a/projects/02-tshirts/design-and-assets/assets/w-jacket.jpg b/projects/02-tshirts/design-and-assets/assets/w-jacket.jpg
new file mode 100644
index 0000000..262fe64
Binary files /dev/null and b/projects/02-tshirts/design-and-assets/assets/w-jacket.jpg differ
diff --git a/projects/02-tshirts/design-and-assets/design-info.md b/projects/02-tshirts/design-and-assets/design-info.md
new file mode 100644
index 0000000..1e3608f
--- /dev/null
+++ b/projects/02-tshirts/design-and-assets/design-info.md
@@ -0,0 +1,35 @@
+# Design info - t-shirt project
+
+## Typography
+
+### Fonts
+
+- Roboto
+
+ - Regular / 400
+ - Bold / 700
+ - Black / 900
+
+- Sizes
+ - 400: 1.125rem
+ - 500: 1.25rem
+ - 600: 2rem
+ - 700: 3rem
+
+### Colors
+
+- red-400: hsla(357, 100%, 68%, 1);
+- red-500: hsl(357, 74%, 40%);
+- blue-800: hsla(216, 71%, 16%, 1);
+- neutral-100: hsl(0 0% 100%);
+
+### Sizes
+
+- size-8: .5rem
+- size-16: 1rem
+- size-32: 2rem
+- size-36: 3rem
+
+### Shadows
+
+- .25rem .25rem 1rem rgb(0 0 0 / .15);
diff --git a/projects/02-tshirts/design-and-assets/spacing.jpg b/projects/02-tshirts/design-and-assets/spacing.jpg
new file mode 100644
index 0000000..c84149e
Binary files /dev/null and b/projects/02-tshirts/design-and-assets/spacing.jpg differ
diff --git a/projects/02-tshirts/design-and-assets/the-design.jpg b/projects/02-tshirts/design-and-assets/the-design.jpg
new file mode 100644
index 0000000..260383d
Binary files /dev/null and b/projects/02-tshirts/design-and-assets/the-design.jpg differ
+ 
+ 
+ 
+ 
+ 
+ 
