뉴욕 레크리에이션 크리켓 리그 웹사이트 프로젝트

Frontend Challenge v24.07.24, CSS Art: Recreation에 대한 제출물입니다.

영감

뉴욕 레크리에이션 크리켓 리그의 웹사이트를 만드는 것은 웹 개발에 대한 나의 열정과 레크리에이션 스포츠의 활기찬 정신을 결합할 수 있는 환상적인 기회였습니다. 저는 크리켓에 대한 커뮤니티와 열정을 반영하는 활기차고 매력적인 온라인 사이트를 만드는 것을 목표로 삼았습니다.

데모

실시간 사이트 https://vickyfyn3.github.io/new-york/를 보실 수 있습니다. 다음은 웹사이트의 다양한 섹션을 보여주는 스크린샷입니다.

홈 페이지

섹션 소개

서비스 섹션

연락처 섹션

여행

뉴욕 레크리에이션 크리켓 리그 웹사이트를 구축하는 과정에는 몇 가지 주요 단계와 학습 경험이 포함되었습니다.

기획 및 설계

저는 웹사이트의 핵심 섹션인 홈, 정보, 서비스 및 문의처에 대한 개요를 설명하는 것으로 시작했습니다. 내 목표는 사이트가 사용자 친화적이고 시각적으로 매력적이며 리그의 역동적인 성격과 조화를 이루도록 하는 것이었습니다. 아이콘에는 Font Awesome을 사용하고 사용자 경험을 향상시키는 반응형 탐색 모음을 디자인했습니다.

Flexbox로 빌드하기

정보 섹션에는 Flexbox를 구현하여 카드를 일렬로 표시하여 디자인을 더욱 응집력 있고 매력적으로 만들었습니다. 이 접근 방식을 통해 다양한 화면 크기에 잘 적응하는 반응형 레이아웃이 가능해졌습니다.

테마 및 스타일링

색상 구성과 디자인 요소의 일관성을 유지하는 것이 중요했습니다. 나는 크리켓 리그의 활기차고 환영받는 환경을 반영하는 색상과 스타일을 신중하게 선택했습니다. 또한 fa-dumbbell Font Awesome 아이콘을 사용하여 서비스 섹션에서 크리켓 훈련을 창의적으로 표현했습니다.

연락처 섹션 개선

연락처 섹션을 돋보이게 하기 위해 이름, 이메일, 제목 및 메시지 필드가 포함된 세련된 연락처 양식을 디자인했습니다. 현대적인 느낌을 주기 위해 그라데이션 배경의 굵은 제출 버튼을 사용했습니다. 또한, 뚜렷한 배경의 카드 레이아웃에 연락처 정보를 포함하고 쉽게 위치에 액세스할 수 있도록 대화형 지도를 삽입했습니다.

과제와 솔루션

도전 과제 중 하나는 스크롤하는 동안 탐색 메뉴가 고정된 상태로 유지되도록 하는 것이었습니다. 저는 CSS 속성을 사용하여 이를 달성했습니다.

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

추가로 탐색바 아래 콘텐츠가 숨겨지지 않도록 조정했습니다.

.content {
    margin-top: 60px; /* Adjust based on the height of your navbar */
}

향후 계획

앞으로 더 많은 대화형 기능을 추가하고 웹사이트 성능을 더욱 최적화할 계획입니다. 또한 크리켓 리그 커뮤니티로부터 피드백을 수집하여 지속적으로 사이트를 개선하고 싶습니다.

위 내용은 뉴욕 레크리에이션 크리켓 리그 웹사이트 프로젝트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!