Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Yaratıcı Zihin | Kişisel Blog & Podcast</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#6c63ff',

secondary: '#E67E50',

darkbg: '#1a1a2e',

cardbg: 'rgba(255, 255, 255, 0.05)',

lighttext: '#f5f5f7',

},

fontFamily: {

montserrat: ['Montserrat', 'sans-serif'],

playfair: ['Playfair Display', 'serif']

}

</script>

<style>

body {

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

background-color: #1a1a2e;

color: #f5f5f7;

overflow-x: hidden;

}

.hero-title {

font-family: 'Playfair Display', serif;

}

.nav-link {

position: relative;

}

.nav-link::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -4px;

left: 0;

background-color: #6c63ff;

transition: width 0.3s ease;

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

.profile-img {

transition: transform 0.3s ease;

}

.profile-img:hover {

transform: scale(1.02);

}

.social-icon {

transition: all 0.3s ease;

}

.social-icon:hover {

transform: translateY(-3px);

color: #6c63ff;

}

.blog-card, .podcast-card {

transition: all 0.3s ease;

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

backdrop-filter: blur(10px);

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

}

.blog-card:hover, .podcast-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(108, 99, 255, 0.2);

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

}

.hamburger {

transition: all 0.3s ease;

}

.hamburger.active .line:nth-child(1) {

transform: translateY(8px) rotate(45deg);

}

.hamburger.active .line:nth-child(2) {

opacity: 0;

}

.hamburger.active .line:nth-child(3) {

transform: translateY(-8px) rotate(-45deg);

}

.skill-bar {

height: 10px;

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

border-radius: 5px;

overflow: hidden;

}

.skill-progress {

height: 100%;

background-color: #6c63ff;

border-radius: 5px;

position: relative;

width: 0;

transition: width 1.5s ease-in-out;

}

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

}

.scroll-top {

position: fixed;

bottom: 2rem;

right: 2rem;

width: 50px;

height: 50px;

background-color: #6c63ff;

color: #f5f5f7;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.2rem;

cursor: pointer;

opacity: 0;

visibility: hidden;

transition: all 0.4s ease;

z-index: 999;

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

}

.scroll-top.active {

opacity: 1;

visibility: visible;

}

.scroll-top:hover {

background-color: #4d44db;

transform: translateY(-5px);

}

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

.fade-in-up {

animation: fadeInUp 0.8s forwards;

}

</style>

</head>

</div>

<a href="#" class="text-2xl font-bold text-primary font-montserrat">Yaratıcı<span class="text-lighttext">Zihin</span></a>

<a href="#anasayfa" class="nav-link active uppercase text-sm font-medium tracking-wider">Anasayfa</a>

<a href="#hakkimda" class="nav-link uppercase text-sm font-medium tracking-wider">Hakkımda</a>

<a href="#podcast" class="nav-link uppercase text-sm font-medium tracking-wider">Podcast</a>

<a href="#iletisim" class="nav-link uppercase text-sm font-medium tracking-wider">İletişim</a>

</nav>

</div>

</button>

</div>

<a href="#anasayfa" class="nav-link active uppercase text-sm font-medium tracking-wider py-2">Anasayfa</a>

<a href="#hakkimda" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Hakkımda</a>

<a href="#podcast" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Podcast</a>

<a href="#iletisim" class="nav-link uppercase text-sm font-medium tracking-wider py-2">İletişim</a>

</div>

</header>

Merhaba, Ben <span class="text-primary">Atilla</span> <br>

</h1>

Dijital dünyanın derinliklerine dalmayı seven bir yaratıcıyım. Burada tasarım, teknoloji,

inovasyon ve kişisel gelişim üzerine düşüncelerimi ve keşiflerimi paylaşıyorum.

</p>

</a>

</a>

</a>

</a>

</div>

Yazılarımı Oku

</a>

İletişime Geç

</a>

</div>

<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"

alt="Profil Resmi"

class="profile-img relative w-full h-full object-cover rounded-full border-4 border-darkbg shadow-xl">

</div>

</section>

<h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Hakkımda</h2>

Ben kimim, neler yaparım ve hangi becerilere sahibim? Tüm detayları bu bölümde bulabilirsiniz.

</p>

</div>

<img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=1470"

alt="Hakkımda Görseli"

class="w-full rounded-lg shadow-xl">

</div>

<h3 class="text-2xl font-bold mb-6">Ben Kimim ve Neler Yaparım?</h3>

Ben Atilla Demir, yazılım geliştirme ve dijital tasarım alanında tutkulu bir yaratıcıyım.

Sistem Mühendisliği eğitimimle birlikte, web dünyasının dinamiklerine ve kullanıcı deneyimini

zenginleştirmeye odaklanıyorum.

</p>

Bu blog, dijital sanat, yeni teknolojiler, yaratıcı problem çözme ve kişisel öğrenme

yolculuğumu paylaştığım bir platform. Amacım, bilgi birikimimi ve deneyimlerimi aktarırken,

aynı zamanda ilham verici içerikler sunarak sizin de yaratıcı potansiyelinizi keşfetmenize

yardımcı olmak.

</p>

<h3 class="text-xl font-bold mb-4">Yeteneklerim</h3>

<span class="text-gray-300">Web Geliştirme (HTML, CSS, JS)</span>

</div>

</div>

<span class="text-gray-300">UX/UI Tasarım</span>

</div>

</div>

<span class="text-gray-300">Mobil Uygulama Geliştirme</span>

</div>

</div>

CV'mi İndir

</a>

</div>

</section>

<h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Son Blog Yazılarım</h2>

Tasarım, teknoloji ve kişisel gelişim üzerine en son düşüncelerim ve analizlerim.

</p>

</div>

<img src="https://images.unsplash.com/photo-1596700877840-7e1e6f47796d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=800"

alt="Blog Görseli"

class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">

</div>

</div>

<h3 class="text-xl font-bold mb-3 text-primary">Renk Psikolojisi ve Marka Kimliği</h3>

Renklerin markaların bilinirliği ve tüketici algısı üzerindeki derin etkilerini keşfedin.

</p>

Devamını Oku

</svg>

</a>

</div>

</article>

<img src="https://images.unsplash.com/photo-1534067783941-51c9c23adec1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=800"

alt="Blog Görseli"

class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">

</div>

</div>

<h3 class="text-xl font-bold mb-3 text-primary">Web Tasarımında Minimalist Yaklaşım</h3>

Daha azın daha çok olduğu felsefesiyle, sade ve işlevsel web tasarımlarının gücü.

</p>

Devamını Oku

</svg>

</a>

</div>

</article>

<img src="https://images.unsplash.com/photo-1456324504191-c1e1945207e7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=800"

alt="Blog Görseli"

class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">

</div>

</div>

<h3 class="text-xl font-bold mb-3 text-primary">Yaratıcı Bloklarla Başa Çıkma Yolları</h3>

İlhamın tükendiği anlar herkesin başına gelebilir. Pratik tekniklerle yeniden akışa geçin.

</p>

Devamını Oku

</svg>

</a>

</div>

</article>

</div>

Tüm Yazıları Görüntüle

</a>

</div>

</section>

<h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Yaratıcı Sohbetler Podcast'i</h2>

Farklı sektörlerden başarılı yaratıcılarla derinlemesine sohbetler.

</p>

</div>

<img src="https://images.unsplash.com/photo-1549060279-7e16f0309e13?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=1080"

alt="Podcast Görseli"

class="w-full rounded-lg shadow-xl">

</div>

<h3 class="text-2xl font-bold mb-6">Fikirlerden İlham Alan Sohbetler</h3>

Farklı sektörlerden başarılı yaratıcılarla, onların ilham kaynakları, kariyer yolculukları

ve projeleri hakkında derinlemesine sohbetler. Her bölümde yeni bir bakış açısı ve motivasyon

bulacaksınız.

</p>

<h4 class="text-xl font-bold mb-2">Son Bölüm: Bölüm 24 - Sürdürülebilir Tasarım ve Lisa Chen</h4>

<p class="text-gray-400 text-sm mb-4">10 Haziran 2024 • 45 dk.</p>

Tarayıcınız ses öğesini desteklemiyor.

</audio>

</div>

<i class="fab fa-spotify mr-2"></i> Spotify

</a>

<i class="fab fa-apple mr-2"></i> Apple Podcasts

</a>

<i class="fab fa-google mr-2"></i> Google Podcasts

</a>

</div>

</section>

<h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">İletişime Geçin</h2>

Projeleriniz, işbirliği teklifleriniz veya sorularınız için bana ulaşın.

</p>

</div>

<div>

<label for="name" class="block text-gray-300 mb-2">Adınız Soyadınız</label>

</div>

<div>

<label for="email" class="block text-gray-300 mb-2">E-posta Adresiniz</label>

</div>

<div>

</div>

<div>

<label for="message" class="block text-gray-300 mb-2">Mesajınız</label>

</div>

Mesajı Gönder

</button>

</form>

</div>

<h3 class="text-xl font-bold mb-6">İletişim Bilgilerim</h3>

</div>

<div>

<h4 class="font-bold text-gray-300">Konum</h4>

<p class="text-gray-400">İstanbul, Türkiye</p>

</div>

</div>

<div>

<h4 class="font-bold text-gray-300">E-posta</h4>

<p class="text-gray-400">info@yaraticizihin.com</p>

</div>

</div>

<div>

<h4 class="font-bold text-gray-300">Telefon</h4>

</div>

</div>

<div>

<h4 class="font-bold text-gray-300">Çalışma Saatleri</h4>

</div>

<h4 class="font-bold text-gray-300 mb-4">Sosyal Medyada Takip Edin</h4>

</a>

</a>

</a>

</a>

</div>

</section>

<a href="#" class="text-2xl font-bold text-primary font-montserrat mb-4 inline-block">Yaratıcı<span class="text-lighttext">Zihin</span></a>

Yaratıcı düşünce, tasarım ve teknoloji üzerine bir kişisel blog ve podcast.

</p>

</div>

<div>

<h3 class="text-lg font-bold mb-4 text-gray-300">Keşfet</h3>

<li><a href="#anasayfa" class="text-gray-500 hover:text-white transition">Anasayfa</a></li>

<li><a href="#hakkimda" class="text-gray-500 hover:text-white transition">Hakkımda</a></li>

<li><a href="#podcast" class="text-gray-500 hover:text-white transition">Podcast</a></li>

</ul>

</div>

<div>

<h3 class="text-lg font-bold mb-4 text-gray-300">Bağlantılar</h3>

<li><a href="#" class="text-gray-500 hover:text-white transition">Twitter</a></li>

<li><a href="#" class="text-gray-500 hover:text-white transition">Instagram</a></li>

<li><a href="#" class="text-gray-500 hover:text-white transition">LinkedIn</a></li>

<li><a href="#" class="text-gray-500 hover:text-white transition">GitHub</a></li>

</ul>

</div>

<div>

<h3 class="text-lg font-bold mb-4 text-gray-300">Yasal</h3>

<li><a href="#" class="text-gray-500 hover:text-white transition">Gizlilik Politikası</a></li>

<li><a href="#" class="text-gray-500 hover:text-white transition">Kullanım Şartları</a></li>

<li><a href="#" class="text-gray-500 hover:text-white transition">Çerez Politikası</a></li>

</ul>

</div>

</p>

</a>

</a>

</a>

</a>

</div>

</footer>

// Typed.js for hero section

document.addEventListener('DOMContentLoaded', function() {

var typed = new Typed("#typed-text", {

strings: ["Yaratıcı Geliştirici", "Web Tasarımcısı", "İçerik Üreticisi", "Dijital Sanatçı"],

typeSpeed: 60,

backSpeed: 45,

loop: true,

showCursor: true,

cursorChar: '|',

});

// Mobile menu toggle

const menuToggle = document.getElementById('menu-toggle');

const mobileMenu = document.getElementById('mobile-menu');

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

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

mobileMenu.classList.toggle('hidden');

hamburger.classList.toggle('active');

});

// Close mobile menu when clicking on a link

const navLinks = document.querySelectorAll('#mobile-menu a');

navLinks.forEach(link => {

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

mobileMenu.classList.add('hidden');

hamburger.classList.remove('active');

});

// Scroll to top button

const scrollTopBtn = document.getElementById('scroll-top-btn');

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

if (window.pageYOffset > 300) {

scrollTopBtn.classList.add('active');

} else {

scrollTopBtn.classList.remove('active');

}

});

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

window.scrollTo({

top: 0,

behavior: 'smooth'

});

// Smooth scrolling for anchor links

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

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

e.preventDefault();

const targetId = this.getAttribute('href');

const targetElement = document.querySelector(targetId);

if (targetElement) {

const headerOffset = 80;

const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;

const offsetPosition = elementPosition - headerOffset;

window.scrollTo({

top: offsetPosition,

behavior: 'smooth'

});

// Close mobile menu if open

mobileMenu.classList.add('hidden');

hamburger.classList.remove('active');

}

});

// Particles.js configuration

particlesJS("particles-js", {

"particles": {

"number": {

"value": 80,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#6c63ff"

},

"shape": {

"type": "circle",

"stroke": {

"width": 0,

"color": "#000000"

}

},

"opacity": {

"value": 0.5,

"random": false

},

"size": {

"value": 3,

"random": true

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#6c63ff",

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 2,

"direction": "none",

"random": false,

"straight": false,

"out_mode": "out"

}

},

"interactivity": {

"detect_on": "canvas",

"events": {

"onhover": {

"enable": true,

"mode": "grab"

},

"onclick": {

"enable": true,

"mode": "push"

},

"resize": true

},

"modes": {

"grab": {

"distance": 140,

"line_linked": {

"opacity": 1

}

},

"push": {

"particles_nb": 4

}

},

"retina_detect": true

});

// Animation on scroll

const observerOptions = {

threshold: 0.1

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('fade-in-up');

observer.unobserve(entry.target);

}

});

}, observerOptions);

document.querySelectorAll('.fade-in-up').forEach(element => {

observer.observe(element);

});

</script>

</body>

</html>

Metehan

Recommended

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS