Webleb - Extraits de Code - Le code de Mete

HTML

<!DOCTYPE html>

<head>

<title>VoltDrive | Geleceğin Elektrikli Otomobilleri</title>

<style>

:root {

--black: #0d0d0d;

--carbon: #2C2C2C;

--electric-blue: #00FFFF;

--electric-blue-dark: #009999;

--light-gray: #e6e6e6;

--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

background-color: var(--black);

color: var(--light-gray);

line-height: 1.6;

overflow-x: hidden;

}

a {

text-decoration: none;

color: inherit;

transition: var(--transition);

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

.btn {

display: inline-block;

padding: 14px 32px;

background: transparent;

color: var(--electric-blue);

border: 2px solid var(--electric-blue);

border-radius: 4px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;

cursor: pointer;

transition: var(--transition);

position: relative;

overflow: hidden;

z-index: 1;

}

.btn:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 0;

height: 100%;

background: var(--electric-blue);

transition: width 0.5s ease;

z-index: -1;

}

.btn:hover:before {

width: 100%;

}

.btn:hover {

color: var(--black);

transform: translateY(-3px);

box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);

}

.section-title {

text-align: center;

margin-bottom: 60px;

position: relative;

}

.section-title h2 {

font-family: 'Montserrat', sans-serif;

font-size: 2.8rem;

text-transform: uppercase;

color: var(--light-gray);

margin-bottom: 15px;

}

.section-title h2 span {

color: var(--electric-blue);

}

.section-title .divider {

width: 100px;

height: 4px;

background: var(--electric-blue);

margin: 0 auto;

position: relative;

}

.section-title .divider:after {

content: '';

position: absolute;

top: -2px;

left: 50%;

transform: translateX(-50%);

width: 20px;

height: 8px;

background: var(--electric-blue);

border-radius: 4px;

}

/* Header Styles */

header {

background-color: rgba(13, 13, 13, 0.95);

position: fixed;

width: 100%;

z-index: 1000;

padding: 15px 0;

border-bottom: 1px solid rgba(0, 255, 255, 0.1);

backdrop-filter: blur(10px);

transition: var(--transition);

}

header.scrolled {

padding: 10px 0;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

display: flex;

align-items: center;

}

.logo h1 {

font-family: 'Montserrat', sans-serif;

font-size: 1.8rem;

font-weight: 700;

text-transform: uppercase;

color: var(--light-gray);

}

.logo h1 span {

color: var(--electric-blue);

}

nav ul {

display: flex;

gap: 30px;

}

nav ul li a {

font-weight: 500;

position: relative;

padding: 5px 0;

}

nav ul li a:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background: var(--electric-blue);

transition: var(--transition);

}

nav ul li a:hover:after,

nav ul li a.active:after {

width: 100%;

}

.mobile-toggle {

display: none;

font-size: 1.5rem;

cursor: pointer;

color: var(--light-gray);

}

/* Hero Section */

.hero {

height: 100vh;

position: relative;

display: flex;

align-items: center;

overflow: hidden;

}

.hero-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;

z-index: -2;

}

.hero-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at center, transparent 40%, var(--black) 100%);

z-index: -1;

}

.hero-content {

max-width: 650px;

padding: 20px;

position: relative;

z-index: 2;

}

.hero-content h2 {

font-family: 'Montserrat', sans-serif;

font-size: 3.8rem;

line-height: 1.2;

margin-bottom: 20px;

text-transform: uppercase;

}

.hero-content h2 span {

color: var(--electric-blue);

display: block;

}

.hero-content p {

font-size: 1.2rem;

margin-bottom: 30px;

opacity: 0.9;

max-width: 600px;

}

.hero-stats {

display: flex;

gap: 30px;

margin-top: 40px;

flex-wrap: wrap;

}

.stat-item {

text-align: center;

padding: 15px 25px;

background: rgba(44, 44, 44, 0.5);

border-radius: 10px;

border: 1px solid rgba(0, 255, 255, 0.2);

backdrop-filter: blur(5px);

}

.stat-item .number {

font-size: 2.5rem;

font-weight: 700;

color: var(--electric-blue);

margin-bottom: 5px;

}

