diff --git a/about.html b/about.html index f52bb54..6b8453b 100644 --- a/about.html +++ b/about.html @@ -184,6 +184,40 @@ + +
+
+
+

Partner Streamer

+

밍글 스튜디오와 함께 콘텐츠를 만드는 크리에이터

+
+ +
+
+
+ 구슬요 프로필 +
+

구슬요

+

@beadyo97

+

소통, 노래, 게임, VRChat 등 다채로운 콘텐츠를 선보이는 버츄얼 스트리머. SOOP을 중심으로 활발하게 활동하며 밍글 스튜디오의 모션캡처 기술과 함께 새로운 버츄얼 콘텐츠를 만들어갑니다.

+
+ VTuber + 노래 + 게임 + VRChat + 소통 +
+ +
+
+
+
+
diff --git a/css/common.css b/css/common.css index 3bcc393..2e51507 100644 --- a/css/common.css +++ b/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; + } } \ No newline at end of file diff --git a/images/partners streamer/밍글 파트너 스트리머 구슬요.webp b/images/partners streamer/밍글 파트너 스트리머 구슬요.webp new file mode 100644 index 0000000..94d075e Binary files /dev/null and b/images/partners streamer/밍글 파트너 스트리머 구슬요.webp differ diff --git a/index.html b/index.html index 59dba4c..0347efd 100644 --- a/index.html +++ b/index.html @@ -634,6 +634,39 @@
+ +
+
+
+

파트너 스트리머

+

밍글 스튜디오와 함께 콘텐츠를 만드는 크리에이터

+
+ +
+
+
+ 구슬요 프로필 +
+

구슬요

+

@beadyo97

+

떼굴떼굴 구슬요! 소통, 노래, 게임, VRChat 등 다양한 콘텐츠를 선보이는 버츄얼 스트리머

+
+ VTuber + 노래 + 게임 + VRChat +
+ +
+
+
+
+