|
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>DHS1 — 깔끔한 회사 홈페이지</title> <!-- 폰트 (Noto Sans KR) --> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap" rel="stylesheet"> <style> :root{ --bg:#ffffff; --text:#0f1720; --muted:#6b7280; --accent:#356DF0; /* 포인트 컬러 */ --accent-2:#22A699; --max-width:1100px; --radius:12px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:"Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.6; } /* 컨테이너 */ .container{ max-width:var(--max-width); margin:0 auto; padding:0 24px; } /* 헤더 (기존 헤더 유지 시 이부분은 사용자가 병합) */ header.site-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; } .logo{ font-weight:700; font-size:1.1rem; letter-spacing:0.6px; } nav.site-nav a{ color:var(--muted); text-decoration:none; margin-left:18px; font-size:0.95rem; } nav.site-nav a.cta{ color:white; background:var(--accent); padding:9px 14px; border-radius:8px; margin-left:18px; box-shadow:0 6px 18px rgba(53,109,240,0.12); } /* 히어로 */ .hero{ display:grid; grid-template-columns:1fr 460px; gap:32px; align-items:center; padding:64px 0; } .hero .hero-text h1{ margin:0 0 12px 0; font-size:2.1rem; line-height:1.05; letter-spacing:-0.02em; } .hero .hero-text p.lead{ margin:0 0 20px 0; color:var(--muted); font-size:1.05rem; } .hero .actions{ display:flex; gap:12px; align-items:center; } .btn{ display:inline-block; padding:11px 16px; border-radius:10px; text-decoration:none; font-weight:600; font-size:0.95rem; } .btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:white; box-shadow:0 10px 30px rgba(34,103,255,0.12); border:none; } .btn.ghost{ background:transparent; border:1px solid rgba(16,24,40,0.06); color:var(--text); } /* 카드(요약 서비스) */ .features{ margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .card{ background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.6)); border-radius:14px; padding:18px; box-shadow:0 8px 24px rgba(16,24,40,0.06); min-height:100px; } .card h4{margin:0 0 6px 0} .card p{margin:0;color:var(--muted);font-size:0.95rem} /* 인라인 SVG 래퍼 (히어로 오른쪽) */ .hero-visual{ width:100%; height:320px; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#f8fbff,#ffffff); box-shadow:0 18px 40px rgba(27,45,71,0.06); } /* 포트폴리오(미리보기) */ .portfolio{ margin:72px 0; } .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .thumb{ border-radius:12px; overflow:hidden; min-height:140px; background:linear-gradient(180deg,#fbfdff,#f6f9ff); display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; } footer{ padding:44px 0; color:var(--muted); font-size:0.95rem; } /* 반응형 */ @media (max-width:980px){ .hero{grid-template-columns:1fr; gap:24px; padding:42px 0} .hero-visual{height:260px} .features{grid-template-columns:repeat(2,1fr)} .grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .features{grid-template-columns:1fr} .grid{grid-template-columns:1fr} nav.site-nav a{display:none} .logo{font-size:1rem} } </style> </head> <body> <div class="container"> <!-- 기존 헤더 유지 원하면 여기를 제거하세요 --> <header class="site-header" aria-label="header"> <div class="logo">DHS1</div> <nav class="site-nav" aria-label="navigation"> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact" class="cta">문의하기</a> </nav> </header> <!-- ========== 메인: 기존 페이지 유지하면서 히어로만 교체 ========== --> <main id="dhs1-main"> <section class="hero" aria-label="hero"> <!-- 왼쪽: 텍스트 (여기에 기존 소개 텍스트 또는 회사 설명을 유지/삽입) --> <div class="hero-text"> <h1>더 깔끔하게, 더 전문적으로<br><span style="color:var(--accent)">DHS1</span>이 만듭니다.</h1> <p class="lead">우리는 안정적인 기술과 직관적인 디자인을 결합해 업무 효율을 높이는 웹 환경을 제공합니다.</p> <div class="actions"> <a href="#portfolio" class="btn primary">프로젝트 보기</a> <a href="#contact" class="btn ghost">문의하기</a> </div> <!-- 서비스 요약 카드 (간단히 유지) --> <div class="features" style="margin-top:24px"> <div class="card"> <h4>웹 개발</h4> <p>성능과 유지보수를 고려한 클린 코드.</p> </div> <div class="card"> <h4>서버·NAS 구축</h4> <p>신뢰성 높은 인프라 설계 및 운영.</p> </div> <div class="card"> <h4>관리·모니터링</h4> <p>자동화된 알림과 실시간 상태 확인.</p> </div> </div> </div> <!-- 오른쪽: 인라인 SVG 히어로 이미지(세련된 추상 배경) --> <div class="hero-visual" aria-hidden="true"> <!-- 인라인 SVG: 수정해서 색상/문구 교체 가능 --> <svg width="420" height="300" viewBox="0 0 840 600" xmlns="http://www.w3.org/2000/svg" style="max-width:100%;height:auto;"> <defs> <linearGradient id="g1" x1="0" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#eaf3ff"/> <stop offset="100%" stop-color="#ffffff"/> </linearGradient> <linearGradient id="g2" x1="0" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#356DF0" stop-opacity="0.95"/> <stop offset="100%" stop-color="#22A699" stop-opacity="0.95"/> </linearGradient> <filter id="f1" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur stdDeviation="28" result="b"/> <feBlend in="SourceGraphic" in2="b"/> </filter> </defs> <!-- 배경 흐림 원들 --> <g filter="url(#f1)"> <circle cx="220" cy="120" r="160" fill="url(#g2)" opacity="0.12"/> <circle cx="560" cy="360" r="200" fill="#F6FAFF" opacity="0.9"/> </g> <!-- 기하학적 패턴 --> <g transform="translate(60,80)"> <rect x="0" y="0" width="320" height="200" rx="18" fill="url(#g1)" /> <path d="M260 10 L320 10 L320 70 L260 70 Z" fill="#fff" opacity="0.08"/> <circle cx="260" cy="150" r="40" fill="#fff" opacity="0.06"/> </g> <!-- 중앙 카드(회사 이름/아이덴티티) --> <g transform="translate(140,200)"> <rect x="0" y="0" width="380" height="120" rx="16" fill="#fff" opacity="0.98" /> <text x="28" y="48" font-family="Noto Sans KR, Arial" font-size="36" font-weight="700" fill="#0f1720">DHS1</text> <text x="28" y="82" font-family="Noto Sans KR, Arial" font-size="14" fill="#6B7280">Clean & Reliable Web · Infrastructure</text> </g> <!-- 오른쪽 위 작은 아이콘 요소 --> <g transform="translate(520,40)"> <rect x="0" y="0" width="120" height="80" rx="12" fill="#fff" opacity="0.86"/> <path d="M18 42 L38 22 L62 48 L102 8" fill="none" stroke="#356DF0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/> </g> </svg> </div> </section> <!-- ========== 포트폴리오 미리보기 (예시) ========== --> <section id="portfolio" class="portfolio container" aria-label="portfolio"> <h3 style="margin:0 0 18px 0">주요 프로젝트</h3> <div class="grid"> <div class="thumb">프로젝트 A</div> <div class="thumb">프로젝트 B</div> <div class="thumb">프로젝트 C</div> </div> </section> <!-- ========== 연락 섹션 간단 예시 ========== --> <section id="contact" style="margin:36px 0;padding:30px;border-radius:12px;background:#FBFDFF;"> <div style="display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap"> <div style="flex:1;min-width:220px"> <h4 style="margin:0 0 6px 0">함께 일해볼까요?</h4> <p style="margin:0;color:var(--muted)">프로젝트 문의, 협업 제안은 아래 버튼으로 연락주세요.</p> </div> <div style="display:flex;gap:12px"> <a href="mailto:info@dhs1.kr" class="btn primary">메일로 문의</a> <a href="#contact-form" class="btn ghost">간단 문의폼</a> </div> </div> </section> </main> <footer class="container"> <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px"> <div>© <strong>DHS1</strong> — All rights reserved.</div> <div style="color:var(--muted)">주소 | 연락처 | 개인정보처리방침</div> </div> </footer> </div> </body> </html> |