Plataforma Educacional | Desenvolvimento e Design Web

Abrir no Editor Publique Seu Código

Recomendado

23 September 2025

Contêiner de animação CSS: formas e movimento

30 November 2024

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kod Vizyonu | Eğitim ve Geliştirme Platformu</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Turret+Road:wght@200;300;400;500;700;800&display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

/* Temel stiller */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: var(--font-primary);
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

section {
            padding: 100px 0;
        }

h1, h2, h3, h4 {
            font-weight: 600;
            color: var(--text-color);
        }

.section-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--gradient-main);
            border-radius: 2px;
            margin: 1rem auto;
        }

/* Preloader */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s, visibility 0.5s;
        }
        
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid var(--border-color);
            border-top-color: var(--accent-color-1);
            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: all 0.4s ease;
            background-color: rgba(248, 249, 250, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-color);
            text-decoration: none;
            display: flex;
            align-items: center;
            font-family: var(--font-code);
        }
        
        .logo i { 
            color: var(--accent-color-1);
            margin-right: 10px;
        }

.nav-menu {
            display: flex;
            list-style: none;
            gap: 40px;
        }

.nav-link {
            text-decoration: none;
            color: var(--text-secondary);
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
            padding-bottom: 5px;
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-main);
            transition: width 0.3s;
        }

.nav-link:hover, .nav-link.active {
            color: var(--text-color);
        }
        
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            font-size: 1.5rem;
            background: none;
            border: none;
            color: var(--text-color);
            cursor: pointer;
        }

/* Hero Section */
        #home {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            background: radial-gradient(circle at top left, rgba(0, 123, 255, 0.15), transparent 70%);
        }

.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 {
            background: var(--gradient-main);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

.hero-text .subtitle {
            font-size: 1.25rem;
            font-family: var(--font-code);
            margin-bottom: 2rem;
            color: var(--text-secondary);
        }

.btn {
            display: inline-flex;
            align-items: center;
            padding: 12px 30px;
            background: var(--gradient-main);
            color: white;
            text-decoration: none;
            font-weight: 600;
            border-radius: 2rem;
            transition: all 0.3s;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            border: none;
            cursor: pointer;
        }

.btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0, 123, 255, 0.25);
        }

.button-icon {
            margin-left: 0.5rem;
            transition: transform 0.3s ease;
        }

.btn:hover .button-icon {
            transform: scale(1.2) rotate(15deg);
        }

.hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .banner-app-mock {
            position: relative;
            width: 272px;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
        }
        
        .banner-app-mock .main-img {
            margin-top: 20px;
            margin-left: 15px;
            width: 240px;
            height: 520px;
            border-radius: 20px;
            object-fit: cover;
        }
        
        .banner-app-mock .mockup {
            width: 277px;
            height: 552px;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 5;
        }
        
        .mobile-graphic {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -2;
            opacity: 0.8;
        }

/* About Section */
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

.about-img {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }
        
        .about-img img {
            width: 100%;
            height: auto;
            transition: transform 0.5s;
        }
        
        .about-img:hover img {
            transform: scale(1.05);
        }

.about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            background: var(--gradient-main);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

/* Skills Section */
        .skills-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }

.skills-item {
            margin-bottom: 1.5rem;
        }

.skills-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

.skills-bar {
            height: 8px;
            background-color: var(--border-color);
            border-radius: 4px;
            overflow: hidden;
        }

.skills-progress {
            height: 100%;
            background: var(--gradient-main);
            border-radius: 4px;
            position: relative;
            width: 0;
            transition: width 1s ease-in-out;
        }

/* Services Section */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

.service-card {
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: var(--card-shadow);
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.service-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
        }

.service-card:nth-child(1) .service-icon {
            color: var(--accent-color-1);
        }
        
        .service-card:nth-child(2) .service-icon {
            color: var(--accent-color-2);
        }
        
        .service-card:nth-child(3) .service-icon {
            color: var(--accent-color-3);
        }

/* Pricing Section */
        .pricing-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

.pricing-plan {
            background-color: var(--card-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s, box-shadow 0.3s;
        }

.pricing-plan:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

.pricing-header {
            padding: 1.5rem;
            background: var(--gradient-main);
            position: relative;
        }

.pricing-header h3 {
            color: white;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.best-value {
            position: absolute;
            right: -50px;
            top: 20px;
            width: 200px;
            background: #FFD700;
            color: #212529;
            text-transform: uppercase;
            transform: rotate(45deg);
            font-size: 0.8rem;
            text-align: center;
            padding: 0.5rem 0;
        }

.pricing-price {
            padding: 40px 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.pricing-price .currency {
            font-size: 1.2rem;
            margin-right: 5px;
            color: var(--text-secondary);
        }

.pricing-price .price {
            font-size: 3rem;
            font-weight: 700;
            background: var(--gradient-main);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

.pricing-price .period {
            font-size: 0.9rem;
            margin-left: 5px;
            color: var(--text-secondary);
        }

.pricing-body ul {
            padding: 0 2rem;
            list-style: none;
        }

.pricing-body ul li {
            padding: 12px 0 12px 30px;
            position: relative;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.9rem;
        }

.pricing-body ul li i {
            color: var(--accent-color-2);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

.pricing-footer {
            padding: 2rem;
            text-align: center;
        }

/* Portfolio Section */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

.portfolio-item {
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: var(--card-shadow);
        }

.portfolio-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.portfolio-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.4s;
        }
        
        .portfolio-item:hover .portfolio-img {
            transform: scale(1.05);
        }

.portfolio-content {
            padding: 1.5rem;
        }

.portfolio-content h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

/* Testimonials/Team Section */
        .testimonials-container {
            padding-bottom: 2rem;
        }

.testimonial-item {
            padding: 2rem;
            background-color: var(--card-color);
            width: 340px;
            border-radius: 12px;
            text-align: center;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s;
        }

.testimonial-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.testimonial-item .img-box {
            width: 120px;
            height: 120px;
            margin: 0 auto 1.5rem;
            border: 4px solid var(--accent-color-1);
            border-radius: 50%;
            overflow: hidden;
        }

.testimonial-item h3 {
            font-size: 1.3rem;
            background: var(--gradient-main);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

.testimonial-item span {
            display: block;
            margin-bottom: 0.75rem;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

.testimonial-item ul {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            list-style: none;
        }

.testimonial-item ul li {
            display: inline-block;
        }

.testimonial-item ul li a {
            color: var(--text-color);
            font-size: 1.2rem;
            transition: color 0.3s ease;
        }

.testimonial-item:hover ul li a {
            color: var(--accent-color-1);
        }

/* FAQ Section */
        .accordion-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

.accordion-content {
            align-self: center;
        }

.accordion-item {
            background-color: var(--card-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            margin-bottom: 1rem;
        }

.accordion-header {
            padding: 1rem 1.5rem;
            background: var(--gradient-main);
            color: white;
            cursor: pointer;
            position: relative;
        }

.accordion-header h3 {
            color: white;
            font-size: 1.1rem;
        }

.accordion-header::before {
            content: '\f067';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
        }

.accordion-item.collapsed .accordion-header::before {
            content: '\f068';
        }

.accordion-body {
            height: 0;
            overflow: hidden;
            transition: height 0.3s ease;
        }

.accordion-item.collapsed .accordion-body {
            height: auto;
            padding: 1.5rem;
        }

.accordion-body p {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

/* Contact Section */
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }

.contact-info {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

.contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

.contact-icon {
            font-size: 1.5rem;
            color: var(--accent-color-1);
        }

.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-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 5px;
            color: var(--text-color);
            font-family: var(--font-primary);
        }

.form-input:focus {
            outline: none;
            border-color: var(--accent-color-1);
        }

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

/* Footer */
        .footer {
            background-color: var(--primary-color);
            border-top: 1px solid var(--border-color);
            padding: 50px 0 30px;
        }

.footer-container {
            display: grid;
            grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr;
            column-gap: 3rem;
        }

.footer-content {
            margin-bottom: 2rem;
        }

.footer-logo {
            display: flex;
            align-items: center;
            column-gap: 0.5rem;
            margin-bottom: 2rem;
            font-family: var(--font-code);
            font-size: 1.5rem;
            color: var(--accent-color-1);
            text-decoration: none;
        }

.footer-title {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
        }

.footer-subscribe {
            background: var(--card-color);
            padding: 0.75rem;
            display: flex;
            justify-content: space-between;
            border-radius: 2rem;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
        }

.footer-input {
            width: 70%;
            padding: 0 0.5rem;
            background: none;
            border: none;
            outline: none;
            color: var(--text-color);
        }

.footer-button {
            padding: 1rem;
            border-radius: 2rem;
        }

.footer-data {
            display: grid;
            row-gap: 0.75rem;
        }

.footer-information {
            font-size: 0.9rem;
        }

.footer-information-link a {
            color: var(--text-color);
            font-size: 0.9rem;
            transition: color 0.3s ease;
            text-decoration: none;
        }

.footer-information-link:hover a {
            color: var(--accent-color-1);
        }

.footer-social {
            display: inline-flex;
            column-gap: 0.75rem;
        }

.footer-social-link {
            font-size: 1rem;
            color: var(--text-color);
            transition: color 0.3s ease;
        }

.footer-social-link:hover {
            color: var(--accent-color-1);
        }

.footer-copy {
            margin: 3rem 0 2rem;
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

.social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: var(--card-color);
            color: var(--text-color);
            border-radius: 50%;
            transition: all 0.3s;
            box-shadow: var(--card-shadow);
            text-decoration: none;
        }

.social-link:hover {
            background: var(--gradient-main);
            color: white;
            transform: translateY(-3px);
        }

.copyright {
            color: var(--text-secondary);
            font-size: 0.9rem;
            text-align: center;
        }

/* Animasyonlar */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s, transform 0.8s;
        }

.reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

/* Swiper */
        .swiper {
            width: 100%;
            padding-top: 50px;
            padding-bottom: 50px;
        }

.swiper-slide {
            background-position: center;
            background-size: cover;
            width: 300px;
            display: flex;
            justify-content: center;
        }

/* Responsive Tasarım */
        @media (max-width: 1200px) {
            .footer-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 992px) {
            .services-grid,
            .portfolio-grid,
            .pricing-container {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .hero-content,
            .about-content,
            .accordion-container,
            .contact-container {
                grid-template-columns: 1fr;
            }
            
            .home-container, .feature-container, .accordion-container, .contact-container { 
                grid-template-columns: 1fr; 
                row-gap: 2rem; 
            }
            
            .hero-text {
                text-align: center;
            }
        }

@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(--primary-color);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: right 0.5s ease-in-out;
                gap: 2rem;
                box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
            }
            
            .nav-menu.active {
                right: 0;
            }
            
            .services-grid,
            .portfolio-grid,
            .pricing-container,
            .skills-container {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .hero-text h1 {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .testimonial-item {
                width: 252px;
            }
        }

@media (max-width: 576px) {
            .btn-group {
                flex-direction: column;
                align-items: center;
            }
            
            .hero-text h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>

<div id="preloader">
        <div class="loader"></div>
    </div>

<header class="header" id="header">
        <div class="container navbar">
            <a href="#" class="logo"><i class="fas fa-code"></i>KodVizyonu</a>
            <nav>
                <ul class="nav-menu" id="nav-menu">
                    <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ımda</a></li>
                    <li class="nav-item"><a href="#skills" class="nav-link">Yetenekler</a></li>
                    <li class="nav-item"><a href="#services" class="nav-link">Hizmetler</a></li>
                    <li class="nav-item"><a href="#pricing" class="nav-link">Fiyatlandırma</a></li>
                    <li class="nav-item"><a href="#team" class="nav-link">Ekip</a></li>
                    <li class="nav-item"><a href="#faq" class="nav-link">SSS</a></li>
                    <li class="nav-item"><a href="#contact" class="nav-link">İletişim</a></li>
                </ul>
            </nav>
            <button class="menu-toggle" id="menu-toggle"><i class="fas fa-bars"></i></button>
        </div>
    </header>

<main>
        
        <section id="home">
            <div class="container hero-content">
                <div class="hero-text reveal">
                    <h1>Merhaba, ben <span class="highlight">Ahmet</span></h1>
                    <p class="subtitle">// Eğitmen & Full-stack developer</p>
                    <p>Teknoloji ve eğitimin kesişiminde, anlamlı dijital deneyimler oluşturuyorum. Modern web teknolojileri ve kullanıcı odaklı tasarım ilkeleriyle çözümler üretiyorum.</p>
                    <div style="margin-top: 2rem;">
                        <a href="#pricing" class="btn">Paketleri Gör</a>
                        <a href="#contact" class="btn" style="margin-left: 1rem; background: transparent; color: var(--accent-color-1); border: 2px solid var(--accent-color-1);">İletişime Geç</a>
                    </div>
                </div>
                <div class="hero-image reveal">
                    <div class="banner-app-mock">
                        <img src="https://i.postimg.cc/fWFWGWrF/mobile-mock.png" class="mockup" alt="mobile image">
                        <img src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="main-img" alt="Profil">
                    </div>
                    <div class="mobile-graphic">
                        <img src="https://i.postimg.cc/50DBQdst/mobile-graphic.png" alt="mobile graphic">
                    </div>
                </div>
            </div>
        </section>

<section id="about">
            <div class="container">
                <h2 class="section-title">Hakkımda</h2>
                <div class="about-content">
                    <div class="about-img reveal">
                        <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Hakkımda">
                    </div>
                    <div class="about-text reveal">
                        <h3>Yazılım ve eğitim tutkusuyla dolu bir geliştirici</h3>
                        <p>5 yılı aşkın süredir web teknolojileri ve eğitim içerikleri üzerine çalışıyorum. Amacım, sadece işlevsel değil aynı zamanda kullanıcıların seveceği öğrenme deneyimleri yaratmak.</p>
                        <p style="margin-top: 1rem;">Front-end ve back-end teknolojilerinde uzmanlaşarak, projelerin her aşamasında etkili çözümler sunabiliyorum. Sürekli öğrenmeye ve kendimi geliştirmeye inanıyorum.</p>
                        <div style="margin-top: 2rem;">
                            <a href="#contact" class="btn">İletişime Geç</a>
                            <a href="#" class="btn" style="margin-left: 1rem; background: transparent; color: var(--accent-color-1); border: 2px solid var(--accent-color-1);">CV'mi İndir</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="skills" style="background-color: var(--secondary-color);">
            <div class="container">
                <h2 class="section-title">Yetenekler</h2>
                <div class="skills-container">
                    <div class="reveal">
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>HTML/CSS</span>
                                <span>95%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="95%"></div>
                            </div>
                        </div>
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>JavaScript</span>
                                <span>90%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="90%"></div>
                            </div>
                        </div>
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>React</span>
                                <span>85%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="85%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="reveal">
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>UI/UX Tasarım</span>
                                <span>88%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="88%"></div>
                            </div>
                        </div>
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>Node.js</span>
                                <span>80%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="80%"></div>
                            </div>
                        </div>
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>Python</span>
                                <span>75%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="75%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="services">
            <div class="container">
                <h2 class="section-title">Hizmetler</h2>
                <div class="services-grid">
                    <div class="service-card reveal">
                        <div class="service-icon">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <h3>Web Geliştirme</h3>
                        <p>Modern, responsive ve kullanıcı dostu web siteleri ve web uygulamaları geliştiriyorum.</p>
                    </div>
                    <div class="service-card reveal">
                        <div class="service-icon">
                            <i class="fas fa-palette"></i>
                        </div>
                        <h3>UI/UX Tasarım</h3>
                        <p>Kullanıcı ihtiyaçlarına odaklanan, estetik ve işlevsel arayüz tasarımları oluşturuyorum.</p>
                    </div>
                    <div class="service-card reveal">
                        <div class="service-icon">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <h3>Eğitim Danışmanlığı</h3>
                        <p>Kariyer yolculuğunuzda size rehberlik edecek kişiselleştirilmiş eğitim programları sunuyorum.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="pricing" style="background-color: var(--secondary-color);">
            <div class="container">
                <h2 class="section-title">Fiyatlandırma Planları</h2>
                <div class="pricing-container">
                    <div class="pricing-plan reveal">
                        <div class="pricing-header">
                            <h3>Başlangıç</h3>
                        </div>
                    
                        <div class="pricing-price">
                            <span class="currency">₺</span>
                            <span class="price">0</span>
                            <span class="period">/aylık</span>
                        </div>

<div class="pricing-body">
                            <ul>
                                <li><i class="fa fa-check"></i>Ücretsiz Kurslara Erişim</li>
                                <li><i class="fa fa-check"></i>Sınırlı Sayıda Quiz</li>
                                <li><i class="fa fa-check"></i>Topluluk Desteği</li>
                                <li><i class="fa fa-check"></i>Sınırlı Sayıda Proje</li>
                                <li><i class="fa fa-check"></i>Sınırlı Mobil Uygulama Erişimi</li>
                            </ul>
                        </div>

<div class="pricing-footer">
                            <a href="#" class="btn">Hemen Başla</a>
                        </div>
                    </div>

<div class="pricing-plan reveal">
                        <div class="pricing-header">
                            <h3>Premium</h3>
                            <div class="best-value">en iyi değer</div>
                        </div>
                    
                        <div class="pricing-price">
                            <span class="currency">₺</span>
                            <span class="price">99</span>
                            <span class="period">/aylık</span>
                        </div>

<div class="pricing-body">
                            <ul>
                                <li><i class="fa fa-check"></i>Tüm Kurslara Erişim</li>
                                <li><i class="fa fa-check"></i>Sınırsız Quiz</li>
                                <li><i class="fa fa-check"></i>Topluluk Desteği</li>
                                <li><i class="fa fa-check"></i>Sınırsız Proje</li>
                                <li><i class="fa fa-check"></i>Sınırsız Mobil Uygulama Erişimi</li>
                                <li><i class="fa fa-check"></i>Yetenek Yollarına Erişim</li>
                            </ul>
                        </div>
                        
                        <div class="pricing-footer">
                            <a href="#" class="btn">Hemen Başla</a>
                        </div>
                    </div>

<div class="pricing-plan reveal">
                        <div class="pricing-header">
                            <h3>Kurumsal</h3>
                        </div>
                    
                        <div class="pricing-price">
                            <span class="currency">₺</span>
                            <span class="price">199</span>
                            <span class="period">/aylık</span>
                        </div>

<div class="pricing-body">
                            <ul>
                                <li><i class="fa fa-check"></i>Tüm Kurslara Erişim</li>
                                <li><i class="fa fa-check"></i>Sınırsız Quiz</li>
                                <li><i class="fa fa-check"></i>Özel Mentor Desteği</li>
                                <li><i class="fa fa-check"></i>Sınırsız Proje</li>
                                <li><i class="fa fa-check"></i>Sınırsız Mobil Uygulama Erişimi</li>
                                <li><i class="fa fa-check"></i>Yetenek Yollarına Erişim</li>
                                <li><i class="fa fa-check"></i>Kariyer Yollarına Erişim</li>
                                <li><i class="fa fa-check"></i>Sertifika Programları</li>
                            </ul>
                        </div>
                        
                        <div class="pricing-footer">
                            <a href="#" class="btn">Hemen Başla</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="team">
            <div class="container">
                <h2 class="section-title">Ekibimizle Tanışın</h2>
                <div class="testimonials-container">
                    <div class="swiper testimonials-swiper">
                        <div class="swiper-wrapper">
                            <div class="testimonial-item swiper-slide">
                                <div class="img-box"><img src="https://i.postimg.cc/Pf6GJVXG/team1.jpg" alt="team member"></div>
                                <h3>Ahmet Yılmaz</h3>
                                <span>UI Tasarımcı</span>
                                <ul>
                                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="ri-twitter-x-line"></i></a></li>
                                    <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>

<div class="testimonial-item swiper-slide">
                                <div class="img-box"><img src="https://i.postimg.cc/TwCsyhXj/team2.jpg" alt="team member"></div>
                                <h3>Zeynep Kaya</h3>
                                <span>UX Tasarımcı</span>
                                <ul>
                                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="ri-twitter-x-line"></i></a></li>
                                    <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>

<div class="testimonial-item swiper-slide">
                                <div class="img-box"><img src="https://i.postimg.cc/YCNBrrjR/team3.jpg" alt="team member"></div>
                                <h3>Mehmet Demir</h3>
                                <span>Full-Stack Geliştirici</span>
                                <ul>
                                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="ri-twitter-x-line"></i></a></li>
                                    <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="faq" style="background-color: var(--secondary-color);">
            <div class="container">
                <h2 class="section-title">Sıkça Sorulan Sorular</h2>
                <div class="accordion-container">
                    <div class="accordion-img image reveal">
                        <div class="banner-app-mock">
                            <img src="https://i.postimg.cc/fWFWGWrF/mobile-mock.png" class="mockup" alt="mobile image">
                            <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="main-img" alt="FAQ image">
                        </div>
                        <div class="mobile-graphic">
                            <img src="https://i.postimg.cc/50DBQdst/mobile-graphic.png" alt="mobile graphic">
                        </div>
                    </div>

<div class="accordion-content">
                        <div class="accordion-item collapsed reveal">
                            <div class="accordion-header">
                                <h3>100% Responsive - Tüm cihazlara uyumlu</h3>
                            </div>
                            <div class="accordion-body">
                                <p>Küçük yazıları okumak veya telefonunuzda bir web sitesinde gezinmek için uğraşmak tarihe karıştı.</p>
                            </div>
                        </div>

<div class="accordion-item collapsed reveal">
                            <div class="accordion-header">
                                <h3>Tercih ettiğiniz Yetenek Yollarına katılın</h3>
                            </div>
                            <div class="accordion-body">
                                <p>Yetenek yolları, size tam olarak nereden başlayacağınızı ve sonra ne öğreneceğinizi gösteren yapılandırılmış müfredat yol haritalarıdır.</p>
                            </div>
                        </div>

<div class="accordion-item collapsed reveal">
                            <div class="accordion-header">
                                <h3>Çocuklar için Uygun</h3>
                            </div>
                            <div class="accordion-body">
                                <p>Kodlama tıpkı yeni bir dil öğrenmek veya matematik çalışmak gibidir. Genç yaşta kodlamayı öğrenen çocuklar, başarı için bir ömür boyu fırsatlar yaratabilirler.</p>
                            </div>
                        </div>

<div class="accordion-item collapsed reveal">
                            <div class="accordion-header">
                                <h3>Profesyonel Sertifikalar Kazanın</h3>
                            </div>
                            <div class="accordion-body">
                                <p>Profesyonel bir sertifika kazanmak için bir dizi sınavı geçmeniz gerekir. Bu sınavlar, öğrendiğiniz kavramlardaki yeterliliği değerlendirir.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="contact">
            <div class="container">
                <h2 class="section-title">İletişim</h2>
                <div class="contact-container">
                    <div class="contact-info reveal">
                        <h3 style="margin-bottom: 1.5rem;">Bize Ulaşın</h3>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4>Konum</h4>
                                <p>İstanbul, Türkiye</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4>Email</h4>
                                <p>info@kodvizyonu.com</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4>Telefon</h4>
                                <p>+90 555 123 45 67</p>
                            </div>
                        </div>
                    </div>
                    <form class="contact-form reveal">
                        <div class="form-group">
                            <label for="name">İsim</label>
                            <input type="text" id="name" class="form-input" placeholder="İsminiz">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-input" placeholder="Email adresiniz">
                        </div>
                        <div class="form-group">
                            <label for="message">Mesaj</label>
                            <input id="message" class="form-input" placeholder="Mesajınız..."/>
                        </div>
                        <button type="submit" class="btn">Gönder</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="container">
            <div class="footer-container">
                <div class="footer-content">
                    <a href="#" class="footer-logo"><i class="fas fa-code"></i>KodVizyonu</a>
                    <h3 class="footer-title">Güncel kalmak için <br> bültenimize abone olun</h3>

<div class="footer-subscribe">
                        <input type="email" placeholder="Email adresiniz" class="footer-input">
                        <button class="btn footer-button">
                            Abone Ol
                            <i class="ri-arrow-right-up-line button-icon"></i>
                        </button>
                    </div>
                </div>
                <div class="footer-content">
                    <h3 class="footer-title">Adresimiz</h3>
                    <ul class="footer-data">
                        <li class="footer-information">Türkiye</li>
                        <li class="footer-information">İstanbul</li>
                        <li class="footer-information">Şişli</li>
                    </ul>
                </div>
                <div class="footer-content">
                    <h3 class="footer-title">Bize Ulaşın</h3>
                    <ul class="footer-data">
                        <li class="footer-information">+90 555 123 45 67</li>
                        <div class="footer-social">
                            <a href="#" class="footer-social-link"><i class="ri-facebook-fill"></i></a>
                            <a href="#" class="footer-social-link"><i class="ri-instagram-line"></i></a>
                            <a href="#" class="footer-social-link"><i class="ri-twitter-x-line"></i></a>
                        </div>
                    </ul>
                </div>
                <div class="footer-content">
                    <h3 class="footer-title">Hizmetlerimiz</h3>
                    <ul class="footer-data">
                        <li class="footer-information-link"><a href="#">Fiyatlandırma</a></li>
                        <li class="footer-information-link"><a href="#">Özellikler</a></li>
                        <li class="footer-information-link"><a href="#">SSS</a></li>
                    </ul>
                </div>
            </div>
            <p class="footer-copy">© <span>KodVizyonu</span>. Tüm hakları saklıdır.</p>
        </div>
    </footer>

// 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');
                // Menü ikonunu değiştir
                const icon = menuToggle.querySelector('i');
                if (navMenu.classList.contains('active')) {
                    icon.classList.remove('fa-bars');
                    icon.classList.add('fa-times');
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            });

navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    if (navMenu.classList.contains('active')) {
                        navMenu.classList.remove('active');
                        const icon = menuToggle.querySelector('i');
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                });
            });

// Scroll Animasyonları
            const revealElements = document.querySelectorAll('.reveal');
            const revealObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        
                        // Skill barlarını doldur
                        if (entry.target.querySelector('.skills-progress')) {
                            const progressBars = entry.target.querySelectorAll('.skills-progress');
                            progressBars.forEach(bar => {
                                const width = bar.getAttribute('data-width');
                                bar.style.width = width;
                            });
                        }
                    }
                });
            }, {
                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);
            });

