ADD : 이무지 포트폴리오 및 웹 메인 영상 추가
This commit is contained in:
KINDNICK
parent
a001452184
commit
d89dd9a4c1
@ -9,7 +9,9 @@
|
|||||||
"WebFetch(domain:studio.v-llage.com)",
|
"WebFetch(domain:studio.v-llage.com)",
|
||||||
"Bash(awk:*)",
|
"Bash(awk:*)",
|
||||||
"Bash(python:*)",
|
"Bash(python:*)",
|
||||||
"Bash(start http://localhost:8000/gallery.html)"
|
"Bash(start http://localhost:8000/gallery.html)",
|
||||||
|
"WebFetch(domain:naver.me)",
|
||||||
|
"WebFetch(domain:chzzk.naver.com)"
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": []
|
"ask": []
|
||||||
|
|||||||
BIN
Logo icon/chzzk Icon.png
Normal file
BIN
Logo icon/chzzk Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
60
css/main.css
60
css/main.css
@ -25,26 +25,70 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 유튜브 배경 영상 스타일 */
|
||||||
|
.video-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-bg iframe {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100vw;
|
||||||
|
height: 56.25vw; /* 16:9 비율 */
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 영상 위에 오버레이 */
|
||||||
|
.hero-bg::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.hero-content {
|
.hero-content {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: var(--spacing-3xl);
|
gap: var(--spacing-3xl);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font-size: 2.7rem;
|
font-size: 2.7rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: var(--text-primary);
|
color: white;
|
||||||
margin-bottom: var(--spacing-xs);
|
margin-bottom: var(--spacing-xs);
|
||||||
|
text-shadow:
|
||||||
|
2px 2px 4px rgba(0, 0, 0, 0.8),
|
||||||
|
4px 4px 8px rgba(0, 0, 0, 0.4),
|
||||||
|
0 0 20px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-subtitle {
|
.hero-subtitle {
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
text-shadow:
|
||||||
|
2px 2px 4px rgba(0, 0, 0, 0.8),
|
||||||
|
4px 4px 8px rgba(0, 0, 0, 0.4),
|
||||||
|
0 0 15px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-text {
|
.gradient-text {
|
||||||
@ -52,13 +96,18 @@
|
|||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-description {
|
.hero-description {
|
||||||
margin: var(--spacing-lg) 0 var(--spacing-xl);
|
margin: var(--spacing-lg) 0 var(--spacing-xl);
|
||||||
color: #555;
|
color: white;
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
font-weight: 500;
|
||||||
|
text-shadow:
|
||||||
|
1px 1px 3px rgba(0, 0, 0, 0.7),
|
||||||
|
2px 2px 6px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-buttons {
|
.hero-buttons {
|
||||||
@ -101,8 +150,9 @@
|
|||||||
|
|
||||||
.spec-text {
|
.spec-text {
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
color: var(--text-secondary);
|
color: white;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero 이미지 */
|
/* Hero 이미지 */
|
||||||
|
|||||||
@ -2,6 +2,87 @@
|
|||||||
Portfolio 페이지 전용 스타일
|
Portfolio 페이지 전용 스타일
|
||||||
======================================== */
|
======================================== */
|
||||||
|
|
||||||
|
/* 치지직 썸네일 스타일 */
|
||||||
|
.chzzk-thumbnail {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-thumbnail:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: filter 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(0, 199, 60, 0.8), rgba(0, 184, 49, 0.8));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-thumbnail:hover .thumbnail-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-center-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-logo-img {
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail-link {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.1); }
|
||||||
|
}
|
||||||
|
|
||||||
/* ========================================
|
/* ========================================
|
||||||
포트폴리오 탭 시스템
|
포트폴리오 탭 시스템
|
||||||
======================================== */
|
======================================== */
|
||||||
|
|||||||
@ -2,6 +2,87 @@
|
|||||||
Services 페이지 전용 스타일
|
Services 페이지 전용 스타일
|
||||||
======================================== */
|
======================================== */
|
||||||
|
|
||||||
|
/* 치지직 썸네일 스타일 */
|
||||||
|
.chzzk-thumbnail {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-thumbnail:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: filter 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(0, 199, 60, 0.8), rgba(0, 184, 49, 0.8));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-thumbnail:hover .thumbnail-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-center-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chzzk-logo-img {
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail-link {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.1); }
|
||||||
|
}
|
||||||
|
|
||||||
/* 페이지 헤더 */
|
/* 페이지 헤더 */
|
||||||
.page-header {
|
.page-header {
|
||||||
background: var(--gradient-main);
|
background: var(--gradient-main);
|
||||||
|
|||||||
12
index.html
12
index.html
@ -292,7 +292,17 @@
|
|||||||
|
|
||||||
<!-- Hero 섹션 -->
|
<!-- Hero 섹션 -->
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="hero-bg"></div>
|
<div class="hero-bg">
|
||||||
|
<div class="video-bg">
|
||||||
|
<iframe
|
||||||
|
id="youtube-bg"
|
||||||
|
src="https://www.youtube.com/embed/videoseries?list=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO&autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1&enablejsapi=1&playlist=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO"
|
||||||
|
frameborder="0"
|
||||||
|
allow="autoplay; encrypted-media"
|
||||||
|
allowfullscreen>
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<div class="hero-text">
|
<div class="hero-text">
|
||||||
|
|||||||
@ -363,6 +363,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="video-card broadcast chzzk-link">
|
||||||
|
<div class="video-wrapper">
|
||||||
|
<div class="chzzk-thumbnail">
|
||||||
|
<img src="https://livecloud-thumb.akamaized.net/chzzk/kr/live-rewind-image/record/45386630/represent/thumbnail/image_14810881_720_0.jpg"
|
||||||
|
alt="이무지 탄생일 방송 썸네일"
|
||||||
|
class="thumbnail-img">
|
||||||
|
<div class="thumbnail-overlay">
|
||||||
|
<div class="chzzk-logo">치지직</div>
|
||||||
|
<div class="chzzk-center-logo">
|
||||||
|
<img src="Logo icon/chzzk Icon.png"
|
||||||
|
alt="치지직 로고"
|
||||||
|
class="chzzk-logo-img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://naver.me/5dA2JoP5" target="_blank" class="thumbnail-link"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="video-info">
|
||||||
|
<h4>이무지 탄생일 ! 🧸💛</h4>
|
||||||
|
<div class="broadcast-info">
|
||||||
|
<span class="platform">치지직</span>
|
||||||
|
<span class="streamer">이무지</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -758,6 +758,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="portfolio-item chzzk-item">
|
||||||
|
<div class="video-wrapper">
|
||||||
|
<div class="chzzk-thumbnail">
|
||||||
|
<img src="https://livecloud-thumb.akamaized.net/chzzk/kr/live-rewind-image/record/45386630/represent/thumbnail/image_14810881_720_0.jpg"
|
||||||
|
alt="이무지 탄생일 방송 썸네일"
|
||||||
|
class="thumbnail-img">
|
||||||
|
<div class="thumbnail-overlay">
|
||||||
|
<div class="chzzk-logo">치지직</div>
|
||||||
|
<div class="chzzk-center-logo">
|
||||||
|
<img src="Logo icon/chzzk Icon.png"
|
||||||
|
alt="치지직 로고"
|
||||||
|
class="chzzk-logo-img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://naver.me/5dA2JoP5" target="_blank" class="thumbnail-link"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="streaming-info">
|
||||||
|
<p><strong>이무지 탄생일 ! 🧸💛</strong></p>
|
||||||
|
<div class="stream-details">
|
||||||
|
<span class="platform">치지직</span>
|
||||||
|
<span class="streamer">이무지</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user