ADD : 이무지 포트폴리오 및 웹 메인 영상 추가
This commit is contained in:
KINDNICK
parent
a001452184
commit
d89dd9a4c1
@ -9,7 +9,9 @@
|
||||
"WebFetch(domain:studio.v-llage.com)",
|
||||
"Bash(awk:*)",
|
||||
"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": [],
|
||||
"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;
|
||||
}
|
||||
|
||||
/* 유튜브 배경 영상 스타일 */
|
||||
.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 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-3xl);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.7rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
color: var(--text-primary);
|
||||
color: white;
|
||||
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 {
|
||||
font-size: 2.2rem;
|
||||
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 {
|
||||
@ -52,13 +96,18 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
margin: var(--spacing-lg) 0 var(--spacing-xl);
|
||||
color: #555;
|
||||
color: white;
|
||||
font-size: 1.15rem;
|
||||
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 {
|
||||
@ -101,8 +150,9 @@
|
||||
|
||||
.spec-text {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* Hero 이미지 */
|
||||
|
||||
@ -2,6 +2,87 @@
|
||||
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 페이지 전용 스타일
|
||||
======================================== */
|
||||
|
||||
/* 치지직 썸네일 스타일 */
|
||||
.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 {
|
||||
background: var(--gradient-main);
|
||||
|
||||
12
index.html
12
index.html
@ -292,7 +292,17 @@
|
||||
|
||||
<!-- Hero 섹션 -->
|
||||
<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="hero-content">
|
||||
<div class="hero-text">
|
||||
|
||||
@ -363,6 +363,32 @@
|
||||
</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>
|
||||
|
||||
@ -758,6 +758,32 @@
|
||||
</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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user