https://github.com/dev-junehee/toss

'토스(toss)' 메인 홈페이지 클론 코딩
https://github.com/dev-junehee/toss

Last synced: 20 days ago
JSON representation

'토스(toss)' 메인 홈페이지 클론 코딩

• Host: GitHub
• URL: https://github.com/dev-junehee/toss
• Owner: dev-junehee
• Created: 2023-05-07T10:49:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-05-07T11:07:48.000Z (over 1 year ago)
• Last Synced: 2024-11-10T08:25:42.247Z (3 months ago)
• Language: HTML
• Homepage:
• Size: 3.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 토스(toss) 메인 홈페이지 클론 코딩

[토스 메인 홈페이지](https://toss.im/)를 클론 코딩하였습니다.




## 프로젝트 소개

> 패스트캠퍼스 프론트엔드 개발 부트캠프 5기


> 개발 기간 : 2023. 03. 28 ~ 2023. 04. 05


> 배포 주소 : [DEMO](https://toss-web-clone.netlify.app/)





## 사용한 기술 스택





















## 작업 내용

- 상단 헤더 내 메인 메뉴 hover 효과

- 마우스 아래로 스크롤 시, 상단 헤더 border-bottom 생성

- 메인 페이지 배경 이미지 상단 gradient 효과

- 메인 페이지 하단 버튼 floating 효과 및 특정 위치 연결

- 각 섹션별 스크롤 애니메이션 구현 (delay 사용하여 시간차 효과)

- 대부분의 링크는 실제 페이지로 연결되도록 함





## 아쉬운 점

- 메인 페이지 하단 버튼 클릭 시, 이동하는 위치가 뷰포트(모니터?) 크기에 따라 변경되는 점

- 메인 페이지 내 어플리케이션 버튼 정렬이 틀어진 점

- 스크롤 위치에 따라 이미지 opacity 값을 조절하지 못한 점

- BEM 방법론 사용하지 못한 점

- 토스 전용 폰트를 사용하지 못한 점