From b6b67f441d4578179ed02f018d623ef6c844452e Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Mon, 8 Oct 2018 19:14:03 -0500 Subject: [PATCH 1/4] html /css updated --- src/005-centering/example/example.css | 31 ++++++++++++++++++++++++++- src/005-centering/example/index.html | 2 +- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css index 4dba466..26221ce 100644 --- a/src/005-centering/example/example.css +++ b/src/005-centering/example/example.css @@ -1,5 +1,34 @@ /* * Practice : Centering * Version: 1 - * By: xxx + * By: Laura Alvarez */ + .mdl-layout__content { + margin-top: 20px; + } + +.page-content { + max-width: 1200px; + margin: auto; + background-color: rgb(233,233,233); + padding-top: 1px; +} + +h4, .nav { + text-align: center; + background: #bdbdbd87; + padding: 5px; +} + +.nav { + padding: 10px; +} + +.nav a { + text-decoration: none; + padding: 10px; +} + +.nav div { + display: inline; +} diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html index b6d2e1e..94a4088 100644 --- a/src/005-centering/example/index.html +++ b/src/005-centering/example/index.html @@ -36,7 +36,7 @@

This text is centered.

-
+
Link 1
Link 2
Link 3
From d34e55c95566751836aca9987711309f10d6db92 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Mon, 8 Oct 2018 20:37:11 -0500 Subject: [PATCH 2/4] Missing center last section - colors --- src/005-centering/example/example.css | 65 ++++++++++++++++++++++++++- src/005-centering/example/index.html | 28 ++++++------ 2 files changed, 77 insertions(+), 16 deletions(-) diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css index 26221ce..6c94dc7 100644 --- a/src/005-centering/example/example.css +++ b/src/005-centering/example/example.css @@ -7,21 +7,25 @@ margin-top: 20px; } + .content, .left-square, .left-square-m, .vertically, .gray-square-one, .nav, h4 { + background: #bdbdbd87; + } + .page-content { max-width: 1200px; - margin: auto; + margin: 0 20px 20px 20px; background-color: rgb(233,233,233); padding-top: 1px; } h4, .nav { text-align: center; - background: #bdbdbd87; padding: 5px; } .nav { padding: 10px; + margin-bottom: 20px; } .nav a { @@ -32,3 +36,60 @@ h4, .nav { .nav div { display: inline; } + +.content { + margin: 10px; + width: 33%; + padding: 32px; +} + +.content-section { + display: flex; + padding: 0 120px; +} + +.first-row div{ + margin-top: auto; +} + +.second-row { + margin-bottom: 20px; +} + +.left-square{ + width: 50%; + padding: 30px 0 30px 10px; +} + +.left-square-m { + width: 15%; + margin: 15px 0; + padding: 50px 0 50px 10px; +} + +.vertically { + padding: 100px 25px; + margin: 15px 0; +} + +.gray-square-one { + padding: 70px 20px; + margin-top: 20px; +} + +.gray-square-one div{ + color: white; + background: darkgrey; +} + +.pad1 div{ + padding: 10px 0px 70px 20px; +} + +.pad2 div{ + padding: 10px; +} + +.green-color { + +} diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html index 94a4088..0378b46 100644 --- a/src/005-centering/example/index.html +++ b/src/005-centering/example/index.html @@ -44,33 +44,33 @@

This text is centered.

-
-
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is +
+
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row.
-
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me +
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
-
I'm an element that is block-like with my siblings and we're centered in a row.
+
I'm an element that is block-like with my siblings and we're centered in a row.
-
-
I'm an element that is block-like with my siblings and we're centered in a row.
-
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me +
+
I'm an element that is block-like with my siblings and we're centered in a row.
+
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
-
I'm an element that is block-like with my siblings and we're centered in a row.
+
I'm an element that is block-like with my siblings and we're centered in a row.
-
+
I'm a centered line.
-
+

I'm vertically centered multiple lines of text in a CSS-created table layout.

-
+

I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra vitae corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci pulvinar assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed. @@ -83,18 +83,18 @@

This text is centered.

elementum aliquam vitae.

-
+
I'm a block-level element with a fixed height, centered vertically within my parent.
-
+
I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level element with an unknown height, centered vertically within my parent.
-
+
From c47adf0d0733d3da67820eeefb184c0971a91656 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Tue, 9 Oct 2018 09:05:47 -0500 Subject: [PATCH 3/4] html / css updated for centering exercise --- src/005-centering/example/example.css | 34 +++++++++++++++++++++++---- src/005-centering/example/index.html | 8 +++---- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css index 6c94dc7..d2d9f82 100644 --- a/src/005-centering/example/example.css +++ b/src/005-centering/example/example.css @@ -13,7 +13,7 @@ .page-content { max-width: 1200px; - margin: 0 20px 20px 20px; + margin: auto; background-color: rgb(233,233,233); padding-top: 1px; } @@ -73,7 +73,7 @@ h4, .nav { } .gray-square-one { - padding: 70px 20px; + padding: 150px 20px; margin-top: 20px; } @@ -83,13 +83,37 @@ h4, .nav { } .pad1 div{ - padding: 10px 0px 70px 20px; + padding: 10px 0px 80px 20px; } .pad2 div{ padding: 10px; } -.green-color { - +.green-square { + background-color: rgb(118, 166, 162); + padding: 100px; + margin-top: 20px; + display: flex; + justify-content: center; + align-items: center; +} + +.red-square { + padding: 60px; + background-color: rgb(196, 86, 91); + position: relative; +} + +.black-square { + padding: 30px; + background-color: rgb(66,76,88); +} + +.yellow-square { + padding: 18px; + background-color: rgb(221, 173, 120); + position: absolute; + top: 40%; + left: 40%; } diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html index 0378b46..5ec3a65 100644 --- a/src/005-centering/example/index.html +++ b/src/005-centering/example/index.html @@ -94,10 +94,10 @@

This text is centered.

-
-
-
-
+
+
+
+
From da494cf6f1535201c70f539d6d0ef3047b7848f7 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Tue, 9 Oct 2018 09:08:00 -0500 Subject: [PATCH 4/4] indentation --- src/005-centering/example/example.css | 212 +++++++++++++------------- 1 file changed, 106 insertions(+), 106 deletions(-) diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css index d2d9f82..fc2e8f0 100644 --- a/src/005-centering/example/example.css +++ b/src/005-centering/example/example.css @@ -11,109 +11,109 @@ background: #bdbdbd87; } -.page-content { - max-width: 1200px; - margin: auto; - background-color: rgb(233,233,233); - padding-top: 1px; -} - -h4, .nav { - text-align: center; - padding: 5px; -} - -.nav { - padding: 10px; - margin-bottom: 20px; -} - -.nav a { - text-decoration: none; - padding: 10px; -} - -.nav div { - display: inline; -} - -.content { - margin: 10px; - width: 33%; - padding: 32px; -} - -.content-section { - display: flex; - padding: 0 120px; -} - -.first-row div{ - margin-top: auto; -} - -.second-row { - margin-bottom: 20px; -} - -.left-square{ - width: 50%; - padding: 30px 0 30px 10px; -} - -.left-square-m { - width: 15%; - margin: 15px 0; - padding: 50px 0 50px 10px; -} - -.vertically { - padding: 100px 25px; - margin: 15px 0; -} - -.gray-square-one { - padding: 150px 20px; - margin-top: 20px; -} - -.gray-square-one div{ - color: white; - background: darkgrey; -} - -.pad1 div{ - padding: 10px 0px 80px 20px; -} - -.pad2 div{ - padding: 10px; -} - -.green-square { - background-color: rgb(118, 166, 162); - padding: 100px; - margin-top: 20px; - display: flex; - justify-content: center; - align-items: center; -} - -.red-square { - padding: 60px; - background-color: rgb(196, 86, 91); - position: relative; -} - -.black-square { - padding: 30px; - background-color: rgb(66,76,88); -} - -.yellow-square { - padding: 18px; - background-color: rgb(221, 173, 120); - position: absolute; - top: 40%; - left: 40%; -} + .page-content { + max-width: 1200px; + margin: auto; + background-color: rgb(233,233,233); + padding-top: 1px; + } + + h4, .nav { + text-align: center; + padding: 5px; + } + + .nav { + padding: 10px; + margin-bottom: 20px; + } + + .nav a { + text-decoration: none; + padding: 10px; + } + + .nav div { + display: inline; + } + + .content { + margin: 10px; + width: 33%; + padding: 32px; + } + + .content-section { + display: flex; + padding: 0 120px; + } + + .first-row div{ + margin-top: auto; + } + + .second-row { + margin-bottom: 20px; + } + + .left-square{ + width: 50%; + padding: 30px 0 30px 10px; + } + + .left-square-m { + width: 15%; + margin: 15px 0; + padding: 50px 0 50px 10px; + } + + .vertically { + padding: 100px 25px; + margin: 15px 0; + } + + .gray-square-one { + padding: 150px 20px; + margin-top: 20px; + } + + .gray-square-one div{ + color: white; + background: darkgrey; + } + + .pad1 div{ + padding: 10px 0px 80px 20px; + } + + .pad2 div{ + padding: 10px; + } + + .green-square { + background-color: rgb(118, 166, 162); + padding: 100px; + margin-top: 20px; + display: flex; + justify-content: center; + align-items: center; + } + + .red-square { + padding: 60px; + background-color: rgb(196, 86, 91); + position: relative; + } + + .black-square { + padding: 30px; + background-color: rgb(66,76,88); + } + + .yellow-square { + padding: 18px; + background-color: rgb(221, 173, 120); + position: absolute; + top: 40%; + left: 40%; + }