[CSS] 왓츠앱 디자인 패턴 복제하기(WhatsApp Design Clone) Side Project

📳

Click! 👉 https://dasolpark.github.io/Dasol_CSS_WhatsApp_Clone/

Chats

Github👉https://github.com/DasolPark/Dasol_CSS_WhatsApp_Clone

DasolPark/Dasol_CSS_WhatsApp_Clone

해외에서 많이 사용하는 메신저앱 WhatsApp의 디자인 패턴을 HTML과 CSS를 이용해 복제해 보았습니다.

📳모바일이나 💻데스크톱 등 어떤 브라우저에서도 디자인이 무너지지 않도록, 반응형 CSS를 적용하였으며,
JavaScript를 이용해 현재 시간 띄우기, 전화 목록 지우기, 채팅 메세지 등록을 간단히 구현해 보았습니다.

해당 프로젝트는 width:375, height:638 크기에 최적화되어 있습니다.

좌측 Status, 우측 Calls Page

좌측 Calls - Edit 기능, 우측 Calls - New Call Page

좌측 Chats, 우측 Chats - Chat Page

Settings Page