Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>CreativeMind Blog | Profesyonel Blog Platformu</title>

<style>

:root {

--primary: #2A2D43;

--secondary: #FF6B8B;

--accent: #6C63FF;

--light: #F8F9FA;

--dark: #1A1C2E;

--gray: #6C757D;

--light-gray: #E9ECEF;

--transition: all 0.3s ease;

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

--shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.15);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

background-color: var(--light);

color: var(--dark);

line-height: 1.7;

overflow-x: hidden;

}

h1, h2, h3, h4 {

font-family: 'Playfair Display', serif;

font-weight: 600;

line-height: 1.3;

}

a {

text-decoration: none;

color: inherit;

transition: var(--transition);

}

ul {

list-style: none;

}

.container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

.btn {

display: inline-block;

padding: 12px 28px;

background: var(--secondary);

color: white;

border: none;

border-radius: 30px;

font-weight: 600;

font-size: 0.95rem;

letter-spacing: 0.5px;

cursor: pointer;

transition: var(--transition);

text-transform: uppercase;

}

.btn:hover {

background: var(--accent);

transform: translateY(-3px);

box-shadow: var(--shadow-hover);

}

.btn-outline {

background: transparent;

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

color: var(--secondary);

}

.btn-outline:hover {

background: var(--secondary);

color: white;

}

.section-title {

text-align: center;

margin-bottom: 60px;

position: relative;

}

.section-title h2 {

font-size: 2.5rem;

color: var(--primary);

margin-bottom: 15px;

}

.section-title p {

color: var(--gray);

max-width: 600px;

margin: 0 auto;

}

.section-title .title-line {

width: 80px;

height: 4px;

background: linear-gradient(to right, var(--secondary), var(--accent));

margin: 20px auto;

border-radius: 2px;

}

/* Header Styles */

header {

background-color: white;

position: fixed;

width: 100%;

z-index: 1000;

padding: 20px 0;

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

transition: var(--transition);

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

display: flex;

align-items: center;

gap: 10px;

}

.logo h1 {

font-size: 1.8rem;

font-weight: 700;

color: var(--primary);

}

.logo h1 span {

color: var(--secondary);

}

.logo-icon {

color: var(--accent);

font-size: 1.8rem;

}

nav ul {

display: flex;

gap: 35px;

}

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(--secondary);

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(--primary);

}

/* Hero Section */

.hero {

padding: 180px 0 100px;

background: linear-gradient(135deg, rgba(42, 45, 67, 0.9) 0%, rgba(26, 28, 46, 0.95) 100%),

url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;

color: white;

text-align: center;

}

.hero-content {

max-width: 800px;

margin: 0 auto;

padding: 0 20px;

}

.hero-content h2 {

font-size: 3.5rem;

margin-bottom: 20px;

line-height: 1.2;

}

.hero-content p {

font-size: 1.2rem;

margin-bottom: 40px;

opacity: 0.9;

max-width: 700px;

margin-left: auto;

margin-right: auto;

}

.hero-stats {

display: flex;

justify-content: center;

gap: 40px;

margin-top: 60px;

flex-wrap: wrap;

}

.stat-item {

text-align: center;

}

.stat-item .number {

font-size: 2.5rem;

font-weight: 700;

color: var(--secondary);

margin-bottom: 5px;

}

.stat-item .label {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

opacity: 0.8;

}

/* Featured Posts */

.featured {

padding: 100px 0;

background-color: white;

}

.featured-grid {

display: grid;

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

gap: 30px;

margin-bottom: 50px;

}

.featured-card {

background: white;

border-radius: 10px;

overflow: hidden;

box-shadow: var(--shadow);

transition: var(--transition);

position: relative;

}

.featured-card:hover {

transform: translateY(-10px);

box-shadow: var(--shadow-hover);

}

.featured-img {

height: 220px;

overflow: hidden;

}

.featured-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.featured-card:hover .featured-img img {

transform: scale(1.05);

}

.featured-content {

padding: 25px;

}

.post-category {

display: inline-block;

background: var(--accent);

color: white;

padding: 5px 15px;

border-radius: 30px;

font-size: 0.8rem;

font-weight: 600;

margin-bottom: 15px;

text-transform: uppercase;

}

.featured-content h3 {

font-size: 1.4rem;

margin-bottom: 15px;

color: var(--primary);

}

.featured-content p {

color: var(--gray);

margin-bottom: 20px;

font-size: 0.95rem;

}

.post-meta {

display: flex;

justify-content: space-between;

align-items: center;

font-size: 0.85rem;

color: var(--gray);

border-top: 1px solid var(--light-gray);

padding-top: 15px;

}

.post-meta .author {

display: flex;

align-items: center;

gap: 8px;

}

.author-img {

width: 30px;

height: 30px;

border-radius: 50%;

object-fit: cover;

}

/* Latest Posts */

.latest {

padding: 100px 0;

background-color: var(--light);

}

.latest-grid {

display: grid;

grid-template-columns: 2fr 1fr;

gap: 40px;

}

.main-posts {

display: grid;

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

gap: 30px;

}

.post-card {

background: white;

border-radius: 10px;

overflow: hidden;

box-shadow: var(--shadow);

transition: var(--transition);

}

.post-card:hover {

transform: translateY(-5px);

box-shadow: var(--shadow-hover);

}

.post-card .post-img {

height: 200px;

overflow: hidden;

}

.post-card .post-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.post-card:hover .post-img img {

transform: scale(1.05);

}

.post-card-content {

padding: 25px;

}

.post-card-content h3 {

font-size: 1.3rem;

margin-bottom: 10px;

color: var(--primary);

}

/* Sidebar */

.sidebar {

background: white;

border-radius: 10px;

padding: 30px;

box-shadow: var(--shadow);

height: fit-content;

}

.sidebar-widget {

margin-bottom: 40px;

}

.sidebar-widget:last-child {

margin-bottom: 0;

}

.sidebar-widget h3 {

font-size: 1.3rem;

margin-bottom: 20px;

padding-bottom: 10px;

border-bottom: 2px solid var(--light-gray);

color: var(--primary);

}

.categories-list li {

padding: 12px 0;

border-bottom: 1px solid var(--light-gray);

}

.categories-list li:last-child {

border-bottom: none;

}

.categories-list li a {

display: flex;

justify-content: space-between;

align-items: center;

}

.categories-list li a:hover {

color: var(--secondary);

}

.categories-list .count {

background: var(--light-gray);

padding: 3px 10px;

border-radius: 30px;

font-size: 0.8rem;

font-weight: 600;

}

.popular-posts li {

display: flex;

gap: 15px;

margin-bottom: 20px;

padding-bottom: 20px;

border-bottom: 1px solid var(--light-gray);

}

.popular-posts li:last-child {

margin-bottom: 0;

padding-bottom: 0;

border-bottom: none;

}

.popular-img {

width: 80px;

height: 80px;

border-radius: 8px;

overflow: hidden;

flex-shrink: 0;

}

.popular-img img {

width: 100%;

height: 100%;

object-fit: cover;

}

.popular-content h4 {

font-size: 0.95rem;

margin-bottom: 8px;

line-height: 1.4;

}

.popular-content span {

font-size: 0.8rem;

color: var(--gray);

}

.tags {

display: flex;

flex-wrap: wrap;

gap: 10px;

}

.tag {

background: var(--light-gray);

padding: 8px 15px;

border-radius: 30px;

font-size: 0.85rem;

transition: var(--transition);

}

.tag:hover {

background: var(--secondary);

color: white;

}

/* Newsletter */

.newsletter {

padding: 80px 0;

background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);

color: white;

text-align: center;

}

.newsletter-content {

max-width: 600px;

margin: 0 auto;

}

.newsletter h2 {

font-size: 2.5rem;

margin-bottom: 20px;

}

.newsletter p {

margin-bottom: 30px;

opacity: 0.9;

}

.newsletter-form {

display: flex;

max-width: 500px;

margin: 0 auto;

gap: 10px;

}

.newsletter-form input {

flex: 1;

padding: 15px 20px;

border: none;

border-radius: 30px;

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

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

color: white;

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

}

.newsletter-form input::placeholder {

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

}

/* Footer */

footer {

background: var(--dark);

color: white;

padding: 80px 0 20px;

}

.footer-grid {

display: grid;

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

gap: 40px;

margin-bottom: 50px;

}

.footer-col h4 {

font-size: 1.3rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 10px;

}

.footer-col h4:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 2px;

background: var(--secondary);

}

.footer-col p {

margin-bottom: 20px;

opacity: 0.8;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links li a:hover {

color: var(--secondary);

padding-left: 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(--secondary);

transform: translateY(-5px);

}

.copyright {

text-align: center;

padding-top: 30px;

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

font-size: 0.9rem;

opacity: 0.7;

}

/* Responsive */

@media (max-width: 992px) {

.latest-grid {

grid-template-columns: 1fr;

}

.hero-content h2 {

font-size: 2.8rem;

}

.newsletter-form {

flex-direction: column;

}

.newsletter-form input,

.newsletter-form button {

width: 100%;

}

@media (max-width: 768px) {

.mobile-toggle {

display: block;

}

nav ul {

position: fixed;

top: 80px;

left: -100%;

width: 100%;

height: calc(100vh - 80px);

background: white;

flex-direction: column;

align-items: center;

justify-content: flex-start;

padding-top: 50px;

transition: var(--transition);

gap: 30px;

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

}

nav ul.active {

left: 0;

}

.hero {

padding: 150px 0 80px;

}

.hero-content h2 {

font-size: 2.3rem;

}

.section-title h2 {

font-size: 2rem;

}

.featured-grid {

grid-template-columns: 1fr;

}

@media (max-width: 576px) {

.hero-content h2 {

font-size: 2rem;

}

.hero-stats {

gap: 20px;

}

.stat-item .number {

font-size: 2rem;

}

.main-posts {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<h1>Creative<span>Mind</span></h1>

</div>

<nav>

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

<li><a href="#featured">Öne Çıkanlar</a></li>

<li><a href="#latest">Yazılar</a></li>

<li><a href="#categories">Kategoriler</a></li>

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

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

</ul>

</div>

</nav>

</div>

</header>

<h2>Düşünceler, Hikayeler ve Yaratıcı Fikirler</h2>

<p>Teknoloji, tasarım, kişisel gelişim ve daha fazlası hakkında derinlemesine yazılar. Yeni fikirler keşfetmek ve bilginizi genişletmek için doğru adres.</p>

<a href="#featured" class="btn">Keşfetmeye Başla</a>

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

</div>

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

</div>

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

</div>

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

</div>

</section>

<h2>Öne Çıkan Yazılar</h2>

<p>En çok okunan ve en değerli bulduğumuz içerikler</p>

</div>

</div>

<span class="post-category">Teknoloji</span>

<h3>Yapay Zeka ve Geleceğin Dünyası: Neler Beklemeliyiz?</h3>

<p>Yapay zeka teknolojisi hayatımızı nasıl dönüştürüyor? Gelecekte bizi neler bekliyor ve bu değişime nasıl hazırlanmalıyız?</p>

<span>Ahmet Yılmaz</span>

</div>

<span>10 Mayıs 2023</span>

</div>

</div>

<span class="post-category">Tasarım</span>

<h3>2023 Web Tasarım Trendleri: Minimalizm ve Karanlık Mod</h3>

<p>Bu yılın en dikkat çeken web tasarım trendleri neler? Kullanıcı deneyimini artırmak için hangi teknikleri kullanmalıyız?</p>

<span>Zeynep Kaya</span>

</div>

<span>5 Nisan 2023</span>

</div>

</div>

<span class="post-category">Kişisel Gelişim</span>

<h3>Verimlilik Sanatı: Zaman Yönetimi ve Odaklanma Teknikleri</h3>

<p>Modern dünyada dikkat dağınıklığı ile nasıl başa çıkabiliriz? Verimliliği artırmak için kanıtlanmış teknikler.</p>

<span>Mehmet Demir</span>

</div>

</div>

</section>

<h2>Son Yazılar</h2>

<p>En güncel içeriklerimizden seçmeler</p>

</div>

</div>

<span class="post-category">İş Dünyası</span>

<h3>Start-up Kurmanın 5 Altın Kuralı</h3>

<p>Başarılı bir girişim için nelere dikkat edilmeli? Tecrübeli girişimcilerden tavsiyeler.</p>

<span>Can Öztürk</span>

</div>

<span>3 Haziran 2023</span>

</div>

</div>

<span class="post-category">Sağlık</span>

<h3>Dijital Detoks: Teknoloji Bağımlılığından Kurtulma Rehberi</h3>

<p>Sürekli ekran başında olmanın etkileri ve sağlıklı dijital alışkanlıklar geliştirme yolları.</p>

<span>Ayşe Tekin</span>

</div>

<span>28 Mayıs 2023</span>

</div>

</div>

<span class="post-category">Programlama</span>

<h3>2023'te Öğrenilmesi Gereken 5 Programlama Dili</h3>

<p>Yazılım dünyasında kariyer hedefleyenler için en popüler ve gelecek vadeden programlama dilleri.</p>

<span>Ahmet Yılmaz</span>

</div>

<span>15 Mayıs 2023</span>

</div>

</div>

<span class="post-category">Seyahat</span>

<h3>Dijital Göçebelik: Dünyayı Gezerken Çalışmak</h3>

<p>Uzaktan çalışma kültürüyle birleşen seyahat tutkusu. Dijital göçebeler için ipuçları ve deneyimler.</p>

<span>Mehmet Demir</span>

</div>

<span>8 Mayıs 2023</span>

</div>

<h3>Kategoriler</h3>

<li><a href="#">Teknoloji <span class="count">42</span></a></li>

<li><a href="#">Tasarım <span class="count">28</span></a></li>

<li><a href="#">Kişisel Gelişim <span class="count">35</span></a></li>

<li><a href="#">Programlama <span class="count">19</span></a></li>

<li><a href="#">İş Dünyası <span class="count">23</span></a></li>

<li><a href="#">Sağlık <span class="count">17</span></a></li>

<li><a href="#">Seyahat <span class="count">12</span></a></li>

</ul>

</div>

<h3>Popüler Yazılar</h3>

<li>

</div>

<h4><a href="#">Yapay Zeka ve Geleceğin Dünyası</a></h4>

<span>10 Mayıs 2023</span>

</div>

</li>

<li>

</div>

<h4><a href="#">2023 Web Tasarım Trendleri</a></h4>

<span>5 Nisan 2023</span>

</div>

</li>

<li>

</div>

<h4><a href="#">Verimlilik Sanatı</a></h4>

</div>

</li>

</ul>

</div>

<h3>Etiketler</h3>

<a href="#" class="tag">Yapay Zeka</a>

<a href="#" class="tag">Tasarım</a>

<a href="#" class="tag">Üretkenlik</a>

<a href="#" class="tag">Web Geliştirme</a>

<a href="#" class="tag">Girişimcilik</a>

<a href="#" class="tag">Sağlıklı Yaşam</a>

<a href="#" class="tag">Teknoloji</a>

<a href="#" class="tag">Seyahat</a>

</div>

</section>

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

<p>Haftalık olarak en güncel yazılarımızı e-posta adresinize gönderelim. Spam yapmıyoruz, söz!</p>

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

</form>

</div>

</section>

<h4>CreativeMind</h4>

<p>Düşünceler, hikayeler ve yaratıcı fikirlerin buluşma noktası. 2020'den beri kaliteli içerik üretiyoruz.</p>

</div>

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

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

<li><a href="#featured">Öne Çıkanlar</a></li>

<li><a href="#latest">Yazılar</a></li>

<li><a href="#categories">Kategoriler</a></li>

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

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

</ul>

</div>

<h4>Kategoriler</h4>

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

<li><a href="#">Tasarım</a></li>

<li><a href="#">Kişisel Gelişim</a></li>

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

<li><a href="#">İş Dünyası</a></li>

<li><a href="#">Sağlık</a></li>

</ul>

</div>

<h4>İletişim</h4>

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

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

</ul>

</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 > 100) {

header.style.padding = '15px 0';

header.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';

} else {

header.style.padding = '20px 0';

header.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.05)';

}

});

// 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 - 80,

behavior: 'smooth'

});

// Close mobile menu if open

navMenu.classList.remove('active');

}

});

// Newsletter form submission

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

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

e.preventDefault();

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

alert(`Aboneliğiniz için teşekkür ederiz! ${email} adresine onay maili gönderildi.`);

this.reset();

});

</script>

</body>

</html>

CSS

JS

Metehan

Recommended