From e404d6656d78cca12d4a03f9836815ca17406c6b Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Tue, 16 Oct 2018 16:54:54 -0500 Subject: [PATCH 1/3] adding gradient background color, shadow in main titles and line --- src/010-background/example/example.css | 32 +++++++++++++++++++++++++- src/010-background/example/index.html | 4 ++-- 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/010-background/example/example.css b/src/010-background/example/example.css index 8c1053d..9eae7b8 100644 --- a/src/010-background/example/example.css +++ b/src/010-background/example/example.css @@ -1,5 +1,35 @@ /* * Practice : Background, Color and Shadows * Version: 1 - * By: xxx + * By: Laura Alvarez */ + +.page-content { + background-image: radial-gradient(rgba(245, 162, 117, 1), rgba(210, 79, 46, 1)); +} + +h2, h3, p { + color: white; + margin: 0; +} + +.header { + text-shadow: 3px 3px black; + text-align: center; + margin: 0; +} + +.header h2 { + margin-top: 20px; +} + +.header h3 { + font-size: 30px; + margin-bottom: 20px; +} + +#line { + height: 2px; + background-image: linear-gradient(#f5a275, #D24F2E); + margin-bottom: 40px; +} \ No newline at end of file diff --git a/src/010-background/example/index.html b/src/010-background/example/index.html index 7689647..784b81e 100644 --- a/src/010-background/example/index.html +++ b/src/010-background/example/index.html @@ -35,10 +35,10 @@
-
+

Lorem ipsum dolor sit amet

Fusce pharetra ac nibh vitae viverra

- +
From 54e97cddbb242d1ccc8db11603c642f7cf14861c Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Wed, 17 Oct 2018 16:24:55 -0500 Subject: [PATCH 2/3] html / css updated for background exercise --- src/010-background/example/example.css | 80 +++++++++++++++++++++++++- src/010-background/example/index.html | 10 ++-- 2 files changed, 83 insertions(+), 7 deletions(-) diff --git a/src/010-background/example/example.css b/src/010-background/example/example.css index 9eae7b8..9e621bd 100644 --- a/src/010-background/example/example.css +++ b/src/010-background/example/example.css @@ -4,13 +4,33 @@ * By: Laura Alvarez */ -.page-content { +body { background-image: radial-gradient(rgba(245, 162, 117, 1), rgba(210, 79, 46, 1)); } h2, h3, p { color: white; margin: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; +} + +.content { + padding-bottom: 500px; + text-align: center; +} + +img { + height: 100px; + border: 3px solid white; + margin-right: 10px; } .header { @@ -31,5 +51,61 @@ h2, h3, p { #line { height: 2px; background-image: linear-gradient(#f5a275, #D24F2E); - margin-bottom: 40px; +} + +.boxes { + background-color: rgb(247, 161, 122); + width: auto; + padding: 15px; + box-shadow: 0px 3px darkred; + display: flex; + height: auto; + border-radius: 100px; + border: 3px solid rgb(255, 179, 147); +} + +.boxes:first-child { + margin: 100px 0 30px 0; +} + +.boxes img:first-child { + border-radius: 200px; +} + +.boxes p, .boxes h2 { + font-size: 1rem; + text-shadow: 0px 1px black; + margin-top: 13px; + margin-bottom: -20px; + word-spacing: 2px; +} + +.boxes:hover { + opacity: 0.7; +} + +@media only screen and (min-width: 645px) { + .boxes { + display: inline-flex; + } +} + +@media only screen and (min-width: 1025px) { + .content { + margin-top: 60px; + } + + .boxes { + margin: 0 auto; + width: 25%; + } + + .boxes:first-child { + margin-right: 50px; + } + + .boxes:nth-child(2) { + margin-left: 50px; + } + } \ No newline at end of file diff --git a/src/010-background/example/index.html b/src/010-background/example/index.html index 784b81e..f89c934 100644 --- a/src/010-background/example/index.html +++ b/src/010-background/example/index.html @@ -40,17 +40,17 @@

Lorem ipsum dolor sit amet

Fusce pharetra ac nibh vitae viverra

-
-
+
+
-
+

Lorem ipsum dolor sit amet

Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus

-
+
-
+

Lorem ipsum dolor sit amet

Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus

From 7f269e3fcc5eec862ffe06b7324d686e6526db96 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Wed, 17 Oct 2018 16:25:25 -0500 Subject: [PATCH 3/3] Indentation --- src/010-background/example/example.css | 210 ++++++++++++------------- 1 file changed, 105 insertions(+), 105 deletions(-) diff --git a/src/010-background/example/example.css b/src/010-background/example/example.css index 9e621bd..53d24e5 100644 --- a/src/010-background/example/example.css +++ b/src/010-background/example/example.css @@ -4,108 +4,108 @@ * By: Laura Alvarez */ -body { - background-image: radial-gradient(rgba(245, 162, 117, 1), rgba(210, 79, 46, 1)); -} - -h2, h3, p { - color: white; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; -} - -.text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; -} - -.content { - padding-bottom: 500px; - text-align: center; -} - -img { - height: 100px; - border: 3px solid white; - margin-right: 10px; -} - -.header { - text-shadow: 3px 3px black; - text-align: center; - margin: 0; -} - -.header h2 { - margin-top: 20px; -} - -.header h3 { - font-size: 30px; - margin-bottom: 20px; -} - -#line { - height: 2px; - background-image: linear-gradient(#f5a275, #D24F2E); -} - -.boxes { - background-color: rgb(247, 161, 122); - width: auto; - padding: 15px; - box-shadow: 0px 3px darkred; - display: flex; - height: auto; - border-radius: 100px; - border: 3px solid rgb(255, 179, 147); -} - -.boxes:first-child { - margin: 100px 0 30px 0; -} - -.boxes img:first-child { - border-radius: 200px; -} - -.boxes p, .boxes h2 { - font-size: 1rem; - text-shadow: 0px 1px black; - margin-top: 13px; - margin-bottom: -20px; - word-spacing: 2px; -} - -.boxes:hover { - opacity: 0.7; -} - -@media only screen and (min-width: 645px) { - .boxes { - display: inline-flex; - } -} - -@media only screen and (min-width: 1025px) { - .content { - margin-top: 60px; - } - - .boxes { - margin: 0 auto; - width: 25%; - } - - .boxes:first-child { - margin-right: 50px; - } - - .boxes:nth-child(2) { - margin-left: 50px; - } - -} \ No newline at end of file + body { + background-image: radial-gradient(rgba(245, 162, 117, 1), rgba(210, 79, 46, 1)); + } + + h2, h3, p { + color: white; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + } + + .text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; + } + + .content { + padding-bottom: 500px; + text-align: center; + } + + img { + height: 100px; + border: 3px solid white; + margin-right: 10px; + } + + .header { + text-shadow: 3px 3px black; + text-align: center; + margin: 0; + } + + .header h2 { + margin-top: 20px; + } + + .header h3 { + font-size: 30px; + margin-bottom: 20px; + } + + #line { + height: 2px; + background-image: linear-gradient(#f5a275, #D24F2E); + } + + .boxes { + background-color: rgb(247, 161, 122); + width: auto; + padding: 15px; + box-shadow: 0px 3px darkred; + display: flex; + height: auto; + border-radius: 100px; + border: 3px solid rgb(255, 179, 147); + } + + .boxes:first-child { + margin: 100px 0 30px 0; + } + + .boxes img:first-child { + border-radius: 200px; + } + + .boxes p, .boxes h2 { + font-size: 1rem; + text-shadow: 0px 1px black; + margin-top: 13px; + margin-bottom: -20px; + word-spacing: 2px; + } + + .boxes:hover { + opacity: 0.7; + } + + @media only screen and (min-width: 645px) { + .boxes { + display: inline-flex; + } + } + + @media only screen and (min-width: 1025px) { + .content { + margin-top: 60px; + } + + .boxes { + margin: 0 auto; + width: 25%; + } + + .boxes:first-child { + margin-right: 50px; + } + + .boxes:nth-child(2) { + margin-left: 50px; + } + + } \ No newline at end of file