// Testimonial Swiper
            var testimonialSwiper = new Swiper(".testimonials-swiper", {
                slidesPerView: "auto",
                centeredSlides: true,
                spaceBetween: 32,
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });

// Accordion FAQ
            let accordionHeaders = document.querySelectorAll('.accordion-header');
            let accordionItems = document.querySelectorAll('.accordion-item');

accordionHeaders.forEach(header => header.addEventListener('click', toggleAccordion));
            function toggleAccordion() {
                thisItem = this.parentNode;
                accordionItems.forEach(item => {
                    if(thisItem == item){
                        thisItem.classList.toggle('collapsed');
                        return;
                    }
                    item.classList.remove('collapsed');
                })
            }

// Form gönderimi
            const contactForm = document.querySelector('.contact-form');
            contactForm.addEventListener('submit', (e) => {
                e.preventDefault();
                alert('Mesajınız alınmıştır. En kısa sürede sizinle iletişime geçeceğiz.');
                contactForm.reset();
            });

});
    </script>

</body>
</html>

Plataforma Educacional | Desenvolvimento e Design Web

Recomendado

Contêiner de animação CSS: formas e movimento

Texto brilhante

Login do TheDOC

HTML

CSS

JS

Recomendado

Contêiner de animação CSS: formas e movimento

Texto brilhante

Login do TheDOC

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS