Add correct colors for profiles

src/hbs/partials/components/profile.hbs

@@ -1,11 +1,18 @@
-<div class="profile">
+<div class="profile {{ class }}">
-  <!-- profile image -->
+
-  <h6>
+  <figure class="profile__image">
-    {{#if profile.location }}
+
-      {{ profile.location }}
+  </figure>
-    {{else}}
+
-      undisclosed
+  <div class="profile__detail">
-    {{/if}}
+    <h6 class="profile__location">
-  </h6>
+      {{#if profile.location }}
-  <h3>{{ profile.name }}</h3>
+        {{ profile.location }}
+      {{else}}
+        undisclosed
+      {{/if}}
+    </h6>
+
+    <h3 class="profile__name">{{ profile.name }}</h3>
+  </div>
 </div>

src/hbs/partials/components/team.hbs

@@ -1,5 +1,28 @@
 <section class="section team">
-  {{#each team.profiles as |profile| }}
+  <div class="team__container">
-    {{> components/profile profile=profile}}
+
-  {{/each}}
+    {{> components/heading
+      text=team.header
+      class="team__header"
+    }}
+
+    <div class="team__quote">
+      <blockquote class="team__quote__text">{{ team.quote.text }}</blockquote>
+      <p class="team__quote__author">- {{ team.quote.author }}</p>
+    </div>
+
+    <div class="team__profiles">
+      {{#each team.profiles as |profile| }}
+        {{> components/profile
+          class="team__profile"
+          profile=profile
+        }}
+      {{/each}}
+    </div>
+
+    <div class="team__counter">{{ team.counter }}</div>
+
+    <div class="team__link">{{ team.nextSectionLink }}</div>
+
+  </div>
 </section>

src/styles/base/_colors.scss

@@ -6,9 +6,9 @@ $color-navy: #1e1e1e;
 $color-black: #000;
 
 $color-fuchsia-pink: #ca4eca;
-$color-fuchsia-blue:#694ac9;
+$color-fuchsia-blue: #5862a9;
 $color-citron: #94ac20;
-$color-scampi: #5761aa;
+$color-scampi: #694ac9;
 $color-corn: #e4c102;
 $color-red: #ef2f00;
 $color-turquoise: #6eccce;

src/styles/components/_profile.scss

@@ -1,3 +1,29 @@
 .profile {
-  display: block;
+  &__image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    background-color: $color-white;
+
+    &::after {
+      padding-bottom: 114%;
+      content: close-quote;
+    }
+  }
+
+  &__location,
+  &__name {
+    @include heading;
+
+    text-transform: uppercase;
+  }
+
+  &__location {
+    font-size: 16px;
+  }
+
+  &__name {
+    font-size: 30px;
+  }
 }

src/styles/components/_team.scss

@@ -1,4 +1,49 @@
 .team {
+  $profile-colors: (
+    $color-tangerine,
+    $color-fuchsia-blue,
+    $color-citron,
+    $color-corn,
+    $color-red,
+    $color-fuchsia-pink,
+    $color-scampi,
+    $color-turquoise
+  );
+
+  padding: 20px 0;
   color: $color-white;
   background-color: $color-black;
+
+  &__container {
+    @include container;
+  }
+
+  &__header {
+    margin-bottom: 20px;
+  }
+
+  &__quote {
+    margin-bottom: 20px;
+    font-weight: 300;
+
+    &__text {
+      margin: 0;
+    }
+
+    &__author {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+  }
+
+  &__profile {
+    margin-bottom: 20px;
+
+    @for $i from 1 through 8 {
+      &:nth-of-type(#{$i}) {
+        color: nth($profile-colors, $i);
+      }
+    }
+  }
 }