Webleb - Code-Snippets

HTML

<!DOCTYPE html>

<head>

<title>NaturaTech | Doğa ve Teknoloji Harmanı</title>

<style>

/* ===== DEĞİŞKENLER ===== */

:root {

--primary-dark: #0a192f;

--secondary-dark: #112240;

--accent-green: #64ffda;

--accent-blue: #57cbff;

--accent-red: #ff6b6b;

--light-text: #e6f1ff;

--medium-text: #8892b0;

--card-bg: rgba(17, 34, 64, 0.7);

--gradient-primary: linear-gradient(135deg, #0a192f 0%, #112240 100%);

--gradient-accent: linear-gradient(90deg, #64ffda 0%, #57cbff 100%);

--shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.7);

--border-radius: 12px;

--transition: all 0.3s ease;

}

/* ===== TEMEL STİLLER ===== */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

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

background-color: var(--primary-dark);

color: var(--light-text);

line-height: 1.6;

overflow-x: hidden;

}

h1, h2, h3, h4, h5, h6 {

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

font-weight: 600;

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

}

section {

padding: 100px 0;

}

.section-title {

font-size: 2.5rem;

text-align: center;

margin-bottom: 1rem;

position: relative;

display: inline-block;

left: 50%;

transform: translateX(-50%);

}

.section-title::after {

content: '';

position: absolute;

width: 80%;

height: 4px;

background: var(--gradient-accent);

bottom: -10px;

left: 10%;

border-radius: 2px;

}

.section-subtitle {

text-align: center;

color: var(--medium-text);

font-size: 1.1rem;

max-width: 600px;

margin: 0 auto 50px;

}

/* ===== PRELOADER ===== */

#preloader {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: var(--primary-dark);

z-index: 1000;

display: flex;

justify-content: center;

align-items: center;

transition: opacity 0.5s, visibility 0.5s;

}

.loader {

width: 60px;

height: 60px;

border: 5px solid var(--secondary-dark);

border-top-color: var(--accent-green);

border-radius: 50%;

animation: spin 1s linear infinite;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

/* ===== HEADER ===== */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 100;

padding: 20px 0;

transition: var(--transition);

background-color: rgba(10, 25, 47, 0.9);

backdrop-filter: blur(10px);

}

header.scrolled {

padding: 15px 0;

box-shadow: var(--shadow);

}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 1.8rem;

font-weight: 700;

color: var(--light-text);

text-decoration: none;

display: flex;

align-items: center;

}

.logo i {

color: var(--accent-green);

margin-right: 10px;

}

.nav-menu {

display: flex;

list-style: none;

gap: 40px;

}

.nav-link {

text-decoration: none;

color: var(--light-text);

font-weight: 500;

transition: var(--transition);

position: relative;

padding-bottom: 5px;

}

.nav-link::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background-color: var(--accent-green);

transition: width 0.3s;

}

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

color: var(--accent-green);

}

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

width: 100%;

}

.menu-toggle {

display: none;

font-size: 1.5rem;

background: none;

border: none;

color: var(--light-text);

cursor: pointer;

}

/* ===== HERO SECTION ===== */

#hero {

min-height: 100vh;

display: flex;

align-items: center;

position: relative;

overflow: hidden;

}

.hero-background {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');

background-size: cover;

background-position: center;

opacity: 0.3;

z-index: -1;

}

.hero-content {

display: flex;

align-items: center;

justify-content: space-between;

gap: 3rem;

}

.hero-text {

flex: 1;

}

.hero-text h1 {

font-size: 3.5rem;

line-height: 1.2;

margin-bottom: 1.5rem;

}

.hero-text h1 .highlight {

color: var(--accent-green);

position: relative;

display: inline-block;

}

.hero-text h1 .highlight::after {

content: '';

position: absolute;

width: 100%;

height: 2px;

background: var(--accent-green);

bottom: 5px;

left: 0;

}

.hero-text .subtitle {

font-size: 1.25rem;

margin-bottom: 2rem;

color: var(--medium-text);

}

.btn {

display: inline-block;

padding: 12px 30px;

background: var(--gradient-accent);

color: var(--primary-dark);

text-decoration: none;

font-weight: 600;

border-radius: 5px;

transition: var(--transition);

border: 2px solid transparent;

cursor: pointer;

}

.btn:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(100, 255, 218, 0.2);

}

.btn-outline {

background: transparent;

color: var(--accent-green);

border: 2px solid var(--accent-green);

margin-left: 15px;

}

.btn-outline:hover {

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

}

.hero-image {

flex: 1;

display: flex;

justify-content: center;

align-items: center;

}

.hero-image .image-container {

width: 400px;

height: 400px;

border-radius: 50%;

overflow: hidden;

border: 5px solid var(--accent-green);

position: relative;

box-shadow: var(--shadow);

}

.hero-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s;

}

.hero-image .image-container:hover img {

transform: scale(1.05);

}

/* ===== ABOUT SECTION ===== */

#about {

background-color: var(--secondary-dark);

position: relative;

overflow: hidden;

}

.about-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.about-text h3 {

font-size: 2rem;

margin-bottom: 1.5rem;

color: var(--accent-green);

}

.about-text p {

margin-bottom: 1.5rem;

color: var(--medium-text);

}

.skills-list {

display: grid;

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

gap: 1rem;

margin-top: 2rem;

}

.skill-item {

display: flex;

align-items: center;

gap: 10px;

padding: 10px;

background: var(--card-bg);

border-radius: 8px;

transition: var(--transition);

}

.skill-item:hover {

transform: translateX(10px);

box-shadow: var(--shadow);

}

.skill-icon {

color: var(--accent-green);

font-size: 1.2rem;

}

.about-visual {

position: relative;

height: 400px;

border-radius: var(--border-radius);

overflow: hidden;

box-shadow: var(--shadow);

}

.about-visual img {

width: 100%;

height: 100%;

object-fit: cover;

}

/* ===== PROJECTS SECTION ===== */

.projects-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

gap: 2rem;

}

.project-card {

background: var(--card-bg);

border-radius: var(--border-radius);

overflow: hidden;

transition: var(--transition);

height: 100%;

display: flex;

flex-direction: column;

}

.project-card:hover {

transform: translateY(-10px);

box-shadow: var(--shadow);

}

.project-img {

height: 200px;

overflow: hidden;

}

.project-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s;

}

.project-card:hover .project-img img {

transform: scale(1.1);

}

.project-content {

padding: 1.5rem;

flex-grow: 1;

display: flex;

flex-direction: column;

}

.project-content h3 {

font-size: 1.5rem;

margin-bottom: 0.5rem;

color: var(--accent-green);

}

.project-content p {

color: var(--medium-text);

margin-bottom: 1rem;

flex-grow: 1;

}

.project-tags {

display: flex;

flex-wrap: wrap;

gap: 8px;

margin-bottom: 1rem;

}

.tag {

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

color: var(--accent-green);

padding: 4px 10px;

border-radius: 20px;

font-size: 0.8rem;

}

/* ===== NATURE DATA SECTION ===== */

#nature-data {

background-color: var(--secondary-dark);

position: relative;

}

.data-container {

display: grid;

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

gap: 2rem;

}

.data-card {

background: var(--card-bg);

border-radius: var(--border-radius);

padding: 2rem;

text-align: center;

transition: var(--transition);

}

.data-card:hover {

transform: translateY(-10px);

box-shadow: var(--shadow);

}

.data-icon {

font-size: 3rem;

color: var(--accent-green);

margin-bottom: 1rem;

}

.data-number {

font-size: 2.5rem;

font-weight: 700;

color: var(--light-text);

margin-bottom: 0.5rem;

}

.data-text {

color: var(--medium-text);

}

/* ===== CONTACT SECTION ===== */

.contact-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

}

.contact-info h3 {

font-size: 2rem;

margin-bottom: 1.5rem;

color: var(--accent-green);

}

.contact-item {

display: flex;

align-items: flex-start;

gap: 1rem;

margin-bottom: 1.5rem;

}

.contact-icon {

font-size: 1.5rem;

color: var(--accent-green);

margin-top: 5px;

}

.contact-form {

display: flex;

flex-direction: column;

gap: 1.5rem;

}

.form-group {

display: flex;

flex-direction: column;

gap: 0.5rem;

}

.form-input {

padding: 12px 15px;

background: var(--card-bg);

border: 1px solid var(--medium-text);

border-radius: 5px;

color: var(--light-text);

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

font-size: 1rem;

transition: var(--transition);

}

.form-input:focus {

outline: none;

border-color: var(--accent-green);

}

textarea.form-input {

min-height: 150px;

resize: vertical;

}

/* ===== FOOTER ===== */

footer {

background-color: #050a1a;

padding: 60px 0 30px;

text-align: center;

}

.footer-content {

display: flex;

flex-direction: column;

align-items: center;

margin-bottom: 2rem;

}

.social-links {

display: flex;

justify-content: center;

gap: 1.5rem;

margin: 2rem 0;

}

.social-link {

display: flex;

align-items: center;

justify-content: center;

width: 50px;

height: 50px;

background-color: var(--card-bg);

color: var(--light-text);

border-radius: 50%;

transition: var(--transition);

text-decoration: none;

font-size: 1.2rem;

}

.social-link:hover {

background-color: var(--accent-green);

color: var(--primary-dark);

transform: translateY(-5px);

}

.copyright {

color: var(--medium-text);

font-size: 0.9rem;

margin-top: 2rem;

border-top: 1px solid rgba(136, 146, 176, 0.2);

padding-top: 2rem;

width: 100%;

}

/* ===== RESPONSIVE TASARIM ===== */

@media (max-width: 992px) {

.hero-content {

flex-direction: column;

text-align: center;

}

.about-content {

grid-template-columns: 1fr;

}

.contact-container {

grid-template-columns: 1fr;

}

.hero-text h1 {

font-size: 2.8rem;

}

@media (max-width: 768px) {

.menu-toggle {

display: block;

z-index: 1001;

}

.nav-menu {

position: fixed;

top: 0;

right: -100%;

width: 70%;

height: 100vh;

background-color: var(--secondary-dark);

flex-direction: column;

justify-content: center;

align-items: center;

transition: right 0.5s ease-in-out;

gap: 2rem;

}

.nav-menu.active {

right: 0;

}

.projects-grid {

grid-template-columns: 1fr;

}

.hero-text h1 {

font-size: 2.2rem;

}

.section-title {

font-size: 2rem;

}

.hero-image .image-container {

width: 300px;

height: 300px;

}

.btn-outline {

margin-left: 0;

margin-top: 15px;

}

/* ===== ANİMASYONLAR ===== */

.reveal {

opacity: 0;

transform: translateY(50px);

transition: opacity 0.8s, transform 0.8s;

}

.reveal.visible {

opacity: 1;

transform: translateY(0);

}

/* ===== PARTİKÜL EFEKTLERİ ===== */

.particles-container {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

z-index: -1;

}

.particle {

position: absolute;

pointer-events: none;

}

.green-particle {

width: 3px;

height: 3px;

background: var(--accent-green);

border-radius: 50%;

animation: floatUp 5s infinite;

}

.blue-particle {

width: 4px;

height: 4px;

background: var(--accent-blue);

border-radius: 50%;

animation: floatUp 7s infinite;

}

@keyframes floatUp {

0% {

transform: translateY(100vh) translateX(var(--x-start));

opacity: 0;

}

10% {

opacity: 0.8;

}

100% {

transform: translateY(-100px) translateX(var(--x-end));

opacity: 0;

}

</style>

</head>

<body>

</div>

<a href="#" class="logo"><i class="fas fa-leaf"></i>NaturaTech</a>

<nav>

<li class="nav-item"><a href="#hero" class="nav-link active">Ana Sayfa</a></li>

<li class="nav-item"><a href="#about" class="nav-link">Hakkımda</a></li>

<li class="nav-item"><a href="#projects" class="nav-link">Projeler</a></li>

<li class="nav-item"><a href="#nature-data" class="nav-link">Doğa Verileri</a></li>

<li class="nav-item"><a href="#contact" class="nav-link">İletişim</a></li>

</ul>

</nav>

</div>

</header>

<h1>Doğa ve Teknoloji <span class="highlight">Uyumu</span></h1>

<p class="subtitle">Sürdürülebilir gelecek için teknolojiyi doğayla harmanlıyorum. Tasarım, geliştirme ve ekolojiyi bir araya getiriyorum.</p>

<div>

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

<a href="#contact" class="btn btn-outline">İletişime Geç</a>

</div>

</div>

</section>

<h2 class="section-title">Hakkımda</h2>

<p class="section-subtitle">Doğa sever bir teknoloji tutkunu olarak, sürdürülebilir çözümler üretmeye odaklanıyorum.</p>

<h3>Teknoloji ve Doğa Arasında Bir Köprü</h3>

<p>Merhaba, ben Ahmet. 5 yılı aşkın süredir web teknolojileri ve UI/UX tasarım üzerine çalışıyorum. Ancak asıl tutkum, teknolojiyi doğa koruma ve sürdürülebilirlik alanlarında kullanmak.</p>

<p>Projelerimde daima çevre dostu yaklaşımları ön planda tutuyor, enerji verimli teknolojiler geliştiriyorum. Amacım, dijital dünyayı doğal dünya ile uyumlu hale getirmek.</p>

<span>Web Geliştirme</span>

</div>

<span>UI/UX Tasarım</span>

</div>

<span>Sürdürülebilirlik</span>

</div>

<span>Veri Görselleştirme</span>

</div>

</div>

</section>

<h2 class="section-title">Projelerim</h2>

<p class="section-subtitle">Doğa ve teknoloji odaklı geliştirdiğim projelerden bazıları.</p>

</div>

<h3>Eko Takip Sistemi</h3>

<p>Kullanıcıların karbon ayak izlerini takip edebileceği, sürdürülebilir yaşam önerileri sunan bir web uygulaması.</p>

<span class="tag">React</span>

<span class="tag">MongoDB</span>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</div>

<h3>Doğa Veri Görselleştirme</h3>

<p>İklim değişikliği verilerini interaktif haritalar ve grafiklerle sunan bir veri görselleştirme platformu.</p>

<span class="tag">Python</span>

<span class="tag">Chart.js</span>

<span class="tag">Mapbox</span>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</div>

<h3>Yeşil Enerji Takip</h3>

<p>Güneş ve rüzgar enerjisi üretimini izleyen, enerji verimliliği analizleri yapan bir yönetim paneli.</p>

<span class="tag">Firebase</span>

</div>

<a href="#" class="btn">Detaylı İncele</a>

</div>

</section>

<h2 class="section-title">Doğa Verileri</h2>

<p class="section-subtitle">Dünyamızın durumu hakkında bazı çarpıcı veriler.</p>

</div>

<div class="data-text">Her Dakika Kaybolan Orman (Hektar)</div>

</div>

</div>

<div class="data-text">Küresel Isınma (Santigrat Derece)</div>

</div>

</div>

<div class="data-text">Yıllık Deniz Seviyesi Artışı (mm)</div>

</div>

</div>

<div class="data-text">Atıkların Geri Dönüşüm Oranı (%)</div>

</div>

</section>

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

<p class="section-subtitle">Doğa ve teknoloji projeleriniz için benimle iletişime geçin.</p>

<h3>İletişime Geçin</h3>

<p>Sürdürülebilir teknoloji projelerinizde birlikte çalışabilir, fikir alışverişinde bulunabiliriz.</p>

</div>

<div>

<h4>Konum</h4>

<p>İstanbul, Türkiye</p>

</div>

</div>

<div>

<h4>Email</h4>

<p>iletisim@naturatech.com</p>

</div>

</div>

<div>

<h4>Telefon</h4>

</div>

</div>

<label for="email">Email</label>

</div>

<label for="message">Mesaj</label>

</div>

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

</form>

</div>

</section>

<a href="#" class="logo"><i class="fas fa-leaf"></i>NaturaTech</a>

<p>Sürdürülebilir bir gelecek için teknolojiyi doğayla buluşturuyoruz.</p>

</div>

</footer>

document.addEventListener('DOMContentLoaded', () => {

// Preloader

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

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

preloader.style.opacity = '0';

preloader.style.visibility = 'hidden';

});

// Header Scroll Efekti

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

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

if (window.scrollY > 50) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

});

// Mobil Menü

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

const navMenu = document.getElementById('nav-menu');

const navLinks = document.querySelectorAll('.nav-link');

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

navMenu.classList.toggle('active');

menuToggle.innerHTML = navMenu.classList.contains('active')

? '<i class="fas fa-times"></i>'

: '<i class="fas fa-bars"></i>';

});

navLinks.forEach(link => {

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

if (navMenu.classList.contains('active')) {

navMenu.classList.remove('active');

menuToggle.innerHTML = '<i class="fas fa-bars"></i>';

}

});

// Scroll Animasyonları

const revealElements = document.querySelectorAll('.reveal');

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

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

// Sayı animasyonları

if (entry.target.querySelector('.data-number')) {

const dataNumbers = entry.target.querySelectorAll('.data-number');

dataNumbers.forEach(number => {

const target = parseInt(number.getAttribute('data-count'));

const duration = 2000; // 2 saniye

const step = target / (duration / 16); // 60 FPS için

let current = 0;

const timer = setInterval(() => {

current += step;

if (current >= target) {

current = target;

clearInterval(timer);

}

number.textContent = Math.floor(current);

}, 16);

});

}

});

}, {

threshold: 0.1

});

revealElements.forEach(el => {

revealObserver.observe(el);

});

// Aktif Navigasyon Linki Vurgulama

const sections = document.querySelectorAll('section[id]');

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

entries.forEach(entry => {

if (entry.isIntersecting) {

const id = entry.target.getAttribute('id');

document.querySelectorAll('.nav-link.active').forEach(link => {

link.classList.remove('active');

});

document.querySelector(`.nav-link[href="#${id}"]`).classList.add('active');

}

});

}, {

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

});

sections.forEach(section => {

navHighlighter.observe(section);

});

// Partikül Efekti

const particlesContainer = document.getElementById('particles');

function createParticles() {

for (let i = 0; i < 50; i++) {

const particle = document.createElement('div');

particle.classList.add('particle');

if (i % 2 === 0) {

particle.classList.add('green-particle');

} else {

particle.classList.add('blue-particle');

}

const size = Math.random() * 5 + 2;

particle.style.width = `${size}px`;

particle.style.height = `${size}px`;

const xStart = Math.random() * 100;

const xEnd = xStart + (Math.random() * 40 - 20);

particle.style.setProperty('--x-start', `${xStart}vw`);

particle.style.setProperty('--x-end', `${xEnd}vw`);

particle.style.left = `${xStart}vw`;

particle.style.animationDelay = `${Math.random() * 5}s`;

particlesContainer.appendChild(particle);

}

createParticles();

// Form Gönderimi

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

contactForm.addEventListener('submit', (e) => {

e.preventDefault();

// Form verilerini al

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

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

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

// Burada form verilerini bir API'ye gönderebilirsiniz

// Şimdilik sadece bir uyarı gösteriyoruz

alert(`Teşekkürler ${name}! Mesajınız alındı. En kısa sürede size dönüş yapacağım.`);

// Formu sıfırla

contactForm.reset();

});

// Sayfa yüklendiğinde ilk bölümü aktif yap

document.querySelector('.nav-link[href="#hero"]').classList.add('active');

});

</script>

</body>

</html>

Metehan

HTML

CSS

JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS