├── .gitattributes ├── .gitignore ├── README.md ├── assets └── images │ ├── favicon-32x32.png │ ├── icon-frontend-mentor.svg │ ├── icon-github.svg │ ├── icon-invalid.svg │ ├── icon-linkedin.svg │ ├── icon-twitter.svg │ ├── image-profile-desktop.webp │ ├── image-profile-mobile.webp │ ├── image-profile-tablet.webp │ ├── pattern-circle.svg │ ├── pattern-rings.svg │ ├── thumbnail-project-1-large.webp │ ├── thumbnail-project-1-small.webp │ ├── thumbnail-project-2-large.webp │ ├── thumbnail-project-2-small.webp │ ├── thumbnail-project-3-large.webp │ ├── thumbnail-project-3-small.webp │ ├── thumbnail-project-4-large.webp │ ├── thumbnail-project-4-small.webp │ ├── thumbnail-project-5-large.webp │ ├── thumbnail-project-5-small.webp │ ├── thumbnail-project-6-large.webp │ └── thumbnail-project-6-small.webp ├── index.html └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | assets/fonts/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fem-single-page-developer-portfolio 2 | 3 | -------------------------------------------------------------------------------- /assets/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/favicon-32x32.png -------------------------------------------------------------------------------- /assets/images/icon-frontend-mentor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/icon-github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/icon-invalid.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /assets/images/icon-linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/image-profile-desktop.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/image-profile-desktop.webp -------------------------------------------------------------------------------- /assets/images/image-profile-mobile.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/image-profile-mobile.webp -------------------------------------------------------------------------------- /assets/images/image-profile-tablet.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/image-profile-tablet.webp -------------------------------------------------------------------------------- /assets/images/pattern-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/pattern-rings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/thumbnail-project-1-large.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-1-large.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-1-small.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-1-small.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-2-large.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-2-large.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-2-small.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-2-small.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-3-large.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-3-large.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-3-small.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-3-small.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-4-large.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-4-large.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-4-small.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-4-small.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-5-large.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-5-large.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-5-small.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-5-small.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-6-large.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-6-large.webp -------------------------------------------------------------------------------- /assets/images/thumbnail-project-6-small.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-page-developer-portfolio/19b83f49a43de613a8435f6dadb9e6c585dcaedf/assets/images/thumbnail-project-6-small.webp -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 18 | 19 | Frontend Mentor | Single-page developer portfolio 20 | 21 | 22 | 96 | 97 |

98 |

99 |

100 |

101 |

118 |

125 |

132 |

133 |

134 | Nice to
135 | meet you! I'm Adam Keyes. 136 |

137 |

138 | Based in the UK, I'm a front-end developer passionate about 139 | building accessible web apps that users love. 140 |

141 | Contact me 142 |

143 |

144 |

145 |

146 | 147 |

148 |

149 | 150 |

151 |

HTML

152 |

4 Years Experience

153 |

154 |

155 |

CSS

156 |

4 Years Experience

157 |

158 |

159 |

JavaScript

160 |

4 Years Experience

161 |

162 |

163 |

Accessibility

164 |

4 Years Experience

165 |

166 |

167 |

React

168 |

3 Years Experience

169 |

170 |

171 |

Sass

172 |

3 Years Experience

173 |

174 |

175 |

182 |

183 | 184 |

185 |

186 |

187 |

Projects

188 | Contact me 191 | 192 |

193 |

screenshot of design portfolio website

206 |

Design Portfolio

207 |

208 | HTML 209 | CSS 210 |

211 |

212 | View Project 213 | View Code 214 |

215 |

216 | 217 |

218 |

screenshot of learning platform website with different courses

231 |

E-Learning Landing Page

232 |

233 | HTML 234 | CSS 235 |

236 |

237 | View Project 238 | View Code 239 |

240 |

241 | 242 |

243 |

screenshot of To Do App showing a list of active and complete tasks

256 |

Todo Web App

257 |

258 | HTML 259 | CSS 260 | JavaScript 261 |

262 |

263 | View Project 264 | View Code 265 |

266 |

267 | 268 |

269 |

screenshot of video player app with grid of thumbnails of movies and TV shows

282 |

Entertainment Web App

283 |

284 | HTML 285 | CSS 286 | JavaScript 287 |

288 |

289 | View Project 290 | View Code 291 |

292 |

293 | 294 |

295 |

screenshot of 4-player memory game with circular tiles that have symbols

308 |

Memory Game

309 |

310 | HTML 311 | CSS 312 | JavaScript 313 |

314 |

315 | View Project 316 | View Code 317 |

318 |

319 | 320 |

321 |

grid of thumbnails of famous works of art

334 |

Art Gallery Showcase

335 |

336 | HTML 337 | CSS 338 | JavaScript 339 |

340 |

341 | View Project 342 | View Code 343 |

344 |

345 |

346 |

347 |

348 | 349 |

350 |

351 |

352 |

Contact

353 |

354 | I would love to hear about your project and how I could help. 355 | Please fill in the form, and I'll get back to you as soon as 356 | possible. 357 |

358 |

359 | 416 |

417 |

424 |

425 |

426 | 427 | 501 | 502 | 503 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL */ 2 | 3 | :root { 4 | --bg-body: hsl(0, 0%, 8%); 5 | --bg-body2: hsl(0, 0%, 14%); 6 | --accent: hsl(153, 71%, 59%); 7 | --text1: hsl(0, 0%, 100%); 8 | --text2: hsl(0, 0%, 85%); 9 | --invalid: hsl(7, 100%, 68%); 10 | --fs-18: 1.125rem; 11 | --fs-88: 5.5rem; 12 | --fs-72: 4.5rem; 13 | --fs-40: 2.5rem; 14 | --fs-48: 3rem; 15 | --fs-36: 2.25rem; 16 | --fs-32: 2rem; 17 | --fs-24: 1.5rem; 18 | --fs-20: 1.25rem; 19 | --container: 69.375rem; 20 | --transition: 250ms ease-in-out; 21 | } 22 | 23 | html, 24 | body { 25 | overflow-x: hidden; 26 | } 27 | 28 | html { 29 | box-sizing: border-box; 30 | font-size: 100%; 31 | } 32 | 33 | *, 34 | *::before, 35 | *::after { 36 | box-sizing: inherit; 37 | } 38 | 39 | body, 40 | input, 41 | textarea, 42 | button { 43 | font-family: 'Space Grotesk', sans-serif; 44 | } 45 | 46 | body { 47 | margin: 0; 48 | background-color: var(--bg-body); 49 | color: var(--text1); 50 | font-size: var(--fs-18); 51 | line-height: 1.56; 52 | padding-bottom: 25rem; 53 | } 54 | 55 | .bg-less-dark { 56 | background-color: var(--bg-body2); 57 | } 58 | 59 | h1, 60 | h2, 61 | h3, 62 | p { 63 | margin-block-start: 0; 64 | } 65 | 66 | h1, 67 | h2, 68 | h3 { 69 | line-height: 1; 70 | } 71 | 72 | .header-xl { 73 | font-size: 2.5rem; 74 | font-size: clamp(2.5rem, 0.7rem + 7.68vw, 5.5rem); 75 | letter-spacing: -0.028em; 76 | line-height: 1.1; 77 | } 78 | 79 | p { 80 | font-size: 1rem; 81 | font-size: clamp(1rem, 0.79rem + 0.89vw, 1.125rem); 82 | line-height: 1.5; 83 | color: var(--text2); 84 | } 85 | 86 | a { 87 | transition: color var(--transition); 88 | } 89 | 90 | a:focus-visible, 91 | input:focus-visible, 92 | textarea:focus-visible { 93 | outline: 2px dashed var(--accent); 94 | outline-offset: 2px; 95 | } 96 | 97 | input:invalid, 98 | textarea:invalid { 99 | outline-color: var(--invalid); 100 | } 101 | 102 | a.underline, 103 | button { 104 | display: inline-block; 105 | padding-bottom: 0.625rem; 106 | font-size: 1rem; 107 | line-height: 1.625; 108 | letter-spacing: 0.143em; 109 | font-weight: 700; 110 | text-transform: uppercase; 111 | color: var(--text1); 112 | text-decoration: none; 113 | background-image: linear-gradient( 114 | to right, 115 | var(--accent) 75%, 116 | var(--accent) 75% 117 | ); 118 | background-position: 0 2.1em; 119 | background-repeat: repeat-x; 120 | background-size: 8px 2px; 121 | } 122 | 123 | a:hover { 124 | color: var(--accent); 125 | } 126 | 127 | img, 128 | svg { 129 | display: block; 130 | } 131 | 132 | .visually-hidden { 133 | position: absolute; 134 | left: -10000px; 135 | top: auto; 136 | width: 1px; 137 | height: 1px; 138 | overflow: hidden; 139 | } 140 | 141 | .wrapper { 142 | width: calc(100% - 2rem); 143 | max-width: var(--container); 144 | margin-inline: auto; 145 | } 146 | 147 | /* 600px */ 148 | @media (min-width: 37.5em) { 149 | .wrapper { 150 | width: calc(100% - 3.75rem); 151 | } 152 | } 153 | 154 | /* UTILITY */ 155 | 156 | .bottom-border { 157 | border-bottom: 1px solid var(--text2); 158 | } 159 | 160 | /* HEADER */ 161 | 162 | .header { 163 | position: relative; 164 | z-index: 1; 165 | margin-block-start: 20px; 166 | } 167 | 168 | .header__nav { 169 | display: flex; 170 | flex-wrap: wrap; 171 | justify-content: center; 172 | text-align: center; 173 | gap: 20px 25px; 174 | } 175 | 176 | .header__home { 177 | font-size: 1.5rem; 178 | font-size: clamp(1.5rem, 1.02rem + 2.04vw, 2rem); 179 | line-height: 1; 180 | color: var(--text1); 181 | text-decoration: none; 182 | flex: 1 0 100%; 183 | } 184 | 185 | .header__social > svg > path { 186 | transition: fill var(--transition); 187 | } 188 | 189 | .header__social:hover > svg > path { 190 | fill: var(--accent); 191 | } 192 | 193 | @media (min-width: 37.5em) { 194 | .header { 195 | margin-block-start: 30px; 196 | /* margin-block-end: 90px; */ 197 | } 198 | 199 | .header__nav { 200 | justify-content: flex-start; 201 | align-items: center; 202 | text-align: left; 203 | gap: 32px; 204 | } 205 | 206 | .header__home { 207 | flex: 0 1 auto; 208 | margin-inline-end: auto; 209 | } 210 | } 211 | 212 | @media (min-width: 62.5em) { 213 | .header { 214 | margin-block-start: 40px; 215 | margin-block-end: 127px; 216 | } 217 | 218 | .header__nav { 219 | padding-right: 30px; 220 | } 221 | } 222 | 223 | /* HERO */ 224 | 225 | .hero__wrapper { 226 | padding-bottom: 80px; 227 | } 228 | 229 | .hero__image { 230 | position: absolute; 231 | top: 0; 232 | left: 50%; 233 | translate: -50%; 234 | width: 174px; 235 | height: auto; 236 | } 237 | 238 | .hero__rings { 239 | position: absolute; 240 | right: 50%; 241 | top: 130px; 242 | /* 8.125rem; */ 243 | z-index: -1; 244 | /* width: 33.125rem; */ 245 | height: auto; 246 | } 247 | 248 | .hero__circle { 249 | position: relative; 250 | top: 171px; 251 | margin-bottom: -129px; 252 | translate: calc(100vw - 64px - 16px); 253 | } 254 | 255 | .hero__text { 256 | position: relative; 257 | text-align: center; 258 | margin-block-start: 335px; 259 | } 260 | 261 | .hero__headline { 262 | margin-block-end: 24px; 263 | } 264 | 265 | .hero__headline > br { 266 | display: none; 267 | } 268 | 269 | h1 > span { 270 | background-image: linear-gradient( 271 | to right, 272 | var(--accent) 75%, 273 | var(--accent) 75% 274 | ); 275 | background-position: 0 1.18em; 276 | background-repeat: repeat-x; 277 | background-size: 8px 4px; 278 | } 279 | 280 | .hero__description { 281 | margin-block-end: 24px; 282 | } 283 | 284 | @media (min-width: 37.5em) { 285 | .hero { 286 | position: relative; 287 | margin-block-start: -62px; 288 | } 289 | 290 | .hero__wrapper { 291 | padding-bottom: 60px; 292 | } 293 | 294 | .hero__content { 295 | display: flex; 296 | align-items: center; 297 | } 298 | 299 | .hero__content picture { 300 | order: 2; 301 | } 302 | 303 | .hero__image { 304 | position: relative; 305 | width: 42vw; 306 | max-width: 445px; 307 | /* width: 322px; */ 308 | height: auto; 309 | left: auto; 310 | right: 0; 311 | translate: 0; 312 | } 313 | 314 | .hero__rings { 315 | top: 90px; 316 | right: auto; 317 | left: 0; 318 | translate: -50%; 319 | } 320 | 321 | .hero__circle { 322 | position: absolute; 323 | top: auto; 324 | right: 0; 325 | bottom: 190px; 326 | translate: 50%; 327 | z-index: 1; 328 | } 329 | 330 | .hero__text { 331 | /* width: 62vw; */ 332 | margin-block-start: 90px; 333 | margin-right: -30px; 334 | flex: 1 0 58vw; 335 | text-align: left; 336 | z-index: 1; 337 | } 338 | 339 | .hero__headline { 340 | margin-block-end: 60px; 341 | } 342 | 343 | .hero__headline > br { 344 | display: inline-block; 345 | } 346 | 347 | .hero__description { 348 | /* width: 70%; */ 349 | margin-block-end: 34px; 350 | } 351 | } 352 | 353 | @media (min-width: 62.5em) { 354 | .hero { 355 | margin-block-start: 0px; 356 | } 357 | 358 | .hero__wrapper { 359 | position: relative; 360 | padding-bottom: 100px; 361 | } 362 | 363 | .hero__content { 364 | align-items: flex-start; 365 | } 366 | 367 | .hero__content picture { 368 | margin-left: -80px; 369 | } 370 | 371 | .hero__image { 372 | margin-block-start: -199px; 373 | } 374 | 375 | .hero__rings { 376 | top: 0px; 377 | translate: -50% -50%; 378 | } 379 | 380 | .hero__circle { 381 | top: 322px; 382 | right: 445px; 383 | } 384 | 385 | .hero__text { 386 | margin-block-start: 0; 387 | margin-right: 0; 388 | flex: 1; 389 | } 390 | 391 | .hero__headline { 392 | margin-block-end: 43px; 393 | } 394 | 395 | .hero__headline > br { 396 | display: none; 397 | } 398 | 399 | .hero__description { 400 | width: 38ch; 401 | margin-block-end: 66px; 402 | } 403 | } 404 | 405 | /* SKILLS */ 406 | 407 | .skills { 408 | position: relative; 409 | } 410 | 411 | .skills__wrapper { 412 | display: grid; 413 | grid-template-columns: 1fr; 414 | gap: 24px; 415 | padding-block: 40px; 416 | } 417 | 418 | .skills__item { 419 | text-align: center; 420 | } 421 | 422 | .skills__title { 423 | font-size: 2rem; 424 | font-size: clamp(2rem, 0.33rem + 7.11vw, 3rem); 425 | line-height: 1.17; 426 | margin-block-end: 2px; 427 | } 428 | 429 | .skills__description { 430 | margin-block-end: 0; 431 | } 432 | 433 | .skills__rings { 434 | position: absolute; 435 | bottom: 0; 436 | left: 50%; 437 | translate: 0 50%; 438 | } 439 | 440 | @media (min-width: 37.5em) { 441 | .skills__wrapper { 442 | grid-template-columns: repeat(2, 1fr); 443 | gap: 52px 24px; 444 | border: none; 445 | padding-block: 52px 0; 446 | } 447 | 448 | .skills__item { 449 | text-align: left; 450 | } 451 | 452 | .skills__rings { 453 | translate: 40% 50%; 454 | } 455 | } 456 | 457 | @media (min-width: 62.5em) { 458 | .skills__wrapper { 459 | grid-template-columns: repeat(3, 1fr); 460 | gap: 58px 30px; 461 | padding-block-start: 72px; 462 | } 463 | 464 | .skills__rings { 465 | translate: -40% 50%; 466 | left: 100%; 467 | } 468 | } 469 | 470 | /* PROJECTS */ 471 | 472 | .projects__wrapper { 473 | padding-block: 140px; 474 | } 475 | 476 | .projects__grid { 477 | display: grid; 478 | grid-template-columns: repeat(2, 1fr); 479 | gap: 40px; 480 | justify-items: center; 481 | text-align: center; 482 | } 483 | 484 | .projects__headline { 485 | grid-column: 1 / span 2; 486 | margin-block-end: 0; 487 | } 488 | 489 | .projects__contact { 490 | grid-column: 1 / span 2; 491 | } 492 | 493 | .projects__item { 494 | grid-column: 1 / span 2; 495 | } 496 | 497 | .projects__picture { 498 | display: block; 499 | margin-block-end: 20px; 500 | } 501 | 502 | .projects__image { 503 | width: 100%; 504 | height: auto; 505 | } 506 | 507 | .projects__name { 508 | font-size: 1.5rem; 509 | line-height: 1.3; 510 | font-weight: 700; 511 | text-transform: uppercase; 512 | margin-block-end: 7px; 513 | } 514 | 515 | .projects__tags { 516 | display: flex; 517 | justify-content: center; 518 | gap: 12px; 519 | margin-block-end: 20px; 520 | text-transform: uppercase; 521 | } 522 | 523 | .projects__links { 524 | display: flex; 525 | flex-direction: column; 526 | align-items: center; 527 | gap: 20px; 528 | } 529 | 530 | @media (min-width: 37.5em) { 531 | .projects__grid { 532 | gap: 60px 24px; 533 | justify-items: start; 534 | text-align: left; 535 | } 536 | 537 | .projects__contact { 538 | justify-self: end; 539 | } 540 | 541 | .projects__item { 542 | grid-column: span 1; 543 | } 544 | 545 | .projects__headline, 546 | .projects__contact { 547 | grid-column: span 1; 548 | } 549 | 550 | .projects__contact { 551 | align-self: center; 552 | } 553 | 554 | .projects__tags, 555 | .projects__links { 556 | display: block; 557 | } 558 | 559 | .projects__tags span { 560 | margin-inline-end: 18px; 561 | } 562 | 563 | .projects__links a { 564 | margin-inline-end: 30px; 565 | } 566 | 567 | .project__links { 568 | display: block; 569 | } 570 | } 571 | 572 | @media (min-width: 62.5em) { 573 | .projects__grid { 574 | gap: 70px 30px; 575 | } 576 | 577 | .projects__item { 578 | display: grid; 579 | grid-template-columns: 1fr; 580 | grid-template-rows: repeat(4, auto); 581 | } 582 | 583 | .projects__picture { 584 | position: relative; 585 | grid-column: 1 / 2; 586 | grid-row: 1 / 2; 587 | } 588 | 589 | .projects__picture::after { 590 | content: ''; 591 | position: absolute; 592 | width: 100%; 593 | height: 100%; 594 | top: 0; 595 | background-color: hsl(0, 0%, 0%); 596 | opacity: 0; 597 | transition: opacity 150ms ease-in-out; 598 | } 599 | 600 | .projects__item:hover .projects__picture::after { 601 | opacity: 0.5; 602 | } 603 | 604 | .projects__item:hover .projects__links { 605 | opacity: 1; 606 | } 607 | .projects__item:focus-within .projects__links { 608 | opacity: 1; 609 | } 610 | 611 | .projects__item:focus-within .projects__picture::after { 612 | opacity: 0.5; 613 | } 614 | 615 | .projects__image { 616 | width: 100%; 617 | height: auto; 618 | } 619 | 620 | .projects__links { 621 | grid-column: 1 / 2; 622 | grid-row: 1 / 2; 623 | justify-self: center; 624 | align-self: center; 625 | z-index: 1; 626 | opacity: 0; 627 | transition: opacity 400ms ease-in-out; 628 | } 629 | 630 | .projects__links:hover ~ .projects__picture::after { 631 | opacity: 0.5; 632 | } 633 | 634 | .projects__tags { 635 | margin-block-end: 0; 636 | } 637 | } 638 | 639 | /* CONTACT */ 640 | 641 | .contact { 642 | position: relative; 643 | } 644 | 645 | .contact__wrapper { 646 | padding-block: 84px; 647 | } 648 | 649 | .contact__headline { 650 | margin-block-end: var(--fs-20); 651 | } 652 | 653 | .contact__control { 654 | position: relative; 655 | margin-block-end: 16px; 656 | } 657 | 658 | .contact__control input, 659 | .contact__control textarea { 660 | width: 100%; 661 | padding-block: 16px; 662 | padding-inline: 24px; 663 | border: none; 664 | border-bottom: 1px solid var(--text1); 665 | background: transparent; 666 | font-size: 1rem; 667 | line-height: 1.625; 668 | color: var(--text1); 669 | } 670 | 671 | .contact__control > *::placeholder { 672 | color: var(--text1); 673 | opacity: 0.5; 674 | text-transform: uppercase; 675 | } 676 | 677 | .contact__control textarea { 678 | margin-block-end: 32px; 679 | } 680 | 681 | .contact__control.align-right { 682 | display: flex; 683 | justify-content: flex-end; 684 | } 685 | 686 | .contact__control button { 687 | background-color: transparent; 688 | border: none; 689 | } 690 | 691 | .contact__invalid-icon { 692 | display: none; 693 | width: var(--fs-24); 694 | height: var(--fs-24); 695 | position: absolute; 696 | top: 50%; 697 | right: 0; 698 | translate: -50% -50%; 699 | } 700 | 701 | .contact input:focus-visible:invalid ~ .contact__invalid-icon, 702 | .contact textarea:focus-visible:invalid ~ .contact__invalid-icon { 703 | display: inline-block; 704 | } 705 | 706 | .contact textarea:focus-visible:invalid ~ .contact__invalid-icon { 707 | top: 1.2rem; 708 | right: 1.5rem; 709 | translate: none; 710 | } 711 | 712 | .contact__rings { 713 | position: absolute; 714 | left: 0; 715 | bottom: 97px; 716 | translate: -75%; 717 | } 718 | 719 | @media (min-width: 37.5em) { 720 | .contact__rings { 721 | bottom: 47px; 722 | translate: -75%; 723 | } 724 | } 725 | 726 | @media (min-width: 62.5em) { 727 | .contact__wrapper { 728 | display: grid; 729 | grid-template-columns: repeat(2, 27.8rem); 730 | justify-content: space-between; 731 | } 732 | 733 | .contact__headline { 734 | margin-block-end: var(--fs-36); 735 | } 736 | 737 | .contact__rings { 738 | translate: -40%; 739 | } 740 | } 741 | 742 | /* 999.98px */ 743 | @media (max-width: 62.49875em) { 744 | .contact__wrapper { 745 | max-width: 27.8rem; 746 | } 747 | 748 | .contact__text { 749 | text-align: center; 750 | } 751 | } 752 | 753 | footer { 754 | padding-block: 40px 60px; 755 | } 756 | 757 | @media (min-width: 37.5em) { 758 | footer { 759 | padding-block: 30px 40px; 760 | } 761 | } 762 | 763 | @media (min-width: 62.5em) { 764 | footer { 765 | padding-block: 47px 92px; 766 | } 767 | } 768 | --------------------------------------------------------------------------------