From b7c35cc6790a8cde4ad4219272476f9f66cad1b7 Mon Sep 17 00:00:00 2001 From: NBryant83 Date: Thu, 28 Jan 2021 14:25:51 -0500 Subject: [PATCH] css layout practice --- layout1/index.html | 27 ++++++++++++++---- layout1/style.css | 69 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 89 insertions(+), 7 deletions(-) diff --git a/layout1/index.html b/layout1/index.html index 68e3d66..7e7e3eb 100644 --- a/layout1/index.html +++ b/layout1/index.html @@ -1,12 +1,27 @@ + - - - Layout 1 - Tableau II - + + + Layout 1 - Tableau II + + -

I love art!

+

I love art!

+
+
one
+
two
+
three
+
four
+
five
+
six
+
seven
+
eight
+
nine
+
+ - + + \ No newline at end of file diff --git a/layout1/style.css b/layout1/style.css index 7b34845..65b2228 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,70 @@ h1 { - color: rebeccapurple; + color: rebeccapurple; } + +div { + display: flex; + flex-wrap: wrap; +} + +#one { + border: 1px solid salmon; + height: 100px; + width: 37%; + flex-direction: row; +} + +#two { + border: 1px solid gray; + height: 100px; + width: 37%; + flex-direction: row; +} + +#three { + border: 1px solid steelblue; + height: 200px; + width: 25%; +} + +.top { + border: 1px solid black; +} + +#four { + height: 200px; + width: 10%; + border: 1px solid orange; + align-content: flex-start; + margin-top: -100px; +} + +#five { + border: 1px solid maroon; + width: 64%; + height: 300px; + display: flex; + align-items: center; + margin-top: -100px; +} + +#six { + border: 1px solid greenyellow; + width: 25%; + display: flex; + flex-direction: row-reverse; + height: 200px; +} + +.rightside { + flex-direction: column; +} + +#seven { + border: 1px solid rgb(243, 12, 12); + flex-direction: column; + height: 200px; + width: 9.5%; + margin-top: -100 !important; + align-self: flex-start; +} \ No newline at end of file