<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TWICE - Official Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
overflow: hidden;
background: #000;
}
/* Video Background Container */
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
/* Overlay to darken video slightly */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 0;
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 50px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
font-size: 28px;
font-weight: 900;
color: white;
letter-spacing: 2px;
text-transform: uppercase;
font-style: italic;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.menu-btn {
width: 30px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 101;
}
.menu-btn span {
display: block;
width: 100%;
height: 2px;
background: white;
transition: all 0.3s ease;
}
/* Main Content */
.main-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
padding-right: 80px;
z-index: 10;
}
.title-section {
text-align: right;
color: white;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.main-title {
font-size: 72px;
font-weight: 700;
line-height: 1.1;
margin-bottom: 10px;
letter-spacing: -1px;
}
.sub-title {
font-size: 36px;
font-weight: 300;
margin-bottom: 40px;
letter-spacing: 2px;
}
.divider {
width: 200px;
height: 2px;
background: rgba(255,255,255,0.5);
margin: 30px 0;
margin-left: auto;
}
.notice-section {
text-align: right;
color: white;
margin-top: 20px;
}
.notice-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 3px;
margin-bottom: 10px;
text-transform: uppercase;
}
.notice-text {
font-size: 14px;
font-weight: 300;
opacity: 0.9;
}
/* Left Side Social Icons */
.social-sidebar {
position: fixed;
left: 50px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 25px;
z-index: 100;
}
.social-icon {
width: 24px;
height: 24px;
color: white;
cursor: pointer;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0.9;
}
.social-icon:hover {
transform: scale(1.2);
opacity: 1;
}
.shop-link {
position: fixed;
left: 50px;
bottom: 50px;
color: white;
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
z-index: 100;
transition: opacity 0.3s ease;
}
.shop-link:hover {
opacity: 0.7;
}
/* Footer */
.footer {
position: fixed;
bottom: 30px;
right: 50px;
color: white;
font-size: 11px;
opacity: 0.8;
z-index: 100;
text-align: right;
}
.footer .company {
color: #00bfff;
font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
.main-title {
font-size: 42px;
}
.sub-title {
font-size: 24px;
}
.main-content {
padding-right: 30px;
align-items: center;
text-align: center;
}
.title-section {
text-align: center;
}
.divider {
margin-left: auto;
margin-right: auto;
}
.notice-section {
text-align: center;
}
.social-sidebar {
left: 20px;
gap: 20px;
}
.header {
padding: 20px 30px;
}
.shop-link {
left: 20px;
bottom: 80px;
}
}
</style>
</head>
<body>
<!-- Video Background -->
<div class="video-container">
<!-- Replace this with your actual video file -->
<video autoplay muted loop playsinline poster="https://encrypted-tbn1.gstatic.com/licensed-image?q=tbn:ANd9GcRG3JAmX5ksEeSwnnR8amqgFwEJeQMpvIN7Em-TkBLP9zunnmnAePYg0gS6czMfSYCIFr41k7gM8lCA3Bo">
<source src="vid.mp4" type="video/mp4">
<!-- Fallback image if video doesn't load -->
<img src="https://encrypted-tbn1.gstatic.com/licensed-image?q=tbn:ANd9GcRG3JAmX5ksEeSwnnR8amqgFwEJeQMpvIN7Em-TkBLP9zunnmnAePYg0gS6czMfSYCIFr41k7gM8lCA3Bo" alt="Background">
</video>
</div>
<!-- Dark Overlay -->
<div class="overlay"></div>
<!-- Header -->
<header class="header">
<div class="logo">TWICE</div>
<div class="menu-btn">
<span></span>
<span></span>
<span></span>
</div>
</header>
<!-- Social Sidebar -->
<div class="social-sidebar">
<!-- Instagram -->
<svg class="social-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
<!-- X (Twitter) -->
<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
<!-- Facebook -->
<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
<!-- YouTube -->
<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
<!-- TikTok -->
<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
</svg>
</div>
<!-- Shop Link -->
<div class="shop-link">SHOP</div>
<!-- Main Content -->
<main class="main-content">
<div class="title-section">
<h1 class="main-title">TEN: The Story<br>Goes On</h1>
<p class="sub-title">ME+YOU</p>
<div class="divider"></div>
<div class="notice-section">
<div class="notice-label">НОВ ПУТИН ПРОДУКТ
</div>
<div class="notice-text">ПУТИН ВОДАТА ИЗЛЕЗЕ!</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<p>Copyright © <span class="company">Marti corp.</span>All rights reserved.</p>
</footer>
<script>
// Optional: Add smooth loading or interaction effects
document.addEventListener('DOMContentLoaded', function() {
// Ensure video plays (some browsers block autoplay)
const video = document.querySelector('video');
if (video) {
video.play().catch(function(error) {
console.log("Autoplay prevented:", error);
});
}
});
</script>
</body>
</html>
