From 6813f6dc5c8ad23bafc42d51c98fdb3754e5de46 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Mon, 15 Oct 2018 22:49:42 -0500 Subject: [PATCH 1/2] 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 10a065d99aef65a4ce2a648ae2297c743930c9d4 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Tue, 16 Oct 2018 10:57:09 -0500 Subject: [PATCH 2/2] html / css updated for advance selectors --- .../example/example.css | 49 +++++++++++++++++++ src/008-advanced-selectors/example/index.html | 4 +- 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/008-advanced-selectors/example/example.css b/src/008-advanced-selectors/example/example.css index 218d5ec..89facf9 100644 --- a/src/008-advanced-selectors/example/example.css +++ b/src/008-advanced-selectors/example/example.css @@ -8,6 +8,11 @@ html { padding: 0; } +h1 { + font-size: 1.5rem; + font-weight: bold; +} + h2 { border-bottom: 2px solid #ebebeb; font-size: 1.125em; @@ -19,6 +24,10 @@ h2 { text-transform: uppercase; } +p { + margin: 0; +} + footer { background-color: #787878; color: #fff; @@ -63,6 +72,12 @@ footer div { background-color: #ebebeb; cursor: pointer; padding: 5px; + margin-bottom: 5px; + font-size: 12px; +} + +.as-button-list li:hover { + background-color: pink; } .as-avatar { @@ -106,6 +121,14 @@ footer div { margin-left: 5px; } +.as-top-list button:first-child{ + background-color: black; + border-radius: 5px; +} + +.as-top-list button:first-child i{ + color: white; +} .as-cards { display: flex; @@ -115,8 +138,12 @@ footer div { .as-card { position: relative; + cursor: pointer; } +.as-card:hover { + opacity: 0.7; +} .as-card-img { box-sizing: border-box; @@ -135,6 +162,11 @@ footer div { transition: all 0.3s; } +.as-card-img:hover img { + -moz-transition: scale(1.1); + -webkit-transition: scale(1.1); + transform: scale(1.1); +} .as-onsale { background-color: #fbc2d4; @@ -150,4 +182,21 @@ footer div { width: 90px; } +ul { + list-style: none; + padding: 0; +} +a { + color: #787878; + text-decoration: none; +} + +.f-list > li a:hover { + color: pink; +} + +.f-list a { + text-transform: uppercase; + font-size: 12px; +} diff --git a/src/008-advanced-selectors/example/index.html b/src/008-advanced-selectors/example/index.html index 98f729f..2b1a0fb 100644 --- a/src/008-advanced-selectors/example/index.html +++ b/src/008-advanced-selectors/example/index.html @@ -39,7 +39,7 @@

Clothes