Add: 파트너 스트리머(구슬요) 섹션 추가
- index.html 클라이언트 섹션 위에 파트너 스트리머 섹션 추가 - about.html 팀 소개 아래, Core Values 위에 Partner Streamer 섹션 추가 - css/common.css에 파트너 스트리머 카드 스타일 및 다크모드 지원 - 채널 링크: SOOP, YouTube, Instagram, X Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
68893236+KINDNICK@users.noreply.github.com
parent
0b55235d4f
commit
e1d2796f5c
34
about.html
34
about.html
@ -184,6 +184,40 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 파트너 스트리머 -->
|
||||
<section class="partner-streamer-section section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Partner Streamer</h2>
|
||||
<p>밍글 스튜디오와 함께 콘텐츠를 만드는 크리에이터</p>
|
||||
</div>
|
||||
|
||||
<div class="streamer-grid stagger-children">
|
||||
<div class="streamer-card reveal" data-reveal="zoom">
|
||||
<div class="streamer-avatar">
|
||||
<img src="images/partners streamer/밍글 파트너 스트리머 구슬요.webp" alt="구슬요 프로필" loading="lazy">
|
||||
</div>
|
||||
<h3>구슬요</h3>
|
||||
<p class="streamer-handle">@beadyo97</p>
|
||||
<p class="streamer-desc">소통, 노래, 게임, VRChat 등 다채로운 콘텐츠를 선보이는 버츄얼 스트리머. SOOP을 중심으로 활발하게 활동하며 밍글 스튜디오의 모션캡처 기술과 함께 새로운 버츄얼 콘텐츠를 만들어갑니다.</p>
|
||||
<div class="streamer-tags">
|
||||
<span class="streamer-tag">VTuber</span>
|
||||
<span class="streamer-tag">노래</span>
|
||||
<span class="streamer-tag">게임</span>
|
||||
<span class="streamer-tag">VRChat</span>
|
||||
<span class="streamer-tag">소통</span>
|
||||
</div>
|
||||
<div class="streamer-links">
|
||||
<a href="https://ch.sooplive.co.kr/beadyo97" target="_blank" rel="noopener">SOOP</a>
|
||||
<a href="https://www.youtube.com/@beadyo97" target="_blank" rel="noopener">YouTube</a>
|
||||
<a href="https://www.instagram.com/bead.yo" target="_blank" rel="noopener">Instagram</a>
|
||||
<a href="https://x.com/beadyo97" target="_blank" rel="noopener">X</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 핵심 가치 -->
|
||||
<section class="values-section section">
|
||||
<div class="container">
|
||||
|
||||
166
css/common.css
166
css/common.css
@ -1401,4 +1401,170 @@ body {
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
파트너 스트리머 섹션
|
||||
======================================== */
|
||||
.partner-streamer-section {
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.streamer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
|
||||
gap: var(--spacing-xl);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.streamer-card {
|
||||
background: var(--bg-white);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--spacing-2xl);
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.streamer-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.streamer-avatar {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--primary-color);
|
||||
box-shadow: var(--shadow-glow-md);
|
||||
}
|
||||
|
||||
.streamer-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.streamer-card h3 {
|
||||
font-size: var(--font-xl);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.streamer-card .streamer-handle {
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.streamer-card .streamer-desc {
|
||||
font-size: var(--font-base);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.streamer-card .streamer-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xs);
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.streamer-card .streamer-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 100px;
|
||||
font-size: var(--font-xs);
|
||||
font-weight: 500;
|
||||
background: rgba(255, 136, 0, 0.1);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.streamer-links {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.streamer-links a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border-light);
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.streamer-links a:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
background: rgba(255, 136, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 파트너 스트리머 다크모드 */
|
||||
[data-theme="dark"] .partner-streamer-section {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .streamer-card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .streamer-card:hover {
|
||||
border-color: rgba(255, 136, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .streamer-card h3 {
|
||||
color: var(--dark-text-primary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .streamer-card .streamer-handle {
|
||||
color: var(--dark-text-tertiary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .streamer-card .streamer-desc {
|
||||
color: var(--dark-text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .streamer-card .streamer-tag {
|
||||
background: rgba(255, 136, 0, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .streamer-links a {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: var(--glass-border);
|
||||
color: var(--dark-text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .streamer-links a:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
background: rgba(255, 136, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 파트너 스트리머 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.streamer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.streamer-card {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.streamer-links {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
BIN
images/partners streamer/밍글 파트너 스트리머 구슬요.webp
Normal file
BIN
images/partners streamer/밍글 파트너 스트리머 구슬요.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
33
index.html
33
index.html
@ -634,6 +634,39 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 파트너 스트리머 -->
|
||||
<section class="partner-streamer-section section">
|
||||
<div class="container">
|
||||
<div class="section-header reveal" data-reveal="fade">
|
||||
<h2>파트너 스트리머</h2>
|
||||
<p>밍글 스튜디오와 함께 콘텐츠를 만드는 크리에이터</p>
|
||||
</div>
|
||||
|
||||
<div class="streamer-grid stagger-children">
|
||||
<div class="streamer-card reveal" data-reveal="zoom">
|
||||
<div class="streamer-avatar">
|
||||
<img src="images/partners streamer/밍글 파트너 스트리머 구슬요.webp" alt="구슬요 프로필" loading="lazy">
|
||||
</div>
|
||||
<h3>구슬요</h3>
|
||||
<p class="streamer-handle">@beadyo97</p>
|
||||
<p class="streamer-desc">떼굴떼굴 구슬요! 소통, 노래, 게임, VRChat 등 다양한 콘텐츠를 선보이는 버츄얼 스트리머</p>
|
||||
<div class="streamer-tags">
|
||||
<span class="streamer-tag">VTuber</span>
|
||||
<span class="streamer-tag">노래</span>
|
||||
<span class="streamer-tag">게임</span>
|
||||
<span class="streamer-tag">VRChat</span>
|
||||
</div>
|
||||
<div class="streamer-links">
|
||||
<a href="https://ch.sooplive.co.kr/beadyo97" target="_blank" rel="noopener">SOOP</a>
|
||||
<a href="https://www.youtube.com/@beadyo97" target="_blank" rel="noopener">YouTube</a>
|
||||
<a href="https://www.instagram.com/bead.yo" target="_blank" rel="noopener">Instagram</a>
|
||||
<a href="https://x.com/beadyo97" target="_blank" rel="noopener">X</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 기업 클라이언트 섹션 -->
|
||||
<section class="partners-section section">
|
||||
<div class="container">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user