diff --git a/src/002-negative-margins/example/example.css b/src/002-negative-margins/example/example.css index 1d7fd60..6291a1b 100644 --- a/src/002-negative-margins/example/example.css +++ b/src/002-negative-margins/example/example.css @@ -1,5 +1,122 @@ /* * Practice : Negative Margins * Version: 1 - * By: xxx + * By: Laura Alvarez */ + * { + box-sizing: border-box; + } + + html, body { + height: 100%; + margin: 0; + } + + h3 { + border-bottom: 1px solid rgb(212,78,60); + padding-bottom: 10px; + font-size: 25px; + } + + .page-content { + max-width: 1120px; + margin: auto; + } + + .nm-content { + width: 80%; + position: relative; + padding-bottom: 30px; + } + + .nm-example { + background-color: rgb(215,215,215); + padding: 15px; + padding-top: 1px; + } + + .sidebar { + width: 20%; + float: right; + margin-right: -30px; + margin-top: -190px; + margin-bottom: 50px; + } + + .list { + width: 30%; + } + + .title2-li { + margin-top: -74px; + } + + .column2 { + margin-left: 100px; + } + + .title3-li { + margin-top: -72px; + } + + .column3 { + margin-left: 225px; + } + + .border { + border-bottom: 1px solid #80808070; + } + + .vl { + border-left: 1px solid #80808070; + height: 190px; + } + + .content { + float: left; + width: 100%; + background-color: rgb(210,210,210); + margin-bottom: 35px; + } + + ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + .nm-site-footer ul{ + overflow: hidden; + background-color: rgb(212,78,60); + margin-top: 20px; + } + + .nm-footer-list li { + float: left; + display: block; + color: white; + text-align: center; + padding: 5px 20px; + text-decoration: none; + } + + .mdl-button { + margin-top: 10px; + margin-bottom: 60px; + } + + .nm-site-footer, + .push { + height: 50px; + position:fixed; + bottom: 0px; + width: 58%; + } + + .wrapper { + margin-bottom: -50px; + min-height: 100%; + margin: 0 auto -50px; + } + + diff --git a/src/002-negative-margins/example/index.html b/src/002-negative-margins/example/index.html index b3e7465..22ac6ad 100644 --- a/src/002-negative-margins/example/index.html +++ b/src/002-negative-margins/example/index.html @@ -16,122 +16,120 @@ - -
-
- -
- - 002 - Negative Margins - -
-
-
-
-
- - -
- -
-

Negative margin on content to allow right sidebar

- -
-
Lorem Ipsum dolor sit amet, consectetur adipiscing elit
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus enim arcu, eget lobortis magna - mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec - tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus - tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus + +

+
+ +
+ + 002 - Negative Margins + +
+
+
+
+
+ + +
+ +
+

Negative margin on content to allow right sidebar

+ +
+
Lorem Ipsum dolor sit amet, consectetur adipiscing elit
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus enim arcu, eget lobortis magna + mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec + tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus + tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus lobortis sollicitudin eu sit amet odio.

+
+
+ +
- -
- -
-

Negative margin on top to align < li >

-
    -
  • Milk
    • -
  • Eggs
    • -
  • Cheese
    • -
  • Tutty Frutti
    • -
  • Bread
    • -
  • Mango
    • -
  • Coke
    • -
  • Apple
    • -
  • Orange
    • -
+
+

Negative margin on top to align < li >

+ +
    +
  • Milk
    • +
  • Eggs
    • +
  • Cheese
    • +
  • Tutty Frutti
    • +
  • Bread
    • +
  • Mango
    • +
  • Coke
    • +
  • Apple
    • +
  • Orange
    • +
-
+
-
-

Negative margin to create a Sticky Footer using fixed footer height

+
+

Negative margin to create a Sticky Footer using fixed footer height

-
+
-
Lorem Ipsum
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus enim arcu, eget lobortis magna - mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec - tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus - tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus - lobortis sollicitudin eu sit amet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce - tempus enim arcu, eget lobortis magna - mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec - tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus - tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus - lobortis sollicitudin eu sit amet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce - tempus enim arcu, eget lobortis magna - mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec - tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus - tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus - lobortis sollicitudin eu sit amet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce - tempus enim arcu, eget lobortis magna - mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec - tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus - tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus +

Lorem Ipsum
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus enim arcu, eget lobortis magna + mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec + tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus + tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus + lobortis sollicitudin eu sit amet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce + tempus enim arcu, eget lobortis magna + mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec + tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus + tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus + lobortis sollicitudin eu sit amet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce + tempus enim arcu, eget lobortis magna + mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec + tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus + tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus + lobortis sollicitudin eu sit amet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce + tempus enim arcu, eget lobortis magna + mattis sit amet. Fusce rutrum condimentum urna ut accumsan. Pellentesque volutpat semper eleifend. Donec + tempus a turpis vitae elementum. Donec quis lorem eget nunc ultrices finibus. Maecenas imperdiet luctus + tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus lobortis sollicitudin eu sit amet odio.

- -
- -
-
-
    -
  • home
    • -
  • about
    • -
  • contact us
    • -
+
-
+
+ +
-
- -
-
-
+
+