← 랜딩 초안 만들기
남은 만들기 3회
이하늘 · 콘텐츠 기획
콘텐츠 기획자 명함 페이지. 링크 몇 개랑 연락처만 있으면 돼. · 예시
고칠 곳을 말해 주세요
이 초안, 실제로 만들까요?
연락처를 남기면 스튜디오 온가 완성까지 도와드립니다.
파일 1개 · 2.2KB · JS 0건 · 외부 요청 0건
· 정화 결과 이상 없음
코드
HTML 한 장입니다. 그대로 올리면 바로 동작합니다. 자바스크립트도 외부 자원도 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>이하늘 · 콘텐츠 기획</title>
<style>
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
:root{--ink:#f4f5f7;--ink2:#a2a9b8;--line:#2a2f3a;--accent:#7fd6b5;--bg:#14161b}
body{background:var(--bg);color:var(--ink);min-height:100vh;display:grid;place-items:center;padding:32px 20px}
.card{width:100%;max-width:420px}
.badge{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
background:linear-gradient(140deg,var(--accent),#4f9c86);color:#0e1116;
font-weight:800;font-size:1.4rem;letter-spacing:-.02em}
h1{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;margin:22px 0 4px}
.role{color:var(--accent);font-size:.92rem;font-weight:650}
.bio{color:var(--ink2);font-size:.95rem;margin-top:16px}
.links{margin-top:28px;display:grid;gap:8px}
.link{display:flex;align-items:center;justify-content:space-between;min-height:54px;
padding:0 20px;border:1px solid var(--line);border-radius:14px;color:var(--ink);
font-size:.95rem;font-weight:600;background:#191c23}
.link span{color:var(--ink2);font-size:.85rem;font-weight:500}
.meta{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
color:var(--ink2);font-size:.82rem;display:grid;gap:6px}
</style>
</head>
<body>
<div class="card">
<div class="badge">이하</div>
<h1>이하늘</h1>
<p class="role">콘텐츠 기획 · 뉴스레터</p>
<p class="bio">읽히는 글의 구조를 만듭니다.
브랜드가 하고 싶은 말과 사람들이 듣고 싶은 말 사이를 좁히는 일을 합니다.</p>
<div class="links">
<a class="link" href="#">지금까지 만든 것 <span>포트폴리오</span></a>
<a class="link" href="#">매주 목요일 뉴스레터 <span>구독 3,200명</span></a>
<a class="link" href="#">글 모음 <span>브런치</span></a>
<a class="link" href="#">함께 일하기 <span>문의</span></a>
</div>
<div class="meta">
<div>haneul@example.com</div>
<div>서울 · 원격 협업 가능</div>
</div>
</div>
</body>
</html>
스튜디오 온이 만든 도구입니다.