Webleb - HTML UI Elements - Un codice di Mete

HTML

<!DOCTYPE html>

<head>

<title>CHRONOS - Lüks Kol Saatleri</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

line-height: 1.6;

color: #333;

background-color: #000;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

/* Header */

header {

background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);

padding: 1rem 0;

position: fixed;

width: 100%;

top: 0;

z-index: 1000;

box-shadow: 0 2px 20px rgba(0,0,0,0.5);

}

nav {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 2rem;

font-weight: bold;

color: #d4af37;

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

}

.nav-links {

display: flex;

list-style: none;

gap: 2rem;

}

.nav-links a {

color: #fff;

text-decoration: none;

transition: color 0.3s;

position: relative;

}

.nav-links a:hover {

color: #d4af37;

}

.nav-links a::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background: #d4af37;

transition: width 0.3s;

}

.nav-links a:hover::after {

width: 100%;

}

/* Hero Section */

.hero {

height: 100vh;

background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%23111" width="1200" height="800"/><circle cx="600" cy="400" r="200" fill="none" stroke="%23d4af37" stroke-width="2" opacity="0.3"/><circle cx="600" cy="400" r="150" fill="none" stroke="%23d4af37" stroke-width="1" opacity="0.2"/></svg>');

background-size: cover;

background-position: center;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

color: white;

position: relative;

}

.hero-content h1 {

font-size: 4rem;

margin-bottom: 1rem;

text-shadow: 2px 2px 4px rgba(0,0,0,0.7);

animation: fadeInUp 1s ease-out;

}

.hero-content p {

font-size: 1.5rem;

margin-bottom: 2rem;

opacity: 0.9;

animation: fadeInUp 1s ease-out 0.3s both;

}

.cta-button {

display: inline-block;

background: linear-gradient(45deg, #d4af37, #f4e161);

color: #000;

padding: 15px 40px;

text-decoration: none;

border-radius: 50px;

font-weight: bold;

transition: all 0.3s;

animation: fadeInUp 1s ease-out 0.6s both;

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

}

.cta-button:hover {

transform: translateY(-3px);

box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);

}

/* Featured Products */

.featured {

padding: 5rem 0;

background: #111;

}

.section-title {

text-align: center;

font-size: 3rem;

color: #d4af37;

margin-bottom: 3rem;

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

}

.products-grid {

display: grid;

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

gap: 3rem;

}

.product-card {

background: linear-gradient(145deg, #1a1a1a, #2a2a2a);

border-radius: 20px;

padding: 2rem;

text-align: center;

transition: all 0.3s;

border: 1px solid #333;

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

}

.product-card:hover {

transform: translateY(-10px);

box-shadow: 0 20px 50px rgba(212, 175, 55, 0.2);

}

.product-image {

width: 200px;

height: 200px;

background: radial-gradient(circle, #333, #1a1a1a);

border-radius: 50%;

margin: 0 auto 2rem;

display: flex;

align-items: center;

justify-content: center;

position: relative;

border: 3px solid #d4af37;

}

.watch-face {

width: 120px;

height: 120px;

background: linear-gradient(145deg, #f8f8f8, #ddd);

border-radius: 50%;

position: relative;

border: 4px solid #d4af37;

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

}

.watch-face::before {

content: '';

position: absolute;

top: 10px;

left: 50%;

transform: translateX(-50%);

width: 2px;

height: 40px;

background: #333;

border-radius: 1px;

}

.watch-face::after {

content: '';

position: absolute;

top: 20px;

left: 50%;

transform: translateX(-50%);

width: 3px;

height: 30px;

background: #d4af37;

border-radius: 1px;

}

.product-card h3 {

color: #d4af37;

font-size: 1.5rem;

margin-bottom: 1rem;

}

.product-card p {

color: #ccc;

margin-bottom: 1.5rem;

}

.price {

font-size: 1.8rem;

color: #d4af37;

font-weight: bold;

}

/* About Section */

.about {

padding: 5rem 0;

background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);

}

.about-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.about-text {

color: #ccc;

}

.about-text h2 {

color: #d4af37;

font-size: 2.5rem;

margin-bottom: 2rem;

}

.about-text p {

font-size: 1.1rem;

line-height: 1.8;

margin-bottom: 1.5rem;

}

.about-image {

width: 100%;

height: 400px;

background: radial-gradient(circle, #333, #1a1a1a);

border-radius: 20px;

display: flex;

align-items: center;

justify-content: center;

border: 2px solid #d4af37;

}

/* Contact Section */

.contact {

padding: 5rem 0;

background: #111;

}

.contact-form {

max-width: 600px;

margin: 0 auto;

}

.form-group {

margin-bottom: 2rem;

}

.form-group label {

display: block;

color: #d4af37;

margin-bottom: 0.5rem;

font-weight: bold;

}

.form-group input,

.form-group textarea {

width: 100%;

padding: 15px;

background: #1a1a1a;

border: 2px solid #333;

border-radius: 10px;

color: #fff;

font-size: 1rem;

transition: border-color 0.3s;

}

.form-group input:focus,

.form-group textarea:focus {

outline: none;

border-color: #d4af37;

}

.submit-btn {

background: linear-gradient(45deg, #d4af37, #f4e161);

color: #000;

padding: 15px 40px;

border: none;

border-radius: 50px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s;

width: 100%;

font-size: 1.1rem;

}

.submit-btn:hover {

transform: translateY(-2px);

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

}

/* Footer */

footer {

background: #000;

color: #ccc;

text-align: center;

padding: 2rem 0;

border-top: 1px solid #333;

}

/* Animations */

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

/* Responsive */

@media (max-width: 768px) {

.nav-links {

display: none;

}

.hero-content h1 {

font-size: 2.5rem;

}

.hero-content p {

font-size: 1.2rem;

}

.about-content {

grid-template-columns: 1fr;

text-align: center;

}

.section-title {

font-size: 2rem;

}

/* Smooth scrolling */

html {

scroll-behavior: smooth;

}

/* Loading animation */

.loading {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #000;

display: flex;

align-items: center;

justify-content: center;

z-index: 9999;

transition: opacity 0.5s;

}

.spinner {

width: 50px;

height: 50px;

border: 3px solid #333;

border-top: 3px solid #d4af37;

border-radius: 50%;

animation: spin 1s linear infinite;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

</style>

</head>

<body>

</div>

<div class="logo">CHRONOS</div>

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

<li><a href="#products">Ürünler</a></li>

<li><a href="#about">Hakkımızda</a></li>

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

</ul>

</nav>

</header>

<h1>CHRONOS</h1>

<p>Zamanın Lüks Tanımı</p>

<a href="#products" class="cta-button">Koleksiyonu Keşfet</a>

</div>

</section>

<h2 class="section-title">Öne Çıkan Modeller</h2>

</div>

<h3>Royal Classic</h3>

<p>18K altın kasa ile zarafet ve lüksün mükemmel birleşimi</p>

</div>

</div>

<h3>Sport Elite</h3>

<p>Titanium kasa ve su geçirmez tasarım ile spor tutkunları için</p>

</div>

</div>

<h3>Diamond Prestige</h3>

<p>Elmas detaylı limiteli seri, sadece 100 adet üretildi</p>

</div>

</section>

<h2>Hakkımızda</h2>

<p>1985 yılından beri lüks kol saati dünyasında öncü olan CHRONOS, İsviçre hassasiyeti ile Türk zanaatkarlığını birleştirerek eşsiz timepiece'ler üretmektedir.</p>

<p>Her saatimiz, deneyimli usta saatçilerimiz tarafından el işçiliği ile üretilir ve her detayında mükemmeliyeti yansıtır. Zamanın değerini bilen seçkin müşterilerimiz için tasarlanan koleksiyonlarımız, hem klasik zarafeti hem de modern teknolojiyi bir araya getirir.</p>

<p>CHRONOS ile sadece saate değil, bir yaşam felsefesine sahip olursunuz.</p>

</div>

<div style="font-size: 1rem; margin-top: 1rem;">İsviçre Kalitesi</div>

</div>

</section>

<h2 class="section-title">İletişim</h2>

<label for="name">Ad Soyad</label>

</div>

<label for="email">E-posta</label>

</div>

<label for="phone">Telefon</label>

</div>

<label for="message">Mesajınız</label>

</div>

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

</form>

</div>

</section>

</div>

</footer>

// Loading screen

window.addEventListener('load', function() {

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

setTimeout(() => {

loading.style.opacity = '0';

setTimeout(() => {

loading.style.display = 'none';

}, 500);

}, 1000);

});

// Smooth scrolling for navigation links

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

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

e.preventDefault();

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

if (target) {

target.scrollIntoView({

behavior: 'smooth',

block: 'start'

});

}

});

// Form submission

document.querySelector('.contact-form').addEventListener('submit', function(e) {

e.preventDefault();

// Form validation

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const message = document.getElementById('message').value;

if (name && email && message) {

alert('Mesajınız başarıyla gönderildi! En kısa sürede size dönüş yapacağız.');

this.reset();

} else {

alert('Lütfen tüm gerekli alanları doldurun.');

}

});

// Navbar scroll effect

window.addEventListener('scroll', function() {

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

if (window.scrollY > 100) {

header.style.background = 'rgba(26, 26, 26, 0.95)';

header.style.backdropFilter = 'blur(10px)';

} else {

header.style.background = 'linear-gradient(135deg, #1a1a1a 0%, #333 100%)';

header.style.backdropFilter = 'none';

}

});

// Product card hover animations

document.querySelectorAll('.product-card').forEach(card => {

card.addEventListener('mouseenter', function() {

this.style.transform = 'translateY(-10px) scale(1.02)';

});

card.addEventListener('mouseleave', function() {

this.style.transform = 'translateY(0) scale(1)';

});

// Add scroll animations

const observerOptions = {

threshold: 0.1,

rootMargin: '0px 0px -50px 0px'

};

const observer = new IntersectionObserver(function(entries) {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.style.opacity = '1';

entry.target.style.transform = 'translateY(0)';

}

});

}, observerOptions);

// Observe elements for animation

document.querySelectorAll('.product-card, .about-text').forEach(el => {

el.style.opacity = '0';

el.style.transform = 'translateY(30px)';

el.style.transition = 'all 0.6s ease-out';

observer.observe(el);

});

</script>

</body>

</html>

Un codice di Mete

Consigliato

animazione

HTML

CSS

JS

Consigliato

animazione

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS