kevin-powell
/
beyond-css-course-material
mirror of https://github.com/kevin-powell/beyond-css-course-material.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

some-challenges+projects

This commit is contained in:
Kevin Powell 2022-04-29 10:46:12 -04:00
parent 2c3897e63a
commit 529333130a
152 changed files with 4033 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
challenges/01-nesting/01/sass/style.sass Normal file
View File

@ -0,0 +1,6 @@
.primary-article
padding: 3rem 1rem
.pointing-list
margin: 2rem 0

7
challenges/01-nesting/01/sass/style.scss Normal file
View File

@ -0,0 +1,7 @@
.primary-article {
padding: 3rem 1rem;
}
.pointing-list {
margin: 2rem 0;
}

38
challenges/01-nesting/02/finished-example/css/styles.css Normal file
View File

@ -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;
}

11
challenges/01-nesting/02/finished-example/nesting-challenge.html Normal file
View File

@ -0,0 +1,11 @@
<link rel="stylesheet" href="css/styles.css">
<h1>Nesting Challenge</h1>
<p>Style the following buttons so that they look like the provided sample. When you're done, not only should <a
href="img/final-layout.png">it look similar</a>, but the <a href="img/file-structure.png">file structure</a> and <a
href="img/final-css.png">final CSS file</a> should match the provided files.</p>
<a href="#" class="btn btn__primary">Primary button</a>
<a href="#" class="btn btn__secondary">Secondary button</a>
<a href="#" class="btn btn__accent">Accent button</a>

BIN
challenges/01-nesting/02/img/file-structure.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
challenges/01-nesting/02/img/final-css.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
challenges/01-nesting/02/img/final-layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

11
challenges/01-nesting/02/nesting-challenge.html Normal file
View File

@ -0,0 +1,11 @@
<link rel="stylesheet" href="css/styles.css">
<h1>Nesting Challenge</h1>
<p>Style the following buttons so that they look like the provided sample. When you're done, not only should <a
href="img/final-layout.png">it look similar</a>, but the <a href="img/file-structure.png">file structure</a> and <a
href="img/final-css.png">final CSS file</a> should match the provided files.</p>
<a href="#" class="btn btn__primary">Primary button</a>
<a href="#" class="btn btn__secondary">Secondary button</a>
<a href="#" class="btn btn__accent">Accent button</a>

16
challenges/01-nesting/02/sass/styles.sass Normal file
View File

@ -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 */

18
challenges/01-nesting/02/scss/styles.scss Normal file
View File

@ -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 */
}

67
challenges/01-nesting/03/finished-example/css/styles.css Normal file
View File

@ -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;
}

36
challenges/01-nesting/03/finished-example/nesting-challenge-02.html Normal file
View File

@ -0,0 +1,36 @@
<link rel="stylesheet" href="css/styles.css">
<h1>Nesting Challenge 02</h1>
<section class="surface-primary">
<div class="container">
<h2>Lorem, ipsum dolor.</h2>
<p>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.</p>
<p class="text-subdued">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum dicta voluptatum
amet ipsam sed
accusamus quia illum quibusdam maxime.</p>
<a href="" class="btn">Lorem, ipsum</a>
</div>
</section>
<section class="surface-secondary">
<div class="container">
<h2>Illum, quos architecto!</h2>
<p>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.</p>
<p class="text-subdued">Quibusdam assumenda obcaecati nostrum, eos, necessitatibus sequi quod iure ratione,
molestiae quaerat alias
molestias rem. Aut eligendi laborum quae veritatis!</p>
<a href="" class="btn">Quod, ducimus</a>
</div>
</section>
<section class="surface-accent">
<div class="container">
<h2>Culpa, dolorum aliquid.</h2>
<p>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.</p>
<p class="text-subdued">Praesentium veniam excepturi quia possimus sint nulla repellendus aperiam nemo, saepe
dicta, ad, deleniti
mollitia optio vitae eligendi est a.</p>
<a href="" class="btn">Doloribus, voluptatibus</a>
</div>
</section>

BIN
challenges/01-nesting/03/img/file-structure.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
challenges/01-nesting/03/img/final-css.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
challenges/01-nesting/03/img/final-layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

36
challenges/01-nesting/03/nesting-challenge-02.html Normal file
View File

@ -0,0 +1,36 @@
<link rel="stylesheet" href="css/styles.css">
<h1>Nesting Challenge 02</h1>
<section class="surface-primary">
<div class="container">
<h2>Lorem, ipsum dolor.</h2>
<p>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.</p>
<p class="text-subdued">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum dicta voluptatum
amet ipsam sed
accusamus quia illum quibusdam maxime.</p>
<a href="" class="btn">Lorem, ipsum</a>
</div>
</section>
<section class="surface-secondary">
<div class="container">
<h2>Illum, quos architecto!</h2>
<p>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.</p>
<p class="text-subdued">Quibusdam assumenda obcaecati nostrum, eos, necessitatibus sequi quod iure ratione,
molestiae quaerat alias
molestias rem. Aut eligendi laborum quae veritatis!</p>
<a href="" class="btn">Quod, ducimus</a>
</div>
</section>
<section class="surface-accent">
<div class="container">
<h2>Culpa, dolorum aliquid.</h2>
<p>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.</p>
<p class="text-subdued">Praesentium veniam excepturi quia possimus sint nulla repellendus aperiam nemo, saepe
dicta, ad, deleniti
mollitia optio vitae eligendi est a.</p>
<a href="" class="btn">Doloribus, voluptatibus</a>
</div>
</section>

16
challenges/01-nesting/03/sass/styles.sass Normal file
View File

@ -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 */

54
challenges/01-nesting/03/scss/styles.scss Normal file
View File

@ -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;
}

19
challenges/02-variables/01/colors.md Normal file
View File

@ -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

53
challenges/02-variables/01/finished-example/css/variable-challenge.css Normal file
View File

@ -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 */

26
challenges/02-variables/01/finished-example/index.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variable challenge</title>
<link rel="stylesheet" href="css/variable-challenge.css">
</head>
<body>
<div class="card">
<h2 class="card__title">This is a card</h2>
<p class="card__text">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.</p>
<div class="flex-group">
<a href="#" class="btn btn--primary">Buy now</a>
<a href="#" class="btn btn--outline">More info</a>
</div>
</div>
</body>
</html>

26
challenges/02-variables/01/index.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variable challenge</title>
<link rel="stylesheet" href="css/variable-challenge.css">
</head>
<body>
<div class="card">
<h2 class="card__title">This is a card</h2>
<p class="card__text">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.</p>
<div class="flex-group">
<a href="#" class="btn btn--primary">Buy now</a>
<a href="#" class="btn btn--outline">More info</a>
</div>
</div>
</body>
</html>

28
challenges/02-variables/01/sass/variable-challenge.sass Normal file
View File

@ -0,0 +1,28 @@
*
box-sizing: border-box
margin: 0
body
font-size: 1.75rem
font-family: system-ui, sans-serif
line-height: 1.6
/* 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
.btn
display: inline-block
padding: 0.5em 1.5em
text-decoration: none
.flex-group
display: flex
gap: 1rem

33
challenges/02-variables/01/scss/variable-challenge.scss Normal file
View File

@ -0,0 +1,33 @@
* {
box-sizing: border-box;
margin: 0;
}
body {
font-size: 1.75rem;
font-family: system-ui, sans-serif;
line-height: 1.6;
/* 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;
}
.btn {
display: inline-block;
padding: 0.5em 1.5em;
text-decoration: none;
}
.flex-group {
display: flex;
gap: 1rem;
}

80
challenges/03-mixins/01/finished-example/css/styles.css Normal file
View File

@ -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 */

30
challenges/03-mixins/01/finished-example/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mixin Challenge</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="section-one">
<h2 class="title">Section One</h2>
<a href="#" class="button-one">button</a>
</div>
<div class="section-two">
<h2 class="title">Section Two</h2>
<a href="#" class="button-two">button</a>
</div>
<div class="section-three">
<h2 class="title">Section Three</h2>
<p class="badge-one">badge</p>
<p class="badge-two">badge</p>
</div>
</body>
</html>

30
challenges/03-mixins/01/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mixin Challenge</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="section-one">
<h2 class="title">Section One</h2>
<a href="#" class="button-one">button</a>
</div>
<div class="section-two">
<h2 class="title">Section Two</h2>
<a href="#" class="button-two">button</a>
</div>
<div class="section-three">
<h2 class="title">Section Three</h2>
<p class="badge-one">badge</p>
<p class="badge-two">badge</p>
</div>
</body>
</html>

11
challenges/03-mixins/01/scss/styles.scss Normal file
View File

@ -0,0 +1,11 @@
body {
font-family: system-ui;
margin: 0;
}
.section-one,
.section-two,
.section-three {
text-align: center;
padding: 10vh 0;
}

BIN
challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/feline.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/m-jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/outcast.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/peace.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

6
challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/plus-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2334 4.05029V6.62402H0V4.05029H10.2334ZM6.52148 0V10.8691H3.72217V0H6.52148Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

BIN
challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/shoes.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
challenges/03-mixins/02-tshirts-themes/design-and-assets/assets/w-jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

31
challenges/03-mixins/02-tshirts-themes/design-and-assets/design-info.md Normal file
View File

@ -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

BIN
challenges/03-mixins/02-tshirts-themes/design-and-assets/the-design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 564 KiB

80
challenges/finsihed-versoins/01/css/styles.css Normal file
View File

@ -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 */

1
challenges/finsihed-versoins/01/css/styles.css.map Normal file
View File

@ -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"}

80
challenges/finsihed-versoins/01/finished-example/css/styles.css Normal file
View File

@ -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 */

30
challenges/finsihed-versoins/01/finished-example/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mixin Challenge</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="section-one">
<h2 class="title">Section One</h2>
<a href="#" class="button-one">button</a>
</div>
<div class="section-two">
<h2 class="title">Section Two</h2>
<a href="#" class="button-two">button</a>
</div>
<div class="section-three">
<h2 class="title">Section Three</h2>
<p class="badge-one">badge</p>
<p class="badge-two">badge</p>
</div>
</body>
</html>

30
challenges/finsihed-versoins/01/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mixin Challenge</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="section-one">
<h2 class="title">Section One</h2>
<a href="#" class="button-one">button</a>
</div>
<div class="section-two">
<h2 class="title">Section Two</h2>
<a href="#" class="button-two">button</a>
</div>
<div class="section-three">
<h2 class="title">Section Three</h2>
<p class="badge-one">badge</p>
<p class="badge-two">badge</p>
</div>
</body>
</html>

72
challenges/finsihed-versoins/01/scss/styles.scss Normal file
View File

@ -0,0 +1,72 @@
@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));
}

31
projects/01-pricing-tiers/01-basic-starter/package.json Normal file
View File

@ -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"
}
}

19
projects/01-pricing-tiers/01-basic-starter/src/index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hosting Plans</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

0
projects/01-pricing-tiers/01-basic-starter/src/sass/style.scss Normal file
View File

31
projects/01-pricing-tiers/02-setting-up-the-variables/package.json Normal file
View File

@ -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"
}
}

85
projects/01-pricing-tiers/02-setting-up-the-variables/src/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hosting Plans</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="page-title">Hosting Plans</h1>
<div class="container">
<div class="pricing-plans">
<div class="tier">
<h2 class="tier__title">Free</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
1 domain
</li>
<li class="tier__list-item">
5gb of bandwidth
</li>
<li class="tier__list-item">
1gb of diskspace
</li>
<li class="tier__list-item">
5,000 monthly uniques
</li>
</ul>
<p class="tier__price">$0<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Tiny</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
5 domain
</li>
<li class="tier__list-item">
250gb of bandwidth
</li>
<li class="tier__list-item">
5gb of diskspace
</li>
<li class="tier__list-item">
15,000 monthly uniques
</li>
</ul>
<p class="tier__price">$19<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Large</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
15 domain
</li>
<li class="tier__list-item">
750gb of bandwidth
</li>
<li class="tier__list-item">
20gb of diskspace
</li>
<li class="tier__list-item">
50,000 monthly uniques
</li>
</ul>
<p class="tier__price">$49<span>/month</span></p>
<button class="button">Get started</button>
</div>
</div>
</div>
</body>
</html>

0
projects/01-pricing-tiers/02-setting-up-the-variables/src/sass/style.scss Normal file
View File

31
projects/01-pricing-tiers/03-simple-reset/package.json Normal file
View File

@ -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"
}
}

85
projects/01-pricing-tiers/03-simple-reset/src/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hosting Plans</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="page-title">Hosting Plans</h1>
<div class="container">
<div class="pricing-plans">
<div class="tier">
<h2 class="tier__title">Free</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
1 domain
</li>
<li class="tier__list-item">
5gb of bandwidth
</li>
<li class="tier__list-item">
1gb of diskspace
</li>
<li class="tier__list-item">
5,000 monthly uniques
</li>
</ul>
<p class="tier__price">$0<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Tiny</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
5 domain
</li>
<li class="tier__list-item">
250gb of bandwidth
</li>
<li class="tier__list-item">
5gb of diskspace
</li>
<li class="tier__list-item">
15,000 monthly uniques
</li>
</ul>
<p class="tier__price">$19<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Large</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
15 domain
</li>
<li class="tier__list-item">
750gb of bandwidth
</li>
<li class="tier__list-item">
20gb of diskspace
</li>
<li class="tier__list-item">
50,000 monthly uniques
</li>
</ul>
<p class="tier__price">$49<span>/month</span></p>
<button class="button">Get started</button>
</div>
</div>
</div>
</body>
</html>

26
projects/01-pricing-tiers/03-simple-reset/src/sass/style.scss Normal file
View File

@ -0,0 +1,26 @@
// colors
$color-neutral-100: #fff;
$color-neutral-900: #1f3049;
$color-primary-400: #0066ff;
// font-families
$ff-sans: "Open Sans", sans-serif;
// font-sizes
$fs-900: 3.75rem; // 60px
$fs-800: 3rem; // 48px
$fs-600: 1.5rem; // 24px
$fs-500: 1.3125rem; // 21px
$fs-400: 1.125rem; // 18px
// font-weights
$fw-400: 400;
$fw-700: 700;
// size/spacing values (Including the border-width)
$size-8: 0.5rem;
$size-12: 0.75rem; // (not in design)
$size-16: 1rem;
$size-20: 1.25rem;
$size-32: 2rem;
$size-36: 2.25rem;

31
projects/01-pricing-tiers/04-styling-the-page/package.json Normal file
View File

@ -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"
}
}

85
projects/01-pricing-tiers/04-styling-the-page/src/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hosting Plans</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="page-title">Hosting Plans</h1>
<div class="container">
<div class="pricing-plans">
<div class="tier">
<h2 class="tier__title">Free</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
1 domain
</li>
<li class="tier__list-item">
5gb of bandwidth
</li>
<li class="tier__list-item">
1gb of diskspace
</li>
<li class="tier__list-item">
5,000 monthly uniques
</li>
</ul>
<p class="tier__price">$0<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Tiny</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
5 domain
</li>
<li class="tier__list-item">
250gb of bandwidth
</li>
<li class="tier__list-item">
5gb of diskspace
</li>
<li class="tier__list-item">
15,000 monthly uniques
</li>
</ul>
<p class="tier__price">$19<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Large</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
15 domain
</li>
<li class="tier__list-item">
750gb of bandwidth
</li>
<li class="tier__list-item">
20gb of diskspace
</li>
<li class="tier__list-item">
50,000 monthly uniques
</li>
</ul>
<p class="tier__price">$49<span>/month</span></p>
<button class="button">Get started</button>
</div>
</div>
</div>
</body>
</html>

55
projects/01-pricing-tiers/04-styling-the-page/src/sass/style.scss Normal file
View File

@ -0,0 +1,55 @@
// colors
$color-neutral-100: #fff;
$color-neutral-900: #1f3049;
$color-primary-400: #0066ff;
// font-families
$ff-sans: "Open Sans", sans-serif;
// font-sizes
$fs-900: 3.75rem; // 60px
$fs-800: 3rem; // 48px
$fs-600: 1.5rem; // 24px
$fs-500: 1.3125rem; // 21px
$fs-400: 1.125rem; // 18px
// font-weights
$fw-400: 400;
$fw-700: 700;
// size/spacing values (Including the border-width)
$size-8: 0.5rem;
$size-12: 0.75rem; // (not in design)
$size-16: 1rem;
$size-20: 1.25rem;
$size-32: 2rem;
$size-36: 2.25rem;
// simple reset
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}
// base styles
body {
font-size: $fs-400;
font-weight: $fw-400;
color: $color-neutral-900;
background-color: $color-neutral-100;
font-family: $ff-sans;
text-align: center;
}
.container {
width: min(100% - 2rem, 60rem);
margin-inline: auto;
}

31
projects/01-pricing-tiers/05-inverted-colors/package.json Normal file
View File

@ -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"
}
}

85
projects/01-pricing-tiers/05-inverted-colors/src/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hosting Plans</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="page-title">Hosting Plans</h1>
<div class="container">
<div class="pricing-plans">
<div class="tier">
<h2 class="tier__title">Free</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
1 domain
</li>
<li class="tier__list-item">
5gb of bandwidth
</li>
<li class="tier__list-item">
1gb of diskspace
</li>
<li class="tier__list-item">
5,000 monthly uniques
</li>
</ul>
<p class="tier__price">$0<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Tiny</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
5 domain
</li>
<li class="tier__list-item">
250gb of bandwidth
</li>
<li class="tier__list-item">
5gb of diskspace
</li>
<li class="tier__list-item">
15,000 monthly uniques
</li>
</ul>
<p class="tier__price">$19<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Large</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
15 domain
</li>
<li class="tier__list-item">
750gb of bandwidth
</li>
<li class="tier__list-item">
20gb of diskspace
</li>
<li class="tier__list-item">
50,000 monthly uniques
</li>
</ul>
<p class="tier__price">$49<span>/month</span></p>
<button class="button">Get started</button>
</div>
</div>
</div>
</body>
</html>

116
projects/01-pricing-tiers/05-inverted-colors/src/sass/style.scss Normal file
View File

@ -0,0 +1,116 @@
// colors
$color-neutral-100: #fff;
$color-neutral-900: #1f3049;
$color-primary-400: #0066ff;
// font-families
$ff-sans: "Open Sans", sans-serif;
// font-sizes
$fs-900: 3.75rem; // 60px
$fs-800: 3rem; // 48px
$fs-600: 1.5rem; // 24px
$fs-500: 1.3125rem; // 21px
$fs-400: 1.125rem; // 18px
// font-weights
$fw-400: 400;
$fw-700: 700;
// size/spacing values (Including the border-width)
$size-8: 0.5rem;
$size-12: 0.75rem; // (not in design)
$size-16: 1rem;
$size-20: 1.25rem;
$size-32: 2rem;
$size-36: 2.25rem;
// simple reset
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}
// base styles
body {
font-size: $fs-400;
font-weight: $fw-400;
font-family: $ff-sans;
color: $color-neutral-900;
background-color: $color-neutral-100;
text-align: center;
}
.container {
width: min(100% - 2rem, 60rem);
margin-inline: auto;
}
.page-title {
color: $color-primary-400;
font-size: $fs-900;
margin-block: $size-32;
}
.pricing-plans {
border: $size-8 solid $color-primary-400;
display: flex;
}
.tier {
flex: 1;
padding: $size-36;
display: grid;
gap: $size-20;
&__title {
text-transform: uppercase;
font-weight: $fw-700;
color: $color-primary-400;
}
&__feature-list {
list-style: none;
}
&__list-item {
&:not(:last-child)::after {
content: "";
display: block;
height: 1px;
margin-block: $size-20;
background-color: $color-neutral-900;
opacity: 0.2;
}
}
&__price {
font-size: $fs-800;
font-weight: $fw-700;
span {
font-weight: $fw-400;
font-size: $fs-600;
}
}
}
.button {
cursor: pointer;
border: 0;
text-transform: uppercase;
font-weight: $fw-700;
color: $color-neutral-100;
background-color: $color-primary-400;
padding: 1em 1.5em;
justify-self: center;
}

31
projects/01-pricing-tiers/06-button-states/package.json Normal file
View File

@ -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"
}
}

85
projects/01-pricing-tiers/06-button-states/src/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hosting Plans</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="page-title">Hosting Plans</h1>
<div class="container">
<div class="pricing-plans">
<div class="tier">
<h2 class="tier__title">Free</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
1 domain
</li>
<li class="tier__list-item">
5gb of bandwidth
</li>
<li class="tier__list-item">
1gb of diskspace
</li>
<li class="tier__list-item">
5,000 monthly uniques
</li>
</ul>
<p class="tier__price">$0<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier inverted">
<h2 class="tier__title">Tiny</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
5 domain
</li>
<li class="tier__list-item">
250gb of bandwidth
</li>
<li class="tier__list-item">
5gb of diskspace
</li>
<li class="tier__list-item">
15,000 monthly uniques
</li>
</ul>
<p class="tier__price">$19<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Large</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
15 domain
</li>
<li class="tier__list-item">
750gb of bandwidth
</li>
<li class="tier__list-item">
20gb of diskspace
</li>
<li class="tier__list-item">
50,000 monthly uniques
</li>
</ul>
<p class="tier__price">$49<span>/month</span></p>
<button class="button">Get started</button>
</div>
</div>
</div>
</body>
</html>

130
projects/01-pricing-tiers/06-button-states/src/sass/style.scss Normal file
View File

@ -0,0 +1,130 @@
// colors
$color-neutral-100: #fff;
$color-neutral-900: #1f3049;
$color-primary-400: #0066ff;
// font-families
$ff-sans: "Open Sans", sans-serif;
// font-sizes
$fs-900: 3.75rem; // 60px
$fs-800: 3rem; // 48px
$fs-600: 1.5rem; // 24px
$fs-500: 1.3125rem; // 21px
$fs-400: 1.125rem; // 18px
// font-weights
$fw-400: 400;
$fw-700: 700;
// size/spacing values (Including the border-width)
$size-8: 0.5rem;
$size-12: 0.75rem; // (not in design)
$size-16: 1rem;
$size-20: 1.25rem;
$size-32: 2rem;
$size-36: 2.25rem;
// simple reset
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}
// base styles
body {
font-size: $fs-400;
font-weight: $fw-400;
font-family: $ff-sans;
color: $color-neutral-900;
background-color: $color-neutral-100;
text-align: center;
}
.container {
width: min(100% - 2rem, 60rem);
margin-inline: auto;
}
.inverted {
background: $color-primary-400;
color: $color-neutral-100;
}
.page-title {
color: $color-primary-400;
font-size: $fs-900;
margin-block: $size-32;
}
.pricing-plans {
border: $size-8 solid $color-primary-400;
display: flex;
}
.tier {
flex: 1;
padding: $size-36;
display: grid;
gap: $size-20;
&__title {
text-transform: uppercase;
font-weight: $fw-700;
color: $color-primary-400;
.inverted & {
color: $color-neutral-100;
}
}
&__feature-list {
list-style: none;
}
&__list-item {
&:not(:last-child)::after {
content: "";
display: block;
height: 1px;
margin-block: $size-20;
background-color: $color-neutral-900;
opacity: 0.2;
}
}
&__price {
font-size: $fs-800;
font-weight: $fw-700;
span {
font-weight: $fw-400;
font-size: $fs-600;
}
}
}
.button {
cursor: pointer;
border: 0;
text-transform: uppercase;
font-weight: $fw-700;
color: $color-neutral-100;
background-color: $color-primary-400;
padding: 1em 1.5em;
justify-self: center;
.inverted & {
color: $color-primary-400;
background-color: $color-neutral-100;
}
}

31
projects/01-pricing-tiers/07-final-version/package.json Normal file
View File

@ -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"
}
}

85
projects/01-pricing-tiers/07-final-version/src/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hosting Plans</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="page-title">Hosting Plans</h1>
<div class="container">
<div class="pricing-plans">
<div class="tier">
<h2 class="tier__title">Free</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
1 domain
</li>
<li class="tier__list-item">
5gb of bandwidth
</li>
<li class="tier__list-item">
1gb of diskspace
</li>
<li class="tier__list-item">
5,000 monthly uniques
</li>
</ul>
<p class="tier__price">$0<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier inverted">
<h2 class="tier__title">Tiny</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
5 domain
</li>
<li class="tier__list-item">
250gb of bandwidth
</li>
<li class="tier__list-item">
5gb of diskspace
</li>
<li class="tier__list-item">
15,000 monthly uniques
</li>
</ul>
<p class="tier__price">$19<span>/month</span></p>
<button class="button">Get started</button>
</div>
<div class="tier">
<h2 class="tier__title">Large</h2>
<ul class="tier__feature-list">
<li class="tier__list-item">
15 domain
</li>
<li class="tier__list-item">
750gb of bandwidth
</li>
<li class="tier__list-item">
20gb of diskspace
</li>
<li class="tier__list-item">
50,000 monthly uniques
</li>
</ul>
<p class="tier__price">$49<span>/month</span></p>
<button class="button">Get started</button>
</div>
</div>
</div>
</body>
</html>

136
projects/01-pricing-tiers/07-final-version/src/sass/style.scss Normal file
View File

@ -0,0 +1,136 @@
// colors
$color-neutral-100: #fff;
$color-neutral-900: #1f3049;
$color-primary-400: #0066ff;
// font-families
$ff-sans: "Open Sans", sans-serif;
// font-sizes
$fs-900: 3.75rem; // 60px
$fs-800: 3rem; // 48px
$fs-600: 1.5rem; // 24px
$fs-500: 1.3125rem; // 21px
$fs-400: 1.125rem; // 18px
// font-weights
$fw-400: 400;
$fw-700: 700;
// size/spacing values (Including the border-width)
$size-8: 0.5rem;
$size-12: 0.75rem; // (not in design)
$size-16: 1rem;
$size-20: 1.25rem;
$size-32: 2rem;
$size-36: 2.25rem;
// simple reset
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}
// base styles
body {
font-size: $fs-400;
font-weight: $fw-400;
font-family: $ff-sans;
color: $color-neutral-900;
background-color: $color-neutral-100;
text-align: center;
}
.container {
width: min(100% - 2rem, 60rem);
margin-inline: auto;
}
.inverted {
background: $color-primary-400;
color: $color-neutral-100;
}
.page-title {
color: $color-primary-400;
font-size: $fs-900;
margin-block: $size-32;
}
.pricing-plans {
border: $size-8 solid $color-primary-400;
display: flex;
}
.tier {
flex: 1;
padding: $size-36;
display: grid;
gap: $size-20;
&__title {
text-transform: uppercase;
font-weight: $fw-700;
color: $color-primary-400;
.inverted & {
color: $color-neutral-100;
}
}
&__feature-list {
list-style: none;
}
&__list-item {
&:not(:last-child)::after {
content: "";
display: block;
height: 1px;
margin-block: $size-20;
background-color: $color-neutral-900;
opacity: 0.2;
}
}
&__price {
font-size: $fs-800;
font-weight: $fw-700;
span {
font-weight: $fw-400;
font-size: $fs-600;
}
}
}
.button {
cursor: pointer;
border: 0;
text-transform: uppercase;
font-weight: $fw-700;
color: $color-neutral-100;
background-color: $color-primary-400;
padding: 1em 1.5em;
justify-self: center;
.inverted & {
color: $color-primary-400;
background-color: $color-neutral-100;
}
&:hover,
&:focus {
color: $color-neutral-100;
background-color: rgb($color-neutral-900, 0.7);
}
}

BIN
projects/01-pricing-tiers/hosting-plans.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

2
projects/02-tshirts/00-blank-starter/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
public/

31
projects/02-tshirts/00-blank-starter/package.json Normal file
View File

@ -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"
}
}

BIN
projects/02-tshirts/00-blank-starter/src/assets/feline.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
projects/02-tshirts/00-blank-starter/src/assets/m-jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
projects/02-tshirts/00-blank-starter/src/assets/outcast.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
projects/02-tshirts/00-blank-starter/src/assets/peace.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

6
projects/02-tshirts/00-blank-starter/src/assets/plus-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2334 4.05029V6.62402H0V4.05029H10.2334ZM6.52148 0V10.8691H3.72217V0H6.52148Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

BIN
projects/02-tshirts/00-blank-starter/src/assets/shoes.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
projects/02-tshirts/00-blank-starter/src/assets/w-jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

121
projects/02-tshirts/00-blank-starter/src/index.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-shirts</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="text-center">
<div class="container">
<h1 class="page-title">T-Shirts</h1>
<p>Browse our selection of high-quality t-shirts</p>
</div>
</header>
<main>
<div class="container">
<div class="even-columns">
<div class="card" data-type="product">
<img src="assets/outcast.jpg" alt="white t-shirt with graphic of a man in black and white, and an orange box, with white text reading Out Cast inside it">
<div class="card__content">
<div>
<p class="text-accent">Men's shirts</p>
<h2>Out Cast</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
<div class="card" data-type="product">
<img src="assets/peace.jpg" alt="black t-shirt with a large white graphic of the skeleton of a hand, making the peace symbol">
<div class="card__content">
<div>
<p class="text-accent">Men's shirts</p>
<h2>Peace</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
<div class="card" data-type="product">
<img src="assets/feline.jpg" alt="white t-shirt with the word feline written in a black cursive font">
<div class="card__content">
<div>
<p class="text-accent">Woman's shirts</p>
<h2>Feline</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
</div>
<h2 class="text-center fw-bold">Browser other categories</h2>
<div class="even-columns">
<a class="card" data-type="link-with-image">
<img src="assets/outcast.jpg" alt="">
<div class="card__content">
<p>Men's shirts</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/feline.jpg" alt="">
<div class="card__content">
<p>Woman's shirts</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/w-jacket.jpg" alt="">
<div class="card__content">
<p>Woman's jackets</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/m-jacket.jpg" alt="">
<div class="card__content">
<p>Men's jackets</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/shoes.jpg" alt="">
<div class="card__content">
<p>Men's shoes</p>
</div>
</a>
</div>
</div>
</main>
</body>
</html>

0
projects/02-tshirts/00-blank-starter/src/scss/style.scss Normal file
View File

2
projects/02-tshirts/01-the-html/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
public/

31
projects/02-tshirts/01-the-html/package.json Normal file
View File

@ -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"
}
}

BIN
projects/02-tshirts/01-the-html/src/assets/feline.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
projects/02-tshirts/01-the-html/src/assets/m-jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
projects/02-tshirts/01-the-html/src/assets/outcast.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
projects/02-tshirts/01-the-html/src/assets/peace.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

6
projects/02-tshirts/01-the-html/src/assets/plus-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2334 4.05029V6.62402H0V4.05029H10.2334ZM6.52148 0V10.8691H3.72217V0H6.52148Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

BIN
projects/02-tshirts/01-the-html/src/assets/shoes.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
projects/02-tshirts/01-the-html/src/assets/w-jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

