Webleb - fragmentos de código

HTML

<!DOCTYPE html>

<head>

<title>Nova Cosmetic | Premium Beauty Products</title>

<style>

:root {

--primary: #8a6bc9;

--primary-dark: #6c4fb0;

--secondary: #ff9ec0;

--light: #f8f5ff;

--dark: #2a2438;

--text: #4a4a68;

--accent: #ff6b8b;

--transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

color: var(--text);

line-height: 1.6;

background-color: var(--light);

overflow-x: hidden;

}

h1, h2, h3, h4 {

font-family: 'Playfair Display', serif;

color: var(--dark);

font-weight: 700;

}

a {

text-decoration: none;

color: inherit;

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

}

.btn {

display: inline-block;

padding: 14px 32px;

background: var(--primary);

color: white;

border-radius: 50px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;

transition: var(--transition);

border: 2px solid var(--primary);

cursor: pointer;

}

.btn:hover {

background: transparent;

color: var(--primary);

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(138, 107, 201, 0.2);

}

.btn-secondary {

background: var(--accent);

border-color: var(--accent);

}

.btn-secondary:hover {

color: var(--accent);

}

.btn-outline {

background: transparent;

color: var(--primary);

}

.btn-outline:hover {

background: var(--primary);

color: white;

}

section {

padding: 80px 0;

}

.section-title {

text-align: center;

margin-bottom: 60px;

position: relative;

}

.section-title h2 {

font-size: 2.5rem;

display: inline-block;

margin-bottom: 15px;

}

.section-title::after {

content: "";

position: absolute;

width: 80px;

height: 3px;

background: var(--primary);

bottom: -10px;

left: 50%;

transform: translateX(-50%);

}

/* Header Styles */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

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

transition: var(--transition);

}

header.scrolled {

box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);

padding: 10px 0;

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 0;

}

.logo {

font-size: 1.8rem;

font-weight: 700;

color: var(--primary);

display: flex;

align-items: center;

}

.logo span {

color: var(--accent);

}

.logo i {

margin-right: 10px;

}

nav ul {

display: flex;

list-style: none;

}

nav ul li {

margin-left: 30px;

position: relative;

}

nav ul li a {

font-weight: 500;

transition: var(--transition);

position: relative;

}

nav ul li a::after {

content: "";

position: absolute;

width: 0;

height: 2px;

background: var(--primary);

bottom: -5px;

left: 0;

transition: var(--transition);

}

nav ul li a:hover {

color: var(--primary);

}

nav ul li a:hover::after {

width: 100%;

}

.nav-icons {

display: flex;

align-items: center;

}

.nav-icons a {

margin-left: 20px;

font-size: 1.2rem;

transition: var(--transition);

}

.nav-icons a:hover {

color: var(--primary);

transform: translateY(-3px);

}

.mobile-toggle {

display: none;

font-size: 1.5rem;

cursor: pointer;

}

/* Hero Section */

