user review section done

Trillo/starter/css/style.css

@@ -26,7 +26,8 @@ Grey dark 3: #999
   --color-grey-dark-2: #777;
   --color-grey-dark-3: #999;
   --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
-  --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06); }
+  --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
+  --line: 1px solid var(--color-grey-light-2); }
 
 * {
   margin: 0;
@@ -40,6 +41,9 @@ Grey dark 3: #999
 html {
   box-sizing: border-box;
   font-size: 62.5%; }
+  html ::selection {
+    color: var(--color-grey-light-1);
+    background-color: var(--color-primary); }
 
 body {
   font-family: "Open Sans", sans-serif;
@@ -181,7 +185,7 @@ body {
 .overview {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--color-grey-light-2); }
+  border-bottom: var(--line); }
   .overview__heading {
     font-size: 2.25rem;
     font-weight: 300;
@@ -229,8 +233,13 @@ body {
   background-color: transparent;
   cursor: pointer;
   transition: all 0.2s; }
+  .btn-inline span {
+    margin-left: 3px;
+    transition: margin-left 0.2s; }
   .btn-inline:hover {
     color: var(--color-grey-dark-1); }
+    .btn-inline:hover span {
+      margin-left: 8px; }
   .btn-inline:focus {
     outline: none;
     animation: pulsate 1s infinite; }
@@ -246,6 +255,90 @@ body {
     transform: scale(1);
     box-shadow: none; } }
 
+.paragraph:not(:last-of-type) {
+  margin-bottom: 2rem; }
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 3rem 0;
+  padding: 3rem 0;
+  border-top: var(--line);
+  border-bottom: var(--line); }
+  .list__item {
+    flex: 0 0 50%;
+    margin-bottom: 0.7rem; }
+    .list__item::before {
+      content: "";
+      display: inline-block;
+      height: 1rem;
+      width: 1rem;
+      margin-right: 0.7rem;
+      background-color: var(--color-primary);
+      mask-image: url("../img/chevron-thin-right.svg");
+      mask-size: cover; }
+
+.recommend {
+  font-size: 1.3rem;
+  color: var(--color-grey-dark-3);
+  display: flex;
+  align-items: center; }
+  .recommend__count {
+    margin-right: auto; }
+  .recommend__photo {
+    box-sizing: content-box;
+    height: 4rem;
+    width: 4rem;
+    border-radius: 50%;
+    border: 3px solid white; }
+    .recommend__photo:not(:last-child) {
+      margin-right: -1.5rem; }
+
+.review {
+  background-color: white;
+  box-shadow: var(--shadow-light);
+  padding: 3rem;
+  margin-bottom: 3.5rem;
+  position: relative;
+  overflow: hidden; }
+  .review::before {
+    content: "\201C";
+    position: absolute;
+    top: -3.2rem;
+    left: -1rem;
+    font-size: 20rem;
+    font-family: sans-serif;
+    line-height: 1;
+    color: var(--color-grey-light-2);
+    z-index: 1; }
+  .review__text {
+    margin-bottom: 2rem;
+    z-index: 10;
+    position: relative; }
+  .review__user {
+    display: flex;
+    align-items: center; }
+  .review__photo {
+    height: 4.5rem;
+    width: 4.5rem;
+    border-radius: 50%;
+    margin-right: 1.5rem; }
+  .review__user-box {
+    margin-right: auto; }
+  .review__user-name {
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: 0.4rem; }
+  .review__user-date {
+    font-size: 1rem;
+    color: var(--color-grey-dark-3); }
+  .review__rating {
+    font-size: 2.2rem;
+    font-weight: 300;
+    color: var(--color-primary); }
+
 .container {
   max-width: 120rem;
   min-height: 50rem;
@@ -256,7 +349,7 @@ body {
 .header {
   height: 7rem;
   background-color: #fff;
-  border-bottom: 1px solid var(--color-grey-light-2);
+  border-bottom: var(--line);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -281,15 +374,17 @@ body {
   padding: 4.5rem;
   gap: 4.5rem;
   background-color: var(--color-grey-light-1);
-  border-bottom: 1px solid var(--color-grey-light-2); }
+  border-bottom: 1px solid var(--color-grey-light-2);
+  font-size: 1.4rem; }
 
 .description {
   background-color: white;
   box-shadow: var(--shadow-light);
   padding: 3rem;
-  flex: 0 0 60%;
+  flex: 0 0 60%; }
-  font-size: 1.4rem; }
 
 .user-reviews {
-  background-color: blue;
+  flex: 1;
-  flex: 1; }
+  display: flex;
+  flex-direction: column;
+  align-items: center; }

Trillo/starter/index.html

@@ -163,6 +163,10 @@
                 cumque, quas, ut corporis incidunt deserunt quae architecto
                 voluptate.
               </p>
+              <p class="paragraph">
+                Accusantium cumque, quas, ut corporis incidunt deserunt quae
+                architecto voluptate delectus, inventore iure aliquid aliquam.
+              </p>
               <ul class="list">
                 <li class="list__item">Close to the beach</li>
                 <li class="list__item">Breakfast included</li>
@@ -203,7 +207,48 @@
               </div>
             </div>
 
