fixes
This commit is contained in:
Kevin Powell
parent
c64a0e707f
commit
f7a4a9c46d
|
|
@ -1,11 +1,27 @@
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
|
||||||
<h1>Nesting Challenge</h1>
|
<!DOCTYPE html>
|
||||||
<p>Style the following buttons so that they look like the provided sample. When you're done, not only should <a
|
<html lang="en">
|
||||||
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>
|
<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>Nesting Challenge #2</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<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__primary">Primary button</a>
|
||||||
<a href="#" class="btn btn__secondary">Secondary button</a>
|
<a href="#" class="btn btn__secondary">Secondary button</a>
|
||||||
<a href="#" class="btn btn__accent">Accent button</a>
|
<a href="#" class="btn btn__accent">Accent button</a>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,16 +1,54 @@
|
||||||
$clr-primary: hsl(206, 33%, 37%)
|
$clr-primary-400: hsl(206, 33%, 37%)
|
||||||
$clr-secondary: hsl(253, 27%, 35%)
|
$clr-primary-500: hsl(206, 33%, 25%)
|
||||||
$clr-accent: hsl(45, 82%, 65%)
|
$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
|
body
|
||||||
margin: 4rem
|
margin: 4rem 0 0
|
||||||
font:
|
font:
|
||||||
size: 1.25rem
|
size: 1.25rem
|
||||||
family: system-ui, sans-serif
|
family: system-ui, sans-serif
|
||||||
text-align: center
|
|
||||||
|
text-align: center
|
||||||
.btn
|
|
||||||
/* your code starts here */
|
|
||||||
|
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 */
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
@use "mixins";
|
|
||||||
|
|
||||||
$clr-primary-400: hsl(206, 33%, 37%);
|
$clr-primary-400: hsl(206, 33%, 37%);
|
||||||
$clr-primary-500: hsl(206, 33%, 25%);
|
$clr-primary-500: hsl(206, 33%, 25%);
|
||||||
$clr-secondary-400: hsl(253, 27%, 35%);
|
$clr-secondary-400: hsl(253, 27%, 35%);
|
||||||
|
|
@ -47,8 +45,10 @@ section {
|
||||||
border: 0;
|
border: 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
// your code here
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-subdued {
|
.text-subdued {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
// your code here
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,9 @@
|
||||||
## White: #f8f7f7
|
## White: #f8f7f7
|
||||||
|
|
||||||
- page background
|
- page background
|
||||||
|
- primary button text color
|
||||||
- outline button background
|
- outline button background
|
||||||
|
- hover text color for both buttons
|
||||||
|
|
||||||
## Black: #201e1f
|
## Black: #201e1f
|
||||||
|
|
||||||
|
|
@ -14,6 +16,7 @@
|
||||||
## Red: #da3f0b
|
## Red: #da3f0b
|
||||||
|
|
||||||
- title color
|
- title color
|
||||||
- button borders
|
- button borders (both buttons)
|
||||||
- primary button background
|
- primary button background
|
||||||
|
- outline button text color
|
||||||
- button hover/focus shadow
|
- button hover/focus shadow
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
body
|
||||||
|
font-family: system-ui
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
|
||||||
|
.section-one,
|
||||||
|
.section-two,
|
||||||
|
.section-three
|
||||||
|
text-align: center
|
||||||
|
padding: 10vh 0
|
||||||
|
|
||||||
|
|
@ -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 */
|
|
||||||
|
|
@ -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"}
|
|
||||||
|
|
@ -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 */
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -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));
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
@ -7,115 +8,10 @@
|
||||||
<title>T-shirts</title>
|
<title>T-shirts</title>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
@ -7,6 +8,7 @@
|
||||||
<title>T-shirts</title>
|
<title>T-shirts</title>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class="text-center">
|
<header class="text-center">
|
||||||
|
|
@ -19,9 +21,10 @@
|
||||||
<main>
|
<main>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="even-columns">
|
<div class="even-columns">
|
||||||
|
|
||||||
<div class="card" data-type="product">
|
<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">
|
<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 class="card__content">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-accent">Men's shirts</p>
|
<p class="text-accent">Men's shirts</p>
|
||||||
|
|
@ -31,14 +34,15 @@
|
||||||
<p class="price fw-bold">$23.99</p>
|
<p class="price fw-bold">$23.99</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button>
|
<button class="button">
|
||||||
<span class="visually-hidden">add to cart</span>
|
<span class="visually-hidden">add to cart</span>
|
||||||
<img src="assets/plus-icon.svg" alt="">
|
<img src="assets/plus-icon.svg" alt="">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card" data-type="product">
|
<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">
|
<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 class="card__content">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-accent">Men's shirts</p>
|
<p class="text-accent">Men's shirts</p>
|
||||||
|
|
@ -48,7 +52,7 @@
|
||||||
<p class="price fw-bold">$23.99</p>
|
<p class="price fw-bold">$23.99</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button>
|
<button class="button">
|
||||||
<span class="visually-hidden">add to cart</span>
|
<span class="visually-hidden">add to cart</span>
|
||||||
<img src="assets/plus-icon.svg" alt="">
|
<img src="assets/plus-icon.svg" alt="">
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -65,18 +69,18 @@
|
||||||
<p class="price fw-bold">$23.99</p>
|
<p class="price fw-bold">$23.99</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button>
|
<button class="button">
|
||||||
<span class="visually-hidden">add to cart</span>
|
<span class="visually-hidden">add to cart</span>
|
||||||
<img src="assets/plus-icon.svg" alt="">
|
<img src="assets/plus-icon.svg" alt="">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-center fw-bold">Browser other categories</h2>
|
<h2 class="text-center fw-bold">Browser other categories</h2>
|
||||||
|
|
||||||
<div class="even-columns">
|
<div class="even-columns">
|
||||||
|
|
||||||
<a class="card" data-type="link-with-image">
|
<a class="card" data-type="link-with-image">
|
||||||
<img src="assets/outcast.jpg" alt="">
|
<img src="assets/outcast.jpg" alt="">
|
||||||
<div class="card__content">
|
<div class="card__content">
|
||||||
|
|
@ -118,4 +122,5 @@
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -17,6 +17,7 @@ $blue-800: hsla(216, 71%, 16%, 1);
|
||||||
$neutral-100: hsl(0 0% 100%);
|
$neutral-100: hsl(0 0% 100%);
|
||||||
|
|
||||||
$size-8: 0.5rem;
|
$size-8: 0.5rem;
|
||||||
|
$size-12: 0.75rem;
|
||||||
$size-16: 1rem;
|
$size-16: 1rem;
|
||||||
$size-32: 2rem;
|
$size-32: 2rem;
|
||||||
$size-36: 3rem;
|
$size-36: 3rem;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
@ -7,9 +8,10 @@
|
||||||
<title>T-shirts</title>
|
<title>T-shirts</title>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class="text-center margin-block-xl">
|
<header class="text-center margin-block-xl">
|
||||||
|
|
@ -22,9 +24,10 @@
|
||||||
<main>
|
<main>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="even-columns" style="--gap: 2rem">
|
<div class="even-columns" style="--gap: 2rem">
|
||||||
|
|
||||||
<div class="card" data-type="product">
|
<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">
|
<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 class="card__content">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-accent">Men's shirts</p>
|
<p class="text-accent">Men's shirts</p>
|
||||||
|
|
@ -34,14 +37,15 @@
|
||||||
<p class="price fw-bold">$23.99</p>
|
<p class="price fw-bold">$23.99</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button>
|
<button class="button">
|
||||||
<span class="visually-hidden">add to cart</span>
|
<span class="visually-hidden">add to cart</span>
|
||||||
<img src="assets/plus-icon.svg" alt="">
|
<img src="assets/plus-icon.svg" alt="">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card" data-type="product">
|
<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">
|
<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 class="card__content">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-accent">Men's shirts</p>
|
<p class="text-accent">Men's shirts</p>
|
||||||
|
|
@ -51,7 +55,7 @@
|
||||||
<p class="price fw-bold">$23.99</p>
|
<p class="price fw-bold">$23.99</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button>
|
<button class="button">
|
||||||
<span class="visually-hidden">add to cart</span>
|
<span class="visually-hidden">add to cart</span>
|
||||||
<img src="assets/plus-icon.svg" alt="">
|
<img src="assets/plus-icon.svg" alt="">
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -68,18 +72,18 @@
|
||||||
<p class="price fw-bold">$23.99</p>
|
<p class="price fw-bold">$23.99</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button>
|
<button class="button">
|
||||||
<span class="visually-hidden">add to cart</span>
|
<span class="visually-hidden">add to cart</span>
|
||||||
<img src="assets/plus-icon.svg" alt="">
|
<img src="assets/plus-icon.svg" alt="">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-center fw-bold margin-block-xl">Browser other categories</h2>
|
<h2 class="text-center fw-bold margin-block-xl">Browser other categories</h2>
|
||||||
|
|
||||||
<div class="even-columns">
|
<div class="even-columns">
|
||||||
|
|
||||||
<a class="[ card ] [ text-center ]" data-type="link-with-image">
|
<a class="[ card ] [ text-center ]" data-type="link-with-image">
|
||||||
<img src="assets/outcast.jpg" alt="">
|
<img src="assets/outcast.jpg" alt="">
|
||||||
<div class="card__content">
|
<div class="card__content">
|
||||||
|
|
@ -121,4 +125,5 @@
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -17,6 +17,7 @@ $blue-800: hsla(216, 71%, 16%, 1);
|
||||||
$neutral-100: hsl(0 0% 100%);
|
$neutral-100: hsl(0 0% 100%);
|
||||||
|
|
||||||
$size-8: 0.5rem;
|
$size-8: 0.5rem;
|
||||||
|
$size-12: 0.75rem;
|
||||||
$size-16: 1rem;
|
$size-16: 1rem;
|
||||||
$size-32: 2rem;
|
$size-32: 2rem;
|
||||||
$size-36: 3rem;
|
$size-36: 3rem;
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@ $blue-800: hsla(216, 71%, 16%, 1);
|
||||||
$neutral-100: hsl(0 0% 100%);
|
$neutral-100: hsl(0 0% 100%);
|
||||||
|
|
||||||
$size-8: 0.5rem;
|
$size-8: 0.5rem;
|
||||||
|
$size-12: 0.75rem;
|
||||||
$size-16: 1rem;
|
$size-16: 1rem;
|
||||||
$size-32: 2rem;
|
$size-32: 2rem;
|
||||||
$size-36: 3rem;
|
$size-36: 3rem;
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@ $blue-800: hsla(216, 71%, 16%, 1);
|
||||||
$neutral-100: hsl(0 0% 100%);
|
$neutral-100: hsl(0 0% 100%);
|
||||||
|
|
||||||
$size-8: 0.5rem;
|
$size-8: 0.5rem;
|
||||||
|
$size-12: 0.75rem;
|
||||||
$size-16: 1rem;
|
$size-16: 1rem;
|
||||||
$size-32: 2rem;
|
$size-32: 2rem;
|
||||||
$size-36: 3rem;
|
$size-36: 3rem;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue