Webleb - UI Elements

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SportTech Solutions - Spor Yazılım Geliştirme</title>
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* ===== VARIABLES ===== */
        :root {
            --primary-color: #0d0d0d;
            --secondary-color: #bfe300;
            --accent-color: #ff6b6b;
            --text-color: #ffffff;
            --body-color: #1a1a1a;
            --container-color: #2d2d2d;
            --card-color: #333333;
            --success-color: #4CAF50;
            --gradient: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
        }

/* ===== BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 1rem;
            background-color: var(--body-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

h1, h2, h3, p, ul {
            margin: 0;
        }

ul {
            padding: 0;
            list-style: none;
        }

a {
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }

img {
            max-width: 100%;
            height: auto;
            display: block;
        }

/* ===== LAYOUT ===== */
        .section {
            padding: 6rem 0 3rem;
        }

.section-title {
            font-size: 2.5rem;
            color: var(--text-color);
            text-align: center;
            margin-bottom: 2rem;
            font-weight: 700;
            position: relative;
        }

.section-title span {
            color: var(--secondary-color);
        }

.section-title::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background: var(--secondary-color);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

.bd-grid {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 1.5rem;
        }

/* ===== HEADER & NAV ===== */
        .l-header {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            background-color: rgba(13, 13, 13, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }

.nav {
            height: 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.nav__logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-color);
            display: flex;
            align-items: center;
        }

.nav__logo span {
            color: var(--secondary-color);
        }

.nav__menu {
            display: flex;
            gap: 2.5rem;
        }

.nav__item {
            position: relative;
        }

.nav__link {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-color);
            padding: 0.5rem 0;
        }

.nav__link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: var(--secondary-color);
            transition: width 0.3s ease;
        }

.nav__link:hover::after,
        .nav__link.active::after {
            width: 100%;
        }

.nav__toggle {
            display: none;
            color: var(--text-color);
            font-size: 1.8rem;
            cursor: pointer;
        }

/* ===== HERO SECTION ===== */
        .home {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: var(--gradient);
            position: relative;
            overflow: hidden;
            padding-top: 4rem;
        }

.home__data {
            max-width: 600px;
            z-index: 2;
        }

.home__title {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

.home__title span {
            color: var(--secondary-color);
            display: block;
        }

.home__description {
            font-size: 1.2rem;
            margin-bottom: 2.5rem;
            opacity: 0.9;
        }

.button {
            display: inline-block;
            background-color: var(--secondary-color);
            color: var(--primary-color);
            padding: 1rem 2.5rem;
            font-weight: 600;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

.button:hover {
            background-color: #d0f03c;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(191, 227, 0, 0.3);
        }

.home__img {
            position: absolute;
            right: 5%;
            bottom: 10%;
            width: 45%;
            z-index: 1;
        }

.home__blob {
            fill: var(--secondary-color);
            opacity: 0.8;
        }

/* ===== ABOUT SECTION ===== */
        .about__container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

.about__img img {
            border-radius: 10px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

.about__img img:hover {
            transform: translateY(-10px);
        }

.about__subtitle {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--secondary-color);
        }

.about__text {
            margin-bottom: 1.5rem;
            opacity: 0.9;
        }

.features {
            margin-top: 2rem;
        }

.feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 1.2rem;
        }

.feature-item i {
            color: var(--secondary-color);
            margin-right: 1rem;
            font-size: 1.2rem;
        }

/* ===== SERVICES SECTION ===== */
        .services__container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.service-card {
            background: var(--card-color);
            border-radius: 10px;
            padding: 2.5rem;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

.service-card:hover {
            transform: translateY(-10px);
            border-color: var(--secondary-color);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

.service-icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 1.5rem;
        }

.service-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

/* ===== SKILLS SECTION ===== */
        .skills__container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

.skills__subtitle {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--secondary-color);
        }

.skills__text {
            margin-bottom: 2rem;
            opacity: 0.9;
        }

.skills__data {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            font-weight: 600;
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 8px;
            background-color: var(--container-color);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

.skills__names {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.skills__icon {
            font-size: 1.8rem;
            color: var(--secondary-color);
        }

.skills__bar {
            position: absolute;
            left: 0;
            bottom: 0;
            background: var(--secondary-color);
            height: 5px;
            border-radius: 4px;
            z-index: 1;
        }

.skills__percentage {
            font-weight: 600;
            color: var(--secondary-color);
        }

/* ===== WORK SECTION ===== */
        .work__container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.work__item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

.work__item:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

.work__img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.work__item:hover .work__img {
            transform: scale(1.1);
        }

.work__overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
            padding: 2rem;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s ease;
        }

.work__item:hover .work__overlay {
            transform: translateY(0);
            opacity: 1;
        }

.work__title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: var(--secondary-color);
        }

/* ===== PRICING SECTION ===== */
        .pricing__container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.pricing-card {
            background: var(--card-color);
            border-radius: 10px;
            padding: 2.5rem;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

.pricing-card.popular {
            border-color: var(--secondary-color);
            transform: scale(1.05);
        }

.pricing-card.popular::before {
            content: 'POPÜLER';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--secondary-color);
            color: var(--primary-color);
            padding: 5px 30px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            transform: rotate(45deg);
        }

.pricing-header {
            margin-bottom: 2rem;
        }

.pricing-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--text-color);
        }

.price {
            font-size: 3rem;
            font-weight: 700;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }

.price span {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.7);
        }

.pricing-features {
            margin-bottom: 2rem;
        }

.pricing-features li {
            padding: 0.8rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

.pricing-features li:last-child {
            border-bottom: none;
        }

/* ===== CONTACT SECTION ===== */
        .contact__container {
            max-width: 800px;
            margin: 0 auto;
        }

.contact__form {
            display: grid;
            gap: 1.5rem;
            margin-top: 3rem;
        }

.contact__input {
            width: 100%;
            padding: 1.2rem;
            background: var(--container-color);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: var(--text-color);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.contact__input:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 2px rgba(191, 227, 0, 0.2);
        }

.contact__input--textarea {
            min-height: 150px;
            resize: vertical;
        }

.contact__button {
            justify-self: start;
            margin-top: 1rem;
        }

/* ===== FOOTER ===== */
        .footer {
            background-color: var(--primary-color);
            padding: 4rem 0 2rem;
            margin-top: 4rem;
        }

.footer__container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 3rem;
        }

.footer__title {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--text-color);
        }

.footer__title span {
            color: var(--secondary-color);
        }

.footer__description {
            opacity: 0.8;
            margin-bottom: 1.5rem;
        }

.footer__social {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

.footer__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: var(--container-color);
            border-radius: 50%;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

.footer__icon:hover {
            background: var(--secondary-color);
            color: var(--primary-color);
            transform: translateY(-3px);
        }

.footer__links li {
            margin-bottom: 0.8rem;
        }

.footer__links a:hover {
            color: var(--secondary-color);
            padding-left: 5px;
        }

.footer__copy {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

/* ===== RESPONSIVE ===== */
        @media screen and (max-width: 992px) {
            .home__title {
                font-size: 2.8rem;
            }
            
            .about__container,
            .skills__container {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .home__img {
                position: relative;
                width: 80%;
                margin: 3rem auto 0;
                bottom: 0;
                right: 0;
            }
        }

@media screen and (max-width: 768px) {
            .nav__menu {
                position: fixed;
                top: 4rem;
                right: -100%;
                width: 80%;
                height: 100vh;
                background: var(--primary-color);
                flex-direction: column;
                padding: 3rem;
                transition: 0.5s;
                box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
            }

.nav__menu.show {
                right: 0;
            }

.nav__toggle {
                display: block;
            }

.section-title {
                font-size: 2rem;
            }

.home__title {
                font-size: 2.2rem;
            }

.home__description {
                font-size: 1rem;
            }

.pricing-card.popular {
                transform: scale(1);
            }
        }

@media screen and (max-width: 480px) {
            .section {
                padding: 4rem 0 2rem;
            }
            
            .home__title {
                font-size: 1.8rem;
            }
            
            .button {
                padding: 0.8rem 2rem;
            }
        }

/* ===== ANIMATIONS ===== */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

.floating {
            animation: float 5s ease-in-out infinite;
        }
    </style>
</head>
<body>
    
    <header class="l-header">
        <nav class="nav bd-grid">
            <a href="#" class="nav__logo">Sport<span>Tech</span></a>
            
            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="nav__item"><a href="#home" class="nav__link active">Ana Sayfa</a></li>
                    <li class="nav__item"><a href="#about" class="nav__link">Hakkımızda</a></li>
                    <li class="nav__item"><a href="#services" class="nav__link">Hizmetler</a></li>
                    <li class="nav__item"><a href="#skills" class="nav__link">Teknolojiler</a></li>
                    <li class="nav__item"><a href="#work" class="nav__link">Projeler</a></li>
                    <li class="nav__item"><a href="#pricing" class="nav__link">Fiyatlandırma</a></li>
                    <li class="nav__item"><a href="#contact" class="nav__link">İletişim</a></li>
                </ul>
            </div>
            
            <div class="nav__toggle" id="nav-toggle">
                <i class='bx bx-menu'></i>
            </div>
        </nav>
    </header>

<main class="l-main">
        
        <section class="home section" id="home">
            <div class="home__container bd-grid">
                <div class="home__data">
                    <h1 class="home__title">Spor Teknolojilerinde <span>Yeni Çağ</span></h1>
                    <p class="home__description">Profesyonel spor takip yazılımları, fitness uygulamaları ve antrenman yönetim sistemleri ile spor dünyasını dijitalleştiriyoruz.</p>
                    <a href="#contact" class="button">Ücretsiz Demo Talep Edin</a>
                </div>
                
                <div class="home__img">
                    <svg class="home__blob floating" viewBox="0 0 479 467" xmlns="http://www.w3.org/2000/svg">
                        <mask id="mask0">
                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
                        </mask>
                        <g mask="url(#mask0)">
                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
                            <image class="home__blob-img" x="50" y="60" href="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"/>
                        </g>
                    </svg>
                </div>
            </div>
        </section>

<section class="about section" id="about">
            <h2 class="section-title">Hakkımızda</h2>
            <div class="about__container bd-grid">
                <div class="about__img">
                    <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Spor Teknolojisi">
                </div>
                <div class="about__data">
                    <h2 class="about__subtitle">Spor ve Teknolojiyi Buluşturuyoruz</h2>
                    <p class="about__text">10 yılı aşkın süredir spor teknolojileri alanında çalışıyoruz. Spor kulüpleri, fitness merkezleri ve bireysel sporcular için yenilikçi yazılım çözümleri geliştiriyoruz.</p>
                    <p class="about__text">Ekibimiz, spor bilimcileri, yazılım mühendisleri ve UX/UI tasarımcılarından oluşmaktadır. Amacımız, spor performansını artırmak ve antrenman süreçlerini dijitalleştirmektir.</p>
                    
                    <div class="features">
                        <div class="feature-item">
                            <i class="fas fa-chart-line"></i>
                            <span>Gerçek Zamanlı Performans Analizi</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-mobile-alt"></i>
                            <span>Mobil Uyumlu Tüm Platformlar</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-cloud"></i>
                            <span>Bulut Tabanlı Veri Depolama</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-shield-alt"></i>
                            <span>Güvenli ve Şifrelenmiş Sistem</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section class="services section" id="services">
            <h2 class="section-title">Hizmetlerimiz</h2>
            <div class="services__container bd-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-running"></i>
                    </div>
                    <h3 class="service-title">Spor Takip Yazılımı</h3>
                    <p>Antrenman programları, performans takibi ve ilerleme analizleri için kapsamlı yazılım çözümleri.</p>
                </div>
                
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="service-title">Kulüp Yönetim Sistemi</h3>
                    <p>Spor kulüpleri için üye yönetimi, finans takibi ve operasyonel süreçlerin dijitalleştirilmesi.</p>
                </div>
                
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <h3 class="service-title">Sağlık ve Fitness App</h3>
                    <p>Kişiselleştirilmiş antrenman ve beslenme programları sunan mobil uygulamalar.</p>
                </div>
            </div>
        </section>

<section class="skills section" id="skills">
            <h2 class="section-title">Teknolojilerimiz</h2>
            <div class="skills__container bd-grid">
                <div class="skills__data">
                    <div class="skills__names">
                        <i class='bx bxl-react skills__icon'></i>
                        <span class="skills__name">React Native</span>
                    </div>
                    <div class="skills__bar" style="width: 90%"></div>
                    <div>
                        <span class="skills__percentage">90%</span>
                    </div>
                </div>
                
                <div class="skills__data">
                    <div class="skills__names">
                        <i class='bx bxl-nodejs skills__icon'></i>
                        <span class="skills__name">Node.js</span>
                    </div>
                    <div class="skills__bar" style="width: 85%"></div>
                    <div>
                        <span class="skills__percentage">85%</span>
                    </div>
                </div>
                
                <div class="skills__data">
                    <div class="skills__names">
                        <i class='bx bxl-python skills__icon'></i>
                        <span class="skills__name">Python</span>
                    </div>
                    <div class="skills__bar" style="width: 80%"></div>
                    <div>
                        <span class="skills__percentage">80%</span>
                    </div>
                </div>
                
                <div class="skills__data">
                    <div class="skills__names">
                        <i class='bx bx-cloud skills__icon'></i>
                        <span class="skills__name">AWS Cloud</span>
                    </div>
                    <div class="skills__bar" style="width: 75%"></div>
                    <div>
                        <span class="skills__percentage">75%</span>
                    </div>
                </div>
            </div>
        </section>

<section class="work section" id="work">
            <h2 class="section-title">Projelerimiz</h2>
            <div class="work__container bd-grid">
                <div class="work__item">
                    <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="FitTrack Pro" class="work__img">
                    <div class="work__overlay">
                        <h3 class="work__title">FitTrack Pro</h3>
                        <p>Profesyonel sporcular için gelişmiş takip sistemi</p>
                    </div>
                </div>
                
                <div class="work__item">
                    <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="GymManager" class="work__img">
                    <div class="work__overlay">
                        <h3 class="work__title">GymManager</h3>
                        <p>Spor salonları için entegre yönetim sistemi</p>
                    </div>
                </div>
                
                <div class="work__item">
                    <img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="HealthCoach AI" class="work__img">
                    <div class="work__overlay">
                        <h3 class="work__title">HealthCoach AI</h3>
                        <p>Yapay zeka destekli kişisel antrenör uygulaması</p>
                    </div>
                </div>
            </div>
        </section>

<section class="pricing section" id="pricing">
            <h2 class="section-title">Fiyatlandırma</h2>
            <div class="pricing__container bd-grid">
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3 class="pricing-title">Başlangıç</h3>
                        <div class="price">₺999<span>/ay</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>Temel antrenman takibi</li>
                        <li>5 kullanıcıya kadar</li>
                        <li>Mobil uygulama erişimi</li>
                        <li>Email desteği</li>
                        <li>100GB veri depolama</li>
                    </ul>
                    <a href="#contact" class="button">Başla</a>
                </div>
                
                <div class="pricing-card popular">
                    <div class="pricing-header">
                        <h3 class="pricing-title">Profesyonel</h3>
                        <div class="price">₺1.999<span>/ay</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>Gelişmiş analiz araçları</li>
                        <li>50 kullanıcıya kadar</li>
                        <li>Özel entegrasyonlar</li>
                        <li>7/24 telefon desteği</li>
                        <li>Sınırsız veri depolama</li>
                        <li>API erişimi</li>
                    </ul>
                    <a href="#contact" class="button">Başla</a>
                </div>
                
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3 class="pricing-title">Kurumsal</h3>
                        <div class="price">Özel<span>fiyat</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>Özelleştirilmiş çözümler</li>
                        <li>Sınırsız kullanıcı</li>
                        <li>Öncelikli destek</li>
                        <li>Kurumsal eğitimler</li>
                        <li>Özel geliştirmeler</li>
                        <li>Dedicated sunucu</li>
                    </ul>
                    <a href="#contact" class="button">İletişime Geç</a>
                </div>
            </div>
        </section>

<section class="contact section" id="contact">
            <h2 class="section-title">İletişim</h2>
            <div class="contact__container bd-grid">
                <form action="" class="contact__form">
                    <input type="text" placeholder="Adınız Soyadınız" class="contact__input" required>
                    <input type="email" placeholder="E-posta Adresiniz" class="contact__input" required>
                    <input type="text" placeholder="Konu" class="contact__input" required>
                    <input placeholder="Mesajınız" class="contact__input contact__input--textarea" required/>
                    <button type="submit" class="button contact__button">Mesaj Gönder</button>
                </form>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="footer__container bd-grid">
            <div class="footer__col">
                <h3 class="footer__title">Sport<span>Tech</span></h3>
                <p class="footer__description">Spor ve teknolojiyi bir araya getirerek spor dünyasını dijitalleştiriyoruz.</p>
                <div class="footer__social">
                    <a href="#" class="footer__icon"><i class='bx bxl-facebook'></i></a>
                    <a href="#" class="footer__icon"><i class='bx bxl-twitter'></i></a>
                    <a href="#" class="footer__icon"><i class='bx bxl-instagram'></i></a>
                    <a href="#" class="footer__icon"><i class='bx bxl-linkedin'></i></a>
                </div>
            </div>
            
            <div class="footer__col">
                <h3 class="footer__title">Hızlı Linkler</h3>
                <ul class="footer__links">
                    <li><a href="#home">Ana Sayfa</a></li>
                    <li><a href="#about">Hakkımızda</a></li>
                    <li><a href="#services">Hizmetler</a></li>
                    <li><a href="#work">Projeler</a></li>
                    <li><a href="#contact">İletişim</a></li>
                </ul>
            </div>
            
            <div class="footer__col">
                <h3 class="footer__title">İletişim</h3>
                <ul class="footer__links">
                    <li><i class='bx bx-map'></i> Teknopark, İstanbul</li>
                    <li><i class='bx bx-phone'></i> +90 (212) 555 55 55</li>
                    <li><i class='bx bx-envelope'></i> info@sporttech.com</li>
                    <li><i class='bx bx-time'></i> Pazartesi-Cuma: 09:00-18:00</li>
                </ul>
            </div>
        </div>
        
        <div class="footer__copy">
            <p>© 2024 SportTech Solutions. Tüm hakları saklıdır.</p>
        </div>
    </footer>

<script src="https://unpkg.com/scrollreveal"></script>
    
    
    <script>
        // Mobile Menu Toggle
        const showMenu = (toggleId, navId) => {
            const toggle = document.getElementById(toggleId),
                  nav = document.getElementById(navId);

if(toggle && nav) {
                toggle.addEventListener('click', () => {
                    nav.classList.toggle('show');
                    toggle.classList.toggle('bx-x');
                });
            }
        }
        showMenu('nav-toggle', 'nav-menu');

// Active Menu Link
        const navLink = document.querySelectorAll('.nav__link');
        function linkAction() {
            navLink.forEach(n => n.classList.remove('active'));
            this.classList.add('active');
            
            // Close mobile menu
            const navMenu = document.getElementById('nav-menu');
            navMenu.classList.remove('show');
            document.getElementById('nav-toggle').classList.remove('bx-x');
        }
        navLink.forEach(n => n.addEventListener('click', linkAction));

// Scroll Reveal Animation
        const sr = ScrollReveal({
            origin: 'top',
            distance: '60px',
            duration: 2000,
            delay: 200,
            reset: true
        });

sr.reveal('.home__title, .home__description, .button', {});
        sr.reveal('.home__img', {delay: 400});
        sr.reveal('.section-title', {delay: 300});
        sr.reveal('.about__img', {origin: 'left'});
        sr.reveal('.about__data', {origin: 'right'});
        sr.reveal('.service-card, .work__item, .pricing-card', {interval: 200});

// Sticky Header
        window.addEventListener('scroll', function() {
            const header = document.querySelector('.l-header');
            header.classList.toggle('sticky', window.scrollY > 0);
        });

// Smooth Scrolling for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if(targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if(targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>

Validating your code, please wait...

HTML

CSS