.stat-item .label {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

}

/* Features Section */

.features {

padding: 100px 0;

background: linear-gradient(to bottom, var(--black), var(--carbon));

position: relative;

overflow: hidden;

}

.features:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.05) 0%, transparent 40%);

pointer-events: none;

}

.features-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 30px;

}

.feature-card {

background: rgba(44, 44, 44, 0.7);

border-radius: 15px;

padding: 40px 30px;

text-align: center;

transition: var(--transition);

position: relative;

overflow: hidden;

backdrop-filter: blur(5px);

border: 1px solid rgba(0, 255, 255, 0.1);

}

.feature-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);

border-color: var(--electric-blue);

}

.feature-icon {

width: 80px;

height: 80px;

background: rgba(0, 255, 255, 0.1);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin: 0 auto 25px;

color: var(--electric-blue);

font-size: 2rem;

transition: var(--transition);

}

.feature-card:hover .feature-icon {

background: var(--electric-blue);

color: var(--black);

transform: scale(1.1);

}

.feature-card h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--light-gray);

}

.feature-card p {

font-size: 1rem;

opacity: 0.8;

}

/* Models Section */

.models {

padding: 100px 0;

background-color: var(--black);

position: relative;

overflow: hidden;

}

.models:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.05) 0%, transparent 40%);

pointer-events: none;

}

.models-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

}

.model-card {

background: var(--carbon);

border-radius: 15px;

overflow: hidden;

transition: var(--transition);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

position: relative;

}

.model-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0, 255, 255, 0.2);

}

.model-img {

height: 250px;

overflow: hidden;

position: relative;

}

.model-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.model-card:hover .model-img img {

transform: scale(1.05);

}

.model-content {

padding: 25px;

}

.model-content h3 {

font-size: 1.6rem;

margin-bottom: 10px;

color: var(--light-gray);

}

.model-price {

font-size: 1.8rem;

font-weight: 700;

color: var(--electric-blue);

margin-bottom: 15px;

}

.model-features {

display: flex;

justify-content: space-between;

margin-bottom: 20px;

flex-wrap: wrap;

gap: 10px;

}

.model-feature {

display: flex;

align-items: center;

gap: 8px;

font-size: 0.9rem;

opacity: 0.9;

}

.model-feature i {

color: var(--electric-blue);

}

/* Technology Section */

.technology {

padding: 100px 0;

background: linear-gradient(to bottom, var(--carbon), var(--black));

position: relative;

overflow: hidden;

}

.tech-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;

}

.tech-image {

position: relative;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);

}

.tech-image img {

width: 100%;

display: block;

}

.tech-text h3 {

font-size: 2.2rem;

margin-bottom: 20px;

color: var(--light-gray);

}

.tech-text h3 span {

color: var(--electric-blue);

}

.tech-text p {

margin-bottom: 20px;

opacity: 0.9;

}

.tech-features {

margin: 30px 0;

}

.tech-item {

display: flex;

align-items: center;

margin-bottom: 15px;

gap: 15px;

}

.tech-item i {

color: var(--electric-blue);

font-size: 1.5rem;

min-width: 30px;

}

/* Dealership Section */

.dealership {

padding: 100px 0;

background-color: var(--black);

position: relative;

}

.dealer-map {

height: 500px;

background: var(--carbon);

border-radius: 15px;

overflow: hidden;

position: relative;

box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);

border: 1px solid rgba(0, 255, 255, 0.1);

}

.map-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(44,44,44,0.8) 100%);

display: flex;

flex-direction: column;

justify-content: center;

padding: 50px;

}

.map-overlay h3 {

font-size: 2.2rem;

margin-bottom: 20px;

color: var(--light-gray);

}

.map-overlay h3 span {

color: var(--electric-blue);

}

.dealer-list {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 20px;

margin-top: 30px;

}

.dealer-item {

background: rgba(0, 0, 0, 0.5);

padding: 20px;

border-radius: 10px;

border: 1px solid rgba(0, 255, 255, 0.1);

}

.dealer-item h4 {

font-size: 1.2rem;

margin-bottom: 10px;

color: var(--electric-blue);

}

