diff --git a/src/001-float-property/example/example.css b/src/001-float-property/example/example.css index 8a3130e..e2037c4 100644 --- a/src/001-float-property/example/example.css +++ b/src/001-float-property/example/example.css @@ -1,5 +1,114 @@ /* * Practice : Float Property * Version: 1 - * By: xxx + * By: Laura Alvarez */ + + * { + box-sizing: border-box; + } + + img { + float:left; + padding-right: 20px; + padding-bottom: 15px; + } + + .page-content { + max-width: 1280px; + margin: auto; + } + + header { + background-color: rgb(232,232,232); + } + + h1, h2 { + font-size: 20px; + line-height: 45px; + padding: 8px 0; + margin: 0; + } + + header h1 { + padding-left: 15px; + } + + section h2 { + padding-left: 10px; + } + + nav ul { + list-style-type: none; + margin: 0; + padding-left: 10px; + overflow:hidden; + background-color: rgb(220,220,220); + line-height: 40px; + } + + nav li { + float:left; + } + + nav li a { + padding: 5px; + text-decoration: none; + width: 100%; + } + + .column { + float: left; + padding-left: 15px; + padding-right: 15px; + width: 100% + } + + .content { + width: 70%; + background-color: rgb(200,200,200); + } + + .menu { + width: 30%; + padding-top: 15px; + } + + .input{ + width: 100%; + padding: 10px; + border: 0px solid; + border-radius: 5px; + } + + aside p { + padding-top: 20px; + } + + aside ul { + list-style: none; + padding: 0; + } + + .clearfix { + background-color: rgb(233,233,233); + } + + .clearfix::after, + section ul:after { + content: ""; + clear: both; + display: table; + min-width: 620px; + } + + .gallery { + padding: 5px; + background-color: rgb(246,246,246); + } + + .gallery ul { + padding-left: 20px; + list-style: none; + } + diff --git a/src/001-float-property/example/index.html b/src/001-float-property/example/index.html index 0d47109..d1924bd 100644 --- a/src/001-float-property/example/index.html +++ b/src/001-float-property/example/index.html @@ -12,102 +12,110 @@ - - + + - -
-
- -
- - 001 - Float Property - -
-
-
-
-
- + +
+
+ +
+ + 001 - Float Property + +
+
+
+
+
+ -
-

This is an example of Float CSS property

+
+

This is an example of Float CSS property

- + -
-

Article Title

- image -

Lorem ipsum dolor sit amet, curabitur pede tellus iaculis, ligula id. Aliquam proin - consectetuer lectus - eleifend massa, habitasse proin at euismod ornare. Enim nonummy sit turpis dapibus wisi, tellus fermentum - orci, nec dolor, ornare ipsum nulla erat ac ipsum wisi, convallis enim amet pellentesque habitant. Mauris - aliquam et est ligula dolor, magna odio justo, duis ut torquent, tortor venenatis ante magna turpis quisque. - Iaculis eleifend libero dictum, vel et, vulputate mus at. Interdum vitae iaculis rhoncus, fusce dolor - porttitor pellentesque viverra mauris ipsum, nullam commodo rutrum nec sem vel. Inceptos in totam magna, - ligula nam arcu, pulvinar eu eget eget quam odio, amet mauris pellentesque placerat feugiat quam.

-

Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero - justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus - turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed - wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi - ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus - nisl pellentesque pharetra. Taciti elit aliquam lacus.

-

Ut sapien suspendisse class condimentum, quam ac nunc nec mauris cursus, tellus turpis urna dictum wisi - auctor, vel at etiam a elit orci. Non porta commodo. Est commodo, felis accumsan architecto ligula aliquam - enim ipsum, proin sed turpis vel, dolor commodi maecenas tempor. Class blandit dui et, vitae vestibulum - ultricies mi sed, fringilla nascetur wisi justo a urna quam. Pulvinar et fringilla vel vulputate, et - pellentesque ut iaculis scelerisque, nec sapien vulputate mauris sapien augue ut. Lacinia mauris netus vitae - etiam turpis libero, nunc diam et eros amet augue curabitur.

-
+
+
+
+

Article Title

+ image +

Lorem ipsum dolor sit amet, curabitur pede tellus iaculis, ligula id. Aliquam proin + consectetuer lectus + eleifend massa, habitasse proin at euismod ornare. Enim nonummy sit turpis dapibus wisi, tellus fermentum + orci, nec dolor, ornare ipsum nulla erat ac ipsum wisi, convallis enim amet pellentesque habitant. Mauris + aliquam et est ligula dolor, magna odio justo, duis ut torquent, tortor venenatis ante magna turpis quisque. + Iaculis eleifend libero dictum, vel et, vulputate mus at. Interdum vitae iaculis rhoncus, fusce dolor + porttitor pellentesque viverra mauris ipsum, nullam commodo rutrum nec sem vel. Inceptos in totam magna, + ligula nam arcu, pulvinar eu eget eget quam odio, amet mauris pellentesque placerat feugiat quam.

+

Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero + justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus + turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed + wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi + ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus + nisl pellentesque pharetra. Taciti elit aliquam lacus.

+

Ut sapien suspendisse class condimentum, quam ac nunc nec mauris cursus, tellus turpis urna dictum wisi + auctor, vel at etiam a elit orci. Non porta commodo. Est commodo, felis accumsan architecto ligula aliquam + enim ipsum, proin sed turpis vel, dolor commodi maecenas tempor. Class blandit dui et, vitae vestibulum + ultricies mi sed, fringilla nascetur wisi justo a urna quam. Pulvinar et fringilla vel vulputate, et + pellentesque ut iaculis scelerisque, nec sapien vulputate mauris sapien augue ut. Lacinia mauris netus vitae + etiam turpis libero, nunc diam et eros amet augue curabitur.

+
+
+
+
+
- - +
-
-

Gallery

-
    -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
-
+
+

Gallery

+
    +
  • image
    • +
  • image
    • +
  • image
    • +
  • image
    • +
  • image
    • +
  • image
    • +
  • image
    • +
  • image
    • +
  • image
    • +
  • image
    • +
+
-
+
+