Hugging Face's logo

Spaces:
nkjoy
/
kmeda
Running

App Files Community
nkjoy commited on
Commit
7156808
·
verified ·
1 Parent(s): 6d5a607

- 시각디자인업 페이지도 만들어줘 근데 디자인 생김새가 너무 다 똑같이 한다 이번엔 디자인 좀 다르게 해줘봐 ! 기본틀 벗어 나지말고 !

Browse files
Files changed (2) hide show
  1. prompts.txt +4 -1
  2. visual-design.html +173 -0
prompts.txt CHANGED
@@ -259,4 +259,7 @@ OrgChart.js 커뮤니티 + 감성 CSS
259
  기획력과 창의력을 바탕으로 디지털 환경에 최적화된 콘텐츠 개발 파트
260
  - 인쇄디자인업
261
  기업의 브랜드가치를 직접적으로 고객에게 전달하는 시각적 커뮤니케이션
262
- 도구인 디자인 파트
 
 
 
 
259
  기획력과 창의력을 바탕으로 디지털 환경에 최적화된 콘텐츠 개발 파트
260
  - 인쇄디자인업
261
  기업의 브랜드가치를 직접적으로 고객에게 전달하는 시각적 커뮤니케이션
262
+ 도구인 디자인 파트
263
+ - 시각디자인업 페이지도 만들어줘 근데 디자인 생김새가 너무 다 똑같이 한다 이번엔 디자인 좀 다르게 해줘봐 ! 기본틀 벗어 나지말고 !
264
+ 기업과 상품의 브랜드 가치를 시각적으로 표현하고 감동을 전하는 디자인
265
+ 파트
visual-design.html ADDED
@@ -0,0 +1,173 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>시각디자인업 - 케이미디어</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
14
+ body { font-family: 'Noto Sans KR', sans-serif; scroll-behavior: smooth; }
15
+ .glass-effect { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
16
+ .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
17
+ .mosaic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
18
+ .mosaic-item { border-radius: 1rem; overflow: hidden; position: relative; transition: transform .4s ease; }
19
+ .mosaic-item:hover { transform: scale(1.05) rotate(-1deg); }
20
+ .mosaic-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(102,126,234,.2), rgba(118,75,162,.2)); opacity: 0; transition: opacity .4s; }
21
+ .mosaic-item:hover::after { opacity: 1; }
22
+ .morph-card { background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); border-radius: 2rem; padding: 2.5rem; position: relative; overflow: hidden; }
23
+ .morph-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(102,126,234,.1) 0%, transparent 70%); transform: rotate(30deg); transition: transform .6s; }
24
+ .morph-card:hover::before { transform: rotate(0deg) scale(1.2); }
25
+ .neon-btn { background: linear-gradient(45deg, #667eea, #764ba2); color: #fff; border: none; padding: .75rem 1.5rem; border-radius: 999px; font-weight: 600; position: relative; overflow: hidden; z-index: 1; }
26
+ .neon-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, #fff, #fff); opacity: 0; transition: opacity .3s; z-index: -1; }
27
+ .neon-btn:hover::before { opacity: .2; }
28
+ .floating { animation: float 4s ease-in-out infinite; }
29
+ @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50 text-gray-800">
33
+ <!-- Navigation -->
34
+ <nav class="fixed w-full z-50 glass-effect py-4 px-6">
35
+ <div class="container mx-auto flex justify-between items-center">
36
+ <a href="index.html" class="text-2xl font-bold text-white">KMedia</a>
37
+ <div class="hidden md:flex space-x-8">
38
+ <a href="about.html" class="text-white hover:text-purple-200 transition">회사소개</a>
39
+ <a href="index.html#business" class="text-white hover:text-purple-200 transition">사업영역</a>
40
+ <a href="index.html#promotion" class="text-white hover:text-purple-200 transition">홍보마당</a>
41
+ <a href="index.html#communication" class="text-white hover:text-purple-200 transition">소통마당</a>
42
+ </div>
43
+ <button class="md:hidden text-white"><i data-feather="menu"></i></button>
44
+ </div>
45
+ </nav>
46
+
47
+ <!-- Hero -->
48
+ <section class="relative pt-32 pb-20 bg-gradient-to-br from-purple-600 via-indigo-600 to-indigo-700 text-white overflow-hidden">
49
+ <div class="absolute -top-20 -left-20 w-96 h-96 bg-purple-500 rounded-full opacity-20 blur-3xl floating"></div>
50
+ <div class="absolute -bottom-16 -right-16 w-80 h-80 bg-indigo-500 rounded-full opacity-20 blur-3xl floating" style="animation-delay: 2s;"></div>
51
+ <div class="container mx-auto px-6 text-center relative z-10">
52
+ <h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-up">시각디자인업</h1>
53
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
54
+ 기업과 상품의 브랜드 가치를 시각적으로 표현하고 감동을 전합니다
55
+ </p>
56
+ </div>
57
+ </section>
58
+
59
+ <!-- Philosophy -->
60
+ <section class="py-20 bg-white">
61
+ <div class="container mx-auto px-6">
62
+ <div class="max-w-4xl mx-auto text-center mb-16" data-aos="fade-up">
63
+ <h2 class="text-3xl font-bold mb-6">시각으로 전하는 감동</h2>
64
+ <p class="text-lg text-gray-600 leading-relaxed">
65
+ 케이미디어는 단순히 예쁜 디자인을 넘어, 브랜드의 이야기와 가치를
66
+ 시각적 언어로 풀어내어 타깃에게 깊은 감동을 전달���니다.
67
+ </p>
68
+ </div>
69
+ <div class="grid md:grid-cols-3 gap-8">
70
+ <div class="morph-card text-center box-3d" data-aos="zoom-in">
71
+ <div class="relative z-10">
72
+ <div class="inline-block p-4 rounded-2xl bg-indigo-100 mb-4"><i data-feather="eye" class="text-indigo-600 text-2xl"></i></div>
73
+ <h3 class="text-xl font-bold mb-2">심미적 완성도</h3>
74
+ <p class="text-gray-600 text-sm">완성도 높은 시각 표현으로 브랜드 품격을 높입니다</p>
75
+ </div>
76
+ </div>
77
+ <div class="morph-card text-center box-3d" data-aos="zoom-in" data-aos-delay="100">
78
+ <div class="relative z-10">
79
+ <div class="inline-block p-4 rounded-2xl bg-purple-100 mb-4"><i data-feather="target" class="text-purple-600 text-2xl"></i></div>
80
+ <h3 class="text-xl font-bold mb-2">전략적 접근</h3>
81
+ <p class="text-gray-600 text-sm">브랜드 전략에 기반한 효과적 시각 커뮤니케이션</p>
82
+ </div>
83
+ </div>
84
+ <div class="morph-card text-center box-3d" data-aos="zoom-in" data-aos-delay="200">
85
+ <div class="relative z-10">
86
+ <div class="inline-block p-4 rounded-2xl bg-pink-100 mb-4"><i data-feather="heart" class="text-pink-600 text-2xl"></i></div>
87
+ <h3 class="text-xl font-bold mb-2">감성적 연결</h3>
88
+ <p class="text-gray-600 text-sm">감성을 자극하는 디자인으로 소비자와의 깊은 연결</p>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </section>
94
+
95
+ <!-- Mosaic Portfolio -->
96
+ <section class="py-20 bg-gray-50">
97
+ <div class="container mx-auto px-6">
98
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Portfolio Mosaic</h2>
99
+ <div class="mosaic-grid" data-aos="fade-up">
100
+ <div class="mosaic-item h-40 bg-gradient-to-br from-purple-400 to-indigo-500 flex items-end p-4 text-white font-semibold">Brand Identity</div>
101
+ <div class="mosaic-item h-56 bg-gradient-to-br from-indigo-400 to-purple-500 flex items-end p-4 text-white font-semibold">Package Design</div>
102
+ <div class="mosaic-item h-40 bg-gradient-to-br from-pink-400 to-purple-500 flex items-end p-4 text-white font-semibold">Editorial Design</div>
103
+ <div class="mosaic-item h-48 bg-gradient-to-br from-indigo-500 to-pink-400 flex items-end p-4 text-white font-semibold">Web Graphic</div>
104
+ <div class="mosaic-item h-56 bg-gradient-to-br from-purple-500 to-indigo-400 flex items-end p-4 text-white font-semibold">Poster Design</div>
105
+ <div class="mosaic-item h-40 bg-gradient-to-br from-pink-500 to-indigo-500 flex items-end p-4 text-white font-semibold">Logo Design</div>
106
+ <div class="mosaic-item h-48 bg-gradient-to-br from-indigo-400 to-pink-500 flex items-end p-4 text-white font-semibold">UI/UX Design</div>
107
+ <div class="mosaic-item h-48 bg-gradient-to-br from-purple-400 to-pink-500 flex items-end p-4 text-white font-semibold">Motion Graphic</div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Service Spectrum -->
113
+ <section class="py-20 bg-white">
114
+ <div class="container mx-auto px-6">
115
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Design Spectrum</h2>
116
+ <div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">
117
+ <div data-aos="fade-right">
118
+ <img src="http://static.photos/studio/640x360/1" alt="Studio" class="rounded-2xl shadow-lg w-full">
119
+ </div>
120
+ <div class="flex flex-col justify-center space-y-4" data-aos="fade-left">
121
+ <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold mr-3 mt-1">01</span><div><h4 class="font-bold">Brand Identity</h4><p class="text-gray-600 text-sm">로고, 컬러, 타이포, 패턴까지 통합 브랜드 시스템 설계</p></div></div>
122
+ <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-bold mr-3 mt-1">02</span><div><h4 class="font-bold">Package Design</h4><p class="text-gray-600 text-sm">제품의 매력을 극대화하는 창의적 패키지 디자인</p></div></div>
123
+ <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-pink-100 text-pink-700 text-xs font-bold mr-3 mt-1">03</span><div><h4 class="font-bold">Promotion Design</h4><p class="text-gray-600 text-sm">포스터, 배너, 브로셔 등 프로모션 전반의 시각물</p></div></div>
124
+ <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-xs font-bold mr-3 mt-1">04</span><div><h4 class="font-bold">UI/UX Design</h4><p class="text-gray-600 text-sm">사용자 경험을 고려한 인터페이스 디자인</p></div></div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Work Flow -->
131
+ <section class="py-20 bg-gray-50">
132
+ <div class="container mx-auto px-6">
133
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Design Journey</h2>
134
+ <div class="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6">
135
+ <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in"><div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="edit-3" class="text-indigo-600"></i></div><h4 class="font-bold">Sketch</h4><p class="text-xs text-gray-500">아이디어 스케치</p></div>
136
+ <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="100"><div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="layout" class="text-purple-600"></i></div><h4 class="font-bold">Design</h4><p class="text-xs text-gray-500">시각적 구현</p></div>
137
+ <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="200"><div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="message-circle" class="text-pink-600"></i></div><h4 class="font-bold">Feedback</h4><p class="text-xs text-gray-500">피드백 반영</p></div>
138
+ <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="300"><div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="check-circle" class="text-green-600"></i></div><h4 class="font-bold">Launch</h4><p class="text-xs text-gray-500">최종 완성</p></div>
139
+ </div>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- CTA -->
144
+ <section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
145
+ <div class="container mx-auto px-6 text-center">
146
+ <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">당신의 브랜드를 빛나게 할 디자인을 만나보세요</h2>
147
+ <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">지금 바로 상담을 신청하시면 전문 디자이너가 함께합니다.</p>
148
+ <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
149
+ <button class="neon-btn">무료 상담 신청</button>
150
+ <button class="neon-btn bg-transparent border-2 border-white">포트폴리오 보기</button>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Footer -->
156
+ <footer class="bg-gray-900 text-white py-12">
157
+ <div class="container mx-auto px-6">
158
+ <div class="grid md:grid-cols-4 gap-8">
159
+ <div><h4 class="text-lg font-semibold mb-4">KMedia</h4><p class="text-gray-400">사람 중심의 창의적인 미디어 솔루션</p></div>
160
+ <div><h4 class="text-lg font-semibold mb-4">연락처</h4><p class="text-gray-400">Tel: 02-1234-5678</p><p class="text-gray-400">Email: info@kmedia.com</p></div>
161
+ <div><h4 class="text-lg font-semibold mb-4">주소</h4><p class="text-gray-400">서울특별시 강남구 테헤란로 123</p></div>
162
+ <div><h4 class="text-lg font-semibold mb-4">Follow Us</h4><div class="flex space-x-4"><a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a></div></div>
163
+ </div>
164
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"><p>© 2023 KMedia. All rights reserved.</p></div>
165
+ </div>
166
+ </footer>
167
+
168
+ <script>
169
+ AOS.init({ duration: 1000, once: true });
170
+ feather.replace();
171
+ </script>
172
+ </body>
173
+ </html>