.dealer-item p {

font-size: 0.9rem;

opacity: 0.8;

margin-bottom: 5px;

}

/* Contact Section */

.contact {

padding: 100px 0;

background: linear-gradient(to bottom, var(--black), var(--carbon));

position: relative;

overflow: hidden;

}

.contact:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.05) 0%, transparent 40%);

pointer-events: none;

}

.contact-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;

}

.contact-info h3 {

font-size: 2rem;

margin-bottom: 20px;

color: var(--light-gray);

}

.contact-info h3 span {

color: var(--electric-blue);

}

.contact-info p {

margin-bottom: 20px;

opacity: 0.9;

}

.contact-details {

margin: 30px 0;

}

.contact-item {

display: flex;

align-items: center;

margin-bottom: 20px;

gap: 15px;

}

.contact-item i {

width: 50px;

height: 50px;

background: var(--electric-blue);

color: var(--black);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.2rem;

}

.contact-text h4 {

font-size: 1.1rem;

margin-bottom: 5px;

}

.social-links {

display: flex;

gap: 15px;

margin-top: 20px;

}

.social-links a {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

background: var(--carbon);

transition: var(--transition);

border: 1px solid rgba(0, 255, 255, 0.1);

}

.social-links a:hover {

background: var(--electric-blue);

color: var(--black);

transform: translateY(-5px);

}

.contact-form .form-group {

margin-bottom: 20px;

}

.contact-form input,

.contact-form textarea,

.contact-form select {

width: 100%;

padding: 15px;

background: var(--carbon);

border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 5px;

color: var(--light-gray);

font-family: 'Poppins', sans-serif;

transition: var(--transition);

}

.contact-form input:focus,

.contact-form textarea:focus,

.contact-form select:focus {

outline: none;

border-color: var(--electric-blue);

box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);

}

.contact-form textarea {

height: 150px;

resize: vertical;

}

/* Footer */

footer {

background: var(--black);

padding: 80px 0 20px;

border-top: 1px solid rgba(0, 255, 255, 0.1);

}

.footer-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 30px;

margin-bottom: 50px;

}

.footer-col h4 {

font-size: 1.3rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 10px;

color: var(--light-gray);

}

.footer-col h4:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 2px;

background: var(--electric-blue);

}

.footer-col p {

margin-bottom: 20px;

opacity: 0.8;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links li a {

position: relative;

padding-left: 15px;

}

.footer-links li a:before {

content: '→';

position: absolute;

left: 0;

color: var(--electric-blue);

transition: var(--transition);

opacity: 0;

}

.footer-links li a:hover {

color: var(--electric-blue);

padding-left: 20px;

}

.footer-links li a:hover:before {

opacity: 1;

}

.copyright {

text-align: center;

padding-top: 30px;

border-top: 1px solid rgba(255, 255, 255, 0.1);

font-size: 0.9rem;

opacity: 0.7;

}

/* Animations */

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0px); }

}

.floating {

animation: float 4s ease-in-out infinite;

}

@keyframes pulse {

0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.4); }

70% { box-shadow: 0 0 0 15px rgba(0, 255, 255, 0); }

100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }

}

.pulse {

animation: pulse 2s infinite;

}

/* Responsive */

