Instalação de Painéis Solares | Serviços e Preços

48 Metehan

Abrir no Editor Publique Seu Código

Instalação de Painéis Solares | Serviços e Preços

Recomendado

23 April 2025

Um Código de Metehan

18 November 2024

Modelo de site de portfólio moderno

23 August 2025

Modelo de página de login HTML CSS do SEAT Leon

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Güneş Enerjisi Portalı - Temiz Gelecek</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">

</head>
<body>
    <header>
        <div class="container">
            <a href="index.html" class="logo">GüneşPortalı</a>
            <nav>
                <ul>
                    <li><a href="#hero">Ana Sayfa</a></li>
                    <li><a href="#advantages">Neden Güneş?</a></li>
                    <li><a href="#services">Hizmetler</a></li>
                    <li><a href="#blog">Bilgi Bankası</a></li>
                    <li><a href="#faq">SSS</a></li>
                    <li><a href="#contact">İletişim</a></li>
                </ul>
            </nav>
            <button class="menu-toggle" aria-label="Menüyü aç/kapat"><i class="fas fa-bars"></i></button>
        </div>
    </header>

<main>
        <section id="hero" class="hero-section">
            <div class="hero-overlay"></div>
            <div class="container hero-content">
                <h1>Geleceğin Enerjisi, Bugünün Yatırımı</h1>
                <p>Sürdürülebilir bir dünya için güneşin gücünden faydalanın. Keşfedin, öğrenin ve dönüşüme katılın.</p>
                <a href="#advantages" class="btn btn-primary">Daha Fazla Bilgi</a>
            </div>
        </section>

<section id="advantages" class="advantages-section">
            <div class="container">
                <h2>Neden Güneş Enerjisi?</h2>
                <div class="advantages-grid">
                    <div class="advantage-item">
                        <i class="fas fa-leaf"></i>
                        <h3>Çevre Dostu</h3>
                        <p>Karbon ayak izinizi azaltın, doğayı koruyun. %100 temiz ve yenilenebilir enerji kaynağı.</p>
                    </div>
                    <div class="advantage-item">
                        <i class="fas fa-wallet"></i>
                        <h3>Ekonomik Tasarruf</h3>
                        <p>Elektrik faturalarınızda önemli ölçüde azalma sağlayın, uzun vadede kâra geçin.</p>
                    </div>
                    <div class="advantage-item">
                        <i class="fas fa-thumbs-up"></i>
                        <h3>Uzun Ömürlü Yatırım</h3>
                        <p>Dayanıklı ve az bakım gerektiren sistemlerle yıllarca kesintisiz enerji üretimi.</p>
                    </div>
                     <div class="advantage-item">
                        <i class="fas fa-cogs"></i>
                        <h3>Enerji Bağımsızlığı</h3>
                        <p>Kendi enerjinizi üreterek şebekeye olan bağımlılığınızı azaltın ve enerji güvencesi sağlayın.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="services" class="services-section">
            <div class="container">
                <h2>Popüler Hizmetlerimiz</h2>
                <div class="services-grid">
                    <div class="service-card">
                        <img src="https://via.placeholder.com/400x250.png?text=Panel+Kurulumu" alt="Güneş Paneli Kurulumu">
                        <div class="service-content">
                            <h3>Konut Tipi Panel Kurulumu</h3>
                            <p>Eviniz için özel olarak tasarlanmış, yüksek verimli güneş paneli sistemleri kuruyoruz.</p>
                            <a href="#contact" class="btn btn-secondary">Teklif Al</a>
                        </div>
                    </div>
                    <div class="service-card">
                        <img src="https://via.placeholder.com/400x250.png?text=Ticari+Çözümler" alt="Ticari Güneş Çözümleri">
                        <div class="service-content">
                            <h3>Ticari & Endüstriyel Çözümler</h3>
                            <p>İşletmenizin enerji maliyetlerini düşürecek, büyük ölçekli güneş enerjisi projeleri.</p>
                            <a href="#contact" class="btn btn-secondary">Detaylı Bilgi</a>
                        </div>
                    </div>
                    <div class="service-card">
                        <img src="https://via.placeholder.com/400x250.png?text=Bakım+Onarım" alt="Bakım ve Onarım">
                        <div class="service-content">
                            <h3>Bakım ve Danışmanlık</h3>
                            <p>Mevcut sistemlerinizin periyodik bakımı ve güneş enerjisi yatırımlarınız için uzman danışmanlık.</p>
                            <a href="#contact" class="btn btn-secondary">Bize Ulaşın</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="blog" class="blog-section">
            <div class="container">
                <h2>Bilgi Bankası & Son Yazılar</h2>
                <div class="blog-grid">
                    <article class="blog-post">
                        <img src="https://via.placeholder.com/400x250.png?text=Blog+Görseli+1" alt="Blog Yazısı 1">
                        <div class="blog-content">
                            <span class="blog-category">Teknoloji</span>
                            <h3>Güneş Paneli Verimliliğini Artırmanın Yolları</h3>
                            <p>Güneş panellerinizden maksimum verim almak için uygulayabileceğiniz pratik ipuçları ve teknikler...</p>
                            <a href="#" class="read-more">Devamını Oku <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </article>
                    <article class="blog-post">
                        <img src="https://via.placeholder.com/400x250.png?text=Blog+Görseli+2" alt="Blog Yazısı 2">
                        <div class="blog-content">
                            <span class="blog-category">Tasarruf</span>
                            <h3>Evde Güneş Enerjisi Kullanmanın Maliyeti Nedir?</h3>
                            <p>Güneş enerjisi sistemine geçiş yapmanın ilk yatırım maliyeti ve uzun vadeli geri dönüşleri hakkında detaylı analiz...</p>
                            <a href="#" class="read-more">Devamını Oku <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </article>
                    <article class="blog-post">
                        <img src="https://via.placeholder.com/400x250.png?text=Blog+Görseli+3" alt="Blog Yazısı 3">
                        <div class="blog-content">
                            <span class="blog-category">Rehber</span>
                            <h3>Doğru Güneş Paneli Nasıl Seçilir? Kapsamlı Rehber</h3>
                            <p>İhtiyaçlarınıza en uygun güneş panelini seçerken dikkat etmeniz gereken önemli faktörler ve panel türleri...</p>
                            <a href="#" class="read-more">Devamını Oku <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

<section id="faq" class="faq-section">
            <div class="container">
                <h2>Sıkça Sorulan Sorular</h2>
                <div class="faq-accordion">
                    <div class="faq-item">
                        <button class="faq-question">
                            <span>Güneş paneli kurulumu ne kadar sürer?</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="faq-answer">
                            <p>Kurulum süresi, sistemin büyüklüğüne ve çatınızın yapısına bağlı olarak genellikle 1 ila 3 gün arasında değişmektedir. Detaylı bilgi için ücretsiz keşif hizmetimizden yararlanabilirsiniz.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <button class="faq-question">
                            <span>Güneş enerjisi sistemleri için devlet teşviki var mı?</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="faq-answer">
                            <p>Evet, Türkiye'de güneş enerjisi yatırımlarını destekleyen çeşitli devlet teşvikleri ve hibe programları bulunmaktadır. Güncel teşvikler hakkında size bilgi verebiliriz.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <button class="faq-question">
                            <span>Bulutlu havalarda güneş panelleri enerji üretir mi?</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="faq-answer">
                            <p>Evet, güneş panelleri doğrudan güneş ışığı olmasa bile dağınık ışıktan enerji üretebilir. Ancak bulutlu havalarda üretim miktarı, güneşli bir güne kıyasla daha düşük olacaktır.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" class="contact-section">
            <div class="container">
                <h2>Bizimle İletişime Geçin</h2>
                <p>Güneş enerjisi çözümlerimiz hakkında daha fazla bilgi almak veya projeniz için ücretsiz teklif almak için formu doldurun.</p>
                <form id="contact-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Adınız Soyadınız</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">E-posta Adresiniz</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="service-type">İlgilendiğiniz Hizmet</label>
                        <select id="service-type" name="service-type">
                            <option value="">Seçiniz...</option>
                            <option value="konut">Konut Tipi Kurulum</option>
                            <option value="ticari">Ticari Çözümler</option>
                            <option value="bakim">Bakım ve Danışmanlık</option>
                            <option value="diger">Diğer</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="message">Mesajınız</label>
                        <input id="message" name="message" rows="5" required/>
                    </div>
                    <button type="submit" class="btn btn-primary">Gönder</button>
                </form>
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    GüneşPortalı
                    <p>Temiz enerji, parlak gelecek.</p>
                </div>
                <div class="footer-links">
                    <h4>Hızlı Erişim</h4>
                    <ul>
                        <li><a href="#advantages">Neden Güneş?</a></li>
                        <li><a href="#services">Hizmetler</a></li>
                        <li><a href="#blog">Bilgi Bankası</a></li>
                        <li><a href="#faq">SSS</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h4>İletişim</h4>
                    <p><i class="fas fa-map-marker-alt"></i> Örnek Adres, Şehir, Türkiye</p>
                    <p><i class="fas fa-phone"></i> +90 555 123 4567</p>
                    <p><i class="fas fa-envelope"></i> bilgi@gunesportali.com</p>
                </div>
                <div class="footer-social">
                    <h4>Bizi Takip Edin</h4>
                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© <span id="currentYear"></span> GüneşPortalı. Tüm hakları saklıdır. Tasarım: [Adınız]</p>
            </div>
        </div>
    </footer>

CSS

/* GENEL STİLLER */
:root {
    --primary-color: #28a745; /* Yeşil tonu */
    --secondary-color: #ffc107; /* Sarı/Turuncu tonu */
    --dark-color: #343a40;
    --light-color: #f8f9fa;
    --text-color: #555;
    --heading-font: 'Roboto', sans-serif;
    --body-font: 'Lato', sans-serif;
    --container-width: 1140px;
    --box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    font-family: var(--heading-font);
    color: var(--dark-color);
    margin-bottom: 1rem;
    line-height: 1.3;
}
h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 3rem;
    position: relative;
}
h2::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 10px auto 0;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

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

section {
    padding: 60px 0;
}

.btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
}
.btn-primary:hover {
    background-color: darken(var(--primary-color), 10%);
    border-color: darken(var(--primary-color), 10%);
}
.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--dark-color);
    border: 2px solid var(--secondary-color);
}
.btn-secondary:hover {
    background-color: darken(var(--secondary-color), 10%);
    border-color: darken(var(--secondary-color), 10%);
}

/* HEADER */
header {
    background-color: #fff;
    box-shadow: var(--box-shadow);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    font-family: var(--heading-font);
}
header nav ul {
    list-style: none;
    display: flex;
}
header nav ul li {
    margin-left: 25px;
}
header nav ul li a {
    color: var(--dark-color);
    font-weight: bold;
    padding-bottom: 5px;
    position: relative;
}
header nav ul li a:hover,
header nav ul li a.active {
    color: var(--primary-color);
}
header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}
header nav ul li a:hover::after,
header nav ul li a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none; /* Mobilde gösterilecek */
    font-size: 1.5rem;
    background: none;
    border: none;
    color: var(--dark-color);
    cursor: pointer;
}

/* HERO SECTION */
.hero-section {
    background: url('https://via.placeholder.com/1920x1080.png?text=Güneş+Panelleri+Arkaplan') no-repeat center center/cover;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: #fff;
    padding-top: 80px; /* Header yüksekliği */
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.5); /* Arkaplanı koyulaştır */
}
.hero-content {
    position: relative; /* Overlay'in üzerinde olması için */
    z-index: 2;
}
.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700;
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #f0f0f0;
}

/* ADVANTAGES SECTION */
.advantages-section {
    background-color: var(--light-color);
}
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}
.advantage-item {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease;
}
.advantage-item:hover {
    transform: translateY(-10px);
}
.advantage-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.advantage-item h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

/* SERVICES SECTION */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.service-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden; /* Resmin kart dışına taşmasını engelle */
    display: flex;
    flex-direction: column;
}
.service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.service-content {
    padding: 20px;
    flex-grow: 1; /* İçeriğin kartı doldurmasını sağlar */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Butonu aşağı iter */
}
.service-content h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.service-content p {
    margin-bottom: 15px;
    flex-grow: 1;
}

/* BLOG SECTION */
.blog-section {
    background-color: var(--light-color);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.blog-post {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}
.blog-post img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.blog-content {
    padding: 20px;
}
.blog-category {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--dark-color);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.blog-content h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.blog-content p {
    font-size: 0.95rem;
    margin-bottom: 15px;
}
.read-more {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.9rem;
}
.read-more i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}
.read-more:hover i {
    transform: translateX(5px);
}

/* FAQ SECTION */
.faq-accordion .faq-item {
    background-color: #fff;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}
.faq-question {
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--dark-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question i {
    transition: transform 0.3s ease;
}
.faq-question.active i {
    transform: rotate(180deg);
}
.faq-answer {
    padding: 0 20px 15px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.faq-answer p {
    margin-bottom: 0;
    color: var(--text-color);
}
.faq-item.active .faq-answer {
    max-height: 200px; /* İçeriğe göre ayarlayın */
    padding-top: 10px;
    padding-bottom: 15px;
}

/* CONTACT SECTION */
.contact-section {
    background-color: var(--light-color);
}
#contact-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    max-width: 700px;
    margin: 0 auto;
}
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}
.form-row .form-group {
    flex: 1;
    margin-bottom: 0; /* Alt boşluğu form-row'dan alacak */
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.9rem;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: var(--body-font);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}
#contact-form button {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
}

/* FOOTER */
footer {
    background-color: var(--dark-color);
    color: #adb5bd;
    padding: 50px 0 20px 0;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}
.footer-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    font-family: var(--heading-font);
    margin-bottom: 10px;
}
.footer-logo p {
    font-size: 0.9rem;
    color: #ccc;
}
footer h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-family: var(--heading-font);
}
footer ul {
    list-style: none;
}
footer ul li {
    margin-bottom: 8px;
}
footer ul li a {
    color: #adb5bd;
    transition: color 0.3s ease;
}
footer ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}
.footer-contact p {
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.footer-contact p i {
    margin-right: 8px;
    color: var(--primary-color);
}
.footer-social a {
    color: #adb5bd;
    font-size: 1.3rem;
    margin-right: 15px;
    transition: color 0.3s ease;
}
.footer-social a:hover {
    color: var(--primary-color);
}
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #495057;
    font-size: 0.85rem;
}
.footer-bottom p {
    margin:0;
}

/* MOBİL UYUMLULUK */
@media (max-width: 992px) {
    .hero-content h1 { font-size: 2.5rem; }
    .services-grid, .blog-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}
}

@media (max-width: 768px) {
    h2 { font-size: 1.8rem; }
    .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; }

header nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        flex-direction: column;
        align-items: stretch;
        padding: 10px 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    header nav.active {
        max-height: 300px; /* İçeriğe göre ayarlayın */
    }
    header nav ul {
        flex-direction: column;
        width: 100%;
    }
    header nav ul li {
        margin: 0;
        text-align: center;
    }
    header nav ul li a {
        display: block;
        padding: 12px 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    header nav ul li a::after { display: none; } /* Mobilde alt çizgiyi kaldır */
    header nav ul li:last-child a { border-bottom: none; }

.menu-toggle { display: block; }
    .form-row { flex-direction: column; gap: 0;}
}

JS

document.addEventListener('DOMContentLoaded', function() {
    // Yıl bilgisini otomatik güncelle
    const currentYearSpan = document.getElementById('currentYear');
    if (currentYearSpan) {
        currentYearSpan.textContent = new Date().getFullYear();
    }

// Mobil menü toggle
    const menuToggle = document.querySelector('.menu-toggle');
    const mainNav = document.querySelector('header nav');
    if (menuToggle && mainNav) {
        menuToggle.addEventListener('click', () => {
            mainNav.classList.toggle('active');
            // İkonu değiştir (opsiyonel)
            const icon = menuToggle.querySelector('i');
            if (mainNav.classList.contains('active')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });

// Menü linklerine tıklandığında mobil menüyü kapat
        document.querySelectorAll('header nav ul li a').forEach(link => {
            link.addEventListener('click', () => {
                if (mainNav.classList.contains('active')) {
                    mainNav.classList.remove('active');
                    const icon = menuToggle.querySelector('i');
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            });
        });
    }

// Sıkça Sorulan Sorular (SSS) Akordiyon
    const faqItems = document.querySelectorAll('.faq-item');
    faqItems.forEach(item => {
        const questionButton = item.querySelector('.faq-question');
        if (questionButton) {
            questionButton.addEventListener('click', () => {
                const currentlyActiveItem = document.querySelector('.faq-item.active');
                if (currentlyActiveItem && currentlyActiveItem !== item) {
                    currentlyActiveItem.classList.remove('active');
                    currentlyActiveItem.querySelector('.faq-question').classList.remove('active');
                }

item.classList.toggle('active');
                questionButton.classList.toggle('active');
            });
        }
    });

// İletişim Formu (Basit bir console log)
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(contactForm);
            console.log('--- Form Bilgileri ---');
            for (let [key, value] of formData.entries()) {
                console.log(`${key}: ${value}`);
            }
            alert('Mesajınız (konsola) gönderildi! Geliştirici konsolunu kontrol edin.');
            contactForm.reset();
        });
    }

// Aktif navigasyon linkini belirleme (scroll sırasında)
    const sections = document.querySelectorAll('main section');
    const navLinks = document.querySelectorAll('header nav ul li a');
    const headerHeight = document.querySelector('header').offsetHeight;

function changeNavOnScroll() {
        let currentSectionId = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            if (pageYOffset >= sectionTop - headerHeight - 50) { // 50px offset
                currentSectionId = section.getAttribute('id');
            }
        });

navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href').substring(1) === currentSectionId) {
                link.classList.add('active');
            }
        });
    }
    window.addEventListener('scroll', changeNavOnScroll);
    window.addEventListener('load', changeNavOnScroll); // Sayfa yüklendiğinde de kontrol et
});

Recomendado

Um Código de Metehan

Modelo de site de portfólio moderno

Modelo de página de login HTML CSS do SEAT Leon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS