📸 풀페이지 미리보기 (PC · 모바일)

1. index.html — 메인

2. services.html — 서비스

3. portfolio.html — 포트폴리오 그리드

4. case-study.html — 케이스 스터디

5. about.html — 스튜디오 소개

6. contact.html — 문의 폼

7. 404.html — 에러 페이지

Studio Norm — 에디토리얼 스타일 크리에이티브 에이전시 템플릿

크리에이티브 에이전시, 디자인 스튜디오, 프리랜서 디자이너를 위한 에디토리얼 스타일 HTML 템플릿. 크림 배경에 네온 라임 액센트, Playfair Display × Inter 타이포그래피로 작품 자체가 주인공이 되도록 설계했습니다.

구성된 페이지 (7종)

• index.html — Hero · 서비스 목록 · 작품 미리보기 · 통계 · 프로세스 · CTA
• services.html — 6개 서비스 블록 (가격 + 작업 기간 명시)
• portfolio.html — 매거진 스타일 포트폴리오 그리드 (9개 작품)
• case-study.html — 완전한 케이스 스터디 레이아웃 (브리프 · 작업 · 결과)
• about.html — 스튜디오 소개 · 팀 그리드 (8명) · 수상 이력
• contact.html — 프로젝트 브리프 폼 (서비스 + 예산 선택)
• 404.html — 에러 페이지

핵심 특징

• 에디토리얼 디자인 — Playfair Display(serif) × Inter(sans) 페어링. 큰 헤딩 + 정제된 본문
• 네온 라임 액센트 — #e0fe10 한 가지 색만 사용. 강한 대비 + 절제된 임팩트
• 0-radius 스타일 — 모서리 없는 디자인. 에이전시 트렌드
• 마퀴 텍스트 애니메이션 — Hero 하단 끝없이 흐르는 서비스 라인업
• 매거진 그리드 — Bootstrap 12-col 기반의 비정형 포트폴리오 (full / lg / md / half)
• 다크 섹션 + 그라데이션 카드 — 작품 영역에 색감 대비
• 완전 반응형 — 모바일 / 태블릿 / 데스크탑 픽셀 단위 조정

사용 기술

• Bootstrap 5.3 (CDN)
• Bootstrap Icons 1.11
• Playfair Display + Inter (Google Fonts)
• Pure CSS Variables (전처리기 불필요)
• Vanilla JS (jQuery 의존 X)

이런 분께 추천

• 크리에이티브 에이전시, 디자인 스튜디오 자체 사이트 빠르게 런칭하려는 분
• 프리랜서 디자이너 · 일러스트레이터 · 사진작가 포트폴리오
• 브랜드 컨설팅 · 전략 컨설팅 회사
• 편집 디자인 · 아트 디렉션 분야 종사자
• 모던 미니멀이 아닌 에디토리얼 + 보이드 스타일을 선호하는 분

커스터마이즈 가이드

assets/css/style.css 최상단 :root에서:

--sn-bg: #f8f5f2;       /* 배경 */
--sn-text: #1a1a1a;     /* 본문 텍스트 */
--sn-accent: #e0fe10;   /* 네온 액센트 */

라이선스

단일 도메인 라이선스 — 1개 도메인/프로덕트에 무제한 사용. 재판매 · 재배포 · 템플릿 마켓플레이스 등록은 불가합니다.

지원

구매 후 12개월 업데이트 · 기술 지원 무료 제공.