.hero {

height: 100vh;

display: flex;

align-items: center;

position: relative;

overflow: hidden;

background: linear-gradient(135deg, #f8f5ff 0%, #e6e1ff 100%);

}

.hero::before {

content: "";

position: absolute;

width: 400px;

height: 400px;

border-radius: 50%;

background: var(--secondary);

opacity: 0.2;

top: -100px;

right: -100px;

z-index: 0;

}

.hero::after {

content: "";

position: absolute;

width: 300px;

height: 300px;

border-radius: 50%;

background: var(--primary);

opacity: 0.1;

bottom: -100px;

left: -100px;

z-index: 0;

}

.hero-content {

position: relative;

z-index: 2;

max-width: 600px;

}

.hero h1 {

font-size: 3.5rem;

line-height: 1.2;

margin-bottom: 20px;

color: var(--dark);

}

.hero p {

font-size: 1.2rem;

margin-bottom: 30px;

color: var(--text);

}

.hero-buttons {

display: flex;

gap: 15px;

}

.hero-image {

position: absolute;

right: 0;

top: 50%;

transform: translateY(-50%);

width: 45%;

z-index: 1;

}

.hero-image img {

width: 100%;

max-width: 600px;

border-radius: 20px;

box-shadow: 0 30px 60px rgba(138, 107, 201, 0.3);

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

}

@keyframes float {

0% { transform: translateY(-50%) translateX(0); }

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

100% { transform: translateY(-50%) translateX(0); }

}

/* Categories Section */

.categories {

background: white;

position: relative;

overflow: hidden;

}

.categories-grid {

display: grid;

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

gap: 30px;

}

.category-card {

background: white;

border-radius: 15px;

overflow: hidden;

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

transition: var(--transition);

position: relative;

}

.category-card:hover {

transform: translateY(-10px);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

}

.category-image {

height: 250px;

overflow: hidden;

}

.category-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.category-card:hover .category-image img {

transform: scale(1.1);

}

.category-content {

padding: 25px;

text-align: center;

}

.category-content h3 {

margin-bottom: 10px;

font-size: 1.5rem;

}

/* Featured Products */

.featured-products {

background: linear-gradient(to bottom, #f8f5ff 0%, #ffffff 100%);

}

.products-grid {

display: grid;

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

gap: 30px;

}

.product-card {

background: white;

border-radius: 15px;

overflow: hidden;

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

transition: var(--transition);

position: relative;

}

.product-card:hover {

transform: translateY(-10px);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

}

.product-badge {

position: absolute;

top: 15px;

right: 15px;

background: var(--accent);

color: white;

padding: 5px 15px;

border-radius: 30px;

font-size: 0.85rem;

font-weight: 600;

z-index: 2;

}

.product-image {

height: 250px;

display: flex;

align-items: center;

justify-content: center;

background: #f9f7ff;

position: relative;

overflow: hidden;

}

.product-image img {

max-width: 70%;

max-height: 80%;

transition: var(--transition);

}

.product-card:hover .product-image img {

transform: scale(1.1);

}

.product-content {

padding: 25px;

text-align: center;

}

.product-content h3 {

margin-bottom: 10px;

font-size: 1.3rem;

}

.product-price {

font-size: 1.2rem;

font-weight: 700;

color: var(--primary);

margin: 15px 0;

}

.rating {

color: #ffc107;

margin: 10px 0;

}

/* About Section */

.about {

position: relative;

overflow: hidden;

}

.about-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 60px;

align-items: center;

}

.about-image img {

width: 100%;

border-radius: 20px;

box-shadow: 0 30px 60px rgba(138, 107, 201, 0.2);

}

.about-text h2 {

margin-bottom: 25px;

font-size: 2.2rem;

}

.about-text p {

margin-bottom: 20px;

}

.stats {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 20px;

margin-top: 30px;

}

.stat-item {

text-align: center;

padding: 20px;

background: rgba(138, 107, 201, 0.05);

border-radius: 15px;

transition: var(--transition);

}

.stat-item:hover {

background: rgba(138, 107, 201, 0.1);

transform: translateY(-5px);

}

.stat-item h3 {

font-size: 2.5rem;

color: var(--primary);

margin-bottom: 5px;

}

/* Testimonials */

.testimonials {

background: linear-gradient(135deg, #8a6bc9 0%, #6c4fb0 100%);

color: white;

position: relative;

overflow: hidden;

}

.testimonials::before {

content: "";

position: absolute;

width: 300px;

height: 300px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.05);

top: -50px;

right: -50px;

}

.testimonials::after {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.05);

bottom: -50px;

left: -50px;

}

.testimonials .section-title h2 {

color: white;

}

.testimonials .section-title::after {

background: white;

}

.testimonials-grid {

display: grid;

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

gap: 30px;

}

.testimonial-card {

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

backdrop-filter: blur(10px);

border-radius: 15px;

padding: 30px;

transition: var(--transition);

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

}

.testimonial-card:hover {

transform: translateY(-10px);

background: rgba(255, 255, 255, 0.15);

}

.testimonial-text {

font-style: italic;

margin-bottom: 20px;

position: relative;

}

.testimonial-text::before {

content: """;

font-size: 4rem;

position: absolute;

top: -25px;

left: -15px;

opacity: 0.1;

font-family: Georgia, serif;

}

.testimonial-author {

display: flex;

align-items: center;

}

.author-image {

width: 50px;

height: 50px;

border-radius: 50%;

overflow: hidden;

margin-right: 15px;

}

.author-image img {

width: 100%;

height: 100%;

object-fit: cover;

}

.author-info h4 {

color: white;

margin-bottom: 5px;

}

.author-info p {

opacity: 0.8;

font-size: 0.9rem;

}

/* Newsletter */

.newsletter {

background: white;

text-align: center;

}

.newsletter-content {

max-width: 600px;

margin: 0 auto;

}

.newsletter p {

margin-bottom: 30px;

}

.newsletter-form {

display: flex;

max-width: 500px;

margin: 0 auto;

}

.newsletter-form input {

flex: 1;

padding: 15px 20px;

border: 2px solid #e6e1ff;

border-radius: 50px 0 0 50px;

font-size: 1rem;

outline: none;

transition: var(--transition);

}

.newsletter-form input:focus {

border-color: var(--primary);

}

.newsletter-form button {

background: var(--primary);

color: white;

border: none;

padding: 0 30px;

border-radius: 0 50px 50px 0;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

}

.newsletter-form button:hover {

background: var(--primary-dark);

}

/* Footer */

footer {

background: var(--dark);

color: rgba(255, 255, 255, 0.8);

padding: 80px 0 0;

}

.footer-grid {

display: grid;

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

gap: 40px;

margin-bottom: 60px;

}

.footer-col h3 {

color: white;

margin-bottom: 25px;

font-size: 1.4rem;

position: relative;

padding-bottom: 15px;

}

.footer-col h3::after {

content: "";

position: absolute;

width: 40px;

height: 2px;

background: var(--primary);

bottom: 0;

left: 0;

}

.footer-col ul {

list-style: none;

}

.footer-col ul li {

margin-bottom: 12px;

}

.footer-col ul li a {

transition: var(--transition);

display: inline-block;

}

.footer-col ul li a:hover {

color: white;

transform: translateX(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: rgba(255, 255, 255, 0.1);

transition: var(--transition);

}

.social-links a:hover {

background: var(--primary);

transform: translateY(-5px);

}

.copyright {

text-align: center;

padding: 25px 0;

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

font-size: 0.9rem;

}

/* Responsive Design */

@media (max-width: 992px) {

.hero {

height: auto;

padding: 150px 0 80px;

}

.hero-content {

max-width: 100%;

text-align: center;

padding-top: 50px;

}

.hero-image {

position: relative;

width: 100%;

transform: none;

margin-top: 50px;

}

.hero-buttons {

justify-content: center;

}

.about-content {

grid-template-columns: 1fr;

}

.about-image {

order: -1;

}

@media (max-width: 768px) {

.mobile-toggle {

display: block;

}

nav {

position: fixed;

top: 80px;

left: -100%;

width: 80%;

height: calc(100vh - 80px);

background: white;

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

transition: var(--transition);

z-index: 1000;

}

nav.active {

left: 0;

}

nav ul {

flex-direction: column;

padding: 30px;

}

nav ul li {

margin: 0 0 20px 0;

}

.hero h1 {

font-size: 2.5rem;

}

.hero-buttons {

flex-direction: column;

gap: 15px;

}

.newsletter-form {

flex-direction: column;

gap: 15px;

}

.newsletter-form input {

border-radius: 50px;

}

.newsletter-form button {

border-radius: 50px;

padding: 15px;

}

</style>

</head>

<body>

<i class="fas fa-spa"></i>Nova<span>Cosmetic</span>

</a>

</div>

<ul>

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

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

<li><a href="#">Koleksiyonlar</a></li>

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

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

</ul>

</nav>

</div>

</header>

<h1>Doğal Güzellik, Yeni Nesil Cilt Bakımı</h1>

<p>Nova Cosmetic ile cildinizin doğal ışıltısını ortaya çıkarın. %100 doğal içeriklerle formüle edilmiş premium bakım ürünleri.</p>

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

<a href="#" class="btn btn-outline">Ürünlerimiz</a>

</div>

</div>

</section>

<h2>Kategoriler</h2>

<p>İhtiyacınıza uygun bakım kategorilerini keşfedin</p>

</div>

</div>

<h3>Yüz Bakımı</h3>

<p>Günlük bakım rutininiz için özel formüller</p>

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

</div>

</div>

<h3>Vücut Bakımı</h3>

<p>Tüm vücudunuz için nemlendirici çözümler</p>

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

</div>

</div>

<h3>Saç Bakımı</h3>

<p>Saçlarınızın gücünü ve parlaklığını geri kazanın</p>

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

</div>

</section>

<h2>Öne Çıkan Ürünler</h2>

<p>En çok sevilen Nova Cosmetic ürünleri</p>

</div>

</div>

<h3>Nemlendirici Hyaluronik Serum</h3>

</div>

<a href="#" class="btn">Sepete Ekle</a>

</div>

<div class="product-badge">ÇOK SATAN</div>

</div>

<h3>Anti-Aging Gece Kremi</h3>

</div>

<a href="#" class="btn">Sepete Ekle</a>

</div>

</div>

<h3>Vitamin C Aydınlatıcı Serum</h3>

</div>

<a href="#" class="btn">Sepete Ekle</a>

</div>

</div>

<h3>SPF 50+ Mineral Güneş Koruyucu</h3>

</div>

<a href="#" class="btn">Sepete Ekle</a>

</div>

</section>

<h2>Doğanın İyileştirici Gücü</h2>

<p>Nova Cosmetic, 2010 yılından bu yana doğal ve etkili cilt bakım ürünleri geliştiriyor. Laboratuvarlarımızda, en son teknoloji ile doğanın iyileştirici gücünü bir araya getiriyoruz.</p>

<p>Tüm ürünlerimiz vegan, cruelty-free ve çevre dostu ambalajlarda sizlere sunulmaktadır. Sürdürülebilir kaynaklardan elde edilen içeriklerle cildinize en iyi bakımı sağlıyoruz.</p>

<p>Yıllık Deneyim</p>

</div>

<p>Ürün Çeşidi</p>

</div>

<p>Mutlu Müşteri</p>

</div>

<p>Ülkede Satış</p>

</div>

<a href="#" class="btn" style="margin-top: 30px;">Hakkımızda</a>

</div>

</div>

</section>

<h2>Müşteri Yorumları</h2>

<p>Nova Cosmetic kullananlar ne diyor?</p>

</div>

"Hyaluronik serum gerçekten cildimi yeniledi! Kullanmaya başladıktan 2 hafta sonra bile farkı hissettim. Kırışıklıklarım azaldı ve cildim daha dolgun görünüyor."

</div>

</div>

<p>İstanbul</p>

</div>

"Vitamin C serumu lekelerimde inanılmaz etkili oldu. 1 aylık kullanım sonrası lekelerimde %70 azalma gözlemledim. Ayrıca cildim çok daha aydınlık ve canlı görünüyor."

</div>

</div>

<h4>Zeynep T.</h4>

<p>Ankara</p>

</div>

"Güneş koruyucunuz benim için bir kurtarıcı oldu. Cildim çok hassas ve yağlı ama bu ürün hiç yağlanma yapmıyor ve akne oluşumunu engelliyor. Artık her gün kullanıyorum!"

</div>

</div>

<h4>Mehmet S.</h4>

<p>İzmir</p>

</div>

</section>

<h2>Bültenimize Abone Olun</h2>

<p>Yeni ürünler, özel indirimler ve bakım ipuçları için kaydolun</p>

</div>

<button type="submit">Abone Ol</button>

</form>

</div>

</section>

<i class="fas fa-spa"></i>Nova<span>Cosmetic</span>

</a>

<p>Doğanın iyileştirici gücünü en son teknoloji ile birleştirerek cilt bakımında yeni bir standart oluşturuyoruz.</p>

</div>

<h3>Hızlı Erişim</h3>

<ul>

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

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

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

<li><a href="#">Koleksiyonlar</a></li>

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

</ul>

</div>

<h3>Müşteri Hizmetleri</h3>

<ul>

<li><a href="#">Sıkça Sorulan Sorular</a></li>

<li><a href="#">Sipariş Takibi</a></li>

<li><a href="#">İade & Değişim</a></li>

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

<li><a href="#">Gizlilik Politikası</a></li>

<li><a href="#">Çerez Politikası</a></li>

</ul>

</div>

<h3>İletişim</h3>

<ul>

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

<li><i class="fas fa-envelope"></i> info@novacosmetic.com</li>

</ul>

</div>

</div>

</footer>

// Header scroll effect

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

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

if (window.scrollY > 100) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Mobile menu toggle

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

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

mobileToggle.addEventListener('click', function() {

nav.classList.toggle('active');

});

// Product card animation

const productCards = document.querySelectorAll('.product-card');

productCards.forEach(card => {

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

this.style.transform = 'translateY(-15px)';

});

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

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

});

// Newsletter form submission

const newsletterForm = document.querySelector('.newsletter-form');

newsletterForm.addEventListener('submit', function(e) {

e.preventDefault();

const emailInput = this.querySelector('input[type="email"]');

alert(`Teşekkürler! ${emailInput.value} adresiyle bültenimize abone oldunuz.`);

emailInput.value = '';

});

</script>

</body>

</html>

Metehan

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTML

CSS

JS

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS