Implement team UI

practice/practice-01/src/index.html

@@ -138,5 +138,83 @@
         />
       </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">Ceo</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">Ceo</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <a href="javascript:void(0)" class="btn btn-secondary">View Team</a>
+      </div>
+    </section>
   </body>
 </html>

practice/practice-01/src/style/abstracts/variables.css

@@ -7,6 +7,8 @@
   --fs-md: 20px;
   --fs-lg: 40px;
   --width: 1180px;
+  --frame-width: 279px;
+  --frame-height: 299px;
   --ff-secondary-regular: CrimsonText-Regular;
   --ff-secondary-bold: CrimsonText-Bold;
   --ff-primary-medium: WorkSans-Medium;

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

@@ -227,3 +227,84 @@
   font-family: var(--ff-primary-regular);
   line-height: 125%;
 }
+
+/* Team section */
+
+.team__container {
+  gap: 45px;
+}
+
+.team__content {
+  width: 404px;
+  gap: 16px;
+}
+
+.team__title {
+  font-family: var(--ff-primary-bold);
+  line-height: 125%;
+  letter-spacing: 5px;
+  text-transform: uppercase;
+
+  color: var(--primary-color);
+}
+
+.team__heading {
+  font-size: var(--fs-lg);
+  font-family: var(--ff-secondary-bold);
+  line-height: 125%;
+}
+
+.team__description {
+  font-size: var(--fs-md);
+  font-family: var(--ff-primary-regular);
+  line-height: 125%;
+
+  text-align: center;
+}
+
+.team__image-container {
+  display: flex;
+  gap: 47px;
+}
+
+.team__frame {
+  width: var(--frame-width);
+  height: var(--frame-height);
+  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);
+  line-height: 125%;
+  text-transform: capitalize;
+}
+
+.team__position {
+  font-size: var(--fs-sm);
+  font-family: var(--ff-primary-regular);
+  line-height: 125%;
+  text-transform: uppercase;
+}