-            <div class="user-reviews">User reviews</div>
+            <div class="user-reviews">
+              <!-- NOTE: figure are great for descriptions -->
+              <figure class="review">
+                <blockquote class="review__text">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
+                  doloremque architecto dicta animi, totam, itaque officia ex.
+                </blockquote>
+                <figcaption class="review__user">
+                  <img
+                    src="img/user-1.jpg"
+                    alt="User 1"
+                    class="review__photo"
+                  />
+                  <div class="review__user-box">
+                    <p class="review__user-name">Nick Smith</p>
+                    <p class="review__user-date">Feb 23rd, 2017</p>
+                  </div>
+                  <div class="review__rating">7.8</div>
+                </figcaption>
+              </figure>
+
+              <figure class="review">
+                <blockquote class="review__text">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
+                  doloremque architecto dicta animi.
+                </blockquote>
+                <figcaption class="review__user">
+                  <img
+                    src="img/user-2.jpg"
+                    alt="User 2"
+                    class="review__photo"
+                  />
+                  <div class="review__user-box">
+                    <p class="review__user-name">Mary thoms</p>
+                    <p class="review__user-date">Sep 13rd, 2017</p>
+                  </div>
+                  <div class="review__rating">9.3</div>
+                </figcaption>
+              </figure>
+
+              <button class="btn-inline">Show all <span>&rarr;</span></button>
+            </div>
           </div>
         </main>
       </div>

Trillo/starter/sass/_base.scss

@@ -30,6 +30,7 @@ Grey dark 3: #999
 
   --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
   --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
+  --line: 1px solid var(--color-grey-light-2);
 }
 
 * {
@@ -46,6 +47,11 @@ Grey dark 3: #999
 html {
   box-sizing: border-box;
   font-size: 62.5%; // 1rem = 10px
+
+  ::selection {
+    color: var(--color-grey-light-1);
+    background-color: var(--color-primary);
+  }
 }
 
 body {

Trillo/starter/sass/_components.scss

@@ -200,7 +200,7 @@
 .overview {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--color-grey-light-2);
+  border-bottom: var(--line);
 
   &__heading {
     font-size: 2.25rem;
@@ -269,8 +269,17 @@
   cursor: pointer;
   transition: all 0.2s;
 
+  & span {
+    margin-left: 3px;
+    transition: margin-left 0.2s;
+  }
+
   &:hover {
     color: var(--color-grey-dark-1);
+
+    & span {
+      margin-left: 8px;
+    }
   }
 
   &:focus {
@@ -293,3 +302,139 @@
     box-shadow: none;
   }
 }
+
+// Paragraph
+.paragraph:not(:last-of-type) {
+  margin-bottom: 2rem;
+}
+
+// List
+.list {
+  display: flex;
+  flex-wrap: wrap; // NOTE: making a grid with 2 columns
+
+  list-style: none;
+
+  margin: 3rem 0;
+  padding: 3rem 0;
+
+  border-top: var(--line);
+  border-bottom: var(--line);
+
+  &__item {
+    flex: 0 0 50%; // NOTE: making a grid with 2 columns
+    margin-bottom: 0.7rem;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      height: 1rem;
+      width: 1rem;
+      margin-right: 0.7rem;
+
+      // NOTE: Older browsers
+      // background-image: url("../img/chevron-thin-right.svg");
+      // background-size: cover;
+
+      // NOTE: Newer browsers - masks
+      // icon mask that lets you see the background color
+      background-color: var(--color-primary);
+      mask-image: url("../img/chevron-thin-right.svg");
+      mask-size: cover;
+    }
+  }
+}
+
+// Recommend
+.recommend {
+  font-size: 1.3rem;
+  color: var(--color-grey-dark-3);
+
+  display: flex;
+  align-items: center;
+
+  &__count {
+    margin-right: auto; // NOTE: trick to make space-between in other way, usefull in case of having multiple elements
+  }
+
+  &__friends {
+  }
+
+  &__photo {
+    box-sizing: content-box; // NOTE: content-box is the default, we changed it on _base.scss
+    height: 4rem;
+    width: 4rem;
+
+    border-radius: 50%;
+    border: 3px solid white;
+
+    &:not(:last-child) {
+      margin-right: -1.5rem;
+    }
+  }
+}
+
+// Reviews
+.review {
+  background-color: white;
+  box-shadow: var(--shadow-light);
+  padding: 3rem;
+  margin-bottom: 3.5rem;
+
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "\201C"; // NOTE: html entity
+    position: absolute;
+    top: -3.2rem;
+    left: -1rem;
+    font-size: 20rem;
+    font-family: sans-serif;
+    line-height: 1;
+    color: var(--color-grey-light-2);
+
+    z-index: 1;
+  }
+
+  &__text {
+    margin-bottom: 2rem;
+    z-index: 10;
+    position: relative;
+  }
+
+  &__user {
+    display: flex;
+    align-items: center;
+  }
+
+  &__photo {
+    height: 4.5rem;
+    width: 4.5rem;
+    border-radius: 50%;
+
+    margin-right: 1.5rem;
+  }
+
+  &__user-box {
+    margin-right: auto;
+  }
+
+  &__user-name {
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: 0.4rem;
+  }
+
+  &__user-date {
+    font-size: 1rem;
+    color: var(--color-grey-dark-3);
+  }
+
+  &__rating {
+    font-size: 2.2rem;
+    font-weight: 300;
+    color: var(--color-primary);
+  }
+}

Trillo/starter/sass/_layout.scss

@@ -9,7 +9,7 @@
 .header {
   height: 7rem;
   background-color: #fff;
-  border-bottom: 1px solid var(--color-grey-light-2);
+  border-bottom: var(--line);
 
   display: flex;
   justify-content: space-between;
@@ -42,6 +42,8 @@
 
   background-color: var(--color-grey-light-1);
   border-bottom: 1px solid var(--color-grey-light-2);
+
+  font-size: 1.4rem;
 }
 
 .description {
@@ -49,10 +51,12 @@
   box-shadow: var(--shadow-light);
   padding: 3rem;
   flex: 0 0 60%;
-  font-size: 1.4rem;
 }
 
 .user-reviews {
-  background-color: blue;
   flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }