kyeongmin
beb5fd0c61
- 10단계 변환 프로세스 (PROCESS.md) - 수학 공식 레퍼런스 (MATH.md, gradient_math.py) - CSS 보정 규칙 R1~R16 (RULES.md) - 작업 규율 7개 규칙 (PROCESS-CONTROL.md) - 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/) - 8개 Jinja2 템플릿 staging (templates_staging/) - 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md) - 사용법 가이드 (README.md) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
106 lines
2.8 KiB
HTML
106 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>BIM 미래 선언 (Frame 1171281207)</title>
|
||
<!--
|
||
============================================================
|
||
Figma → HTML 1:1 변환
|
||
원본: 3547 × 163 px (node 51:170, Frame 1171281207)
|
||
Scale: × 0.36088 → 1280 × 58.8 px
|
||
|
||
패턴: statement-pill-highlight
|
||
단일 메시지 + 일부 span highlighted + pill 배경 PNG
|
||
============================================================
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
background: #e8ecf0;
|
||
display: flex; justify-content: center; align-items: center;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
.slide {
|
||
width: 1280px; height: 720px;
|
||
background: #ffffff;
|
||
position: relative;
|
||
display: flex; justify-content: center; align-items: center;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
|
||
}
|
||
|
||
.block {
|
||
width: 1280px;
|
||
height: 58.8px; /* 163 × 0.36088 */
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inner {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 3547px;
|
||
height: 163px;
|
||
transform: scale(0.360869);
|
||
transform-origin: top left;
|
||
}
|
||
|
||
/* 배경 pill (CSS gradient, border-radius 97 = 완전 캡슐)
|
||
원본 이미지 픽셀 분석:
|
||
x=5%: #3b3523, x=50%: #263a2a, x=95%: #113f31
|
||
수직: 균일 (수평 gradient만)
|
||
→ linear-gradient(90deg, ...)
|
||
원본에 미세한 네트워크 텍스처 패턴 있었으나 CSS gradient로 대체
|
||
*/
|
||
.banner-bg {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 3547px;
|
||
height: 163px;
|
||
border-radius: 97px;
|
||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||
}
|
||
|
||
/* 텍스트: center (1671.5, 78), font 80 Bold White, line-height 90 */
|
||
.banner-text {
|
||
position: absolute;
|
||
/* translate-x-1/2 translate-y-1/2 → top-left = (center - w/2, center - h/2) */
|
||
left: 205px; /* 1671.5 - 2933/2 = 205 */
|
||
top: 33px; /* 78 - 90/2 = 33 */
|
||
width: 2933px;
|
||
height: 90px;
|
||
font-weight: 700;
|
||
font-size: 80px;
|
||
line-height: 90px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
letter-spacing: -0.16px;
|
||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
|
||
white-space: nowrap;
|
||
word-break: keep-all;
|
||
}
|
||
.banner-text .highlight {
|
||
color: #fe3; /* highlighted span (yellow) */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
<div class="banner-bg"></div>
|
||
<div class="banner-text">수행과정 연속화와 관리체계 일원화된 형태의 <span class="highlight">전용ㆍ전문 S/W 개발</span> 없이는 미래가 없다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|