Glam Up My Markup: 동지

프런트엔드 챌린지 - 12월 에디션, Glam Up My Markup: Winter Solstice

내가 만든 것

동지에 대한 대화형 반응형 랜딩 페이지를 만들었습니다.

데모

코드 살펴보기

실시간으로 보기

여행

1단계: 탐색 메뉴 및 바닥글 스타일 지정

전체 페이지에는 CSS 그리드를 사용하고 탐색 모음에 링크를 배치하려면 CSS Flexbox를 사용했습니다. 마지막으로 작은 화면에 표시될 때 탐색 링크를 쌓기 위해 미디어 쿼리를 사용했습니다.

페이지를 반응형으로 만드는 데 있어 이 뷰포트 메타 태그의 중요성을 배우는 것은 흥미로웠습니다

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2단계: 탭 간 전환

두 번째 단계에서는 JavaScript를 사용하여 클릭/활성화된 탐색 링크에 따라 각 섹션의 표시를 전환하는 작업이 포함되었습니다. 이는 서로 다른 페이지 사이를 탐색하는 상호작용성을 제공합니다

3단계: 더욱 아름답게 만들기

마지막 단계에서는 각 섹션에 다양한 배경 이미지를 할당하여 더욱 재미있게 만들었습니다

속성

• Unsplash에 있는 Fabrice Villard의 나무 사진
• 눈싸움 이미지 제공: freepik
• 겨울 사람들 이미지 제공: freepik
• freepik의 가상 현실 이미지
• 여자 에스키모와 개 이미지 제공: freepix
• 겨울 에스키모 이미지 제공: freepix

위 내용은 Glam Up My Markup: 동지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!