Metehan

Abrir no Editor Video Publique Seu Código

Recomendado

25 April 2025

<!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>

Metehan

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS