> 웹 프론트엔드 > CSS 튜토리얼 > 프론트엔드 챌린지 Glam Up My Markup: 레크리에이션

프론트엔드 챌린지 Glam Up My Markup: 레크리에이션

WBOY
풀어 주다: 2024-08-05 17:23:35
원래의
1119명이 탐색했습니다.

Frontend Challenge v24.07.24, Glam Up My Markup: Recreation에 대한 제출물입니다

내가 만든 것

잠깐의 휴식을 취한 후 이 챌린지를 위해 돌아왔습니다. 전제가 정말 마음에 들었고 부드럽고 역동적인 디자인을 만들려고 노력했습니다. 결국 이것은 스포츠 페이지입니다. 내가 원했던 것만큼 반응이 빠르고 접근하기 쉽지는 않지만, 이것이 현재의 시간 제약과 우리나라의 모든 어려운 상황에서 내가 할 수 있는 최선입니다.

물론 항상 챌린지 규칙을 지키려고 노력하지만 이번에는 애니메이션에 총력을 기울였는데, 그게 바로 이 쇼의 주인공, 특히 스크롤 애니메이션입니다.

데모

이 데모에서는 항상 전체 페이지 보기, 특히 새 탭에서 볼 것을 권장하며(제발) 데스크톱(최고의 경험)과 모바일(가장 일반적인 방식)에서도 작동합니다.

여행

몇 가지 건전한 원칙, 특히 앞서 언급한 스크롤 애니메이션을 사용하면 코드를 계속 개선할 수 있습니다. 코드에서 많은 논리를 반복했지만 최대한 깨끗하고 명확하게 유지하기 위해 최선을 다했습니다. 이번 출품작의 디자인 과정은 제가 가장 좋아하는 부분이었습니다. 좋은 색 구성표를 선택하는 것이 쉽지 않았지만 빨간색, 회색, 크림색 조합에 도달하게 되어 기쁘고 보기에도 예쁘다고 느끼셨으면 좋겠습니다.

The Frontend Challenge  Glam Up My Markup: Recreation

Commons Creative License에 대한 새로운 지식 덕분에 "실제" 크리켓 이미지를 찾는 것이 쉬웠고, 최근 DEV 게시물에서 발견한 도구에서 좋은 아이콘을 몇 개 발견했습니다. (이 게시물에서 출처를 밝히도록 하겠습니다.) 댓글에서). 하지만 일정 섹션의 크리켓 공 패턴과 물론 이 게시물의 표지 이미지와 같은 에셋도 만들었습니다.

The Frontend Challenge  Glam Up My Markup: Recreation

이것이 전부입니다. 챌린지에 참여하신다면, 저와 마찬가지로 여러분의 작업에서도 만족감을 느끼실 수 있기를 바랍니다. 그렇지 않다면 아마도 다가오는 도전이 당신의 빛을 발할 시간이 될 것입니다.

그리고 언제나처럼 피드백이 있으면 댓글을 쓰거나 DM을 보내주세요. 영어는 제 2외국어인데 잘 대해주세요 ❣️ 지금까지 읽어주셔서 감사하고 다음 시간까지 안녕!

위 내용은 프론트엔드 챌린지 Glam Up My Markup: 레크리에이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