Challenges by Elías Rodelo

.gitignore

@@ -1 +1,5 @@
-.idea
+.idea/
+*.map
+.sass-cache/
+.DS_Store/
+.DS_Store

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
-

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;
+}