From 92b57349f21d1f48b239e2648c9a7cfbbc90d8bc Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Tue, 9 Oct 2018 17:57:17 -0500 Subject: [PATCH 1/4] Basic layout updated --- src/006-basic-layout/example/example.css | 51 +++++++++++++++++++++++- src/006-basic-layout/example/index.html | 12 +++--- 2 files changed, 56 insertions(+), 7 deletions(-) diff --git a/src/006-basic-layout/example/example.css b/src/006-basic-layout/example/example.css index bdfd29e..24779e2 100644 --- a/src/006-basic-layout/example/example.css +++ b/src/006-basic-layout/example/example.css @@ -1,5 +1,54 @@ /* * Practice : Basic Layout * Version: 1 - * By: xxx + * By: Laura Alvarez */ + +html { + background: rgb(233,233,233); +} + +.page-content { + width: 80%; + margin: 20px auto; +} + +.container1 { + background-color: lightpink; +} + +.header, +.footer { + background-color: rgb(219,79,52); + overflow: hidden; +} + +.header ul, +.footer ul { + list-style: none; + display: inline-flex; + padding-left: 20px; +} + +.header li, +.footer li { + float: left; + color: white; + padding-right: 30px; +} + +.sidebar { + float: left; + width: 30%; + background-color: rgb(135,208,211); + padding-bottom: 30em; +} + +.main { + float: left; + padding: 20px; +} + +.footer { + clear: left; +} \ No newline at end of file diff --git a/src/006-basic-layout/example/index.html b/src/006-basic-layout/example/index.html index d21e25f..0784eb1 100644 --- a/src/006-basic-layout/example/index.html +++ b/src/006-basic-layout/example/index.html @@ -35,8 +35,8 @@

1. Without a wrapper div, with border and negative margin

-
-
+
+
  • Home @@ -50,7 +50,7 @@

    1. Without a wrapper div, with border and negative margin

-
+
  • @@ -86,7 +86,7 @@

    1. Without a wrapper div, with border and negative margin

-
+
  • Talos Digital @@ -101,7 +101,7 @@

    1. Without a wrapper div, with border and negative margin

    2. Using flex, flex-direction, and wrapper div

    -
    +
    • Home @@ -153,7 +153,7 @@

      2. Using flex, flex-direction, and wrapper div

    -
    +
    • Talos Digital From 9500fb2e6a232525d451e670af4d959eb21b0b10 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Wed, 10 Oct 2018 11:52:44 -0500 Subject: [PATCH 2/4] 1. Without a wrapper div, with border and negative margin --- src/006-basic-layout/example/example.css | 19 +++++++++++++++---- src/006-basic-layout/example/index.html | 19 +++++++++++++++++-- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/006-basic-layout/example/example.css b/src/006-basic-layout/example/example.css index 24779e2..51e6828 100644 --- a/src/006-basic-layout/example/example.css +++ b/src/006-basic-layout/example/example.css @@ -39,14 +39,25 @@ html { .sidebar { float: left; - width: 30%; + width: 300px; background-color: rgb(135,208,211); - padding-bottom: 30em; + padding-bottom: 25em; + position: relative; + margin-right: -200px; } .main { - float: left; - padding: 20px; + padding: 20px 0 20px 20px; + margin-left: 300px; +} + +.sq1 div{ + background-color: rgb(135,208,211); + height: 120px; + width: 24%; + display: inline-block; + margin: -3px; + border: solid 1px rgb(219,79,52);; } .footer { diff --git a/src/006-basic-layout/example/index.html b/src/006-basic-layout/example/index.html index 0784eb1..fe55f2a 100644 --- a/src/006-basic-layout/example/index.html +++ b/src/006-basic-layout/example/index.html @@ -81,8 +81,15 @@

      1. Without a wrapper div, with border and negative margin

      Lorem ipsum...

      Lorem ipsum...

      Lorem ipsum...

      -
      - +
      +
      +
      +
      +
      +
      +
      +
      +
      @@ -149,6 +156,14 @@

      2. Using flex, flex-direction, and wrapper div

      Lorem ipsum...

      +
      +
      +
      +
      +
      +
      +
      +
    From d2464a4c7ab3a122924b2640fa5504c399e1464b Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Wed, 10 Oct 2018 12:28:45 -0500 Subject: [PATCH 3/4] Basic layout completed --- src/006-basic-layout/example/example.css | 154 ++++++++----- src/006-basic-layout/example/index.html | 266 +++++++++++------------ 2 files changed, 228 insertions(+), 192 deletions(-) diff --git a/src/006-basic-layout/example/example.css b/src/006-basic-layout/example/example.css index 51e6828..321b314 100644 --- a/src/006-basic-layout/example/example.css +++ b/src/006-basic-layout/example/example.css @@ -4,62 +4,98 @@ * By: Laura Alvarez */ -html { - background: rgb(233,233,233); -} - -.page-content { - width: 80%; - margin: 20px auto; -} - -.container1 { - background-color: lightpink; -} - -.header, -.footer { - background-color: rgb(219,79,52); - overflow: hidden; -} - -.header ul, -.footer ul { - list-style: none; - display: inline-flex; - padding-left: 20px; -} - -.header li, -.footer li { - float: left; - color: white; - padding-right: 30px; -} - -.sidebar { - float: left; - width: 300px; - background-color: rgb(135,208,211); - padding-bottom: 25em; - position: relative; - margin-right: -200px; -} - -.main { - padding: 20px 0 20px 20px; - margin-left: 300px; -} - -.sq1 div{ - background-color: rgb(135,208,211); - height: 120px; - width: 24%; - display: inline-block; - margin: -3px; - border: solid 1px rgb(219,79,52);; -} - -.footer { - clear: left; -} \ No newline at end of file + html { + background: rgb(233,233,233); + } + + .page-content { + width: 80%; + margin: 20px auto; + } + + .container1 { + background-color: lightpink; + } + + .header, + .footer { + background-color: rgb(219,79,52); + overflow: hidden; + } + + .header ul, + .footer ul { + list-style: none; + display: inline-flex; + padding-left: 20px; + } + + .header li, + .footer li { + float: left; + color: white; + padding-right: 30px; + } + + .sidebar { + float: left; + width: 300px; + background-color: rgb(135,208,211); + padding-bottom: 25em; + position: relative; + margin-right: -200px; + } + + .sidebar2 { + width: 300px; + background-color: rgb(135,208,211); + } + + .main { + padding: 20px 0 20px 20px; + margin-left: 300px; + } + + .main2 { + padding: 20px; + width: 70%; + } + + .sq1 div, + .sq2 div { + background-color: rgb(135,208,211); + border: solid 1px rgb(219,79,52); + } + + .sq1 div{ + width: 24%; + display: inline-block; + height: 120px; + margin: -3px; + } + + .main2 div{ + display: flex; + } + + .sq2 div { + width: 20%; + margin: -3px 0; + } + + .complete-square { + height: 300px; + } + + .cut-square { + height: 200px; + } + + .content2 { + display: flex; + } + + .footer { + clear: left; + } + diff --git a/src/006-basic-layout/example/index.html b/src/006-basic-layout/example/index.html index fe55f2a..26d977b 100644 --- a/src/006-basic-layout/example/index.html +++ b/src/006-basic-layout/example/index.html @@ -16,137 +16,64 @@ - -
    -
    - -
    - - 006 - Basic Layout - -
    -
    -
    -
    -
    - -
    - -

    1. Without a wrapper div, with border and negative margin

    -
    -
    -
      -
    • - Home -
      • -
    • - About -
      • -
    • - Contact Us -
      • -
    -
    - -
    -
      -
    • - - home - Home - -
      • -
    • - - description - About - -
      • -
    • - - email - Contact US - -
      • -
    -
    + +
    +
    + +
    + + 006 - Basic Layout + +
    +
    +
    +
    +
    + +
    -
    -

    Lorem ipsum...

    -

    Lorem ipsum...

    -

    Lorem ipsum...

    -

    Lorem ipsum...

    -

    Lorem ipsum...

    -

    Lorem ipsum...

    -

    Lorem ipsum...

    -
    -
    -
    -
    -
    -
    -
    -
    -
    +

    1. Without a wrapper div, with border and negative margin

    +
    +
    +
      +
    • + Home +
      • +
    • + About +
      • +
    • + Contact Us +
      • +
    -
    -
    -
      -
    • - Talos Digital -
      • -
    • - Contact Us -
      • -
    -
    -
    - -

    2. Using flex, flex-direction, and wrapper div

    - -
    -
    -
      -
    • - Home -
      • -
    • - About -
      • -
    • - Contact Us -
      • -
    -
    - -
    -
    +
    • - - home - Home - + + home + Home +
    • - - description - About - + + description + About +
    • - - email - Contact US - + + email + Contact US +
    -
    +

    Lorem ipsum...

    Lorem ipsum...

    Lorem ipsum...

    @@ -154,8 +81,7 @@

    2. Using flex, flex-direction, and wrapper div

    Lorem ipsum...

    Lorem ipsum...

    Lorem ipsum...

    - -
    +
    @@ -166,23 +92,97 @@

    2. Using flex, flex-direction, and wrapper div

    + +
    +
      +
    • + Talos Digital +
      • +
    • + Contact Us +
      • +
    +
    -
    -
      -
    • - Talos Digital -
      • -
    • - Contact Us -
      • -
    +

    2. Using flex, flex-direction, and wrapper div

    + +
    +
    +
      +
    • + Home +
      • +
    • + About +
      • +
    • + Contact Us +
      • +
    +
    + +
    +
    +
      +
    • + + home + Home + +
      • +
    • + + description + About + +
      • +
    • + + email + Contact US + +
      • +
    +
    + +
    +

    Lorem ipsum...

    +

    Lorem ipsum...

    +

    Lorem ipsum...

    +

    Lorem ipsum...

    +

    Lorem ipsum...

    +

    Lorem ipsum...

    +

    Lorem ipsum...

    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
      +
    • + Talos Digital +
      • +
    • + Contact Us +
      • +
    +
    -
    +
    -
    -
    -
    +
    +
    From 8f58f97a1488351eda8d1f7294121deb9c3df5f7 Mon Sep 17 00:00:00 2001 From: Laura Alvarez Date: Wed, 10 Oct 2018 12:30:31 -0500 Subject: [PATCH 4/4] Removing html style --- src/006-basic-layout/example/example.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/006-basic-layout/example/example.css b/src/006-basic-layout/example/example.css index 321b314..d67abca 100644 --- a/src/006-basic-layout/example/example.css +++ b/src/006-basic-layout/example/example.css @@ -4,10 +4,6 @@ * By: Laura Alvarez */ - html { - background: rgb(233,233,233); - } - .page-content { width: 80%; margin: 20px auto;