Merge pull request #37 from phuocduong-agilityio/feature/team

Feature/team

practice/practice-01/src/index.html

@@ -153,6 +153,85 @@
             />
           </div>
         </section>
+
+        <!-- Team section -->
+        <section class="team">
+          <div class="team__container align-center">
+            <!-- Team content -->
+            <div class="team__content align-center">
+              <span class="team__title">Team</span>
+              <h2 class="team__heading">Our talents</h2>
+              <p class="team__description">
+                Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
+                ab,
+              </p>
+            </div>
+
+            <!-- Avatar Image -->
+            <div class="team__image-container">
+              <!-- Frame 1 -->
+              <div class="team__frame">
+                <div class="team__image-content align-center">
+                  <img
+                    src="./assets/images/avatar-1.png"
+                    alt="Avatar Image"
+                    class="team__image"
+                  />
+                  <div class="team__information">
+                    <span class="team__name">Peg legge</span>
+                    <span class="team__position">Ceo</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Frame 2 -->
+              <div class="team__frame">
+                <div class="team__image-content align-center">
+                  <img
+                    src="./assets/images/avatar-2.png"
+                    alt="Avatar Image"
+                    class="team__image"
+                  />
+                  <div class="team__information">
+                    <span class="team__name">Richard guerra</span>
+                    <span class="team__position">Cto</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Frame 3 -->
+              <div class="team__frame">
+                <div class="team__image-content align-center">
+                  <img
+                    src="./assets/images/avatar-3.png"
+                    alt="Avatar Image"
+                    class="team__image"
+                  />
+                  <div class="team__information">
+                    <span class="team__name">Alexandra stolz</span>
+                    <span class="team__position">Designer</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Frame 4 -->
+              <div class="team__frame">
+                <div class="team__image-content align-center">
+                  <img
+                    src="./assets/images/avatar-4.png"
+                    alt="Avatar Image"
+                    class="team__image"
+                  />
+                  <div class="team__information">
+                    <span class="team__name">Peg legge</span>
+                    <span class="team__position">Developer</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <a href="javascript:void(0)" class="btn btn-secondary">View Team</a>
+          </div>
+        </section>
       </div>
     </div>
   </body>

practice/practice-01/src/style/main.css

@@ -220,3 +220,79 @@
   font-size: 15px;
   font-family: var(--ff-primary-regular);
 }
+
+/* Team section */
+
+.team__container {
+  gap: 45px;
+}
+
+.team__content {
+  width: 404px;
+  gap: 16px;
+}
+
+.team__title {
+  font-family: var(--ff-primary-bold);
+  letter-spacing: 5px;
+  text-transform: uppercase;
+
+  color: var(--primary-color);
+}
+
+.team__heading {
+  font-size: var(--fs-lg);
+  font-family: var(--ff-secondary-bold);
+}
+
+.team__description {
+  font-size: var(--fs-md);
+  font-family: var(--ff-primary-regular);
+
+  text-align: center;
+}
+
+.team__image-container {
+  display: flex;
+  gap: 35px;
+}
+
+.team__frame {
+  width: 270px;
+  height: 299px;
+  box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25);
+  transition: 0.3s;
+}
+
+.team__frame:hover {
+  transform: scale(1.2);
+}
+
+.team__image-content {
+  padding: 20px 40px;
+  gap: 18px;
+}
+
+.team__image {
+  width: 175px;
+  height: 175px;
+}
+
+.team__information {
+  display: flex;
+  flex-direction: column;
+  gap: 17px;
+  width: 100%;
+}
+
+.team__name {
+  font-size: 24px;
+  font-family: var(--ff-secondary-bold);
+  text-transform: capitalize;
+}
+
+.team__position {
+  font-size: var(--fs-sm);
+  font-family: var(--ff-primary-regular);
+  text-transform: uppercase;
+}