diff --git a/.gitignore b/.gitignore index 485dee6..e067d5e 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,5 @@ -.idea +.idea/ +*.map +.sass-cache/ +.DS_Store/ +.DS_Store diff --git a/src/001-float-property/README.md b/src/001-float-property/README.md index fdb79f7..a02dcc7 100644 --- a/src/001-float-property/README.md +++ b/src/001-float-property/README.md @@ -2,41 +2,42 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive code is not required. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as the required design. +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive code is not required. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as the required design. ### Before + You should read about Float CSS Property Documentation here: -1. [The Mystery Of The CSS Float Property][1] -> The estimation for this practice is: 2 hours. +1. [The Mystery Of The CSS Float Property][1] +> The estimation for this practice is: 2 hours. ### To Do -- [Watch this video with the design][2] +* [Watch this video with the design][2] -- Run the base project. +* Run the base project. ```sh $ npm install http-server -g $ cd u-css/ $ http-server ./src -p 3000 ``` -- Using Float CSS Property, create the next items: -1. A horizontal nav bar menu. -2. Two columns below nav bar. -3. In the first column created, float an image with text wrapping it. -4. Below the columns created, make a gallery of images. -5. Follow the design specified for this practice. +* Using Float CSS Property, create the next items: + +1. A horizontal nav bar menu. _done_ +2. Two columns below nav bar. _done_ +3. In the first column created, float an image with text wrapping it. _done_ +4. Below the columns created, make a gallery of images. _donde_ +5. Follow the design specified for this practice. _done_ [1]: https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/ [2]: https://drive.google.com/a/talosdigital.com/file/d/1JJ2sibPhLORN9KkOdeFFRw-YJz5Tpjyd/view?usp=sharing - diff --git a/src/001-float-property/example/css/example.css b/src/001-float-property/example/css/example.css new file mode 100644 index 0000000..dc43b53 --- /dev/null +++ b/src/001-float-property/example/css/example.css @@ -0,0 +1,101 @@ +@charset "UTF-8"; +/* + * Practice : Float Property + * Version: 1.0.0 + * By: Elías Rodelo + */ +* { + box-sizing: border-box; } + +ul { + margin: 0; + padding: 0; + list-style: none; } + +.wrapper { + max-width: 900px; + margin: 0 auto; } + +.block, .navigation, .col { + padding: 0.5rem 1rem; } + +.page-header { + background-color: #e9e7e9; } + +.navigation { + background-color: #e5e4e5; } + .navigation-list { + overflow: hidden; } + .navigation-item { + float: left; } + .navigation-link { + padding: 0.5rem 1rem; + display: block; } + .navigation-link:first-of-type { + padding-left: 0; } + +.container { + overflow: hidden; } + +.col { + padding-bottom: 100%; + margin-bottom: -100%; } + .col--left { + width: 200px; + background-color: #e9e7e9; + height: 100%; } + .col--right { + background-color: #d3d1d3; + width: 700px; } + +.gallery { + background-color: #f9f7f9; } + .gallery-list { + overflow: hidden; } + .gallery-item { + margin: 0 1rem 1rem 0; } + +.comments { + background-color: #e9e7e9; } + .comments::after { + visibility: hidden; + display: block; + font-size: 0; + content: ''; + clear: both; + height: 0; } + .comments--green { + border: 2px solid green; + border-radius: 2px; } + +.clear { + clear: both; } + +.float-left, .col--left, .gallery-item { + float: left; } + +.float-right, .col--right { + float: right; } + +.mb-1 { + margin-bottom: 1rem; } + +.mt-1 { + margin-bottom: 1rem; } + +.mb-2 { + margin-bottom: 0.5rem; } + +.ml-2 { + margin-left: 0.5rem; } + +.mr-1 { + margin-right: 1rem; } + +.esp-letter { + font-size: 4rem; + line-height: 100%; + margin-right: 1rem; + float: left; } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/001-float-property/example/css/example.scss b/src/001-float-property/example/css/example.scss new file mode 100644 index 0000000..78bd1c7 --- /dev/null +++ b/src/001-float-property/example/css/example.scss @@ -0,0 +1,146 @@ +/* + * Practice : Float Property + * Version: 1.0.0 + * By: Elías Rodelo + */ + +* { + box-sizing: border-box; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +@mixin clearfix() { + &::after { + visibility: hidden; + display: block; + font-size: 0; + content: ''; + clear: both; + height: 0; + } +} +.wrapper { + max-width: 900px; + margin: 0 auto; +} + +.block { + padding: 0.5rem 1rem; +} + +.page-header { + background-color: #e9e7e9; +} + +.navigation { + @extend .block; + + background-color: #e5e4e5; + + &-list { + overflow: hidden; + } + + &-item { + float: left; + } + + &-link { + padding: 0.5rem 1rem; + display: block; + + &:first-of-type { + padding-left: 0; + } + } +} + +.container { + overflow: hidden; +} + +.col { + @extend .block; + padding-bottom: 100%; + margin-bottom: -100%; + + &--left { + @extend .float-left; + width: 200px; + background-color: #e9e7e9; + height: 100%; + } + + &--right { + @extend .float-right; + background-color: #d3d1d3; + width: 700px; + } +} + +.gallery { + background-color: #f9f7f9; + &-list { + overflow: hidden; + } + + &-item { + @extend .float-left; + + margin: 0 1rem 1rem 0; + } +} + +.comments { + background-color: #e9e7e9; + @include clearfix(); + + &--green { + border: 2px solid green; + border-radius: 2px; + } +} + +.clear { + clear: both; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.mb-1 { + margin-bottom: 1rem; +} + +.mt-1 { + margin-bottom: 1rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.mr-1 { + margin-right: 1rem; +} + +.esp-letter { + font-size: 4rem; + line-height: 100%; + margin-right: 1rem; + float: left; +} diff --git a/src/001-float-property/example/example.css b/src/001-float-property/example/example.css deleted file mode 100644 index 8a3130e..0000000 --- a/src/001-float-property/example/example.css +++ /dev/null @@ -1,5 +0,0 @@ -/* - * Practice : Float Property - * Version: 1 - * By: xxx - */ diff --git a/src/001-float-property/example/index.html b/src/001-float-property/example/index.html index 0d47109..5aab0f2 100644 --- a/src/001-float-property/example/index.html +++ b/src/001-float-property/example/index.html @@ -1,5 +1,6 @@ + 001 - Float Property @@ -12,118 +13,163 @@ - + - -
-
- -
- - 001 - Float 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.

-
- - - -
-

Gallery

-
    -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
  • image
    • -
-
- -
- -

This is some text. This is some text. This is some text. This is some text. This is some text. - This is some - text.

-

This is also some text. This is also some text. This is also some text. This - is also some - text. This is also some text. This is also some text.

-
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum... + +
+
+ +
+ + 001 - Float 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.

+
+
+ + +
+ + +
+

Gallery

+
    +
  • + image +
    • +
  • + image +
    • +
  • + image +
    • +
  • + image +
    • +
  • + image +
    • +
  • + image +
    • +
  • + image +
    • +
  • + image +
    • +
  • + image +
    • +
  • + image +
    • +
+
+ +
+ +

+ This is some text. This is some text. This is some text. This is some text. This is some text. This + is some text. +

+

+ This is also some text. This is also some text. This is also some text. This is also some text. This + is also some text. This is also some text.

+
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum... +
-
-
-
+ + - + + \ No newline at end of file diff --git a/src/002-negative-margins/README.md b/src/002-negative-margins/README.md index 2b777f2..a64622a 100644 --- a/src/002-negative-margins/README.md +++ b/src/002-negative-margins/README.md @@ -2,38 +2,39 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive code is not required. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as the required design. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive code is not required. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as the required design. + +### Before + You should read about Negative Margins Documentation here [Smashing Magazine][1] and about Sticky Footer [CSS Tricks][2]. > The estimation for this practice is: 2 hours. ### To Do -- [Watch this video with the design][3] +* [Watch this video with the design][3] -- Run the base project. +* Run the base project. ```sh $ npm install http-server -g $ cd u-css/ $ http-server ./src -p 3000 ``` -- Using Negative Margins, create the next items: -1. Create a 2 column layout (Content and Sidebar) using negative margin. -2. Create a list of 6 elements then divide them into 3 columns using negative margin. -3. Create a Sticky Footer with fixed footer height. -4. Follow the design specified for this practice. +* Using Negative Margins, create the next items: +1. Create a 2 column layout (Content and Sidebar) using negative margin. _done_ +2. Create a list of 6 elements then divide them into 3 columns using negative margin. _done_ +3. Create a Sticky Footer with fixed footer height. _done_ +4. Follow the design specified for this practice. _done_ [1]: https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/ [2]: https://css-tricks.com/couple-takes-sticky-footer/ diff --git a/src/002-negative-margins/example/example.css b/src/002-negative-margins/example/example.css index 1d7fd60..8ec1e85 100644 --- a/src/002-negative-margins/example/example.css +++ b/src/002-negative-margins/example/example.css @@ -1,5 +1,89 @@ +@charset "UTF-8"; /* * Practice : Negative Margins - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ +body { + color: #797779; +} + +.wrapper { + width: 85vw; + margin: 0 auto; +} + +.container { + background-color: #e9e7e9; + padding: 1rem; + margin: 1rem 0; + overflow: hidden; + position: relative; +} +.container:not(:last-of-type) { + margin-bottom: 0; +} + +.heading { + border-bottom: 1px solid #d24f2e; + padding-bottom: 0.5rem; +} + +.main { + width: 100%; + float: left; + margin-right: -200px; +} +.main-inner { + border-right: 1px solid #797779; + padding-right: 1rem; + margin-right: 210px; + height: 100%; +} + +.sidebar { + width: 200px; + float: left; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} +ul li { + line-height: 1.5em; +} +ul li.col-2 { + margin-left: 200px; + border-bottom: 0; +} +ul li.col-3 { + margin-left: 400px; + border-bottom: 0; +} +ul li.top { + margin-top: -4.5em; +} + +.content-foo { + padding: 1rem 0 6rem 0; +} + +.footer-foo { + height: 4rem; + margin-top: -4rem; + background-color: #d24f2e; + color: #e9e7e9; +} +.footer-foo ul { + padding: 0 1rem; + height: 4rem; + display: flex; + align-items: center; +} +.footer-foo ul li { + margin-right: 1rem; +} + +/*# sourceMappingURL=example.css.map */ diff --git a/src/002-negative-margins/example/example.scss b/src/002-negative-margins/example/example.scss new file mode 100644 index 0000000..f32d4b0 --- /dev/null +++ b/src/002-negative-margins/example/example.scss @@ -0,0 +1,94 @@ +/* + * Practice : Negative Margins + * Version: 1.0.0 + * By: Elías Rodelo + */ + +body { + color: #797779; +} + +.wrapper { + width: 85vw; + margin: 0 auto; +} + +.container { + background-color: #e9e7e9; + padding: 1rem; + margin: 1rem 0; + overflow: hidden; + position: relative; + + &:not(:last-of-type) { + margin-bottom: 0; + } +} + +.heading { + border-bottom: 1px solid #d24f2e; + padding-bottom: 0.5rem; +} + +.main { + width: 100%; + float: left; + margin-right: -200px; + + &-inner { + border-right: 1px solid #797779; + padding-right: 1rem; + margin-right: 210px; + height: 100%; + } +} + +.sidebar { + width: 200px; + float: left; +} + +ul { + list-style: none; + margin: 0; + padding: 0; + + li { + line-height: 1.5em; + + &.col-2 { + margin-left: 200px; + border-bottom: 0; + } + &.col-3 { + margin-left: 400px; + border-bottom: 0; + } + + &.top { + margin-top: -4.5em; + } + } +} + +.content-foo { + padding: 1rem 0 6rem 0; +} + +.footer-foo { + height: 4rem; + margin-top: -4rem; + background-color: #d24f2e; + color: #e9e7e9; + + ul { + padding: 0 1rem; + height: 4rem; + display: flex; + align-items: center; + + li { + margin-right: 1rem; + } + } +} diff --git a/src/002-negative-margins/example/index.html b/src/002-negative-margins/example/index.html index b3e7465..1c4153c 100644 --- a/src/002-negative-margins/example/index.html +++ b/src/002-negative-margins/example/index.html @@ -1,5 +1,6 @@ + 002 - Negative Margins @@ -12,126 +13,129 @@ - + + - -
-
- -
- - 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.

+ +
+
+ +
+ + 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 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 lobortis sollicitudin eu sit amet odio.

+ + +
-
-

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 - lobortis sollicitudin eu sit amet odio.

- - -
+ +
+
- -
-
-
+ + - + + \ No newline at end of file diff --git a/src/003-box-sizing/example/example.css b/src/003-box-sizing/example/example.css index eba1d66..e832374 100644 --- a/src/003-box-sizing/example/example.css +++ b/src/003-box-sizing/example/example.css @@ -1,5 +1,31 @@ +@charset "UTF-8"; /* * Practice : Box Sizing - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ +.wrapper { + max-width: 1200px; + margin: 0 auto; } + +.content { + background-color: #e9e7e9; + padding: 1rem; + margin: 1rem 0; } + .content:not(:last-of-type) { + margin-bottom: 0; } + +.container { + border: 5px solid #d24f2e; + max-width: 1000px; + min-height: 80px; + margin: 15px; + padding: 15px; } + +.cb-example { + box-sizing: content-box; } + +.bb-example { + box-sizing: border-box; } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/003-box-sizing/example/example.scss b/src/003-box-sizing/example/example.scss new file mode 100644 index 0000000..89cf316 --- /dev/null +++ b/src/003-box-sizing/example/example.scss @@ -0,0 +1,36 @@ +/* + * Practice : Box Sizing + * Version: 1.0.0 + * By: Elías Rodelo + */ + +.wrapper { + max-width: 1200px; + margin: 0 auto; +} + +.content { + background-color: #e9e7e9; + padding: 1rem; + margin: 1rem 0; + + &:not(:last-of-type) { + margin-bottom: 0; + } +} + +.container { + border: 5px solid #d24f2e; + max-width: 1000px; + min-height: 80px; + margin: 15px; + padding: 15px; +} + +.cb-example { + box-sizing: content-box; +} + +.bb-example { + box-sizing: border-box; +} diff --git a/src/003-box-sizing/example/index.html b/src/003-box-sizing/example/index.html index 9c2f4a4..477eccb 100644 --- a/src/003-box-sizing/example/index.html +++ b/src/003-box-sizing/example/index.html @@ -1,5 +1,6 @@ + 003 - Box Sizing @@ -15,57 +16,60 @@ + - -
-
- -
- - 003 - Box Sizing - -
-
-
-
-
- + +
+
+ +
+ + 003 - Box Sizing + +
+
+
+
+
+ -
+
-
-

Box Model

-
-

Since the dawn of CSS, the box model has worked like this by default:

-

width + padding + border = actual visible/rendered width of an element's box

-

height + padding + border = actual visible/rendered height of an element's box

+
+

Box Model

+
+

Since the dawn of CSS, the box model has worked like this by default:

+

width + padding + border = actual visible/rendered width of an element's box

+

height + padding + border = actual visible/rendered height of an element's box

+
-
-
-

Box Sizing : Content Box

-
-

Default. The width and height properties (and min/max properties) includes only the content. Border, - padding, or margin are not included

+
+

Box Sizing : Content Box

+
+

Default. The width and height properties (and min/max properties) includes only the content. Border, padding, + or margin are not included

+
-
-
-

Box Sizing : border-box

-
-

The width and height properties (and min/max properties) includes content, padding and border, but not - the margin

+
+

Box Sizing : border-box

+
+

The width and height properties (and min/max properties) includes content, padding and border, but not the + margin +

+
+
- -
-
-
+
+
- + + \ No newline at end of file diff --git a/src/004-display/README.md b/src/004-display/README.md index 72cf076..9b60755 100644 --- a/src/004-display/README.md +++ b/src/004-display/README.md @@ -2,26 +2,26 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive on screens from 425px to 1440px. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as required. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive on screens from 425px to 1440px. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as required. + +### Before + You should read about Display Documentation here [Display][1]. > The estimation for this practice is: 2 hours. - ### To Do -- [Watch this video with the design][2] +* [Watch this video with the design][2] -- Run the base project. +* Run the base project. ```sh $ npm install http-server -g @@ -29,14 +29,13 @@ $ cd u-css/ $ http-server ./src -p 3000 ``` -- Using Display CSS Property, create the next items: - -1. A header with a small comment next to it. -2. A horizontal nav bar menu. -3. Two columns below nav bar. -4. Below the columns created, make a table with headers and 2 rows. -5. Below the table created, make a gallery of boxes. +* Using Display CSS Property, create the next items: +1. A header with a small comment next to it. _done_ +2. A horizontal nav bar menu. _done_ +3. Two columns below nav bar. _done_ +4. Below the columns created, make a table with headers and 2 rows. _done_ +5. Below the table created, make a gallery of boxes. _done_ [1]: https://css-tricks.com/almanac/properties/d/display/ [2]: https://drive.google.com/a/talosdigital.com/file/d/1jT6gSjJPmO2r6XtXRJoKmq3t4S9CcYnG/view?usp=sharing diff --git a/src/004-display/example/example.css b/src/004-display/example/example.css index 08fc34e..d534a7d 100644 --- a/src/004-display/example/example.css +++ b/src/004-display/example/example.css @@ -1,5 +1,84 @@ +@charset "UTF-8"; /* * Practice : Display - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ +* { + box-sizing: border-box; } + +.wrapper { + max-width: 900px; + margin: 0 auto; } + +.header { + background-color: #e9e7e9; } + .header h1 { + font-size: 2rem; + line-height: 1; + display: inline; } + +.block { + padding: 1rem; } + +.navbar { + background-color: #d9d7d9; } + .navbar-list { + list-style: none; + margin: 0; + padding: 0; } + .navbar-item { + display: inline-block; } + .navbar-link { + display: block; + padding: 0.5rem 1rem; } + .navbar-link:first-of-type { + padding-left: 0; } + +.columns { + background-color: #e9e7e9; + display: flex; } + .columns .col { + display: block; + flex-grow: 1; + flex-basis: 50%; } + .columns .col + .col { + padding-left: 1rem; } + .columns .column { + border: 2px solid #d24f2e; + flex-grow: 1; + flex-basis: 25%; + padding: 1rem; + margin: 1rem; } + .columns .column + .column { + margin-right: 0; + margin-bottom: 0; } + .columns .column:first-of-type { + margin-right: 0; + margin-bottom: 0; } + .columns.wrap { + flex-wrap: wrap; } + +.table { + display: table; + width: 100%; + background-color: #d9d7d9; } + .table-row { + display: table-row; + border-bottom: 1px solid #efefef; } + .table-header-group { + display: table-header-group; } + .table-header-group .header { + font-weight: bolder; + background-color: #c9c7c9; + border-top: 1px solid #efefef; } + .table-cell { + display: table-cell; + padding: 1rem; + text-align: center; + border-bottom: 1px solid #efefef; + border-left: 1px solid #efefef; } + .table-cell:last-of-type { + border-right: 1px solid #efefef; } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/004-display/example/example.scss b/src/004-display/example/example.scss new file mode 100644 index 0000000..1808786 --- /dev/null +++ b/src/004-display/example/example.scss @@ -0,0 +1,121 @@ +/* + * Practice : Display + * Version: 1.0.0 + * By: Elías Rodelo + */ + +* { + box-sizing: border-box; +} + +.wrapper { + max-width: 900px; + margin: 0 auto; +} + +.header { + background-color: #e9e7e9; + + h1 { + font-size: 2rem; + line-height: 1; + display: inline; + } +} + +.block { + padding: 1rem; +} + +.navbar { + background-color: #d9d7d9; + + &-list { + list-style: none; + margin: 0; + padding: 0; + } + + &-item { + display: inline-block; + } + + &-link { + display: block; + padding: 0.5rem 1rem; + + &:first-of-type { + padding-left: 0; + } + } +} + +.columns { + background-color: #e9e7e9; + display: flex; + + .col { + display: block; + flex-grow: 1; + flex-basis: 50%; + + + .col { + padding-left: 1rem; + } + } + + .column { + border: 2px solid #d24f2e; + flex-grow: 1; + flex-basis: 25%; + padding: 1rem; + margin: 1rem; + + + .column { + margin-right: 0; + margin-bottom: 0; + } + + &:first-of-type { + margin-right: 0; + margin-bottom: 0; + } + } + + &.wrap { + flex-wrap: wrap; + } +} + +.table { + display: table; + width: 100%; + background-color: #d9d7d9; + + &-row { + display: table-row; + border-bottom: 1px solid #efefef; + } + + &-header-group { + display: table-header-group; + + .header { + font-weight: bolder; + background-color: #c9c7c9; + border-top: 1px solid #efefef; + } + } + + &-cell { + display: table-cell; + padding: 1rem; + text-align: center; + border-bottom: 1px solid #efefef; + border-left: 1px solid #efefef; + + &:last-of-type { + border-right: 1px solid #efefef; + } + } +} diff --git a/src/004-display/example/index.html b/src/004-display/example/index.html index 3db9b5e..3d3b8c3 100644 --- a/src/004-display/example/index.html +++ b/src/004-display/example/index.html @@ -1,5 +1,6 @@ + 004 - Display @@ -15,166 +16,163 @@ + - -
-
- -
- - 004 - Display - -
-
-
-
-
- + +
+
+ +
+ + 004 - Display + +
+
+
+
+
+ -
+
-
-

Lorem ipsum +
+

Lorem ipsum +

dolor sit amet -

-
+ -
- -
+ -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +
-
-
-
-
Table Header
-
Table Header
-
Table Header
-
-
-
Table Cell
-
Table Cell
-
Table Cell
-
-
-
Table Cell
-
Table Cell
-
Table Cell
+
+
+
Table Header
+
Table Header
+
Table Header
+
+
+
Table Cell
+
Table Cell
+
Table Cell
+
+
+
Table Cell
+
Table Cell
+
Table Cell
+
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pa riatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pa riatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
-
-
+
+
-
-
-
+
+
- + + \ No newline at end of file diff --git a/src/005-centering/README.md b/src/005-centering/README.md index 74c4de8..3176330 100644 --- a/src/005-centering/README.md +++ b/src/005-centering/README.md @@ -2,29 +2,31 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive code is optional. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as required. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive code is optional. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as required. + +### Before + You should read about Centering Components here: -1. [CSS align][1] -2. [Centering CSS][2] -3. [Absolute Horizontal Vertical Centering CSS][3] -4. [Centering Elements with Flexbox][4] +1. [CSS align][1] +2. [Centering CSS][2] +3. [Absolute Horizontal Vertical Centering CSS][3] +4. [Centering Elements with Flexbox][4] > The estimation for this practice is: 2 hours. ### To Do -- [Watch this video with the design][5] -- Run the base project. +* [Watch this video with the design][5] + +* Run the base project. ```sh $ npm install http-server -g @@ -32,21 +34,21 @@ $ cd u-css/ $ http-server ./src -p 3000 ``` -- Using the methods you learned about for Centering in CSS, create the next items: - -1. A container with a max width of 1200px, centered horizontally. Use margin property. -2. A bar with a text centered. -3. A bar with 4 centered links. -4. Three centered block level elements with text inside. -5. Three centered elements with text inside using flexbox. -6. A single centered line of text using height and line height properties. -7. Center multiple lines of text using vertical align property. -8. Center multiple lines of text using flexbox. -9. A Block-level element with a fixed height, centered vertically within a parent. -10. A Block-level element with an unknown height, centered vertically within a parent. - -[1]: https://www.w3schools.com/css/css_align.asp -[2]: https://css-tricks.com/centering-css-complete-guide/ -[3]: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/ +* Using the methods you learned about for Centering in CSS, create the next items: + +1. A container with a max width of 1200px, centered horizontally. Use margin property. _done_ +2. A bar with a text centered. _done_ +3. A bar with 4 centered links. _done_ +4. Three centered block level elements with text inside. _done_ +5. Three centered elements with text inside using flexbox. _done_ +6. A single centered line of text using height and line height properties. _done_ +7. Center multiple lines of text using vertical align property. _done_ +8. Center multiple lines of text using flexbox. _done_ +9. A Block-level element with a fixed height, centered vertically within a parent. _done_ +10. A Block-level element with an unknown height, centered vertically within a parent. _done_ + +[1]: https://www.w3schools.com/css/css_align.asp +[2]: https://css-tricks.com/centering-css-complete-guide/ +[3]: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/ [4]: https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/ [5]: https://drive.google.com/a/talosdigital.com/file/d/1ulx9iQh7VDd4L-4G9MS2BcDX_OUzwYBU/view?usp=sharing diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css index 4dba466..9b0ff74 100644 --- a/src/005-centering/example/example.css +++ b/src/005-centering/example/example.css @@ -1,5 +1,115 @@ +@charset "UTF-8"; /* * Practice : Centering - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ +* { + box-sizing: border-box; } + +.wrapper { + max-width: 1200px; + margin: 0 auto; + background-color: #e9e7e9; + display: flex; + flex-direction: column; } + +.block { + padding: 1rem; } + +.header { + background-color: #d9d7d9; + line-height: 1.5; + margin: 0 0 1rem 0; } + +.text-align-center { + text-align: center; } + +.navbar { + background-color: #d9d7d9; + margin-bottom: 1rem; } + .navbar .container { + max-width: 50%; + margin: 0 auto; + text-align: center; } + .navbar-link { + margin-right: 1rem; + display: inline-block; + padding: 0.5rem 1rem; } + .navbar-link:last-of-type { + margin: 0; } + +.columns { + display: block; + max-width: 80%; + margin: 0 auto; + margin-bottom: 2rem; } + .columns .column { + display: inline-block; + background-color: #d9d7d9; + width: 30%; + margin: 1rem; + padding: 3rem 5rem; } + +.columns.flex { + display: inherit; } + .columns.flex .column { + width: unset; } + +.center-half { + display: block; + width: 50%; + background-color: #d9d7d9; + margin-bottom: 2rem; + padding: 2rem 1rem; + line-height: 150%; } + +.table-like { + display: table; + vertical-align: center; + padding: 1.5rem 3rem; + background-color: #d9d7d9; + width: 25%; + margin-bottom: 2rem; } + +.flex-container { + display: inherit; + padding: 4rem 1rem; + justify-content: flex-start; + align-items: center; + background-color: #d9d7d9; + margin-bottom: 2rem; + /* Squares */ } + .flex-container p { + margin: 0; } + .flex-container .height { + background-color: #a9a7a9; + display: block; + width: 100%; + padding: 1rem; } + .flex-container .height--fixed { + height: 80px; } + .flex-container.green { + background-color: #148f77; + height: 500px; + justify-content: center; } + .flex-container.green .square-1 { + height: 175px; + width: 20%; + background-color: #ec7063; + display: inherit; + justify-content: inherit; + align-items: center; } + .flex-container.green .square-2 { + display: inherit; + justify-content: inherit; + width: 65%; + height: 120px; + background-color: #17202a; + align-items: inherit; } + .flex-container.green .square-3 { + width: 40%; + height: 54px; + background-color: #d68910; } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/005-centering/example/example.scss b/src/005-centering/example/example.scss new file mode 100644 index 0000000..4b7cac8 --- /dev/null +++ b/src/005-centering/example/example.scss @@ -0,0 +1,151 @@ +/* + * Practice : Centering + * Version: 1.0.0 + * By: Elías Rodelo + */ + +* { + box-sizing: border-box; +} + +.wrapper { + max-width: 1200px; + margin: 0 auto; + background-color: #e9e7e9; + display: flex; + flex-direction: column; +} + +.block { + padding: 1rem; +} + +.header { + background-color: #d9d7d9; + line-height: 1.5; + margin: 0 0 1rem 0; +} + +.text-align-center { + text-align: center; +} + +.navbar { + background-color: #d9d7d9; + margin-bottom: 1rem; + + .container { + max-width: 50%; + margin: 0 auto; + text-align: center; + } + + &-link { + margin-right: 1rem; + display: inline-block; + padding: 0.5rem 1rem; + + &:last-of-type { + margin: 0; + } + } +} + +.columns { + display: block; + max-width: 80%; + margin: 0 auto; + margin-bottom: 2rem; + + .column { + display: inline-block; + background-color: #d9d7d9; + width: 30%; + margin: 1rem; + padding: 3rem 5rem; + } +} + +.columns.flex { + display: inherit; + + .column { + width: unset; + } +} + +.center-half { + display: block; + width: 50%; + background-color: #d9d7d9; + margin-bottom: 2rem; + padding: 2rem 1rem; + line-height: 150%; +} + +.table-like { + display: table; + vertical-align: center; + padding: 1.5rem 3rem; + background-color: #d9d7d9; + width: 25%; + margin-bottom: 2rem; +} + +.flex-container { + display: inherit; + padding: 4rem 1rem; + justify-content: flex-start; + align-items: center; + background-color: #d9d7d9; + margin-bottom: 2rem; + + p { + margin: 0; + } + + .height { + background-color: #a9a7a9; + display: block; + width: 100%; + padding: 1rem; + + &--fixed { + height: 80px; + } + } + + /* Squares */ + + &.green { + background-color: #148f77; + height: 500px; + justify-content: center; + + .square { + &-1 { + height: 175px; + width: 20%; + background-color: #ec7063; + display: inherit; + justify-content: inherit; + align-items: center; + } + + &-2 { + display: inherit; + justify-content: inherit; + width: 65%; + height: 120px; + background-color: #17202a; + align-items: inherit; + } + + &-3 { + width: 40%; + height: 54px; + background-color: #d68910; + } + } + } +} diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html index b6d2e1e..4ac9b78 100644 --- a/src/005-centering/example/index.html +++ b/src/005-centering/example/index.html @@ -1,5 +1,6 @@ + 005 - Centering @@ -15,95 +16,98 @@ + - -
-
- -
- - 005 - Centering - -
-
-
-
-
- -
-

This text is centered.

- -
- -
+ +
+
+ +
+ + 005 - Centering + +
+
+
+
+
+ +
+

This text is centered.

-
-
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is - block-like with my siblings and we're centered in a row. + -
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me - than my siblings do. + +
+
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like + with my siblings and we're centered in a row. +
+
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than + my siblings do. +
+
I'm an element that is block-like with my siblings and we're centered in a row.
-
I'm an element that is block-like with my siblings and we're centered in a row.
-
-
-
I'm an element that is block-like with my siblings and we're centered in a row.
-
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me - than my siblings do. +
+
I'm an element that is block-like with my siblings and we're centered in a row.
+
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than + my siblings do. +
+
I'm an element that is block-like with my siblings and we're centered in a row.
-
I'm an element that is block-like with my siblings and we're centered in a row.
-
-
- I'm a centered line. -
+
+ I'm a centered line. +
-
-

I'm vertically centered multiple lines of text in a CSS-created table layout.

-
+
+

I'm vertically centered multiple lines of text in a CSS-created table layout.

+
-
-

I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra - vitae corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci - pulvinar assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed. - Augue rutrum quam eros auctor venenatis adipisci, elementum etiam felis nec conubia ac, non pede pede proin - vitae, justo magna vestibulum, integer quis turpis. Quisque vestibulum congue, vulputate eget ipsum, eget - mauris duis orci sociosqu neque dolorem, mi senectus vestibulum in, nec eu nibh turpis auctor erat. Odio - purus mauris dui nec massa nisl, per pulvinar, nulla gravida suspendisse arcu ac tenetur luctus. Iaculis in - tortor vel dolor a, vehicula aliquet class quisque, a vehicula in porta. Morbi dui sodales sapien libero - lorem. Mollis duis vitae sodales odio pellentesque. Nunc eligendi odio metus. Quam est, elit eleifend ante - elementum aliquam vitae.

-
+
+

I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra vitae + corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci pulvinar + assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed. Augue rutrum + quam eros auctor venenatis adipisci, elementum etiam felis nec conubia ac, non pede pede proin vitae, justo + magna vestibulum, integer quis turpis. Quisque vestibulum congue, vulputate eget ipsum, eget mauris duis orci + sociosqu neque dolorem, mi senectus vestibulum in, nec eu nibh turpis auctor erat. Odio purus mauris dui nec + massa nisl, per pulvinar, nulla gravida suspendisse arcu ac tenetur luctus. Iaculis in tortor vel dolor a, + vehicula aliquet class quisque, a vehicula in porta. Morbi dui sodales sapien libero lorem. Mollis duis vitae + sodales odio pellentesque. Nunc eligendi odio metus. Quam est, elit eleifend ante elementum aliquam vitae.

+
-
-
I'm a block-level element with a fixed height, centered vertically within my parent.
-
+
+
I'm a block-level element with a fixed height, centered vertically within my parent.
+
-
-
I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level - element with an unknown height, centered vertically within my parent. I'm a block-level element with an - unknown height, centered vertically within my parent. +
+
I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level element + with an unknown height, centered vertically within my parent. I'm a block-level element with an unknown height, + centered vertically within my parent. +
-
-
-
-
-
+
+
+
+
+
+
+
-
+
-
-
-
+
+
- + + \ No newline at end of file diff --git a/src/006-basic-layout/README.md b/src/006-basic-layout/README.md index 634e8ac..4da2157 100644 --- a/src/006-basic-layout/README.md +++ b/src/006-basic-layout/README.md @@ -2,24 +2,26 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive code is not required. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as required. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive code is not required. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as required. + +### Before + You should read about Equal Heigh Column Layout here [Smashing Magazine][1] > The estimation for this practice is: 2 hours. ### To Do -- [Watch this video with the design][2] -- Run the base project. +* [Watch this video with the design][2] + +* Run the base project. ```sh $ npm install http-server -g @@ -27,10 +29,10 @@ $ cd u-css/ $ http-server ./src -p 3000 ``` -- Create two layouts with the following specifications: +* Create two layouts with the following specifications: -1. Using Equal Height Columns -2. Using Flex +1. Using Equal Height Columns _done_ +2. Using Flex _done_ [1]: https://www.smashingmagazine.com/2010/11/equal-height-columns-using-borders-and-negative-margins-with-css/ [2]: https://drive.google.com/a/talosdigital.com/file/d/1AlhahHh75yQdSRA8Ix1HOIjBrPnRX25e/view?usp=sharing diff --git a/src/006-basic-layout/example/example.css b/src/006-basic-layout/example/example.css index bdfd29e..680c48e 100644 --- a/src/006-basic-layout/example/example.css +++ b/src/006-basic-layout/example/example.css @@ -1,5 +1,82 @@ +@charset "UTF-8"; /* * Practice : Basic Layout - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ +.container { + width: 80vw; + margin: 0 auto; } + +.header { + background-color: #d24f2e; + padding: 1rem 1rem; } + +ul { + color: #fff; + margin: 0; + padding: 0; + list-style: none; } + ul li { + display: inline; + margin-right: 1rem; } + +.aside { + width: 250px; + margin-right: -250px; + float: left; + background-color: #76d7c4; + position: relative; } + +.main { + box-sizing: border-box; + background-color: #e59866; + border-left: 250px solid #76d7c4; + float: left; + width: 100%; + padding: 1rem; } + .main .square-container { + width: 100%; + height: 75vh; + display: flex; + flex-wrap: wrap; } + .main .square-container .square { + box-sizing: border-box; + width: 25%; + background-color: #76d7c4; + border: 1px solid #d24f2e; } + +.footer { + background-color: #d24f2e; + padding: 1rem; } + +.header, +.footer { + overflow: hidden; + zoom: 1; + clear: left; } + .header.flex, + .footer.flex { + clear: none; + overflow: unset; + zoom: normal; } + +.flex-container { + display: flex; + width: 100%; + box-sizing: content-box; } + .flex-container .aside { + float: none; + margin: 0; + flex: 25% 1; } + .flex-container .main { + float: none; + margin: 0; + flex: 75% 3; + border: 0; } + .flex-container .square-container { + flex-wrap: nowrap; } + .flex-container .he { + height: 60%; } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/006-basic-layout/example/example.scss b/src/006-basic-layout/example/example.scss new file mode 100644 index 0000000..259e091 --- /dev/null +++ b/src/006-basic-layout/example/example.scss @@ -0,0 +1,103 @@ +/* + * Practice : Basic Layout + * Version: 1.0.0 + * By: Elías Rodelo + */ + +.container { + width: 80vw; + margin: 0 auto; +} + +.header { + background-color: #d24f2e; + padding: 1rem 1rem; +} + +ul { + color: #fff; + margin: 0; + padding: 0; + list-style: none; + + li { + display: inline; + margin-right: 1rem; + } +} + +.aside { + width: 250px; + margin-right: -250px; + float: left; + background-color: #76d7c4; + position: relative; +} + +.main { + box-sizing: border-box; + background-color: #e59866; + border-left: 250px solid #76d7c4; + float: left; + width: 100%; + padding: 1rem; + + .square-container { + width: 100%; + height: 75vh; + display: flex; + flex-wrap: wrap; + + .square { + box-sizing: border-box; + width: 25%; + background-color: #76d7c4; + border: 1px solid #d24f2e; + } + } +} + +.footer { + background-color: #d24f2e; + padding: 1rem; +} + +.header, +.footer { + overflow: hidden; + zoom: 1; + clear: left; + + &.flex { + clear: none; + overflow: unset; + zoom: normal; + } +} + +.flex-container { + display: flex; + width: 100%; + box-sizing: content-box; + + .aside { + float: none; + margin: 0; + flex: 25% 1; + } + + .main { + float: none; + margin: 0; + flex: 75% 3; + border: 0; + } + + .square-container { + flex-wrap: nowrap; + } + + .he { + height: 60%; + } +} diff --git a/src/006-basic-layout/example/index.html b/src/006-basic-layout/example/index.html index d21e25f..ef98861 100644 --- a/src/006-basic-layout/example/index.html +++ b/src/006-basic-layout/example/index.html @@ -1,5 +1,6 @@ + 006 - Basic Layout @@ -15,131 +16,67 @@ - - -
-
- -
- - 006 - Basic Layout - -
-
-
-
-
- -
- -

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

-
-
-
    -
  • - 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...

-
+ + +
+
+ +
+ + 006 - Basic Layout + +
+
+
+
+
+ +
+

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 -
    • -
-
- -
-
+
+ -
+

Lorem ipsum...

Lorem ipsum...

Lorem ipsum...

@@ -147,27 +84,110 @@

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

Lorem ipsum...

Lorem ipsum...

Lorem ipsum...

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

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

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

Lorem ipsum...

+

Lorem ipsum...

+

Lorem ipsum...

+

Lorem ipsum...

+

Lorem ipsum...

+

Lorem ipsum...

+

Lorem ipsum...

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
    +
  • + Talos Digital +
    • +
  • + Contact Us +
    • +
+
-
+
-
-
-
+ + - + + \ No newline at end of file diff --git a/src/007-z-index/example/example.css b/src/007-z-index/example/example.css index 5b008b9..9971524 100644 --- a/src/007-z-index/example/example.css +++ b/src/007-z-index/example/example.css @@ -1,5 +1,81 @@ +@charset "UTF-8"; /* - * Practice : Z-index, !important and Inheritance - * Version: 1 - * By: xxx + * Practice : Z-index + * Version: 1.0.0 + * By: Elías Rodelo */ +*, +::after, +::before { + box-sizing: border-box; } + +.mdl-layout__content { + width: 100vw; + background-color: #d5eadf; } + +.wrapper { + width: 80vw; + margin: 5rem auto; + z-index: 3; + background-color: #78c4cf; } + .wrapper h1 { + font-size: 2.5em; + font-weight: 200; + margin: 0; + margin-bottom: 1rem; } + .wrapper h2 { + font-size: 1.75em; + margin: 0 0 1rem 0; + font-weight: 100; } + .wrapper-yellow { + position: relative; + z-index: 4; + color: #fefefe; + padding: 3rem; } + .wrapper-yellow hr { + border-top-color: #d05036; } + .wrapper-yellow .content { + width: 65%; } + .wrapper-yellow .text { + text-transform: uppercase; + font-weight: 300; } + .wrapper-yellow .text.bg-light { + background-color: #e4f3f5; + color: #070707; + padding: 3rem; + text-transform: unset; + margin-left: -3rem; } + .wrapper .aside { + background-color: #dfe189; + position: absolute; + top: 3rem; + right: 0; + width: 25vw; + height: 100%; + z-index: 4; + color: #070707; + padding: 2rem; } + .wrapper .aside ul { + list-style: none; + margin: 0; + padding: 0; } + .wrapper-dark { + position: absolute; + background-color: #555e59; + width: 30vw; + height: 100%; + z-index: 1; + opacity: 0.5; + right: 0; + top: 0; } + +@media screen and (max-width: 768px) { + .wrapper-dark { + display: none; } + .wrapper-yellow .content { + width: 100%; } + .wrapper-yellow .aside { + top: 103%; + width: 100%; } } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/007-z-index/example/example.scss b/src/007-z-index/example/example.scss new file mode 100644 index 0000000..9e8354f --- /dev/null +++ b/src/007-z-index/example/example.scss @@ -0,0 +1,119 @@ +/* + * Practice : Z-index + * Version: 1.0.0 + * By: Elías Rodelo + */ + +$green-1: #d5eadf; +$green-2: #e4f3f5; +$gray-1: #555e59; +$blue-1: #78c4cf; +$yellow-1: #dfe189; +$dark-1: #070707; + +*, +::after, +::before { + box-sizing: border-box; +} + +.mdl-layout__content { + width: 100vw; + background-color: $green-1; +} + +.wrapper { + width: 80vw; + margin: 5rem auto; + z-index: 3; + background-color: $blue-1; + + h1 { + font-size: 2.5em; + font-weight: 200; + margin: 0; + margin-bottom: 1rem; + } + + h2 { + font-size: 1.75em; + margin: 0 0 1rem 0; + font-weight: 100; + } + + &-yellow { + position: relative; + z-index: 4; + color: #fefefe; + padding: 3rem; + + hr { + border-top-color: #d05036; + } + + .content { + width: 65%; + } + + .text { + text-transform: uppercase; + font-weight: 300; + + &.bg-light { + background-color: $green-2; + color: $dark-1; + padding: 3rem; + text-transform: unset; + margin-left: -3rem; + } + } + } + + .aside { + background-color: $yellow-1; + position: absolute; + top: 3rem; + right: 0; + width: 25vw; + height: 100%; + z-index: 4; + color: $dark-1; + padding: 2rem; + + ul { + list-style: none; + margin: 0; + padding: 0; + } + } + + &-dark { + position: absolute; + background-color: $gray-1; + width: 30vw; + height: 100%; + z-index: 1; + opacity: 0.5; + right: 0; + top: 0; + } +} + +@media screen and (max-width: 768px) { + .wrapper { + &-dark { + display: none; + } + + &-yellow { + .content { + width: 100%; + } + + .aside { + top: 103%; + width: 100%; + } + } + } +} diff --git a/src/007-z-index/example/index.html b/src/007-z-index/example/index.html index c82d66a..bbac8db 100644 --- a/src/007-z-index/example/index.html +++ b/src/007-z-index/example/index.html @@ -1,5 +1,6 @@ + 007 - Z Index, !important and Inheritance @@ -15,76 +16,71 @@ + - -
-
- -
- - 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 - 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.

-

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.

-
-

Lorem ipsum dolor sit amet

+
+

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.

- 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. + 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
    • +
+
-
-
-
+
+
- + + \ No newline at end of file diff --git a/src/008-advanced-selectors/example/example.css b/src/008-advanced-selectors/example/example.css index 218d5ec..bdac9bb 100644 --- a/src/008-advanced-selectors/example/example.css +++ b/src/008-advanced-selectors/example/example.css @@ -1,153 +1,162 @@ -/* Practice: Advanced Selectors */ -body, -html { - color: #787878; - font-size: 16px; - line-height: 1.5; - margin: 0; - padding: 0; -} +@charset "UTF-8"; +/* + * Practice : Advanced Selectors + * Version: 1.0.0 + * By: Elías Rodelo + */ +/* Variables */ +*, +::after, +::before { + box-sizing: border-box; } + +a { + text-decoration: none; + color: inherit; } -h2 { - border-bottom: 2px solid #ebebeb; - font-size: 1.125em; - font-weight: normal; - letter-spacing: 3px; - line-height: 40px; - margin: 20px 0; - padding-bottom: 20px; - text-transform: uppercase; -} +p { + font-family: 'Avenir'; } -footer { - background-color: #787878; - color: #fff; - height: 100px; - line-height: 100px; - margin: 0 -20px -20px; - padding: 20px; -} - -footer div { - margin: 0 auto; - max-width: 1200px; -} - -.as-header { - border-bottom: 1px solid #ebebeb; - color: #000; - font-size: 1.5em; - line-height: 100px; - height: 100px; - text-align: center; +h2, +h1 { + font-family: 'Avenir'; + border-bottom: 1px solid rgba(15, 15, 15, 0.1); text-transform: uppercase; -} + font-weight: 700; + margin: 0 0 1rem; + line-height: 1.75; + color: rgba(15, 15, 15, 0.5); } + h2:not(:first-of-type), + h1:not(:first-of-type) { + margin-top: 2rem; } -.as-container { - margin: 0 auto; - max-width: 1200px; -} +h2 { + font-size: 1.5em; } + +h1 { + font-size: 3em; + text-align: center; } -.as-container > aside { - display: inline-block; - width: 250px; -} +.as-container { + max-width: 80vw; + margin: 2rem auto; + display: flex; } + .as-container > aside { + width: 30%; + padding: 1rem; } + .as-container > section { + padding: 1rem; + width: 70%; } + +ul { + list-style: none; + margin: 0; + padding: 0; } -.as-container > section { - display: inline-block; - vertical-align: top; - width: calc(100% - 290px); -} +.as-link { + display: block; + padding: 0.25em 0; + text-transform: uppercase; } + .as-link:hover { + color: #d24f2e; } .as-button-list li { - background-color: #ebebeb; - cursor: pointer; - padding: 5px; -} + margin-bottom: 0.5rem; } +.as-button-list-link { + display: block; + background-color: #f9e9e5; + border-bottom: 2px solid rgba(210, 79, 46, 0.5); + padding: 0.5rem; + transition: 0.2s all linear; } + .as-button-list-link:hover { + background-color: rgba(210, 79, 46, 0.5); } .as-avatar { - min-height: 100px; -} - -.as-avatar > img { - cursor: pointer; - float: left; - height: auto; - margin-right: 10px; - width: 70px; -} - -.as-avatar > div a { - color: inherit; - font-size: 0.9em; - line-height: 1.5em; - text-transform: capitalize; -} - - -.as-avatar > div p { - color: #9b9b9b; -} - + display: flex; + margin-bottom: 1rem; } + .as-avatar-meta { + width: 80%; + padding: 0 1rem; } + .as-avatar-meta > a { + padding: 0; } + .as-avatar-img { + width: 20%; + height: auto; } + .as-avatar-img img { + max-width: 100%; } + +.as-price { + font-weight: bold; + font-size: 1em; + margin: 0; } + .as-price:after { + content: ' total price'; + font-size: 0.5em; } .as-top-list { - line-height: 40px; - margin: 20px 0; -} - -.as-top-list div { - float: right; -} - -.as-top-list button { - background-color: transparent; - border: 1px solid #ebebeb; - height: 40px; - margin-left: 5px; -} - + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; } + .as-top-list > div button { + border: 1px solid rgba(0, 0, 0, 0.5); + border-radius: 3px; } + .as-top-list > div button:first-child { + background-color: #0f0f0f; } + .as-top-list > div button:first-child i { + color: #fff; } .as-cards { display: flex; - flex-wrap: wrap; - padding: 20px; -} - -.as-card { - position: relative; -} - - -.as-card-img { - box-sizing: border-box; - margin-right: 10px; - overflow: hidden; - position: relative; - width: 15rem; - height: 300px; -} - -.as-card-img img { - width: 100%; - max-width: 100%; - -moz-transition: all 0.3s; - -webkit-transition: all 0.3s; - transition: all 0.3s; -} - - -.as-onsale { - background-color: #fbc2d4; - color: #fff; - font-size: 0.7em; - font-weight: 100; - line-height: 25px; - padding: 1px 8px; - position: absolute; - top: 10px; - text-decoration: none; - text-transform: uppercase; - width: 90px; -} - + flex-wrap: wrap; } + .as-cards .as-card { + width: 33.3%; + position: relative; } + .as-cards .as-card .as-price:after { + content: none; } + .as-cards .as-card + .as-card { + padding-right: 1rem; + padding-bottom: 1rem; } + .as-cards .as-card:hover { + cursor: pointer; } + .as-cards .as-card:first-of-type { + padding-right: 1rem; + padding-bottom: 1rem; } + .as-cards .as-card > p { + margin: 0; } + .as-cards .as-card > p:first-of-type { + font-size: 1em; } + .as-cards .as-card-img { + overflow: hidden; + position: relative; } + .as-cards .as-card-img:hover { + opacity: 0.5; } + .as-cards .as-card-img:hover img { + transform: scale(1.1); } + .as-cards .as-card-img img { + max-width: 100%; + transition: 0.2s all; } + .as-cards .as-card .as-onsale { + position: absolute; + top: 1rem; + left: 1rem; + background-color: #d24f2e; + color: #fff; + text-transform: uppercase; + font-size: 0.75em; + padding: 1rem 1.25rem; } +footer { + background-color: #0f0f0f; + padding: 2rem 0; + margin: 0 -20px -20px; } + footer > div { + max-width: 80vw; + margin: 0 auto; + color: #fff; } + +@media screen and (max-width: 768px) { + .as-cards .as-card { + width: 100%; } } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/008-advanced-selectors/example/example.scss b/src/008-advanced-selectors/example/example.scss new file mode 100644 index 0000000..ec60aa1 --- /dev/null +++ b/src/008-advanced-selectors/example/example.scss @@ -0,0 +1,240 @@ +/* + * Practice : Advanced Selectors + * Version: 1.0.0 + * By: Elías Rodelo + */ + +/* Variables */ + +$hover-color: #d24f2e; +$button-list-color: #f9e9e5; + +*, +::after, +::before { + box-sizing: border-box; +} + +a { + text-decoration: none; + color: inherit; +} + +p { + font-family: 'Avenir'; +} + +h2, +h1 { + font-family: 'Avenir'; + border-bottom: 1px solid rgba(#0f0f0f, 0.1); + text-transform: uppercase; + font-weight: 700; + margin: 0 0 1rem; + line-height: 1.75; + color: rgba($color: #0f0f0f, $alpha: 0.5); + + &:not(:first-of-type) { + margin-top: 2rem; + } +} + +h2 { + font-size: 1.5em; +} + +h1 { + font-size: 3em; + text-align: center; +} + +.as-container { + max-width: 80vw; + margin: 2rem auto; + display: flex; + + > aside { + width: 30%; + padding: 1rem; + } + + > section { + padding: 1rem; + width: 70%; + } +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +.as-link { + display: block; + padding: 0.25em 0; + text-transform: uppercase; + + &:hover { + color: $hover-color; + } +} + +.as-button-list { + li { + margin-bottom: 0.5rem; + } + + &-link { + display: block; + background-color: $button-list-color; + border-bottom: 2px solid rgba($hover-color, $alpha: 0.5); + padding: 0.5rem; + transition: 0.2s all linear; + + &:hover { + background-color: rgba($hover-color, 0.5); + } + } +} + +.as-avatar { + display: flex; + margin-bottom: 1rem; + + &-meta { + width: 80%; + padding: 0 1rem; + + > a { + padding: 0; + } + } + + &-img { + width: 20%; + height: auto; + + img { + max-width: 100%; + } + } +} + +.as-price { + font-weight: bold; + font-size: 1em; + margin: 0; + + &:after { + content: ' total price'; + font-size: 0.5em; + } +} + +.as-top-list { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + + > div { + button { + border: 1px solid rgba($color: #000000, $alpha: 0.5); + border-radius: 3px; + + &:first-child { + background-color: #0f0f0f; + + i { + color: #fff; + } + } + } + } +} + +.as-cards { + display: flex; + flex-wrap: wrap; + + .as-card { + width: 33.3%; + position: relative; + + .as-price:after { + content: none; + } + + + .as-card { + padding-right: 1rem; + padding-bottom: 1rem; + } + + &:hover { + cursor: pointer; + } + + &:first-of-type { + padding-right: 1rem; + padding-bottom: 1rem; + } + + > p { + margin: 0; + + &:first-of-type { + font-size: 1em; + } + } + + &-img { + overflow: hidden; + position: relative; + + &:hover { + opacity: 0.5; + + img { + transform: scale(1.1); + } + } + + img { + max-width: 100%; + transition: 0.2s all; + } + } + + .as-onsale { + position: absolute; + top: 1rem; + left: 1rem; + background-color: $hover-color; + color: #fff; + text-transform: uppercase; + font-size: 0.75em; + padding: 1rem 1.25rem; + } + } +} + +footer { + background-color: #0f0f0f; + padding: 2rem 0; + margin: 0 -20px -20px; + + > div { + max-width: 80vw; + margin: 0 auto; + color: #fff; + } +} + +@media screen and (max-width: 768px) { + .as-cards { + .as-card { + width: 100%; + } + } +} diff --git a/src/008-advanced-selectors/example/index.html b/src/008-advanced-selectors/example/index.html index 98f729f..7123427 100644 --- a/src/008-advanced-selectors/example/index.html +++ b/src/008-advanced-selectors/example/index.html @@ -1,5 +1,6 @@ + 008 - Advanced Selectors @@ -15,189 +16,259 @@ + - -
-
- -
- - 008 - Advanced Selectors - -
-
-
-
-
- -
-

Clothes

-
- -
- - -
-
- Showing 1-12 of 289 results -
- - -
-
- -
-
-
-

Dress

-

COP $ 200.000

- add_shopping_cart - New Colection
-
-
-

White Croptop

-

COP $ 200.000

- add_shopping_cart -
+
+
+
+ +
+

Dress

+

COP $ 200.000

+ add_shopping_cart + New Colection +
-
-
-

White Blouse

-

COP $ 200.000

- add_shopping_cart -
+
+
+ +
+

White Croptop

+

COP $ 200.000

+ add_shopping_cart +
-
-
-

Black Blouse

-

COP $ 200.000

- add_shopping_cart -
+
+
+ +
+

White Blouse

+

COP $ 200.000

+ add_shopping_cart +
-
-
-

Long sleeve blouse

-

COP $ 200.000

- add_shopping_cart -
+
+
+ +
+

Black Blouse

+

COP $ 200.000

+ add_shopping_cart +
-
-
-

Dark Blue Dress

-

COP $ 200.000

- add_shopping_cart -
-
+
+
+ +
+

Long sleeve blouse

+

COP $ 200.000

+ add_shopping_cart +
+
+
+ +
+

Dark Blue Dress

+

COP $ 200.000

+ add_shopping_cart +
+
-

Recent

-
-
-
-

Dress

-

COP $ 200.000

- add_shopping_cart - New Colection -
+

Recent

-
-
-

White Croptop

-

COP $ 200.000

- add_shopping_cart -
+
+
+
+ +
+

Dress

+

COP $ 200.000

+ add_shopping_cart + New Colection +
-
-
-

White Blouse

-

COP $ 200.000

- add_shopping_cart -
+
+
+ +
+

White Croptop

+

COP $ 200.000

+ add_shopping_cart +
-
-
-

Black Blouse

-

COP $ 200.000

- add_shopping_cart -
+
+
+ +
+

White Blouse

+

COP $ 200.000

+ add_shopping_cart +
-
-
-

Long sleeve blouse

-

COP $ 200.000

- add_shopping_cart -
+
+
+ +
+

Black Blouse

+

COP $ 200.000

+ add_shopping_cart +
-
-
-

Dark Blue Dress

-

COP $ 200.000

- add_shopping_cart -
+
+
+ +
+

Long sleeve blouse

+

COP $ 200.000

+ add_shopping_cart +
+ +
+
+ +
+

Dark Blue Dress

+

COP $ 200.000

+ add_shopping_cart +
+
-
- -
-
-
+ + + + - + + \ No newline at end of file diff --git a/src/009-fonts-icons/README.md b/src/009-fonts-icons/README.md index b91bbc3..25fe312 100644 --- a/src/009-fonts-icons/README.md +++ b/src/009-fonts-icons/README.md @@ -2,25 +2,26 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive on screens from 320px to 1440px. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as required. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive on screens from 320px to 1440px. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as required. + +### Before + You should read about Font Size Documentation here [Kyle Schaeffer][1], about Font Size Properties here [CSS Tricks][2], about Fluid Typography here [CSS Tricks][3] and about Using @font-face here [CSS Tricks][4]. > The estimation for this practice is: 1 hours. ### To Do - -- [Watch this video with the design][7] -- Run the base project. +* [Watch this video with the design][7] + +* Run the base project. ```sh $ npm install http-server -g @@ -28,22 +29,20 @@ $ cd u-css/ $ http-server ./src -p 3000 ``` -- Continue the Z Index, !important and Inheritance exercise in which we are going to change some labels using Fonts, Icons and Sizes. +* Continue the Z Index, !important and Inheritance exercise in which we are going to change some labels using Fonts, Icons and Sizes. -1. Change the Inheritance font for raleway thin with, verdana, arial, sans-serif. -2. The first letter in all the simple text should be bold. -3. Remove the second test in the blue container and create an input with a find in page icon ([Material][6]). -4. Add 3 icons to the right between the title and the first text ([Font Awesome][5]). -4. Remove the third test in the white container and create a button with fingerprint icon ([Material][6]). -5. On the yellow container the pair items should use ‘pt’ and have a text after saying “using ‘pt’ “ -6. On the yellow container the odd items except the first one should be raleway normal, use ‘em’ and have a text after saying “using ‘em’ ”. +1. Change the Inheritance font for raleway thin with, verdana, arial, sans-serif. _done_ +2. The first letter in all the simple text should be bold. _done_ +3. Remove the second test in the blue container and create an input with a find in page icon ([Material][6]). _done_ +4. Add 3 icons to the right between the title and the first text ([Font Awesome][5]). _done_ +5. Remove the third test in the white container and create a button with fingerprint icon ([Material][6]). _done_ +6. On the yellow container the pair items should use ‘pt’ and have a text after saying “using ‘pt’ “ _done_ +7. On the yellow container the odd items except the first one should be raleway normal, use ‘em’ and have a text after saying “using ‘em’ ”. _done_ - [1]: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ [2]: https://css-tricks.com/almanac/properties/f/font-size/ [3]: https://css-tricks.com/snippets/css/fluid-typography/ [4]: https://css-tricks.com/snippets/css/using-font-face/ [5]: http://fontawesome.io/icons/ [6]: https://material.io/icons/ -[7]:https://drive.google.com/a/talosdigital.com/file/d/1zXXBpsTan_DWapvSbAUAET0t4JaM13It/view?usp=sharing - +[7]: https://drive.google.com/a/talosdigital.com/file/d/1zXXBpsTan_DWapvSbAUAET0t4JaM13It/view?usp=sharing diff --git a/src/009-fonts-icons/example/example.css b/src/009-fonts-icons/example/example.css index 969fe64..bc3bd67 100644 --- a/src/009-fonts-icons/example/example.css +++ b/src/009-fonts-icons/example/example.css @@ -1,5 +1,141 @@ /* * Practice : Fonts, Icons and Sizes - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ + +@font-face { + font-family: 'Raleway'; + src: url('../resources/fonts/raleway/raleway-regular-webfont.woff2') + format('woff2'), + url('../resources/fonts/raleway/raleway-regular-webfont.woff') + format('woff'), + url('../resources/fonts/raleway/raleway-regular-webfont.ttf') + format('truetype'), + url('../resources/fonts/raleway/raleway-regular-webfont.eot') + format('embedded-opentype'), + url('../resources/fonts/raleway/raleway-regular-webfont.svg') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Raleway'; + src: url('../resources/fonts/raleway/raleway-bold-webfont.woff2') + format('woff2'), + url('../resources/fonts/raleway/raleway-bold-webfont.woff') format('woff'), + url('../resources/fonts/raleway/raleway-bold-webfont.ttf') + format('truetype'), + url('../resources/fonts/raleway/raleway-bold-webfont.eot') + format('embedded-opentype'), + url('../resources/fonts/raleway/raleway-bold-webfont.svg') format('svg'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Raleway'; + src: url('../resources/fonts/raleway/raleway-thin-webfont.woff2') + format('woff2'), + url('../resources/fonts/raleway/raleway-thin-webfont.woff') format('woff'), + url('../resources/fonts/raleway/raleway-thin-webfont.ttf') + format('truetype'), + url('../resources/fonts/raleway/raleway-thin-webfont.eot') + format('embedded-opentype'), + url('../resources/fonts/raleway/raleway-thin-webfont.svg') format('svg'); + font-weight: 200; + font-style: normal; +} + +.page-content { + font-family: 'Raleway', 'Verdana', 'Arial', sans-serif; + font-weight: lighter; +} + +h1, +h2, +p, +li { + font-family: inherit; + font-weight: 100; +} + +p::first-letter, +li::first-letter { + font-weight: bold; +} + +.input-find { + background-color: #fff; + display: flex; + justify-content: flex-start; + flex-direction: row-reverse; + align-items: center; + margin-bottom: 2rem; +} + +.input-find input[type='text'] { + height: 100%; + width: 100%; + border: 0; + background-color: #fff; + padding: 1rem 1rem 1rem 0; + font-size: 1.25em; + border-top: 2px solid transparent; + border-right: 2px solid transparent; + border-bottom: 2px solid transparent; + transition: ease-in-out all 0.3s; +} + +.input-find input[type='text']:focus { + border-color: black; + outline: 0; +} + +input[type='text']:focus + span { + border-color: black; +} + +.input-find span { + padding: 0.9rem; + transition: ease-in-out all 0.3s; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.input-find span i { + display: flex; + align-items: center; + color: #000; +} + +.icons-right { + text-align: right; + margin-bottom: 1rem; +} + +.aside ul li:nth-child(odd) { + font-weight: normal; + font-size: 1em; +} + +.aside ul li:nth-child(odd):after { + content: " using 'em'"; +} + +.aside ul li:first-child { + font-weight: 100; +} + +.aside ul li:first-child:after { + content: none; +} + +.aside ul li:nth-child(even) { + font-size: 10.5pt; +} + +.aside ul li:nth-child(even):after { + content: " using 'pt'"; +} diff --git a/src/009-fonts-icons/example/index.html b/src/009-fonts-icons/example/index.html index d90d669..1f9304a 100644 --- a/src/009-fonts-icons/example/index.html +++ b/src/009-fonts-icons/example/index.html @@ -1,40 +1,104 @@ - - - 009 - Fonts, Icons and Sizes - - - - - - - - - - - - - - -
-
- -
- - 009 - Fonts, Icons and Sizes - -
-
-
-
-
- + + + + 009 - Fonts, Icons and Sizes + + + + + + + + + + + + + + + + + +
+
+ +
+ + 009 - Fonts, Icons and Sizes + +
+
+
+
+
+ +
+
+
+
+

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.

+
+
+ + + + find_in_page + + +
+
+ +
+

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. +

+ + +
+
+ +
+

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
    • +
+
+
-
-
+
+
+
+ + - \ No newline at end of file diff --git a/src/009-fonts-icons/resources/font-awesome/css/font-awesome.css b/src/009-fonts-icons/resources/font-awesome/css/font-awesome.css index ee906a8..c853bbb 100644 --- a/src/009-fonts-icons/resources/font-awesome/css/font-awesome.css +++ b/src/009-fonts-icons/resources/font-awesome/css/font-awesome.css @@ -10,6 +10,7 @@ src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; + } .fa { display: inline-block; diff --git a/src/010-background/README.md b/src/010-background/README.md index 671e9d5..42688cb 100644 --- a/src/010-background/README.md +++ b/src/010-background/README.md @@ -2,25 +2,26 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive on screens from 425px to 1440px. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as required. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive on screens from 425px to 1440px. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as required. + +### Before + You should read about Background Documentation here [CSS Tricks][1], about Background Image Properties here [CSS Tricks][2], about Shadows Documentation here [W3 School][3], about Using Box Shadow here [CSS Tricks][4] and about Using Text Shadow here [CSS Tricks][5]. > The estimation for this practice is: 5 hours. ### To Do -- [Watch this video with the design][7] +* [Watch this video with the design][7] -- Run the base project. +* Run the base project. ```sh $ npm install http-server -g @@ -30,15 +31,15 @@ $ http-server ./src -p 3000 Create the following view with these colors: #D24F2E and #f5a275: -1. Create a radial gradient to change the background using rgba. -2. Create a header using text shadows and below create a linear gradient using hexa. -3. Create 2 boxes with left top inside with shadow and right bottom outside black shadow. -4. Inside the boxes create an image with a title and aligned text, the text should have a light text shadow. +1. Create a radial gradient to change the background using rgba. _done_ +2. Create a header using text shadows and below create a linear gradient using hexa. _done_ +3. Create 2 boxes with left top inside with shadow and right bottom outside black shadow. _done_ +4. Inside the boxes create an image with a title and aligned text, the text should have a light text shadow. _done_ -[1]: https://css-tricks.com/almanac/properties/b/background/ -[2]: https://css-tricks.com/almanac/properties/b/background-image/ -[3]: https://www.w3schools.com/css/css3_shadows.asp -[4]: https://css-tricks.com/snippets/css/css-box-shadow/ +[1]: https://css-tricks.com/almanac/properties/b/background/ +[2]: https://css-tricks.com/almanac/properties/b/background-image/ +[3]: https://www.w3schools.com/css/css3_shadows.asp +[4]: https://css-tricks.com/snippets/css/css-box-shadow/ [5]: https://css-tricks.com/almanac/properties/t/text-shadow/ -[6]: http://www.cssmatic.com/box-shadow +[6]: http://www.cssmatic.com/box-shadow [7]: https://drive.google.com/a/talosdigital.com/file/d/1DM4RyKRvAFuRh4E_U1VXOGWTmqGAyWSb/view?usp=sharing diff --git a/src/010-background/example/example.css b/src/010-background/example/example.css index 8c1053d..09413fc 100644 --- a/src/010-background/example/example.css +++ b/src/010-background/example/example.css @@ -1,5 +1,130 @@ /* * Practice : Background, Color and Shadows - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ + +/*#D24F2E and #f5a275*/ + +.page-content { + background: radial-gradient( + circle, + rgba(245, 162, 117, 0.75) 0%, + rgba(210, 79, 46, 1) 50% + ); + height: calc(100vh - 64px); + color: #fefefe; +} + +.page-content * { + box-sizing: border-box; +} + +.container { + max-width: 80vw; + margin: 3rem auto; +} + +.container > div:first-child { + margin-bottom: 2rem; + text-align: center; +} + +.container > div:first-child > span { + width: 100%; + display: block; + height: 3px; + background: radial-gradient( + circle, + rgba(245, 162, 117, 1) 60%, + rgba(210, 79, 46, 1) 100% + ); +} + +h2 { + font-size: 2em; +} + +h2, +h3 { + line-height: 1.25; + margin: 0 0 0.75rem 0; +} + +h3 { + font-size: 1.25em; +} + +.ba-avatar-wrapper { + width: 100%; + display: flex; + justify-content: space-around; +} + +.ba-avatar { + display: flex; + justify-content: flex-start; + align-items: center; + padding: 1rem; + background-color: #f5a275; + border-radius: 15rem; + max-width: 30rem; + box-shadow: inset 1px 1px 2px 0px rgba(255, 255, 255, 0.75), + 4px 4px 2px 0px rgba(0, 0, 0, 0.2); + transition: all 0.25s ease-in-out; +} + +.ba-avatar:not(:first-of-type) { + margin-left: 2rem; +} + +.ba-avatar:hover { + cursor: pointer; + opacity: 0.75; +} + +.ba-avatar span { + width: 10%; + min-width: 3rem; +} + +img { + max-width: 100%; + border-radius: 50%; + border: 2px solid white; +} + +.ba-avatar div { + margin-left: 1rem; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); + width: 85%; +} + +.ba-avatar h2 { + font-size: 1em; + margin: 0; +} + +.ba-avatar p { + margin: 0; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (max-width: 768px) { + .ba-avatar-wrapper { + flex-direction: column; + align-items: center; + } + + .ba-avatar { + width: 100%; + } + + .ba-avatar:not(:first-of-type) { + margin: 0; + margin-top: 2rem; + } +} diff --git a/src/010-background/example/index.html b/src/010-background/example/index.html index 7689647..867e47d 100644 --- a/src/010-background/example/index.html +++ b/src/010-background/example/index.html @@ -1,5 +1,6 @@ + 010 - Background, Color and Shadows @@ -17,53 +18,59 @@ + - -
-
- -
- - 010 - Background, Color and Shadows - -
-
-
-
-
- -
-
-

Lorem ipsum dolor sit amet

-

Fusce pharetra ac nibh vitae viverra

- -
-
+ +
+
+ +
+ + 010 - Background, Color and Shadows + +
+
+
+
+
+ +
- -
-

Lorem ipsum dolor sit amet

-

Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus

-
+

Lorem ipsum dolor sit amet

+

Fusce pharetra ac nibh vitae viverra

+
-
- -
-

Lorem ipsum dolor sit amet

-

Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus

+
+
+ + + +
+

Lorem ipsum dolor sit amet

+

Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus

+
+
+
+ + + +
+

Lorem ipsum dolor sit amet

+

Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus

+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
- + + \ No newline at end of file diff --git a/src/011-styling/README.md b/src/011-styling/README.md index 8c619d1..0468402 100644 --- a/src/011-styling/README.md +++ b/src/011-styling/README.md @@ -2,30 +2,31 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive on screens from 768px to 1440px. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as required. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive on screens from 768px to 1440px. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as required. + +### Before + You should read about Styling Web Links Properties here: -1. [Styling CSS buttons][1] -2. [Styling web links][2] -3. [CSS list][3] -4. [Various CSS Input Text Styles][4] +1. [Styling CSS buttons][1] +2. [Styling web links][2] +3. [CSS list][3] +4. [Various CSS Input Text Styles][4] > The estimation for this practice is: 4 hours. ### To Do -- [Watch this video with the design][5] +* [Watch this video with the design][5] -- Run the base project. +* Run the base project. ```sh $ npm install http-server -g @@ -33,13 +34,12 @@ $ cd u-css/ $ http-server ./src -p 3000 ``` -- Follow the next steps: +* Follow the next steps: -1. Create a box with a background image and a centered title. -2. Create a form with 4 fields, a button and a description text. The button needs to have a hover. -3. Create a footer with 3 boxes of items list. +1. Create a box with a background image and a centered title. _done_ +2. Create a form with 4 fields, a button and a description text. The button needs to have a hover. _done_ +3. Create a footer with 3 boxes of items list. _done_ - [1]: https://www.w3schools.com/css/css3_buttons.asp [2]: https://www.smashingmagazine.com/2010/02/the-definitive-guide-to-styling-web-links/ [3]: https://www.w3schools.com/css/css_list.asp diff --git a/src/011-styling/example/example.css b/src/011-styling/example/example.css index 4bdd9e2..aadf72e 100644 --- a/src/011-styling/example/example.css +++ b/src/011-styling/example/example.css @@ -1,5 +1,131 @@ +@charset "UTF-8"; /* * Practice : Styling Buttons, links and lists - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ +.page-content { + padding: 0; } + .page-content * { + box-sizing: border-box; } + +h1, +h2, +.page-content { + font-family: 'Avenir', sans-serif; + margin: 0; + font-size: 2em; } + +.st-header { + width: 100%; + height: 20rem; + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("../resources/background.jpg"); + background-attachment: fixed; + background-position: 50% top; + margin-bottom: 1rem; + display: flex; + justify-content: center; + align-items: flex-end; } + .st-header h1 { + color: #fbeeeb; + text-transform: uppercase; + font-weight: bolder; + margin-bottom: 2rem; } + +.st-container, .footer-inner { + max-width: 80vw; + margin: 0 auto; + padding: 2rem; } + .st-container form, .footer-inner form { + max-width: 500px; + margin: 0 auto; } + .st-container form input, .footer-inner form input, + .st-container form textarea, + .footer-inner form textarea { + display: block; + width: 100%; + margin-bottom: 1rem; + background-color: #eaeaea; + padding: 0.5rem 1rem; + color: black; + border: 0; + font-size: 11pt; + border: 2px solid transparent; + transition: 0.2s all ease-in-out; } + .st-container form input:last-child, .footer-inner form input:last-child, + .st-container form textarea:last-child, + .footer-inner form textarea:last-child { + margin-bottom: 0; } + .st-container form input:active, .footer-inner form input:active, .st-container form input:focus, .footer-inner form input:focus, + .st-container form textarea:active, + .footer-inner form textarea:active, + .st-container form textarea:focus, + .footer-inner form textarea:focus { + border-color: #dadada; + outline: 0; } + .st-container form button, .footer-inner form button { + background-color: #d24f2e; + color: #fbeeeb; + padding: 1rem 3rem; + text-transform: uppercase; + font-weight: bolder; + border: 2px solid #a93f24; + transition: 0.2s all ease-in-out; + border-radius: 3px; } + .st-container form button:hover, .footer-inner form button:hover { + cursor: pointer; + background-color: #fefefe; + color: #a93f24; } + .st-container form button:active, .footer-inner form button:active, .st-container form button:focus, .footer-inner form button:focus { + outline: 0; } + .st-container form p, .footer-inner form p { + margin-top: 1rem; + font-weight: bolder; + opacity: 0.5; + text-transform: uppercase; } + +.footer { + background-color: #d24f2e; + color: #fbeeeb; } + .footer-inner { + display: flex; + justify-content: space-around; } + .footer-inner > div { + width: 33.3%; + margin: 0 1rem; } + .footer-inner > div:first-of-type { + margin-left: 0; } + .footer-inner > div:last-of-type { + margin-right: 0; } + .footer-inner > div p { + font-weight: bolder; + text-transform: uppercase; + line-height: 1.125; + padding-bottom: 1rem; + border-bottom: 1px solid #fbeeeb; + letter-spacing: 1pt; } + .footer-inner ul { + list-style: none; + margin: 0; + padding: 0; } + .footer-inner li { + margin-bottom: 0.5rem; } + .footer-inner a { + color: #fbeeeb; + display: block; } + .footer-inner a:hover { + color: rgba(251, 238, 235, 0.75); } + +@media screen and (max-width: 768px) { + .footer-inner { + flex-direction: column; + align-items: center; + justify-content: center; } + .footer-inner > div { + margin: 0; + margin-bottom: 2rem; + width: 100%; } + .footer-inner > div:last-of-type { + margin: 0; } } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/011-styling/example/example.scss b/src/011-styling/example/example.scss new file mode 100644 index 0000000..c6bedad --- /dev/null +++ b/src/011-styling/example/example.scss @@ -0,0 +1,182 @@ +/* + * Practice : Styling Buttons, links and lists + * Version: 1.0.0 + * By: Elías Rodelo + */ + +$talos: #d24f2e; +$talos-light: lighten($talos, 45%); + +.page-content { + padding: 0; + + * { + box-sizing: border-box; + } +} + +h1, +h2, +.page-content { + font-family: 'Avenir', sans-serif; + margin: 0; + font-size: 2em; +} + +.st-header { + width: 100%; + height: 20rem; + background-image: linear-gradient( + to left, + rgba(0, 0, 0, 0.25), + rgba(0, 0, 0, 0.25) + ), + url('../resources/background.jpg'); + background-attachment: fixed; + background-position: 50% top; + margin-bottom: 1rem; + display: flex; + justify-content: center; + align-items: flex-end; + + h1 { + color: $talos-light; + text-transform: uppercase; + font-weight: bolder; + margin-bottom: 2rem; + } +} + +.st-container { + max-width: 80vw; + margin: 0 auto; + padding: 2rem; + + form { + max-width: 500px; + margin: 0 auto; + + input, + textarea { + display: block; + width: 100%; + margin-bottom: 1rem; + background-color: #eaeaea; + padding: 0.5rem 1rem; + color: black; + border: 0; + font-size: 11pt; + border: 2px solid transparent; + transition: 0.2s all ease-in-out; + + &:last-child { + margin-bottom: 0; + } + + &:active, + &:focus { + border-color: #dadada; + outline: 0; + } + } + + button { + background-color: $talos; + color: $talos-light; + padding: 1rem 3rem; + text-transform: uppercase; + font-weight: bolder; + border: 2px solid darken($talos, 10%); + transition: 0.2s all ease-in-out; + border-radius: 3px; + + &:hover { + cursor: pointer; + background-color: #fefefe; + color: darken($talos, 10%); + } + + &:active, + &:focus { + outline: 0; + } + } + + p { + margin-top: 1rem; + font-weight: bolder; + opacity: 0.5; + text-transform: uppercase; + } + } +} + +.footer { + background-color: $talos; + color: $talos-light; + + &-inner { + @extend .st-container; + display: flex; + justify-content: space-around; + + > div { + width: 33.3%; + margin: 0 1rem; + + &:first-of-type { + margin-left: 0; + } + + &:last-of-type { + margin-right: 0; + } + + p { + font-weight: bolder; + text-transform: uppercase; + line-height: 1.125; + padding-bottom: 1rem; + border-bottom: 1px solid $talos-light; + letter-spacing: 1pt; + } + } + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + li { + margin-bottom: 0.5rem; + } + + a { + color: $talos-light; + display: block; + + &:hover { + color: rgba($talos-light, 0.75); + } + } + } +} + +@media screen and (max-width: 768px) { + .footer-inner { + flex-direction: column; + align-items: center; + justify-content: center; + + > div { + margin: 0; + margin-bottom: 2rem; + width: 100%; + + &:last-of-type { + margin: 0; + } + } + } +} diff --git a/src/011-styling/example/index.html b/src/011-styling/example/index.html index eb3ed5f..5dab9ca 100644 --- a/src/011-styling/example/index.html +++ b/src/011-styling/example/index.html @@ -1,5 +1,6 @@ + 011 - Styling Buttons, links and lists @@ -16,76 +17,108 @@ - - -
-
- -
- - 011 - Styling Buttons, links and lists - -
-
-
-
-
- -
-
-

contact us

-
-
-
- - - - - -

CONTACT US AND WE WILL RESPOND YOU AS SOON AS POSSIBLE.

-
-
+ + +
+
+ +
+ + 011 - Styling Buttons, links and lists + +
- -
+
+
+ +
+
+

contact us

- -
-

Account

- + +
+
+ + + + + +

CONTACT US AND WE WILL RESPOND YOU AS SOON AS POSSIBLE.

+
- -
-
-
+ + +
+
+
- + + \ No newline at end of file diff --git a/src/012-checkbox/README.md b/src/012-checkbox/README.md index 62b0d20..2571214 100644 --- a/src/012-checkbox/README.md +++ b/src/012-checkbox/README.md @@ -2,25 +2,26 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive on screens from 375px to 1440px. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as required. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive on screens from 375px to 1440px. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as required. + +### Before + You should read about Checkbox and Radio Buttons here [W3 Schools][1] and [Web Design][2]. > The estimation for this practice is: 5 hours. ### To Do -- [Watch this video with the design][3] +* [Watch this video with the design][3] -- Run the base project. +* Run the base project. ```sh $ npm install http-server -g @@ -28,13 +29,13 @@ $ cd u-css/ $ http-server ./src -p 3000 ``` -- Follow the next steps: +* Follow the next steps: -1. Create a tab with 3 sections using radio inputs -2. In the first tab create a list of 4 checkboxes, the first checked, the second unchecked, the third disabled and the fourth disabled and checked. -3. In the second tab create a list of 4 radio buttons, the first checked, the second unchecked, the third disabled and the fourth disabled and checked. -4. In the third tab create a list of cards with a image and text left and a checkbox right. +1. Create a tab with 3 sections using radio inputs _done_ +2. In the first tab create a list of 4 checkboxes, the first checked, the second unchecked, the third disabled and the fourth disabled and checked. _done_ +3. In the second tab create a list of 4 radio buttons, the first checked, the second unchecked, the third disabled and the fourth disabled and checked. _done_ +4. In the third tab create a list of cards with a image and text left and a checkbox right. _done_ [1]: https://www.w3schools.com/html/html_forms.asp [2]: https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953 -[3]:https://drive.google.com/a/talosdigital.com/file/d/19lSuxFH-fZrZ62vblvYW85eOONYVm7fZ/view?usp=sharing +[3]: https://drive.google.com/a/talosdigital.com/file/d/19lSuxFH-fZrZ62vblvYW85eOONYVm7fZ/view?usp=sharing diff --git a/src/012-checkbox/example/example.css b/src/012-checkbox/example/example.css index 8f18b26..a335ded 100644 --- a/src/012-checkbox/example/example.css +++ b/src/012-checkbox/example/example.css @@ -1,36 +1,35 @@ -/* Practice: Checkboxes and Radio Buttons */ +@charset "UTF-8"; +/* +* Practice: Checkboxes and Radio Buttons +* Version: 1.0.0 +* by: Elías Rodelo +*/ body, html { color: #787878; font-size: 16px; line-height: 1.5; margin: 0; - padding: 0; -} + padding: 0; } .trash { - color: black; -} + color: black; } .container { margin: 0 30px; - font-family: sans-serif; -} + font-family: sans-serif; } /*tabs*/ - .tabs { display: flex; flex-wrap: wrap; max-width: 700px; background: #efefef; - box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3); -} + box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3); } .input { position: absolute; - opacity: 0; -} + opacity: 0; } .label { width: 100%; @@ -40,46 +39,38 @@ html { font-weight: bold; font-size: 18px; color: #7f7f7f; - transition: background 0.1s, color 0.1s; -} + transition: background 0.1s, color 0.1s; } .label:hover { - background: #d8d8d8; -} + background: #d8d8d8; } .label:active { - background: #ccc; -} + background: #ccc; } .input:focus + .label { box-shadow: inset 0px 0px 0px 3px #2aa1c0; - z-index: 1; -} + z-index: 1; } +input[type='radio'].input:checked + .label { + background-color: #fff; + box-shadow: inset 0px 0px 0px 3px #2aa1c0; } + input[type='radio'].input:checked + .label + .panel { + display: block; } @media (min-width: 600px) { .label { - width: auto; - } -} - + width: auto; } } .panel { display: none; padding: 20px 30px 30px; background: #fff; box-sizing: border-box; - width: 100%; -} + width: 100%; } @media (min-width: 600px) { .panel { - order: 99; - } -} - - + order: 99; } } /* Checkboxes and Radio Buttons */ - .control-group { display: inline-block; width: 200px; @@ -89,8 +80,7 @@ html { text-align: left; vertical-align: top; background: #fff; - box-shadow: 0 1px 2px rgba(0, 0, 0, .1); -} + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .control { font-size: 18px; @@ -98,14 +88,12 @@ html { display: block; margin-bottom: 15px; padding-left: 30px; - cursor: pointer; -} + cursor: pointer; } .control input { position: absolute; z-index: -1; - opacity: 0; -} + opacity: 0; } .control__indicator { position: absolute; @@ -113,106 +101,87 @@ html { left: 0; width: 20px; height: 20px; - background: #e6e6e6; -} + background: #e6e6e6; } .control--radio .control__indicator { - border-radius: 50%; -} + border-radius: 50%; } .control input:disabled ~ .control__indicator { pointer-events: none; - opacity: .6; - background: #e6e6e6; -} + opacity: 0.6; + background: #e6e6e6; } .control__indicator:after { position: absolute; display: none; - content: ''; -} + content: ''; } +.control--checkbox input:checked + .control__indicator:after, .control--radio input:checked + .control__indicator:after { + display: block; } .control--checkbox .control__indicator:after { - top: 4px; - left: 8px; - width: 3px; - height: 8px; + top: -4px; + left: 10px; + width: 4px; + height: 16px; transform: rotate(45deg); - border: solid #fff; - border-width: 0 2px 2px 0; -} - + border: solid #2aa1c0; + border-width: 0 4px 4px 0; } .control--radio .control__indicator:after { - top: 7px; - left: 7px; - width: 6px; - height: 6px; + top: 5px; + left: 5px; + width: 10px; + height: 10px; border-radius: 50%; - background: #fff; -} - - + background: #2aa1c0; } /*Cards*/ - .list-checks { - margin: 20px; -} + margin: 20px; } .list-checks ul { list-style-type: none; - width: 500px; -} + width: 500px; } h3 { - font: bold 20px/1.5 Helvetica, Verdana, sans-serif; -} + font: bold 20px/1.5 Helvetica, Verdana, sans-serif; } .list-checks li img { float: left; margin: 0 15px 0 0; width: 100px; - height: auto; -} + height: auto; } .list-checks li p { - font: 200 12px/1.5 Georgia, Times New Roman, serif; -} + font: 200 12px/1.5 Georgia, Times New Roman, serif; } .list-checks li { padding: 10px; - overflow: hidden; -} + overflow: hidden; } .list-checks li:hover { background: #eee; - cursor: pointer; -} + cursor: pointer; } .list-checks div { - float: left; -} + float: left; } .list-checks label { float: right; - padding-right: 10px; -} + padding-right: 10px; } @media (max-width: 600px) { .container { - margin: 0; - } + margin: 0; } p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - } + -webkit-box-orient: vertical; } .control-group { - padding: 30px 0; - } -} + padding: 30px 0; } } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/012-checkbox/example/example.scss b/src/012-checkbox/example/example.scss new file mode 100644 index 0000000..37fcf91 --- /dev/null +++ b/src/012-checkbox/example/example.scss @@ -0,0 +1,242 @@ +/* +* Practice: Checkboxes and Radio Buttons +* Version: 1.0.0 +* by: Elías Rodelo +*/ + +body, +html { + color: #787878; + font-size: 16px; + line-height: 1.5; + margin: 0; + padding: 0; +} + +.trash { + color: black; +} + +.container { + margin: 0 30px; + font-family: sans-serif; +} + +/*tabs*/ + +.tabs { + display: flex; + flex-wrap: wrap; + max-width: 700px; + background: #efefef; + box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3); +} + +.input { + position: absolute; + opacity: 0; +} + +.label { + width: 100%; + padding: 20px 30px; + background: #e5e5e5; + cursor: pointer; + font-weight: bold; + font-size: 18px; + color: #7f7f7f; + transition: background 0.1s, color 0.1s; +} + +.label:hover { + background: #d8d8d8; +} + +.label:active { + background: #ccc; +} + +.input:focus + .label { + box-shadow: inset 0px 0px 0px 3px #2aa1c0; + z-index: 1; +} + +input[type='radio'].input:checked { + + .label { + background-color: #fff; + box-shadow: inset 0px 0px 0px 3px #2aa1c0; + + + .panel { + display: block; + } + } +} + +@media (min-width: 600px) { + .label { + width: auto; + } +} + +.panel { + display: none; + padding: 20px 30px 30px; + background: #fff; + box-sizing: border-box; + width: 100%; +} + +@media (min-width: 600px) { + .panel { + order: 99; + } +} + +/* Checkboxes and Radio Buttons */ + +.control-group { + display: inline-block; + width: 200px; + height: 210px; + margin: 10px; + padding: 30px; + text-align: left; + vertical-align: top; + background: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.control { + font-size: 18px; + position: relative; + display: block; + margin-bottom: 15px; + padding-left: 30px; + cursor: pointer; +} + +.control input { + position: absolute; + z-index: -1; + opacity: 0; +} + +.control__indicator { + position: absolute; + top: 2px; + left: 0; + width: 20px; + height: 20px; + background: #e6e6e6; +} + +.control--radio .control__indicator { + border-radius: 50%; +} + +.control input:disabled ~ .control__indicator { + pointer-events: none; + opacity: 0.6; + background: #e6e6e6; +} + +.control__indicator:after { + position: absolute; + display: none; + content: ''; +} + +.control { + &--checkbox, + &--radio { + input:checked { + + .control__indicator { + &:after { + display: block; + } + } + } + } +} + +.control--checkbox .control__indicator:after { + top: -4px; + left: 10px; + width: 4px; + height: 16px; + transform: rotate(45deg); + border: solid #2aa1c0; + border-width: 0 4px 4px 0; + // transition: ease-in-out all 0.2s; change to animation +} + +.control--radio .control__indicator:after { + top: 5px; + left: 5px; + width: 10px; + height: 10px; + border-radius: 50%; + background: #2aa1c0; +} + +/*Cards*/ + +.list-checks { + margin: 20px; +} + +.list-checks ul { + list-style-type: none; + width: 500px; +} + +h3 { + font: bold 20px/1.5 Helvetica, Verdana, sans-serif; +} + +.list-checks li img { + float: left; + margin: 0 15px 0 0; + width: 100px; + height: auto; +} + +.list-checks li p { + font: 200 12px/1.5 Georgia, Times New Roman, serif; +} + +.list-checks li { + padding: 10px; + overflow: hidden; +} + +.list-checks li:hover { + background: #eee; + cursor: pointer; +} + +.list-checks div { + float: left; +} + +.list-checks label { + float: right; + padding-right: 10px; +} + +@media (max-width: 600px) { + .container { + margin: 0; + } + + p { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + + .control-group { + padding: 30px 0; + } +} diff --git a/src/012-checkbox/example/index.html b/src/012-checkbox/example/index.html index 19b6642..4dc89f5 100644 --- a/src/012-checkbox/example/index.html +++ b/src/012-checkbox/example/index.html @@ -1,5 +1,6 @@ + 012 - Checkboxes and Radio Buttons @@ -17,160 +18,162 @@ + - -
-
- -
- - 012 - Checkboxes and Radio Buttons - -
-
-
-
-
- -
- -
- - -
-

Lorem ipsum dolor sit amet

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet - vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu - egestas nisi ullamcorper vitae. Suspendisse potenti. Suspendisse blandit placerat ex, vitae suscipit purus - dapibus id. Nulla facilisi. Mauris porttitor diam eu orci sodales tempor. Donec rutrum sit amet quam vitae - congue. Donec sit amet convallis risus. Quisque mi augue, mattis lacinia mollis non, iaculis sit amet - lectus.

- - -
-

Checkboxes

- - - - + +
+
+ +
+ + 012 - Checkboxes and Radio Buttons + +
+
+
+
+
+ +
+ +
+ + +
+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet vestibulum + ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu egestas nisi + ullamcorper vitae. Suspendisse potenti. Suspendisse blandit placerat ex, vitae suscipit purus dapibus id. + Nulla facilisi. Mauris porttitor diam eu orci sodales tempor. Donec rutrum sit amet quam vitae congue. Donec + sit amet convallis risus. Quisque mi augue, mattis lacinia mollis non, iaculis sit amet lectus. +

+ + +
+

Checkboxes

+ + + + +
-
- - -
-

Lorem ipsum dolor sit amet

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet - vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu - egestas nisi ullamcorper vitae. Suspendisse potenti. Suspendisse blandit placerat ex, vitae suscipit purus - dapibus id. Nulla facilisi. Mauris porttitor diam eu orci sodales tempor. Donec rutrum sit amet quam vitae - congue. Donec sit amet convallis risus. Quisque mi augue, mattis lacinia mollis non, iaculis sit amet - lectus.

- -
-

Radio Buttons

- - - - + + +
+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet vestibulum + ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu egestas nisi + ullamcorper vitae. Suspendisse potenti. Suspendisse blandit placerat ex, vitae suscipit purus dapibus id. + Nulla facilisi. Mauris porttitor diam eu orci sodales tempor. Donec rutrum sit amet quam vitae congue. Donec + sit amet convallis risus. Quisque mi augue, mattis lacinia mollis non, iaculis sit amet lectus. +

+ +
+

Radio Buttons

+ + + + +
-
- - -
-

Lorem ipsum dolor sit amet

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet - vestibulum ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu - egestas nisi ullamcorper vitae. Suspendisse potenti. Suspendisse blandit placerat ex, vitae suscipit purus - dapibus id. Nulla facilisi. Mauris porttitor diam eu orci sodales tempor. Donec rutrum sit amet quam vitae - congue. Donec sit amet convallis risus. Quisque mi augue, mattis lacinia mollis non, iaculis sit amet - lectus.

-
-
    -
  • - -
    -

    Headline

    -

    Lorem ipsum dolor sit amet...

    -
    - -
    • - -
  • - -
    -

    Headline

    -

    Lorem ipsum dolor sit amet...

    -
    - -
    • - -
  • - -
    -

    Headline

    -

    Lorem ipsum dolor sit amet...

    -
    - -
    • - -
  • - -
    -

    Headline

    -

    Lorem ipsum dolor sit amet...

    -
    - -
    • -
+ + +
+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in arcu magna. Pellentesque sit amet vestibulum + ex, eget placerat metus. Sed vel sagittis massa, eu interdum mauris. Ut congue ipsum ex, eu egestas nisi + ullamcorper vitae. Suspendisse potenti. Suspendisse blandit placerat ex, vitae suscipit purus dapibus id. + Nulla facilisi. Mauris porttitor diam eu orci sodales tempor. Donec rutrum sit amet quam vitae congue. Donec + sit amet convallis risus. Quisque mi augue, mattis lacinia mollis non, iaculis sit amet lectus. +

+
+
    +
  • + +
    +

    Headline

    +

    Lorem ipsum dolor sit amet...

    +
    + +
    • + +
  • + +
    +

    Headline

    +

    Lorem ipsum dolor sit amet...

    +
    + +
    • + +
  • + +
    +

    Headline

    +

    Lorem ipsum dolor sit amet...

    +
    + +
    • + +
  • + +
    +

    Headline

    +

    Lorem ipsum dolor sit amet...

    +
    + +
    • +
+
-
-
-
-
-
+
+
+
+
- + + \ No newline at end of file diff --git a/src/013-animations/README.md b/src/013-animations/README.md index d714600..ad1e8a6 100644 --- a/src/013-animations/README.md +++ b/src/013-animations/README.md @@ -2,25 +2,26 @@ ## Evaluation Criteria -1. Make it Readable. -2. Good Practices. -3. Use HTML5. -4. Structured Naming Convention. -5. Responsive on screens from 425px to 1440px. -6. Use correct Cascade code. -7. Use correct Inheritance. -8. Goal: The practice should look as required. - -### Before +1. Make it Readable. +2. Good Practices. +3. Use HTML5. +4. Structured Naming Convention. +5. Responsive on screens from 425px to 1440px. +6. Use correct Cascade code. +7. Use correct Inheritance. +8. Goal: The practice should look as required. + +### Before + You should read about Animation Properties here [CSS Tricks][1], read about Transform Properties here [CSS Tricks][2] and read about Transitions here [CSS Tricks][3]. > The estimation for this practice is: 8 hours. ### To Do -- [Watch this video with the design][4] +* [Watch this video with the design][4] -- Run the base project. +* Run the base project. ```sh $ npm install http-server -g @@ -28,12 +29,12 @@ $ cd u-css/ $ http-server ./src -p 3000 ``` -- Follow the next steps: +* Follow the next steps: -1. Create a title animated to change opacity from 1 to 0, duration 60s and be infinite using @keyframes. -2. Create a list of cards, these cards are going to be initial rotateY 30deg and hover will rotateY 0deg. -3. Create an article with 9 notes, the even notes have to be rotated 4deg and the odd -6deg. The hover should scale the note 1.25. -4. Create a sidebar with buttons that scale between 0.9 to 1.05 for 2s, use timing function ease-in-out, fill mode forwards and @keyframes. +1. Create a title animated to change opacity from 1 to 0, duration 60s and be infinite using @keyframes. _done_ +2. Create a list of cards, these cards are going to be initial rotateY 30deg and hover will rotateY 0deg. _done_ +3. Create an article with 9 notes, the even notes have to be rotated 4deg and the odd -6deg. The hover should scale the note 1.25. _done_ +4. Create a sidebar with buttons that scale between 0.9 to 1.05 for 2s, use timing function ease-in-out, fill mode forwards and @keyframes. _done_ [1]: https://css-tricks.com/almanac/properties/a/animation/ [2]: https://css-tricks.com/almanac/properties/t/transform/ diff --git a/src/013-animations/example/example.css b/src/013-animations/example/example.css index 6b38b9f..da9f016 100644 --- a/src/013-animations/example/example.css +++ b/src/013-animations/example/example.css @@ -1,174 +1,153 @@ /* Practice: Transform, Transition and Animations */ -body, -html { +/* Tags */ +body { color: #787878; - font-size: 16px; + font-size: 11pt; line-height: 1.5; margin: 0; padding: 0; -} + font-family: 'Avenir', sans-serif; } + body * { + box-sizing: border-box; } +ul { + list-style: none; + margin: 0; + padding: 0; } + +/* <----------------- CLASSES----------------> */ .trash { - color: black; -} + color: black; } .container { margin: 0 30px; - font-family: sans-serif; -} + font-family: 'Avenir', sans-serif; } /** wrap **/ .wrap { margin: 0 auto; - max-width: 1200px; -} + max-width: 1200px; } /* header */ .title { color: #f35626; - background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a); + background-image: linear-gradient(92deg, #f35626, #feab3a); + background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3em; text-align: center; - margin: 0 0 30px 0; -} - - -/** article **/ + margin: 0 0 30px 0; } + +.pulse { + animation-name: pulse; + animation-duration: 6s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-play-state: running; + animation-delay: 0s; + animation-direction: alternate; } + +/* <-----------Article-----------> */ .article { - clear: both; - float: left; - background-color: #C8C8C8; - box-sizing: border-box; - padding: 15px; - width: 100%; -} - -.article img { - float: left; - margin: 0 10px 0 0; - width: 300px; -} - -.article ul { - list-style: none; - margin: 20px 50px 0 50px; - height: 550px; -} - -.article li { - display: inline; - float: left; - -webkit-perspective: 500; -} - -.article li img { - border: 10px solid #fcfafa; - -moz-box-shadow: 0 3px 10px #888; - -webkit-box-shadow: 0 3px 10px #888; -} - -.article li:hover img { -} + background-color: #c8c8c8; + padding: 5rem 4rem; } + .article ul { + perspective: 1500px; } + .article li { + margin-right: 3rem; + margin-bottom: 1rem; + position: relative; + display: inline-block; + width: 375px; + transition: 0.5s all; + transform: rotate3d(0, 1, 0, 30deg); } + .article li:hover { + transform: rotate(0deg); } + .article li:hover .animal-info { + bottom: 0; + left: 10%; + width: 80%; } + .article li img { + margin: 0 10px 0 0; + max-width: 100%; + border: 10px solid #fcfafa; + box-shadow: 0 3px 10px #888; } .animal-info { border: 10px solid #fcfafa; - padding: 20px; - width: 200px; - height: 120px; + padding: 1rem; + width: 90%; + height: auto; background-color: #deddcd; - margin: -195px 0 0 55px; position: absolute; - bottom: 0; - -moz-box-shadow: 0 20px 40px #888; - -webkit-box-shadow: 0 20px 40px #888; -} - -.article li:hover .animal-info { - -webkit-box-shadow: 0 5px 10px #888; -} - -.animal-info h3 { - color: #7a3f3a; - font-variant: small-caps; - font-family: Georgia, serif, Times; - text-align: center; - padding-bottom: 15px; -} - -.animal-info p { - padding-bottom: 15px; -} - -.animal-info a { - background-color: #7a3f3a; - padding: 5px 10px; - color: #eee; - text-decoration: none; - display: block; - width: 80px; - text-align: center; - margin: 0 auto; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; -} - -.animal-info a:hover, .animal-info a:focus { - background-color: #6a191f; - color: #fff; -} + bottom: -5%; + left: 20%; + box-shadow: 0 20px 40px #888; + transition-duration: 0.5s; } + .animal-info h3 { + color: #7a3f3a; + font-variant: small-caps; + font-family: Georgia, serif; + text-align: center; + margin: 0; + margin-bottom: 1rem; + font-size: 2em; } + .animal-info p { + line-height: 1.25; } + .animal-info a { + background-color: #7a3f3a; + padding: 1rem 3rem; + color: #eee; + text-decoration: none; + display: block; + text-align: center; + margin: 0 auto; + border-radius: 5px; } + .animal-info a:focus, .animal-info a:hover { + background-color: #6a191f; + color: #fff; } @media (max-width: 1200px) { - .wrap .article li:last-child { - display: none; - } -} - + .article li:last-child { + display: none; } } @media (max-width: 768px) { .wrap .article li:not(:first-child) { - display: none; - } -} - + display: none; } } @media (max-width: 426px) { .article ul { - list-style: none; - margin: 0; - height: 400px; - } + height: 400px; } .article img { float: left; margin: 0 10px 0 0; - width: 275px; - } + width: 275px; } .article li:hover .animal-info { - margin-left: 18px; - } -} - -/* notes */ + margin-left: 18px; } } +/* <----------- Notes -----------> */ .notes { width: calc(100% - 350px); height: 100%; overflow: auto; -} + padding: 2rem 2rem; } + .notes h2, + .notes p { + font-size: 1em; + margin: 0; + margin-bottom: 0.75rem; + line-height: 1.125; } + .notes h2 { + font-weight: bolder; + font-size: 1.25em; } -.notes h2, .notes p { - font-size: 20px; - font-weight: normal; -} +.notes .notes ul { + overflow: hidden; } -.notes ul, li { - list-style: none; -} - -.notes ul { - overflow: hidden; - padding: 3em; -} +.notes ul li { + margin-right: 1.5rem; + margin-bottom: 1.5rem; + display: inline-block; } .notes ul li div { text-decoration: none; @@ -177,43 +156,29 @@ html { display: block; height: 150px; width: 150px; - padding: 15px; - -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1); - -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7); - box-shadow: 5px 5px 7px rgba(33, 33, 33, .7); -} - -.notes ul li { - margin: 1em; - float: left; -} - -.notes ul li h2 { - font-size: 140%; - font-weight: bold; - padding-bottom: 10px; -} - -.notes ul li p { - font-size: 25px; -} + padding: 1rem; + box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7); + transform: rotate(-6deg); + transition: 0.3s all; } + .notes ul li div:hover { + transform: scale(1.25); } .notes ul li:nth-child(even) div { position: relative; - top: 5px; background: #cfc; -} + transform: rotate(4deg); } + .notes ul li:nth-child(even) div:hover { + transform: scale(1.25); } -/** sidebar **/ +/* <----------- Sidebar -----------> */ .sidebar { float: right; width: 350px; height: 730px; padding: 15px; - background-color: #E8E8E8; + background-color: #e8e8e8; box-sizing: border-box; - text-align: center; -} + text-align: center; } .sidebar button { box-shadow: 0px 10px 14px -7px #275873; @@ -226,20 +191,33 @@ html { font-weight: bold; padding: 13px 32px; text-shadow: 2px 1px 0px #275873; - margin: 10px; -} + margin: 10px; } + .sidebar button:hover { + animation-name: stretch; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-direction: alternate; } @media (max-width: 1024px) { .sidebar { - height: 500px; - } -} - + height: 500px; } } @media (max-width: 426px) { .sidebar { width: 100%; - height: 100%; - } -} - - + height: 100%; } } +/* Animations */ +@keyframes pulse { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } +@keyframes stretch { + 0% { + transform: scale(1); } + 20% { + transform: scale(1.05); } + 100% { + transform: scale(0.9); } } + +/*# sourceMappingURL=example.css.map */ diff --git a/src/013-animations/example/example.scss b/src/013-animations/example/example.scss new file mode 100644 index 0000000..5d6aa9d --- /dev/null +++ b/src/013-animations/example/example.scss @@ -0,0 +1,304 @@ +/* Practice: Transform, Transition and Animations */ + +/* Tags */ +body { + color: #787878; + font-size: 11pt; + line-height: 1.5; + margin: 0; + padding: 0; + font-family: 'Avenir', sans-serif; + + * { + box-sizing: border-box; + } +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +/* <----------------- CLASSES----------------> */ + +.trash { + color: black; +} + +.container { + margin: 0 30px; + font-family: 'Avenir', sans-serif; +} + +/** wrap **/ +.wrap { + margin: 0 auto; + max-width: 1200px; +} + +/* header */ +.title { + color: #f35626; + background-image: linear-gradient(92deg, #f35626, #feab3a); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 3em; + text-align: center; + margin: 0 0 30px 0; +} + +.pulse { + animation-name: pulse; + animation-duration: 6s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-play-state: running; + animation-delay: 0s; + animation-direction: alternate; +} + +/* <-----------Article-----------> */ + +.article { + background-color: #c8c8c8; + padding: 5rem 4rem; + + ul { + perspective: 1500px; + } + + li { + margin-right: 3rem; + margin-bottom: 1rem; + position: relative; + display: inline-block; + width: 375px; + transition: 0.5s all; + transform: rotate3d(0, 1, 0, 30deg); + + &:hover { + transform: rotate(0deg); + + .animal-info { + bottom: 0; + left: 10%; + width: 80%; + } + } + + img { + margin: 0 10px 0 0; + max-width: 100%; + border: 10px solid #fcfafa; + box-shadow: 0 3px 10px #888; + } + } +} + +.animal-info { + border: 10px solid #fcfafa; + padding: 1rem; + width: 90%; + height: auto; + background-color: #deddcd; + position: absolute; + bottom: -5%; + left: 20%; + box-shadow: 0 20px 40px #888; + transition-duration: 0.5s; + + h3 { + color: #7a3f3a; + font-variant: small-caps; + font-family: Georgia, serif; + text-align: center; + margin: 0; + margin-bottom: 1rem; + font-size: 2em; + } + + p { + line-height: 1.25; + } + + a { + background-color: #7a3f3a; + padding: 1rem 3rem; + color: #eee; + text-decoration: none; + display: block; + text-align: center; + margin: 0 auto; + border-radius: 5px; + + &:focus, + &:hover { + background-color: #6a191f; + color: #fff; + } + } +} + +@media (max-width: 1200px) { + .article { + li:last-child { + display: none; + } + } +} + +@media (max-width: 768px) { + .wrap .article li:not(:first-child) { + display: none; + } +} + +@media (max-width: 426px) { + .article ul { + height: 400px; + } + + .article img { + float: left; + margin: 0 10px 0 0; + width: 275px; + } + + .article li:hover .animal-info { + margin-left: 18px; + } +} + +/* <----------- Notes -----------> */ + +.notes { + width: calc(100% - 350px); + height: 100%; + overflow: auto; + padding: 2rem 2rem; + + h2, + p { + font-size: 1em; + margin: 0; + margin-bottom: 0.75rem; + line-height: 1.125; + } + + h2 { + font-weight: bolder; + font-size: 1.25em; + } +} + +.notes .notes ul { + overflow: hidden; +} + +.notes ul li { + margin-right: 1.5rem; + margin-bottom: 1.5rem; + display: inline-block; +} + +.notes ul li div { + text-decoration: none; + color: #000; + background: #ffc; + display: block; + height: 150px; + width: 150px; + padding: 1rem; + box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7); + transform: rotate(-6deg); + transition: 0.3s all; + + &:hover { + transform: scale(1.25); + } +} + +.notes ul li:nth-child(even) div { + position: relative; + background: #cfc; + transform: rotate(4deg); + + &:hover { + transform: scale(1.25); + } +} + +/* <----------- Sidebar -----------> */ + +.sidebar { + float: right; + width: 350px; + height: 730px; + padding: 15px; + background-color: #e8e8e8; + box-sizing: border-box; + text-align: center; +} + +.sidebar button { + box-shadow: 0px 10px 14px -7px #275873; + background: linear-gradient(to bottom, #55c4e6 5%, #0babe0 100%); + background-color: #55c4e6; + border-radius: 10px; + cursor: pointer; + color: #ffffff; + font-size: 20px; + font-weight: bold; + padding: 13px 32px; + text-shadow: 2px 1px 0px #275873; + margin: 10px; + + &:hover { + animation-name: stretch; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-direction: alternate; + } +} + +@media (max-width: 1024px) { + .sidebar { + height: 500px; + } +} + +@media (max-width: 426px) { + .sidebar { + width: 100%; + height: 100%; + } +} + +/* Animations */ + +@keyframes pulse { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes stretch { + 0% { + transform: scale(1); + } + + 20% { + transform: scale(1.05); + } + + 100% { + transform: scale(0.9); + } +} diff --git a/src/013-animations/example/index.html b/src/013-animations/example/index.html index f79d5cd..5d94826 100644 --- a/src/013-animations/example/index.html +++ b/src/013-animations/example/index.html @@ -1,5 +1,6 @@ + 013 - Transform, Transition and Animations @@ -17,139 +18,141 @@ + - -
-
- -
- - 013 - Transform, Transition and Animations - -
-
-
-
-
- -
-
-

Lorem ipsum dolor sit amet

+ +
+
+ +
+ + 013 - Transform, Transition and Animations + +
+
+
+
+
+ +
+
+

Lorem ipsum dolor sit amet

-
-
    -
  • - Wolf -
    -

    Wolf

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    - More info -
    -
    • -
  • - Tiger -
    -

    Tiger

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    - More info -
    -
    • -
  • - Eagle -
    -

    Eagle

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    - More info -
    -
    • -
-
+
+
    +
  • + Wolf +
    +

    Wolf

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    + More info +
    +
    • +
  • + Tiger +
    +

    Tiger

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    + More info +
    +
    • +
  • + Eagle +
    +

    Eagle

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    + More info +
    +
    • +
+
- + -
-
    -
  • -
    -

    Title #1

    -

    Text Content #1

    -
    -
    • -
  • -
    -

    Title #2

    -

    Text Content #2

    -
    -
    • -
  • -
    -

    Title #3

    -

    Text Content #3

    -
    -
    • -
  • -
    -

    Title #4

    -

    Text Content #4

    -
    -
    • -
  • -
    -

    Title #5

    -

    Text Content #5

    -
    -
    • -
  • -
    -

    Title #6

    -

    Text Content #6

    -
    -
    • -
  • -
    -

    Title #2

    -

    Text Content #2

    -
    -
    • -
  • -
    -

    Title #7

    -

    Text Content #7

    -
    -
    • -
  • -
    -

    Title #8

    -

    Text Content #8

    -
    -
    • -
-
-
-
+
+
    +
  • +
    +

    Title #1

    +

    Text Content #1

    +
    +
    • +
  • +
    +

    Title #2

    +

    Text Content #2

    +
    +
    • +
  • +
    +

    Title #3

    +

    Text Content #3

    +
    +
    • +
  • +
    +

    Title #4

    +

    Text Content #4

    +
    +
    • +
  • +
    +

    Title #5

    +

    Text Content #5

    +
    +
    • +
  • +
    +

    Title #6

    +

    Text Content #6

    +
    +
    • +
  • +
    +

    Title #2

    +

    Text Content #2

    +
    +
    • +
  • +
    +

    Title #7

    +

    Text Content #7

    +
    +
    • +
  • +
    +

    Title #8

    +

    Text Content #8

    +
    +
    • +
+
+
+
-
-
-
+ + + - + + \ No newline at end of file diff --git a/src/014-responsive-design/example/css/footer.css b/src/014-responsive-design/example/css/footer.css index ae8fdb0..9c41629 100755 --- a/src/014-responsive-design/example/css/footer.css +++ b/src/014-responsive-design/example/css/footer.css @@ -27,7 +27,7 @@ line-height: 65px; } -.footer ul.links-footer li:not(:last-child){ +.footer ul.links-footer li:not(:last-child) { padding-right: 10px; } @@ -43,7 +43,7 @@ position: relative; } -.dropdown-footer .heading{ +.dropdown-footer .heading { box-sizing: border-box; cursor: pointer; font-size: 1em; @@ -95,7 +95,7 @@ flex-direction: column; } -.content-down .calendar .calendar-item{ +.content-down .calendar .calendar-item { border-bottom: 1px solid #fff; display: flex; flex-direction: row; @@ -105,21 +105,48 @@ opacity: 0.8; } - - - /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { + .footer { + background-color: #3f1ee9; + } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { + .footer { + background-color: #e93f1e; + } + + .dropdown-container { + flex-direction: row; + flex-wrap: wrap; + } + + .dropdown-footer { + flex: 50% 1 1; + } + + .dropdown-footer .heading::after { + content: none; + } + + .dropdown-footer .content-down { + display: block; + } } /* Extra large devices (large desktops, 1200px and up)*/ @media (min-width: 1200px) { + .dropdown-footer { + flex: 25% 1 1; + } + + .footer { + background-color: #e91e63; + } } diff --git a/src/014-responsive-design/example/css/general.css b/src/014-responsive-design/example/css/general.css index 0a0d670..00f5562 100755 --- a/src/014-responsive-design/example/css/general.css +++ b/src/014-responsive-design/example/css/general.css @@ -28,7 +28,6 @@ a { max-width: 1200px; } - /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { } @@ -39,8 +38,14 @@ a { /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { + .content { + max-width: 900px; + } } /* Extra large devices (large desktops, 1200px and up)*/ @media (min-width: 1200px) { + .content { + max-width: 1200px; + } } diff --git a/src/014-responsive-design/example/css/header.css b/src/014-responsive-design/example/css/header.css index 5e89805..4c8f37e 100755 --- a/src/014-responsive-design/example/css/header.css +++ b/src/014-responsive-design/example/css/header.css @@ -7,7 +7,8 @@ /* General */ nav.navbar-scroll { background-color: #e91e63; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); top: 0; } @@ -18,7 +19,11 @@ nav.navbar-no-scroll { } .bg-effect { - background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, transparent 100%); + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.5) 0, + transparent 100% + ); position: absolute; width: 100%; height: 216px; @@ -46,7 +51,7 @@ nav.navbar-no-scroll { color: #fff; display: flex; position: fixed; - transition-duration: .2s; + transition-duration: 0.2s; width: 100%; z-index: 4; } @@ -70,7 +75,7 @@ nav.navbar-no-scroll { width: 0; height: 2px; background-color: #fff; - transition: width .3s; + transition: width 0.3s; } .navbar #menu a:hover::after { @@ -133,12 +138,47 @@ nav.navbar-no-scroll { /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { + #responsive-menu-toggle { + display: none; + } + + label[for='responsive-menu-toggle'] { + display: none; + } + + .navbar { + justify-content: space-between; + align-items: center; + } + + .navbar.navbar-scroll { + background-color: #3f1ee9; + } + + .navbar #menu { + display: block; + margin-right: 1rem; + } + + .navbar #menu li { + display: inline-block; + } + + .navbar #menu li + li { + margin-left: 1rem; + } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { + .navbar.navbar-scroll { + background-color: #e93f1e; + } } /* Extra large devices (large desktops, 1200px and up)*/ @media (min-width: 1200px) { + .navbar.navbar-scroll { + background-color: #e91e63; + } } diff --git a/src/014-responsive-design/example/css/product.css b/src/014-responsive-design/example/css/product.css index 7b84a05..e46162e 100755 --- a/src/014-responsive-design/example/css/product.css +++ b/src/014-responsive-design/example/css/product.css @@ -46,7 +46,7 @@ } .product-description h1, -.product-description h2{ +.product-description h2 { color: #000; font-size: 2.2em; } @@ -56,10 +56,10 @@ } .product-description p { - color: rgba(0,0,0,.5); + color: rgba(0, 0, 0, 0.5); font-size: 1.5em; font-weight: 100; - letter-spacing: .02em; + letter-spacing: 0.02em; margin-top: 40px; } @@ -77,6 +77,40 @@ /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { + .product { + flex-direction: row; + } + + .product-thumbs { + order: 1; + flex-direction: column; + flex: 10% 1 1; + padding: 0; + } + + .product-thumbs a { + display: block; + } + + .product-thumbs > a:last-child { + padding-right: 10px; + } + + .product-thumbs a img { + width: 100%; + } + + .product-slider { + order: 2; + flex: 50% 5 5; + margin-right: 1rem; + } + + .product-description { + order: 3; + flex: 40% 4 4; + padding: 0; + } } /* Extra large devices (large desktops, 1200px and up)*/ diff --git a/src/015-flex/example/example.css b/src/015-flex/example/example.css index c1e6824..40904f6 100644 --- a/src/015-flex/example/example.css +++ b/src/015-flex/example/example.css @@ -1,5 +1,180 @@ +@charset "UTF-8"; /* * Practice : Flex - * Version: 1 - * By: xxx + * Version: 1.0.0 + * By: Elías Rodelo */ +body { + font-family: 'Avenir', sans-serif; + font-weight: 400; + font-size: 100%; +} +body * { + box-sizing: border-box; +} + +img { + max-width: 100%; +} + +.page-content { + padding: 0; + font-family: inherit; + font-weight: inherit; +} + +.header { + display: block; + height: 300px; + background-image: url('../resources/images/image.jpg'); + background-repeat: no-repeat; + background-size: 100%; + background-position: center top; +} + +.container { + margin: 0 auto; + max-width: 900px; +} +.container.n-margin { + margin-top: -75px; +} + +.columns { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + width: 100%; +} + +.column { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; +} +.column.is-6 { + flex-basis: 50%; +} +.column.is-4.card { + flex-basis: 31.33%; +} +@media screen and (max-width: 1024px) { + .column.is-4.card { + flex-basis: 50%; + } +} +.column.is-3 { + flex-basis: 25%; +} + +.card { + margin: 0.5rem; + border: 1px solid rgba(225, 225, 225, 0.75); + border-radius: 3px; + max-width: 285px; + transition: 0.3s all; +} +.card:hover { + cursor: pointer; + box-shadow: 1px 2px 2px rgba(225, 225, 225, 0.75); +} +.card:hover .card-img img { + transform: scale(1.125); +} +.card-img { + position: relative; + overflow: hidden; +} +.card-img img { + overflow: hidden; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + transition: 0.3s all; +} +.card-body { + padding: 1rem 0.5rem; +} +.card-footer { + border-top: 1px solid rgba(225, 225, 225, 0.75); + display: flex; + justify-content: space-between; + align-items: center; +} +.card-footer div:first-of-type { + padding: 0.5rem 0 0.5rem 1rem; +} +.card-footer div:first-of-type a { + color: #c8c8c8; +} +.card-footer div:first-of-type a:hover { + color: #afafaf; +} +.card-footer div:last-of-type a { + display: block; + padding: 0.5rem 1rem; + border-bottom-right-radius: 3px; +} +.card-footer div:last-of-type a:hover { + background-color: rgba(225, 225, 225, 0.75); + cursor: pointer; +} + +.footer { + background-color: #e91e63; + color: #fefefe; +} +.footer-wrapper { + max-width: 1100px; + margin: 0 auto; + padding: 1rem; +} +@media screen and (max-width: 768px) { + .footer-wrapper { + padding: 3rem 5rem; + } +} +.footer .column { + padding-right: 1rem; +} +@media screen and (max-width: 768px) { + .footer .column { + flex-basis: 100%; + align-self: center; + } + .footer .column h1 { + text-align: center; + } + .footer .column div, + .footer .column ul { + display: none; + } +} +.footer h1 { + font-size: 1.5em; + margin: 0 0 0.75rem; +} +.footer ul { + list-style: none; + margin: 0; + padding: 0; +} +@media screen and (max-width: 768px) { + .footer ul { + display: none; + } +} +.footer ul li { + border-bottom: 1px solid rgba(225, 225, 225, 0.75); + display: flex; + justify-content: space-between; +} +.footer .img-box { + display: flex; + flex-wrap: wrap; +} +.footer .img-box img { + flex-grow: 1; + margin: 0 0.25rem 0.25rem 0; +} + +/*# sourceMappingURL=example.css.map */ diff --git a/src/015-flex/example/example.scss b/src/015-flex/example/example.scss new file mode 100644 index 0000000..e33a1bf --- /dev/null +++ b/src/015-flex/example/example.scss @@ -0,0 +1,210 @@ +/* + * Practice : Flex + * Version: 1.0.0 + * By: Elías Rodelo + */ + +body { + font-family: 'Avenir', sans-serif; + font-weight: 400; + font-size: 100%; + + * { + box-sizing: border-box; + } +} + +img { + max-width: 100%; +} + +.page-content { + padding: 0; + font-family: inherit; + font-weight: inherit; +} + +.header { + display: block; + height: 300px; + background-image: url('../resources/images/image.jpg'); + background-repeat: no-repeat; + background-size: 100%; + background-position: center top; +} + +.container { + margin: 0 auto; + max-width: 900px; + + &.n-margin { + margin-top: -75px; + } +} + +.columns { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + width: 100%; +} + +.column { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + + &.is-6 { + flex-basis: 50%; + } + + &.is-4.card { + flex-basis: 31.33%; + + @media screen and (max-width: 1024px) { + flex-basis: 50%; + } + + @media screen and (max-width: 1){ + + } + } + + &.is-3 { + flex-basis: 25%; + } +} + +.card { + margin: 0.5rem; + border: 1px solid rgba(225, 225, 225, 0.75); + border-radius: 3px; + max-width: 285px; + transition: 0.3s all; + + &:hover { + cursor: pointer; + box-shadow: 1px 2px 2px rgba(225, 225, 225, 0.75); + + .card-img { + img { + transform: scale(1.125); + } + } + } + + &-img { + position: relative; + overflow: hidden; + + img { + overflow: hidden; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + transition: 0.3s all; + } + } + + &-body { + padding: 1rem 0.5rem; + } + + &-footer { + border-top: 1px solid rgba(225, 225, 225, 0.75); + display: flex; + justify-content: space-between; + align-items: center; + + div { + &:first-of-type { + padding: 0.5rem 0 0.5rem 1rem; + + a { + color: rgba(200, 200, 200, 1); + + &:hover { + color: rgba(175, 175, 175, 1); + } + } + } + + &:last-of-type { + a { + display: block; + padding: 0.5rem 1rem; + border-bottom-right-radius: 3px; + + &:hover { + background-color: rgba(225, 225, 225, 0.75); + cursor: pointer; + } + } + } + } + } +} + +.footer { + background-color: #e91e63; + color: #fefefe; + + &-wrapper { + max-width: 1100px; + margin: 0 auto; + padding: 1rem; + @media screen and (max-width: 768px) { + padding: 3rem 5rem; + } + + + } + + .column { + padding-right: 1rem; + + @media screen and (max-width: 768px) { + flex-basis: 100%; + align-self: center; + + h1 { + text-align: center; + } + + div, + ul { + display: none; + } + } + } + + h1 { + font-size: 1.5em; + margin: 0 0 0.75rem; + } + + ul { + list-style: none; + margin: 0; + padding: 0; + + @media screen and (max-width: 768px) { + display: none; + } + + li { + border-bottom: 1px solid rgba(225, 225, 225, 0.75); + display: flex; + justify-content: space-between; + } + } + + .img-box { + display: flex; + flex-wrap: wrap; + + img { + flex-grow: 1; + margin: 0 0.25rem 0.25rem 0; + } + } +} diff --git a/src/015-flex/example/index.html b/src/015-flex/example/index.html index 107af79..34d1df1 100644 --- a/src/015-flex/example/index.html +++ b/src/015-flex/example/index.html @@ -1,5 +1,6 @@ + 015 - Flex @@ -17,37 +18,38 @@ + - -
-
- -
- - 015 - Flex - -
-
-
-
-
+ +
+
+ +
+ + 015 - Flex + +
+
+
+
+
-
-
-
-
-
-
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo - tincidunt. Etiam volutpat tellus vitae vestibulum pretium. +
+
+
+
+ +
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo tincidunt. Etiam volutpat + tellus vitae vestibulum pretium. +
+
Lorem Lorem @@ -58,17 +60,16 @@
-
-
-
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo - tincidunt. Etiam volutpat tellus vitae vestibulum pretium. + +
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo tincidunt. Etiam volutpat + tellus vitae vestibulum pretium. +
+
Lorem Lorem @@ -77,19 +78,19 @@ +
-
-
-
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo - tincidunt. Etiam volutpat tellus vitae vestibulum pretium. + +
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo tincidunt. Etiam volutpat + tellus vitae vestibulum pretium. +
+
Lorem Lorem @@ -100,17 +101,16 @@
-
-
-
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo - tincidunt. Etiam volutpat tellus vitae vestibulum pretium. + +
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo tincidunt. Etiam volutpat + tellus vitae vestibulum pretium. +
+
Lorem Lorem @@ -121,17 +121,16 @@
-
-
-
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo - tincidunt. Etiam volutpat tellus vitae vestibulum pretium. + +
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo tincidunt. Etiam volutpat + tellus vitae vestibulum pretium. +
+
Lorem Lorem @@ -142,17 +141,16 @@
-
-
-
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo - tincidunt. Etiam volutpat tellus vitae vestibulum pretium. + +
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo tincidunt. Etiam volutpat + tellus vitae vestibulum pretium. +
+
Lorem Lorem @@ -161,19 +159,19 @@ +
-
-
-
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo - tincidunt. Etiam volutpat tellus vitae vestibulum pretium. + +
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo tincidunt. Etiam volutpat + tellus vitae vestibulum pretium. +
+
Lorem Lorem @@ -184,17 +182,16 @@
-
-
-
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo - tincidunt. Etiam volutpat tellus vitae vestibulum pretium. + +
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere purus sit amet nisi commodo tincidunt. Etiam volutpat + tellus vitae vestibulum pretium. +
+
Lorem Lorem @@ -205,68 +202,77 @@
+
-
-
-
-
-
-

Lorem ipsum dolor sit amet

-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut nisl ullamcorper, consectetur lectus - at, dignissim dolor. Quisque ultrices laoreet lacus non interdum. Donec ut dictum metus. -

+
+ -
+ +
-
-
-
+ + + - + + \ No newline at end of file diff --git a/src/016-bootstrap/example/example.css b/src/016-bootstrap/example/example.css index 44f6d8d..e6cd606 100644 --- a/src/016-bootstrap/example/example.css +++ b/src/016-bootstrap/example/example.css @@ -1,5 +1,34 @@ /* * Practice : Bootstrap and Material Column System * Version: 1 - * By: xxx + * By: Elías Rodelo */ + +:root { + --yellow: #e9a41e; +} + +.block { + margin-left: 1rem; +} + +.block p { + margin: 0; +} + +.card-link { + color: var(--yellow); +} + +.card-link:hover { + color: rgba(233, 164, 30, 0.75); +} + +.btn-sm.float-right { + background-color: var(--yellow); + color: rgb(255, 255, 255); +} + +.btn-sm.float-right:hover { + background-color: #cc901a; +} diff --git a/src/016-bootstrap/example/index.html b/src/016-bootstrap/example/index.html index aef5148..be47abd 100644 --- a/src/016-bootstrap/example/index.html +++ b/src/016-bootstrap/example/index.html @@ -1,5 +1,6 @@ + 016 - Bootstrap and Material Column System @@ -14,186 +15,191 @@ - + + - -
-
- -
- - 016 - Bootstrap and Material Column System - -
-
-
-
-
- -
-
-
-

Talos Travel

-

Travel is the only thing you by that makes you richer

+ +
+
+ +
+ + 016 - Bootstrap and Material Column System + +
+
+
+
+
+ +
+
+
+

Talos Travel

+

Travel is the only thing you by + that makes you richer +

+
-
- +
+
+
+
+

What are you looking?

+
+
    +
  • + Card image cap +
    +

    Tecnology

    + Click! +
    +
    • +
  • + Card image cap +
    +

    Architecture

    + Click! +
    +
    • +
  • + Card image cap +
    +

    People

    + Click! +
    +
    • +
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- Flights + Hotels - Hotels + Cars +
+
+

Buy with us!

+
+
    +
  • + Flights +
    • +
  • + Cars +
    • +
  • + Hotels +
    • +
+
+ Flights + Hotels + Hotels + Cars +
-
-
-

Are you searching some promotions?

-
-

Let us show you some special prices for today.

-
- +
+

Are you searching some promotions?

+
+

Let us show you some special prices for today.

+
+ +
-
-
-

Searching for something in particular?

-
- -
- +
+

Searching for something in particular?

+
+ +
+ +
-
-
-
-
- Card image cap -
- Enrich Your Knowledge - - +
+
+
+ Card image cap +
+ Enrich Your Knowledge + + +
-
-
- Card image cap -
- Be One With Nature - - +
+ Card image cap +
+ Be One With Nature + + +
+
-
- Card image cap -
- Recommended Places - - +
+
+ Card image cap +
+ Recommended Places + + +
-
-
- Card image cap -
- Pet Friendly Places - - +
+ Card image cap +
+ Pet Friendly Places + + +
-
-
+ -
-
-
+ + + - - - - + + + + - + + \ No newline at end of file