DSDesignSkill
|

/템플릿/웹이즈 클라이밍 — 실내 클라이밍짐 스플릿 랜딩

새 창 ↗

컨테이너 폭 그대로 · sandbox 미리보기

설명

좌우 2분할을 아홉 번 반복해 스크롤 리듬을 만든 실내 클라이밍짐 템플릿입니다. 한쪽은 코럴·딥 그라디언트 컬러블록, 다른 쪽은 콘텐츠로 두고 둘 사이 경계를 clip-path 대각선으로 잘라 벽에 붙는 각도를 그대로 레이아웃에 옮겼습니다. 컬러블록에는 45도 사선 테이프 패턴을 깔아 홀드 테이핑의 질감을 냈고, 좌우 분할이 무너지는 모바일에서는 대각이 하단 사선으로 전환되어 아키타입이 끊기지 않습니다. 제목은 Black Han Sans의 굵은 획을 그대로 살려 자간을 조이고, 본문은 Noto Sans KR로 행간 1.85를 확보해 강한 헤드라인과 읽히는 본문의 대비를 만들었습니다. 화이트부터 블랙까지 여섯 단계 색테이프 시스템은 컬러 칩 그리드와 상세 표 두 형식으로 겹쳐 보여 주고, 시간대별 혼잡도는 막대 게이지로, 첫 방문 절차는 번호 블록 타임라인으로, FAQ는 무자바스크립트 details 아코디언으로 처리해 섹션마다 형식을 바꿨습니다. 사진 자리는 전부 로즈 계열 그라디언트 플레이스홀더라 실사 교체가 그대로 들어맞습니다.

섹션 구성

  1. 01헤더 (스티키)
  2. 02히어로 — 좌 콘텐츠 / 우 코럴 컬러블록, 대각 경계
  3. 03지표 밴드 — 상하 대각 딥 컬러
  4. 04시설 소개 — 좌 컬러블록 / 우 4존 그리드 (반전 분할)
  5. 05난이도 루트 — 6단계 색테이프 칩 + 상세 표
  6. 06강습 프로그램 — 좌 4개 클래스 / 우 컬러블록 인용
  7. 07시간대별 혼잡도 — 막대 게이지 + 운영시간
  8. 08요금 — 3플랜 카드 + 대여·부가 표
  9. 09첫 방문 4단계 — 좌 컬러블록 / 우 번호 타임라인
  10. 10갤러리 — 어긋난 그라디언트 그리드 7컷
  11. 11회원 후기 3인
  12. 12CTA 밴드 — 상하 대각
  13. 13FAQ 아코디언 6문항
  14. 14오시는 길 — 좌 안내 / 우 지도 자리
  15. 15체험 예약 폼 — 좌 컬러블록 / 우 폼
  16. 16푸터

변경 이력

v1.0.02026-07-31

최초 등록

v1.0.12026-07-30

그라디언트 플레이스홀더 17곳을 실사 사진으로 교체 — 완성도 보정