diff --git a/practice/practice-01/src/assets/images/avatar-1.png b/practice/practice-01/src/assets/images/avatar-1.png new file mode 100644 index 0000000..c335d53 Binary files /dev/null and b/practice/practice-01/src/assets/images/avatar-1.png differ diff --git a/practice/practice-01/src/assets/images/avatar-2.png b/practice/practice-01/src/assets/images/avatar-2.png new file mode 100644 index 0000000..2401c1d Binary files /dev/null and b/practice/practice-01/src/assets/images/avatar-2.png differ diff --git a/practice/practice-01/src/assets/images/avatar-3.png b/practice/practice-01/src/assets/images/avatar-3.png new file mode 100644 index 0000000..1f51b88 Binary files /dev/null and b/practice/practice-01/src/assets/images/avatar-3.png differ diff --git a/practice/practice-01/src/assets/images/avatar-4.png b/practice/practice-01/src/assets/images/avatar-4.png new file mode 100644 index 0000000..7200c2f Binary files /dev/null and b/practice/practice-01/src/assets/images/avatar-4.png differ diff --git a/practice/practice-01/src/index.html b/practice/practice-01/src/index.html index 6cc9d50..9545e2d 100644 --- a/practice/practice-01/src/index.html +++ b/practice/practice-01/src/index.html @@ -153,6 +153,85 @@ /> + + +
+
+ +
+ Team +

Our talents

+

+ Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos, + ab, +

+
+ + +
+ +
+
+ Avatar Image +
+ Peg legge + Ceo +
+
+
+ + +
+
+ Avatar Image +
+ Richard guerra + Cto +
+
+
+ + +
+
+ Avatar Image +
+ Alexandra stolz + Designer +
+
+
+ + +
+
+ Avatar Image +
+ Peg legge + Developer +
+
+
+
+ View Team +
+
diff --git a/practice/practice-01/src/style/main.css b/practice/practice-01/src/style/main.css index ab4b6a9..a34e1e4 100644 --- a/practice/practice-01/src/style/main.css +++ b/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; +}