@media (max-width: 992px) {

.tech-content, .contact-container {

grid-template-columns: 1fr;

}

.tech-image {

max-width: 600px;

margin: 0 auto 30px;

}

@media (max-width: 768px) {

.mobile-toggle {

display: block;

}

nav ul {

position: fixed;

top: 70px;

left: -100%;

width: 100%;

height: calc(100vh - 70px);

background: var(--black);

flex-direction: column;

align-items: center;

justify-content: center;

transition: var(--transition);

gap: 30px;

z-index: 1000;

}

nav ul.active {

left: 0;

}

.hero-content h2 {

font-size: 2.8rem;

}

.hero-stats {

flex-wrap: wrap;

justify-content: center;

}

.section-title h2 {

font-size: 2.2rem;

}

@media (max-width: 576px) {

.hero-content h2 {

font-size: 2.2rem;

}

.section-title h2 {

font-size: 1.8rem;

}

.hero-stats {

flex-direction: column;

}

.model-features {

flex-direction: column;

}

</style>

</head>

<body>

<h1>VOLT<span>DRIVE</span></h1>

</div>

<nav>

<li><a href="#hero" class="active">Ana Sayfa</a></li>

<li><a href="#features">Teknoloji</a></li>

<li><a href="#models">Modeller</a></li>

<li><a href="#technology">Özellikler</a></li>

<li><a href="#dealership">Bayilik</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</div>

</nav>

</div>

</header>

<h2>Geleceğin <span>Yolculuğu Başlıyor</span></h2>

<p>Sıfır emisyon, yüksek performans ve akıllı teknolojilerle donatılmış elektrikli araçlarımızla tanışın. Sürdürülebilir geleceğe birlikte ilerleyelim.</p>

<a href="#models" class="btn pulse">Modelleri Keşfet</a>

<div class="label">Menzil</div>

</div>

</div>

<div class="label">Otonom Sürüş</div>

</div>

</section>

<h2>Üstün <span>Teknolojiler</span></h2>

</div>

</div>

<h3>Gelişmiş Batarya</h3>

<p>800V ultra hızlı şarj teknolojisi ile 15 dakikada 400 km menzil</p>

</div>

</div>

<h3>Yüksek Performans</h3>

<p>0-100 km/h 2.4 saniye ile sınıfının en hızlı elektrikli SUV'u</p>

</div>

</div>

<h3>Otonom Sürüş</h3>

<p>Seviye 4 otonom sürüş ile konforlu ve güvenli yolculuk</p>

</div>

</div>

<h3>Sürdürülebilirlik</h3>

<p>%100 karbon nötr üretim ve geri dönüştürülmüş malzemeler</p>

</div>

</section>

<h2>VoltDrive <span>Modelleri</span></h2>

</div>

</div>

<h3>VoltDrive S Serisi</h3>

<span>650km Menzil</span>

</div>

</div>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</div>

<h3>VoltDrive E Serisi</h3>

<span>520km Menzil</span>

</div>

</div>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</div>

<h3>VoltDrive X Serisi</h3>

<span>720km Menzil</span>

</div>

</div>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</section>

<h2>Akıllı <span>Teknoloji</span></h2>

</div>

</div>

<h3>Geleceğin <span>Sürüş Deneyimi</span></h3>

<p>VoltDrive araçlarında kullanılan ileri teknolojiler, sürüş deneyiminizi tamamen yeniden tanımlıyor. Otonom sürüş, yapay zeka destekli asistan ve gelişmiş güvenlik sistemleri ile yolculuklarınız daha konforlu ve güvenli hale geliyor.</p>

<div>

<h4>Yapay Zeka Destekli Asistan</h4>

<p>Sesli komutlarla araç kontrolü ve kişiselleştirilmiş deneyim</p>

</div>

<div>

<h4>Gelişmiş Güvenlik Sistemleri</h4>

<p>360° çevre izleme, otonom frenleme ve acik durum algılama</p>

</div>

<div>

<h4>Kablosuz Yazılım Güncellemeleri</h4>

<p>Aracınız sürekli olarak en yeni özelliklerle güncellenir</p>

</div>

<a href="#" class="btn">Teknolojiyi Keşfet</a>

</div>

</section>

<h2>Bayilik <span>& Sipariş</span></h2>

</div>

<h3>En Yakın <span>Bayimizi Bulun</span></h3>

<p>Türkiye'nin dört bir yanına yayılmış bayilik ağımız ve hizmet noktalarımızla yanınızdayız.</p>

<h4>İstanbul Bayi</h4>

<p><i class="fas fa-map-marker-alt"></i> Maslak, İstanbul</p>

</div>

<h4>Ankara Bayi</h4>

<p><i class="fas fa-map-marker-alt"></i> Çankaya, Ankara</p>

</div>

<h4>İzmir Bayi</h4>

<p><i class="fas fa-map-marker-alt"></i> Alsancak, İzmir</p>

</div>

<h4>Bursa Bayi</h4>

<p><i class="fas fa-map-marker-alt"></i> Nilüfer, Bursa</p>

</div>

</section>

<h2>İletişim</h2>

</div>

<h3>Bize <span>Ulaşın</span></h3>

<p>Her türlü soru, görüş ve önerileriniz için aşağıdaki iletişim kanallarını kullanabilir veya iletişim formunu doldurabilirsiniz.</p>

<h4>Adres</h4>

<p>Teknopark İstanbul, Sanayi Mah. Teknopark Blv. No:1/1A, 34906 Pendik/İstanbul</p>

</div>

<h4>Telefon</h4>

</div>

<h4>E-posta</h4>

<p>info@voltdrive.com</p>

</div>

</div>

<h3>Bize Mesaj Gönderin</h3>

<form>

</div>

</div>

</div>

<option value="" disabled selected>Konu Seçiniz</option>

<option value="test">Test Sürüşü Randevusu</option>

<option value="info">Genel Bilgi</option>

<option value="sales">Satış Bilgileri</option>

<option value="service">Servis & Bakım</option>

<option value="other">Diğer</option>

</select>

</div>

</div>

<button type="submit" class="btn">Mesaj Gönder</button>

</form>

</div>

</section>

<h4>VoltDrive</h4>

<p>Geleceğin elektrikli otomobil teknolojisini bugünden deneyimleyin. Sürdürülebilir, yüksek performanslı ve akıllı araçlarla yolculuğunuzu yeniden tanımlayın.</p>

</div>

<h4>Hızlı Linkler</h4>

<li><a href="#hero">Ana Sayfa</a></li>

<li><a href="#features">Teknoloji</a></li>

<li><a href="#models">Modeller</a></li>

<li><a href="#technology">Özellikler</a></li>

<li><a href="#dealership">Bayilik</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</div>

<h4>Hizmetler</h4>

<li><a href="#">Test Sürüşü Randevusu</a></li>

<li><a href="#">Servis Randevusu</a></li>

<li><a href="#">Şarj İstasyonları Haritası</a></li>

<li><a href="#">Garanti Koşulları</a></li>

<li><a href="#">Finansman Seçenekleri</a></li>

<li><a href="#">İkinci El Programı</a></li>

</ul>

</div>

<h4>Bülten Aboneliği</h4>

<p>Yeniliklerden ve özel kampanyalardan haberdar olmak için e-bültenimize abone olun.</p>

</div>

<button class="btn" style="width: 100%; margin-top: 10px;">Abone Ol</button>

</div>

</div>

</footer>

// Mobile Menu Toggle

const mobileToggle = document.getElementById('mobile-toggle');

const navMenu = document.getElementById('nav-menu');

mobileToggle.addEventListener('click', () => {

navMenu.classList.toggle('active');

});

// Close menu when clicking outside

document.addEventListener('click', (e) => {

if (!mobileToggle.contains(e.target) && !navMenu.contains(e.target)) {

navMenu.classList.remove('active');

}

});

// Sticky header effect

window.addEventListener('scroll', () => {

const header = document.getElementById('header');

if (window.scrollY > 50) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Smooth scrolling for anchor links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function(e) {

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

if (target) {

window.scrollTo({

top: target.offsetTop - 70,

behavior: 'smooth'

});

// Close mobile menu if open

navMenu.classList.remove('active');

}

});

// Active link highlighting

const sections = document.querySelectorAll('section');

const navLinks = document.querySelectorAll('nav ul li a');

window.addEventListener('scroll', () => {

let current = '';

sections.forEach(section => {

const sectionTop = section.offsetTop;

const sectionHeight = section.clientHeight;

if (pageYOffset >= (sectionTop - sectionHeight / 3)) {

current = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href').substring(1) === current) {

link.classList.add('active');

}

});

// Floating animation for feature cards

const featureCards = document.querySelectorAll('.feature-card');

featureCards.forEach((card, index) => {

card.style.animationDelay = `${index * 0.1}s`;

});

</script>

</body>

</html>

Le code de Mete

Recommandé

Lettre d'amour

Barre de navigation CSS responsive

Bouton Confetti

HTML

CSS

JS

Recommandé

Lettre d'amour

Barre de navigation CSS responsive

Bouton Confetti

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS