Webleb - UI Elements

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

Recommended

A Code by Metehan

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS