Plataforma Educacional | Desenvolvimento e Design Web

Abrir no Editor Video Publique Seu Código

Recomendado

19 October 2024

Formulário de login HTML animado

20 January 2025

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

Formulário de login HTML animado

Notificação de brinde

Transformação de dados

HTML

CSS

JS

Recomendado

Formulário de login HTML animado

Notificação de brinde

Transformação de dados

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS