diff --git a/challenges/01-nesting/02/nesting-challenge.html b/challenges/01-nesting/02/nesting-challenge.html index a57c79f..7c71268 100644 --- a/challenges/01-nesting/02/nesting-challenge.html +++ b/challenges/01-nesting/02/nesting-challenge.html @@ -1,11 +1,27 @@ -

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.

+ + + + + + + + Nesting Challenge #2 + + + +

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 + Primary button + Secondary button + Accent button + + + \ No newline at end of file diff --git a/challenges/01-nesting/03/finished-example/nesting-challenge-02.html b/challenges/01-nesting/03/finished-example/nesting-challenge.html similarity index 100% rename from challenges/01-nesting/03/finished-example/nesting-challenge-02.html rename to challenges/01-nesting/03/finished-example/nesting-challenge.html diff --git a/challenges/01-nesting/03/nesting-challenge-02.html b/challenges/01-nesting/03/nesting-challenge.html similarity index 100% rename from challenges/01-nesting/03/nesting-challenge-02.html rename to challenges/01-nesting/03/nesting-challenge.html diff --git a/challenges/01-nesting/03/sass/styles.sass b/challenges/01-nesting/03/sass/styles.sass index e79d84a..c31a926 100644 --- a/challenges/01-nesting/03/sass/styles.sass +++ b/challenges/01-nesting/03/sass/styles.sass @@ -1,16 +1,54 @@ -$clr-primary: hsl(206, 33%, 37%) -$clr-secondary: hsl(253, 27%, 35%) -$clr-accent: hsl(45, 82%, 65%) +$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 - font: - size: 1.25rem - family: system-ui, sans-serif - text-align: center - -.btn - /* your code starts here */ +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 + //your code here + + +.text-subdued + font-size: 1rem + // your code here - /* your code ends here */ - diff --git a/challenges/01-nesting/03/scss/styles.scss b/challenges/01-nesting/03/scss/styles.scss index 8ae218d..0479fd1 100644 --- a/challenges/01-nesting/03/scss/styles.scss +++ b/challenges/01-nesting/03/scss/styles.scss @@ -1,5 +1,3 @@ -@use "mixins"; - $clr-primary-400: hsl(206, 33%, 37%); $clr-primary-500: hsl(206, 33%, 25%); $clr-secondary-400: hsl(253, 27%, 35%); @@ -47,8 +45,10 @@ section { border: 0; text-decoration: none; text-transform: uppercase; + // your code here } .text-subdued { font-size: 1rem; + // your code here } diff --git a/challenges/02-variables/01/colors.md b/challenges/02-variables/01/colors.md index 577adfd..b2d8232 100644 --- a/challenges/02-variables/01/colors.md +++ b/challenges/02-variables/01/colors.md @@ -3,7 +3,9 @@ ## White: #f8f7f7 - page background +- primary button text color - outline button background +- hover text color for both buttons ## Black: #201e1f @@ -14,6 +16,7 @@ ## Red: #da3f0b - title color -- button borders +- button borders (both buttons) - primary button background +- outline button text color - button hover/focus shadow diff --git a/challenges/03-mixins/01/sass/styles.sass b/challenges/03-mixins/01/sass/styles.sass new file mode 100644 index 0000000..594df8b --- /dev/null +++ b/challenges/03-mixins/01/sass/styles.sass @@ -0,0 +1,11 @@ +body + font-family: system-ui + margin: 0 + + +.section-one, +.section-two, +.section-three + text-align: center + padding: 10vh 0 + diff --git a/challenges/finsihed-versoins/01/css/styles.css b/challenges/finsihed-versoins/01/css/styles.css deleted file mode 100644 index fa4f473..0000000 --- a/challenges/finsihed-versoins/01/css/styles.css +++ /dev/null @@ -1,80 +0,0 @@ -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 deleted file mode 100644 index a91c736..0000000 --- a/challenges/finsihed-versoins/01/css/styles.css.map +++ /dev/null @@ -1 +0,0 @@ -{"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 deleted file mode 100644 index a53cde5..0000000 --- a/challenges/finsihed-versoins/01/finished-example/css/styles.css +++ /dev/null @@ -1,80 +0,0 @@ -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 deleted file mode 100644 index 0ac7fa5..0000000 --- a/challenges/finsihed-versoins/01/finished-example/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - Mixin Challenge - - - - -
-

Section One

- button -
- -
-

Section Two

- button -
- -
-

Section Three

-

badge

-

badge

-
- - - \ No newline at end of file diff --git a/challenges/finsihed-versoins/01/index.html b/challenges/finsihed-versoins/01/index.html deleted file mode 100644 index 0ac7fa5..0000000 --- a/challenges/finsihed-versoins/01/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - Mixin Challenge - - - - -
-

Section One

- button -
- -
-

Section Two

- button -
- -
-

Section Three

-

badge

-

badge

-
- - - \ No newline at end of file diff --git a/challenges/finsihed-versoins/01/scss/styles.scss b/challenges/finsihed-versoins/01/scss/styles.scss deleted file mode 100644 index 972de54..0000000 --- a/challenges/finsihed-versoins/01/scss/styles.scss +++ /dev/null @@ -1,72 +0,0 @@ -@mixin gradient($deg, $c1, $c2) { - background-image: linear-gradient($deg, $c1, $c2); -} - -@mixin pseudo-underline($width, $height, $bg, $margin) { - &::after { - content: ""; - display: block; - width: $width; - height: $height; - background-color: $bg; - margin: $margin auto; - } -} - -@mixin ui-element($size, $color, $bg, $hover: $color, $hover-bg: $bg) { - display: inline-block; - padding: $size ($size * 3); - color: $color; - background-color: $bg; - &:hover, - &:focus { - color: $hover; - background-color: $hover-bg; - } -} - -body { - font-family: system-ui; - margin: 0; -} - -.section-one, -.section-two, -.section-three { - text-align: center; - padding: 10vh 0; -} - -.title { - @include pseudo-underline(5rem, 1px, rgb(18, 167, 204), 1rem); -} - -.section-one { - @include gradient(45deg, red, blue); - color: white; -} - -.section-two { - @include gradient(-72deg, purple, limegreen); - color: white; -} - -.section-three { - @include gradient(0deg, orange, yellow); -} - -.button-one { - @include ui-element(0.5em, white, black, black, white); -} - -.button-two { - @include ui-element(1em, yellow, rgb(59, 15, 15), rgb(59, 15, 15), yellow); -} - -.badge-one { - @include ui-element(0.5em, black, white); -} - -.badge-two { - @include ui-element(0.25em, rgb(0, 110, 255), rgb(15, 15, 29)); -} diff --git a/projects/02-tshirts/00-blank-starter/src/index.html b/projects/02-tshirts/00-blank-starter/src/index.html index 8339692..c88c380 100644 --- a/projects/02-tshirts/00-blank-starter/src/index.html +++ b/projects/02-tshirts/00-blank-starter/src/index.html @@ -1,5 +1,6 @@ + @@ -7,115 +8,10 @@ T-shirts + -
-
-

T-Shirts

-

Browse our selection of high-quality t-shirts

-
-
- -
-
-
- -
- white t-shirt with graphic of a man in black and white, and an orange box, with white text reading Out Cast inside it -
-
-

Men's shirts

-

Out Cast

-
-
-

$23.99

-
-
- -
- -
- black t-shirt with a large white graphic of the skeleton of a hand, making the peace symbol -
-
-

Men's shirts

-

Peace

-
-
-

$23.99

-
-
- -
- -
- white t-shirt with the word feline written in a black cursive font -
-
-

Woman's shirts

-

Feline

-
-
-

$23.99

-
-
- -
- -
- -

Browser other categories

- -
- - - -
-

Men's shirts

-
- - - - -
-

Woman's shirts

-
- - - - -
-

Woman's jackets

-
- - - - -
-

Men's jackets

-
- - - - -
-

Men's shoes

-
- - -
-
-
- + \ No newline at end of file diff --git a/projects/02-tshirts/02-abstracts/src/index.html b/projects/02-tshirts/02-abstracts/src/index.html index 8339692..a5df181 100644 --- a/projects/02-tshirts/02-abstracts/src/index.html +++ b/projects/02-tshirts/02-abstracts/src/index.html @@ -1,5 +1,6 @@ + @@ -7,6 +8,7 @@ T-shirts +
@@ -19,9 +21,10 @@
- +
- white t-shirt with graphic of a man in black and white, and an orange box, with white text reading Out Cast inside it + white t-shirt with graphic of a man in black and white, and an orange box, with white text reading Out Cast inside it

Men's shirts

@@ -31,14 +34,15 @@

$23.99

-
- black t-shirt with a large white graphic of the skeleton of a hand, making the peace symbol + black t-shirt with a large white graphic of the skeleton of a hand, making the peace symbol

Men's shirts

@@ -48,7 +52,7 @@

$23.99

- @@ -65,18 +69,18 @@

$23.99

-
- +

Browser other categories

- +
- +
@@ -118,4 +122,5 @@ + \ 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 index 5379d5f..f6b5cf9 100644 --- a/projects/02-tshirts/02-abstracts/src/scss/style.scss +++ b/projects/02-tshirts/02-abstracts/src/scss/style.scss @@ -17,6 +17,7 @@ $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; diff --git a/projects/02-tshirts/03-base/src/index.html b/projects/02-tshirts/03-base/src/index.html index fd2b59e..ca42931 100644 --- a/projects/02-tshirts/03-base/src/index.html +++ b/projects/02-tshirts/03-base/src/index.html @@ -1,5 +1,6 @@ + @@ -7,9 +8,10 @@ T-shirts - - + + +
@@ -22,9 +24,10 @@
- +
- white t-shirt with graphic of a man in black and white, and an orange box, with white text reading Out Cast inside it + white t-shirt with graphic of a man in black and white, and an orange box, with white text reading Out Cast inside it

Men's shirts

@@ -34,14 +37,15 @@

$23.99

-
- black t-shirt with a large white graphic of the skeleton of a hand, making the peace symbol + black t-shirt with a large white graphic of the skeleton of a hand, making the peace symbol

Men's shirts

@@ -51,7 +55,7 @@

$23.99

- @@ -68,18 +72,18 @@

$23.99

-
- +

Browser other categories

- +
- +
@@ -121,4 +125,5 @@ + \ 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 index f92cf9d..7066cd9 100644 --- a/projects/02-tshirts/03-base/src/sass/style.scss +++ b/projects/02-tshirts/03-base/src/sass/style.scss @@ -17,6 +17,7 @@ $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; 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 index 59679cb..b390e2b 100644 --- a/projects/02-tshirts/04-the-product-card/src/sass/style.scss +++ b/projects/02-tshirts/04-the-product-card/src/sass/style.scss @@ -17,6 +17,7 @@ $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; diff --git a/projects/02-tshirts/05-button-position/src/sass/style.scss b/projects/02-tshirts/05-button-position/src/sass/style.scss index 4bdc7cf..3c35f2e 100644 --- a/projects/02-tshirts/05-button-position/src/sass/style.scss +++ b/projects/02-tshirts/05-button-position/src/sass/style.scss @@ -17,6 +17,7 @@ $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;