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>
|
</div>
|
||||||
</section>
|
</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">
|
<section class="values-section section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
166
css/common.css
166
css/common.css
@ -1401,4 +1401,170 @@ body {
|
|||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%, 100% { transform: scale(1); }
|
0%, 100% { transform: scale(1); }
|
||||||
50% { transform: scale(1.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>
|
</div>
|
||||||
</section>
|
</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">
|
<section class="partners-section section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user