From 6813f6dc5c8ad23bafc42d51c98fdb3754e5de46 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Mon, 15 Oct 2018 22:49:42 -0500 Subject: [PATCH 1/3] html / css updated z-index exercise --- src/007-z-index/example/example.css | 126 +++++++++++++++++++++++++++- src/007-z-index/example/index.html | 121 +++++++++++++------------- 2 files changed, 189 insertions(+), 58 deletions(-) diff --git a/src/007-z-index/example/example.css b/src/007-z-index/example/example.css index 5b008b9..e9eed21 100644 --- a/src/007-z-index/example/example.css +++ b/src/007-z-index/example/example.css @@ -1,5 +1,129 @@ /* * Practice : Z-index, !important and Inheritance * Version: 1 - * By: xxx + * By: Laura Alvarez */ + + body { + background: rgb(211, 234, 224); + } + + .black-square { + position: absolute; + width: 30%; + right: 0; + height: 100%; + top: 0; + background: black; + opacity: 0.75; + z-index: 3; + } + + .p-white { + color: white; + padding: 20px 0 0 40px; + } + + .p-white h1{ + font-weight: bold; + font-size: 3rem; + } + + .p-white p { + text-transform: uppercase; + width: 100%; + } + + .content { + width: 60%; + } + + .second-content { + background-color: rgb(226, 243, 245); + z-index: 4; + position: relative; + padding: 20px 15px 20px 0; + } + + .second-content p, .title{ + padding: 0px 0 0 40px; + } + + .title-list, .title { + font-size: 2rem; + } + + hr { + background-color: indianred; + } + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + @media only screen and (max-width: 992px) { + .last-content { + width: 18%; + } + } + + @media only screen and (min-width: 769px) { + .last-content { + background-color: rgb(222,225,141); + z-index: 4; + position: absolute; + width: 20%; + top: 130px; + right: 71px; + padding: 50px; + } + + .blue-square { + background: rgb(107,195,198); + margin: 50px; + padding-bottom: 80px; + } + } + + @media only screen and (max-width: 768px) { + .black-square { + display: none !important; + } + + .content { + width: 90%; + margin: auto; + background: rgb(107,195,198); + padding-bottom: 30px; + } + + .second-content { + background-color: rgb(226, 243, 245); + padding: 20px 15px 20px 0; + width: 90%; + position: relative; + } + + .last-content { + background-color: rgb(222,225,141); + width: 100%; + } + + .last-content ul, + .title-list { + padding: 20px 20px 0 20px; + margin-bottom: 0px; + } + + .last-content ul{ + padding-bottom: 20px; + } + + .p-white, + .second-content p, + .title { + padding: 10px 20px 0 20px; + } + } \ No newline at end of file diff --git a/src/007-z-index/example/index.html b/src/007-z-index/example/index.html index c82d66a..7ff9700 100644 --- a/src/007-z-index/example/index.html +++ b/src/007-z-index/example/index.html @@ -16,75 +16,82 @@ - -
-
- -
- - 007 - Z Index, !important and Inheritance - -
-
-
-
-
- -
-
-
+ +
+
+ +
+ + 007 - Z Index, !important and Inheritance + +
+
+
+
+
+ +
+
-

Lorem ipsum dolor sit amet

-
+
+

Lorem ipsum dolor sit amet

+
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin +

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin scelerisque neque id velit varius, quis consequat mauris semper.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin +

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin scelerisque neque id velit varius, quis consequat mauris semper.

-
+
-
-

Lorem ipsum dolor sit amet

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin - scelerisque neque id velit varius, quis consequat mauris semper. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin - scelerisque neque id velit varius, quis consequat mauris semper. -

-

- TLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin - scelerisque neque id velit varius, quis consequat mauris semper. Fusce facilisis facilisis quam, in - interdum nulla consequat id. -

+
+

Lorem ipsum dolor sit amet

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin + scelerisque neque id velit varius, quis consequat mauris semper. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin + scelerisque neque id velit varius, quis consequat mauris semper. +

+

+ TLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin + scelerisque neque id velit varius, quis consequat mauris semper. Fusce facilisis facilisis quam, in + interdum nulla consequat id. +

+
-
-
+
-
-

Lorem ipsum dolor sit amet

-
    -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
+
+

Lorem ipsum dolor sit amet

+
    +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
  • Lorem ipsum dolor sit amet
    • +
+
-
-
-
+ + From 271214b8c574828ffdba640a01d22aa3a1b2ac58 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Tue, 16 Oct 2018 11:18:13 -0500 Subject: [PATCH 2/3] Updated breakpoint 768 --- src/007-z-index/example/example.css | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/007-z-index/example/example.css b/src/007-z-index/example/example.css index e9eed21..b80989c 100644 --- a/src/007-z-index/example/example.css +++ b/src/007-z-index/example/example.css @@ -63,13 +63,30 @@ padding: 0; } + @media only screen and (min-width: 1024px) { + .last-content { + background-color: rgb(222,225,141); + z-index: 4; + position: absolute; + width: 20%; + top: 130px; + right: 71px; + padding: 50px; + } + .blue-square { + background: rgb(107,195,198); + margin: 50px; + padding-bottom: 80px; + } + } + @media only screen and (max-width: 992px) { .last-content { width: 18%; } } - @media only screen and (min-width: 769px) { + @media only screen and (max-width: 1023px) and (min-width: 768px){ .last-content { background-color: rgb(222,225,141); z-index: 4; @@ -77,9 +94,8 @@ width: 20%; top: 130px; right: 71px; - padding: 50px; + padding: 30px; } - .blue-square { background: rgb(107,195,198); margin: 50px; @@ -87,7 +103,7 @@ } } - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 767px) { .black-square { display: none !important; } From 0e5d0fe80164c867a1f87c1f2a53728c163f8cef Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Thu, 18 Oct 2018 16:28:48 -0500 Subject: [PATCH 3/3] Adding content before li --- src/007-z-index/example/example.css | 5 +++++ src/007-z-index/example/index.html | 7 ------- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/007-z-index/example/example.css b/src/007-z-index/example/example.css index b80989c..132576f 100644 --- a/src/007-z-index/example/example.css +++ b/src/007-z-index/example/example.css @@ -63,6 +63,11 @@ padding: 0; } + .last-content li:before { + content: "Lorem ipsum dolor sit amet"; + display: -webkit-box; + } + @media only screen and (min-width: 1024px) { .last-content { background-color: rgb(222,225,141); diff --git a/src/007-z-index/example/index.html b/src/007-z-index/example/index.html index 7ff9700..d4ae805 100644 --- a/src/007-z-index/example/index.html +++ b/src/007-z-index/example/index.html @@ -78,13 +78,6 @@

Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet
    • -
  • Lorem ipsum dolor sit amet