diff --git a/index.html b/index.html index c2cd391..b6a994b 100644 --- a/index.html +++ b/index.html @@ -13,18 +13,65 @@

CSS Board

Selectors

- +
+ Lee-Moss +
@@ -32,34 +79,10 @@

Padding

Layouts

diff --git a/styles.css b/styles.css index fdf0b99..e11472d 100644 --- a/styles.css +++ b/styles.css @@ -14,6 +14,7 @@ h3 { font-weight: bold; margin-bottom: 4px; font-weight: bold; + font-display: bold; } .post-it { @@ -22,6 +23,16 @@ h3 { text-align: center; padding: 10px; margin-bottom: 20px; + height: 200px; + aspect-ratio: 1/1; + background-color: #FF6F91; + transform: rotate(10deg) +} +#Lee-Moss { + aspect-ratio: 1; + height: 200px; + background-color: #ff6f91; + rotate: 2deg; } .dashboard-frame { @@ -88,6 +99,19 @@ h3 { /* SELECTORS */ /***************************************************/ /* Put Selector post-it styles here! ↓ */ +.dashboard--selectors { +transform: rotate(-3deg); +background-color:#E0EA87; +} +h3 { + font-weight: bold; +} +======= +.post-it { + aspect-ratio: 1/1; + height: 200px; + background-color: #E0EA87; + rotate: -10deg; /***************************************************/ /* PROPERTIES */ @@ -95,45 +119,51 @@ h3 { /* Put Property post-it styles here! ↓ */ .post-it { - background-color: #ff6f91; - aspect-ratio: 1 / 1; + aspect-ratio: 1/1; height: 200px; - transform: rotate(-5deg); + background-color: #FF6F91; } -.post-it h3 { - font-weight: bold; + +#lewis-smith { + rotate: -4deg; } -/***************************************************/ -/* LAYOUTS */ -/***************************************************/ -/* Put Layout post-it styles here! ↓ */ -#sarah-moran { - background-color: #0089ba; +#joseph-redmond { + transform:rotate(8deg); + background-color: #0089BA; height: 200px; - aspect-ratio: 1/1; - rotate: 5deg; + padding-top: 100%; } -#greg-cain { - background-color: #0089ba; - max-width: 200px; - max-height: 200px; - transform: rotate(10deg); +#joseph-redmond h2 { + font-weight: bold; +} + +#Rob-B { + background-color: #FF6F91; } -#tarndeep { - width: 200px; + + aspect-ratio: 1 / 1; height: 200px; - border: 2px turquoise solid; - background-color: #0089ba; transform: rotate(-5deg); } -#tarndeep h3 { +#Rob-B h3 { font-weight: bold; } + +/***************************************************/ +/* LAYOUTS */ +/***************************************************/ +/* Put Layout post-it styles here! ↓ */ + +#matthew-giles { + background-color: #0089ba; + transform: rotate(-4deg); +} + /***************************************************/ /* MEDIA QUERIES TO ENSURE RESPONSIVENESS */ /* Please do not change ^_^ */