├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 |
26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 | 35 |
36 | Ally Pearson 37 | Web Developer 38 |
39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 |
47 | 48 |
49 | 50 | 51 |
52 |
53 |
54 |
55 |
56 |
57 | 58 |
59 | 60 |
61 | 62 | 63 | 64 |
65 | 66 |
67 | Dominic Wells 68 | Software Engineer 69 |
70 | 71 |
72 | 73 | 74 | 75 | 76 | 77 |
78 | 79 |
80 | 81 | 82 |
83 |
84 |
85 |
86 |
87 |
88 | 89 |
90 | 91 |
92 | 93 | 94 | 95 |
96 | 97 |
98 | Kylie Smith 99 | UX/UI Desinger 100 |
101 | 102 |
103 | 104 | 105 | 106 | 107 | 108 |
109 | 110 |
111 | 112 | 113 |
114 |
115 |
116 |
117 |
118 |
119 | 120 |
121 | 122 |
123 | 124 | 125 | 126 |
127 | 128 |
129 | Stephanie Xia 130 | Backend Developer 131 |
132 | 133 |
134 | 135 | 136 | 137 | 138 | 139 |
140 | 141 |
142 | 143 | 144 |
145 |
146 |
147 |
148 |
149 |
150 | 151 |
152 | 153 |
154 | 155 | 156 | 157 |
158 | 159 |
160 | Jordan Tapp 161 | Network Engineer 162 |
163 | 164 |
165 | 166 | 167 | 168 | 169 | 170 |
171 | 172 |
173 | 174 | 175 |
176 |
177 |
178 |
179 |
180 |
181 | 182 |
183 | 184 |
185 | 186 | 187 | 188 |
189 | 190 |
191 | Caroline Parker 192 | Systems Analyst 193 |
194 | 195 |
196 | 197 | 198 | 199 | 200 | 201 |
202 | 203 |
204 | 205 | 206 |
207 |
208 |
209 |
210 |
211 |
212 | 213 |
214 | 215 |
216 | 217 | 218 | 219 |
220 | 221 |
222 | Maddie Crox 223 | Frontend Developer 224 |
225 | 226 |
227 | 228 | 229 | 230 | 231 | 232 |
233 | 234 |
235 | 236 | 237 |
238 |
239 |
240 |
241 |
242 |
243 | 244 |
245 | 246 |
247 | 248 | 249 | 250 |
251 | 252 |
253 | Simone Mitchell 254 | Java Developer 255 |
256 | 257 |
258 | 259 | 260 | 261 | 262 | 263 |
264 | 265 |
266 | 267 | 268 |
269 |
270 |
271 |
272 |
273 |
274 | 275 |
276 | 277 |
278 | 279 | 280 | 281 |
282 | 283 |
284 | Heather Cornwell 285 | Systems Engineer 286 |
287 | 288 |
289 | 290 | 291 | 292 | 293 | 294 |
295 | 296 |
297 | 298 | 299 |
300 |
301 |
302 | 303 |
304 |
305 | 306 |
307 |
308 |
309 |
310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var swiper = new Swiper(".mySwiper", { 2 | slidesPerView: 3, 3 | spaceBetween: 30, 4 | slidesPerGroup: 3, 5 | loop: true, 6 | loopFillGroupWithBlank: true, 7 | pagination: { 8 | el: ".swiper-pagination", 9 | clickable: true, 10 | }, 11 | navigation: { 12 | nextEl: ".swiper-button-next", 13 | prevEl: ".swiper-button-prev", 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* === Google Font Import - Poppins === */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: 'Poppins', sans-serif; 9 | } 10 | 11 | body{ 12 | height: 100vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | background: #8c52ff; 17 | } 18 | 19 | section{ 20 | position: relative; 21 | height: 450px; 22 | width: 1075px; 23 | display: flex; 24 | align-items: center; 25 | } 26 | 27 | .swiper{ 28 | width: 950px; 29 | } 30 | 31 | .card{ 32 | position: relative; 33 | background: #fff; 34 | border-radius: 20px; 35 | height: 400px; 36 | margin: 20px 0; 37 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 38 | } 39 | 40 | .card::before{ 41 | content: ""; 42 | position: absolute; 43 | height: 40%; 44 | width: 100%; 45 | background: white; 46 | border-radius: 20px 20px 0 0; 47 | } 48 | 49 | .card .card-content{ 50 | display: flex; 51 | flex-direction: column; 52 | align-items: center; 53 | padding: 30px; 54 | position: relative; 55 | z-index: 100; 56 | } 57 | 58 | section .card .image{ 59 | height: 140px; 60 | width: 140px; 61 | border-radius: 20%; 62 | padding: 3px; 63 | background: #7d2ae8; 64 | margin-top: 30px; 65 | } 66 | 67 | section .card .image img{ 68 | height: 100%; 69 | width: 100%; 70 | object-fit: cover; 71 | border-radius: 20%; 72 | border: 3px solid #fff; 73 | } 74 | 75 | .card .media-icons{ 76 | position: absolute; 77 | top: 12px; 78 | right: 95px; 79 | display: flex; 80 | flex-direction: row; 81 | align-items: center; 82 | } 83 | 84 | .card .media-icons i{ 85 | color: #7d2ae8; 86 | opacity: 0.6; 87 | margin-top: 10px; 88 | transition: all 0.3s ease; 89 | cursor: pointer; 90 | margin: 10px; 91 | } 92 | 93 | .card .media-icons i:hover{ 94 | opacity: 1; 95 | } 96 | 97 | .card .name-profession{ 98 | display: flex; 99 | flex-direction: column; 100 | align-items: center; 101 | margin-top: 20px; 102 | color: black; 103 | } 104 | 105 | .name-profession .name{ 106 | font-size: 20px; 107 | font-weight: 600; 108 | } 109 | 110 | .name-profession .profession{ 111 | font-size:15px; 112 | font-weight: 500; 113 | } 114 | 115 | .card .rating{ 116 | display: flex; 117 | align-items: center; 118 | margin-top: 18px; 119 | } 120 | 121 | .card .rating i{ 122 | font-size: 18px; 123 | margin: 0 2px; 124 | color: #7d2ae8; 125 | } 126 | 127 | .card .button{ 128 | width: 100%; 129 | display: flex; 130 | justify-content: space-around; 131 | margin-top: 20px; 132 | } 133 | 134 | .card .button button{ 135 | background: #7d2ae8; 136 | outline: none; 137 | border: none; 138 | color: #fff; 139 | padding: 8px 22px; 140 | border-radius: 10px; 141 | font-size: 14px; 142 | transition: all 0.3s ease; 143 | cursor: pointer; 144 | } 145 | 146 | .button button:hover{ 147 | background: #6616d0; 148 | } 149 | 150 | .swiper-pagination{ 151 | position: absolute; 152 | top: 450px; 153 | } 154 | 155 | .swiper-pagination-bullet{ 156 | height: 7px; 157 | width: 26px; 158 | border-radius: 25px; 159 | background: white; 160 | } 161 | 162 | .swiper-button-next, .swiper-button-prev{ 163 | opacity: 0.7; 164 | color: white; 165 | transition: all 0.3s ease; 166 | } 167 | .swiper-button-next:hover, .swiper-button-prev:hover{ 168 | opacity: 1; 169 | color: white; 170 | } 171 | --------------------------------------------------------------------------------