121
projects/02-tshirts/01-the-html/src/index.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-shirts</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="text-center">
<div class="container">
<h1 class="page-title">T-Shirts</h1>
<p>Browse our selection of high-quality t-shirts</p>
</div>
</header>
<main>
<div class="container">
<div class="even-columns">
<div class="card" data-type="product">
<img src="assets/outcast.jpg" alt="white t-shirt with graphic of a man in black and white, and an orange box, with white text reading Out Cast inside it">
<div class="card__content">
<div>
<p class="text-accent">Men's shirts</p>
<h2>Out Cast</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
<div class="card" data-type="product">
<img src="assets/peace.jpg" alt="black t-shirt with a large white graphic of the skeleton of a hand, making the peace symbol">
<div class="card__content">
<div>
<p class="text-accent">Men's shirts</p>
<h2>Peace</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
<div class="card" data-type="product">
<img src="assets/feline.jpg" alt="white t-shirt with the word feline written in a black cursive font">
<div class="card__content">
<div>
<p class="text-accent">Woman's shirts</p>
<h2>Feline</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
</div>
<h2 class="text-center fw-bold">Browser other categories</h2>
<div class="even-columns">
<a class="card" data-type="link-with-image">
<img src="assets/outcast.jpg" alt="">
<div class="card__content">
<p>Men's shirts</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/feline.jpg" alt="">
<div class="card__content">
<p>Woman's shirts</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/w-jacket.jpg" alt="">
<div class="card__content">
<p>Woman's jackets</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/m-jacket.jpg" alt="">
<div class="card__content">
<p>Men's jackets</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/shoes.jpg" alt="">
<div class="card__content">
<p>Men's shoes</p>
</div>
</a>
</div>
</div>
</main>
</body>
</html>

0
projects/02-tshirts/01-the-html/src/scss/style.scss Normal file
View File

2
projects/02-tshirts/02-abstracts/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
public/

31
projects/02-tshirts/02-abstracts/package.json Normal file
View File

@ -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"
}
}

BIN
projects/02-tshirts/02-abstracts/src/assets/feline.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
projects/02-tshirts/02-abstracts/src/assets/m-jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
projects/02-tshirts/02-abstracts/src/assets/outcast.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
projects/02-tshirts/02-abstracts/src/assets/peace.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

6
projects/02-tshirts/02-abstracts/src/assets/plus-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2334 4.05029V6.62402H0V4.05029H10.2334ZM6.52148 0V10.8691H3.72217V0H6.52148Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

BIN
projects/02-tshirts/02-abstracts/src/assets/shoes.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
projects/02-tshirts/02-abstracts/src/assets/w-jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

121
projects/02-tshirts/02-abstracts/src/index.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-shirts</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="text-center">
<div class="container">
<h1 class="page-title">T-Shirts</h1>
<p>Browse our selection of high-quality t-shirts</p>
</div>
</header>
<main>
<div class="container">
<div class="even-columns">
<div class="card" data-type="product">
<img src="assets/outcast.jpg" alt="white t-shirt with graphic of a man in black and white, and an orange box, with white text reading Out Cast inside it">
<div class="card__content">
<div>
<p class="text-accent">Men's shirts</p>
<h2>Out Cast</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
<div class="card" data-type="product">
<img src="assets/peace.jpg" alt="black t-shirt with a large white graphic of the skeleton of a hand, making the peace symbol">
<div class="card__content">
<div>
<p class="text-accent">Men's shirts</p>
<h2>Peace</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
<div class="card" data-type="product">
<img src="assets/feline.jpg" alt="white t-shirt with the word feline written in a black cursive font">
<div class="card__content">
<div>
<p class="text-accent">Woman's shirts</p>
<h2>Feline</h2>
</div>
<div>
<p class="price fw-bold">$23.99</p>
</div>
</div>
<button>
<span class="visually-hidden">add to cart</span>
<img src="assets/plus-icon.svg" alt="">
</button>
</div>
</div>
<h2 class="text-center fw-bold">Browser other categories</h2>
<div class="even-columns">
<a class="card" data-type="link-with-image">
<img src="assets/outcast.jpg" alt="">
<div class="card__content">
<p>Men's shirts</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/feline.jpg" alt="">
<div class="card__content">
<p>Woman's shirts</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/w-jacket.jpg" alt="">
<div class="card__content">
<p>Woman's jackets</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/m-jacket.jpg" alt="">
<div class="card__content">
<p>Men's jackets</p>
</div>
</a>
<a class="card" data-type="link-with-image">
<img src="assets/shoes.jpg" alt="">
<div class="card__content">
<p>Men's shoes</p>
</div>
</a>
</div>
</div>
</main>
</body>
</html>

42
projects/02-tshirts/02-abstracts/src/scss/style.scss Normal file
View File

@ -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;
}
}

2
projects/02-tshirts/03-base/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
public/

31
projects/02-tshirts/03-base/package.json Normal file
View File

@ -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"
}
}

Some files were not shown because too many files have changed in this diff Show More