Sistemas de energía solar | Soluciones GES de SolarTek

1,270 Metehan

Abrir en el editor Publica tu código

Sistemas de energía solar | Soluciones GES de SolarTek

Recomendado

22 February 2026

Ejemplo de código de interfaz de usuario de calculadora HTML

10 October 2025

Contenedor de fragmentos de animación CSS

10 December 2025

Código fuente de JavaScript del juego de la serpiente HTML Canvas

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SolarTek | Güneş Enerji Sistemleri</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        /* Renk Paleti ve Temel Stiller */
        :root {
            --dark-blue: #003366;
            --medium-blue: #004d99;
            --light-blue: #0066cc;
            --orange: #FF6600;
            --light-orange: #ff8533;
            --light-gray: #f5f7fa;
            --dark-gray: #333333;
            --white: #ffffff;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Open Sans', sans-serif;
            color: var(--dark-gray);
            background-color: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--dark-blue);
        }
        
        h1 {
            font-size: 3rem;
            line-height: 1.2;
        }
        
        h2 {
            font-size: 2.5rem;
            position: relative;
            padding-bottom: 1rem;
        }
        
        h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 4px;
            background: var(--orange);
            border-radius: 2px;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .text-center {
            text-align: center;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 28px;
            background: var(--orange);
            color: var(--white);
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn:hover {
            background: var(--light-orange);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3);
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--orange);
            color: var(--orange);
        }
        
        .btn-outline:hover {
            background: var(--orange);
            color: var(--white);
        }
        
        section {
            padding: 80px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2:after {
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* Header Stilleri */
        header {
            background-color: var(--dark-blue);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 50px;
        }
        
        .logo h1 {
            color: var(--white);
            font-size: 1.8rem;
            margin-left: 10px;
            margin-bottom: 0;
        }
        
        .logo span {
            color: var(--orange);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 30px;
        }
        
        nav ul li a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 0;
        }
        
        nav ul li a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--orange);
            transition: width 0.3s ease;
        }
        
        nav ul li a:hover:after {
            width: 100%;
        }
        
        nav ul li a:hover {
            color: var(--orange);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* Hero Bölümü */
        .hero {
            background: linear-gradient(rgba(0, 51, 102, 0.8), rgba(0, 51, 102, 0.8)), url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
            height: 100vh;
            display: flex;
            align-items: center;
            color: var(--white);
            text-align: center;
        }
        
        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: var(--white);
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .hero-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        /* Hizmetler Bölümü */
        .services {
            background-color: var(--light-gray);
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .service-card {
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.4s ease;
            text-align: center;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .service-icon {
            background: var(--dark-blue);
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .service-icon i {
            font-size: 3rem;
            color: var(--orange);
        }
        
        .service-content {
            padding: 30px;
        }
        
        .service-content h3 {
            margin-bottom: 15px;
            color: var(--dark-blue);
        }
        
        /* Proje Galerisi */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 40px;
        }
        
        .gallery-item {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            height: 250px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 51, 102, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: all 0.4s ease;
            padding: 20px;
            text-align: center;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .gallery-overlay h4 {
            color: var(--white);
            margin-bottom: 10px;
            font-size: 1.3rem;
        }
        
        .gallery-overlay p {
            color: var(--light-orange);
            font-size: 0.9rem;
        }
        
        /* Referanslar */
        .testimonials {
            background: linear-gradient(to right, var(--dark-blue), var(--medium-blue));
            color: var(--white);
        }
        
        .testimonials h2 {
            color: var(--white);
        }
        
        .testimonials h2:after {
            background: var(--orange);
        }
        
        .testimonials-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .testimonial-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 30px;
            margin: 20px;
            position: relative;
            text-align: center;
        }
        
        .testimonial-card:before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 4rem;
            color: rgba(255, 255, 255, 0.1);
            font-family: serif;
            line-height: 1;
        }
        
        .testimonial-text {
            font-style: italic;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }
        
        .client-info {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .client-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
            border: 3px solid var(--orange);
        }
        
        .client-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .client-details h4 {
            color: var(--white);
            margin-bottom: 5px;
            font-size: 1.2rem;
        }
        
        .client-details p {
            color: var(--light-orange);
            font-size: 0.9rem;
        }
        
        /* İletişim Formu */
        .contact-form {
            background: var(--light-gray);
            padding: 60px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark-blue);
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: var(--orange);
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        /* Footer */
        footer {
            background: var(--dark-blue);
            color: var(--white);
            padding: 60px 0 30px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-col h3 {
            color: var(--white);
            margin-bottom: 25px;
            font-size: 1.5rem;
            position: relative;
            padding-bottom: 15px;
        }
        
        .footer-col h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--orange);
        }
        
        .footer-col p {
            margin-bottom: 20px;
            font-size: 1rem;
            opacity: 0.9;
        }
        
        .contact-info {
            list-style: none;
        }
        
        .contact-info li {
            display: flex;
            margin-bottom: 15px;
            align-items: flex-start;
        }
        
        .contact-info i {
            color: var(--orange);
            margin-right: 15px;
            font-size: 1.2rem;
            min-width: 20px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--white);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background: var(--orange);
            transform: translateY(-3px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            opacity: 0.7;
        }
        
        /* Responsive Tasarım */
        @media (max-width: 992px) {
            h1 {
                font-size: 2.5rem;
            }
            
            h2 {
                font-size: 2rem;
            }
            
            .hero h1 {
                font-size: 2.8rem;
            }
        }
        
        @media (max-width: 768px) {
            .header-container {
                padding: 15px 0;
            }
            
            nav ul {
                display: none;
                position: absolute;
                top: 80px;
                left: 0;
                width: 100%;
                background: var(--dark-blue);
                flex-direction: column;
                padding: 20px 0;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            }
            
            nav ul.show {
                display: flex;
            }
            
            nav ul li {
                margin: 10px 0;
                text-align: center;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: center;
            }
            
            .contact-form {
                padding: 30px;
            }
        }
        
        @media (max-width: 576px) {
            section {
                padding: 60px 0;
            }
            
            .hero {
                height: 80vh;
            }
            
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container header-container">
            <div class="logo">
                <h1>Solar<span>Tek</span></h1>
            </div>
            <nav>
                <button class="mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
                <ul id="navMenu">
                    <li><a href="#home">Ana Sayfa</a></li>
                    <li><a href="#services">Hizmetler</a></li>
                    <li><a href="#projects">Projeler</a></li>
                    <li><a href="#testimonials">Referanslar</a></li>
                    <li><a href="#contact">İletişim</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container hero-content">
            <h1>Güneşin Gücüyle Geleceği Aydınlatın</h1>
            <p>Türkiye'nin önde gelen güneş enerji sistemleri çözümleri sağlayıcısı olarak, sürdürülebilir bir gelecek için yenilenebilir enerji kaynaklarını kullanmanıza yardımcı oluyoruz.</p>
            <div class="hero-btns">
                <a href="#services" class="btn">Hizmetlerimiz</a>
                <a href="#contact" class="btn btn-outline">Teklif Alın</a>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <div class="section-title">
                <h2>Uzman Çözümlerimiz</h2>
                <p>Profesyonel ekibimizle size özel güneş enerjisi çözümleri sunuyoruz</p>
            </div>
            
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-home"></i>
                    </div>
                    <div class="service-content">
                        <h3>Konutsal GES</h3>
                        <p>Evleriniz için özel tasarlanmış, yüksek verimli güneş enerji sistemleri ile elektrik faturalarınızdan kurtulun.</p>
                        <a href="#" class="btn">Detaylı Bilgi</a>
                    </div>
                </div>
                
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="service-content">
                        <h3>Ticari GES</h3>
                        <p>İşletmelerin enerji maliyetlerini düşürmek ve sürdürülebilirlik hedeflerine ulaşmak için özel çözümler.</p>
                        <a href="#" class="btn">Detaylı Bilgi</a>
                    </div>
                </div>
                
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <div class="service-content">
                        <h3>Bakım & Onarım</h3>
                        <p>Mevcut güneş enerji sistemlerinizin maksimum verimlilikte çalışması için uzman bakım ve onarım hizmeti.</p>
                        <a href="#" class="btn">Detaylı Bilgi</a>
                    </div>
                </div>
                
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <div class="service-content">
                        <h3>Enerji Danışmanlığı</h3>
                        <p>Enerji verimliliği ve sürdürülebilirlik konularında uzman danışmanlık hizmetleri.</p>
                        <a href="#" class="btn">Detaylı Bilgi</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="projects" id="projects">
        <div class="container">
            <div class="section-title">
                <h2>Proje Galerimiz</h2>
                <p>Türkiye'nin dört bir yanında gerçekleştirdiğimiz başarılı projeler</p>
            </div>
            
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1613665813446-82a78c468a1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Konya GES Projesi">
                    <div class="gallery-overlay">
                        <h4>Konya GES Projesi</h4>
                        <p>5MW Kurulu Güç</p>
                    </div>
                </div>
                
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="İzmir Konut Projesi">
                    <div class="gallery-overlay">
                        <h4>İzmir Konut Projesi</h4>
                        <p>10kW Çatı Üstü Sistem</p>
                    </div>
                </div>
                
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Antalya Otel Projesi">
                    <div class="gallery-overlay">
                        <h4>Antalya Otel Projesi</h4>
                        <p>500kW Ticari Sistem</p>
                    </div>
                </div>
                
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Ankara Fabrika Projesi">
                    <div class="gallery-overlay">
                        <h4>Ankara Fabrika Projesi</h4>
                        <p>2MW Endüstriyel Sistem</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Müşteri Referanslarımız</h2>
                <p>Memnun müşterilerimizin SolarTek deneyimleri</p>
            </div>
            
            <div class="testimonials-container">
                <div class="testimonial-card">
                    <p class="testimonial-text">"SolarTek ekibi, fabrikamız için kurdukları güneş enerji sistemi sayesinde aylık enerji maliyetlerimizi %70 oranında düşürdü. Profesyonel ve zamanında teslimat için teşekkürler."</p>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Ahmet Yılmaz">
                        </div>
                        <div class="client-details">
                            <h4>Ahmet Yılmaz</h4>
                            <p>Endüstri Müdürü, ABC Tekstil</p>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card">
                    <p class="testimonial-text">"Evin çatısına kurulan 8kW'lık sistem sayesinde artık elektrik faturası ödemiyorum. Ayrıca fazla üretimi satarak ek gelir elde ediyorum. Kesinlikle tavsiye ederim."</p>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ayşe Demir">
                        </div>
                        <div class="client-details">
                            <h4>Ayşe Demir</h4>
                            <p>Konut Müşterisi, İzmir</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>İletişime Geçin</h2>
                <p>Ücretsiz keşif ve teklif için hemen bize ulaşın</p>
            </div>
            
            <div class="contact-form">
                <form>
                    <div class="form-group">
                        <label for="name">Adınız Soyadınız</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">E-posta Adresiniz</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">Telefon Numaranız</label>
                        <input type="tel" id="phone" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="service">İlgilendiğiniz Hizmet</label>
                        <select id="service" class="form-control" required>
                            <option value="">Lütfen seçiniz</option>
                            <option value="residential">Konutsal GES</option>
                            <option value="commercial">Ticari GES</option>
                            <option value="maintenance">Bakım & Onarım</option>
                            <option value="consulting">Enerji Danışmanlığı</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Mesajınız</label>
                        <input id="message" class="form-control" required/>
                    </div>
                    
                    <button type="submit" class="btn">Teklif İsteyin</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3>SolarTek</h3>
                    <p>Türkiye'nin lider güneş enerji sistemleri çözüm sağlayıcısı olarak, sürdürülebilir bir gelecek için yenilenebilir enerji kaynaklarını etkin bir şekilde kullanmanıza yardımcı oluyoruz.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                
                <div class="footer-col">
                    <h3>İletişim</h3>
                    <ul class="contact-info">
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <span>Teknopark İstanbul, Sanayi Mah. <br>Teknopark Bulvarı No:1/1A <br>34906 Pendik/İstanbul</span>
                        </li>
                        <li>
                            <i class="fas fa-phone"></i>
                            <span>+90 216 999 88 77</span>
                        </li>
                        <li>
                            <i class="fas fa-envelope"></i>
                            <span>info@solartek.com.tr</span>
                        </li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>Çalışma Saatleri</h3>
                    <ul class="contact-info">
                        <li>
                            <i class="fas fa-clock"></i>
                            <span>Pazartesi - Cuma: 09:00 - 18:00</span>
                        </li>
                        <li>
                            <i class="fas fa-clock"></i>
                            <span>Cumartesi: 10:00 - 15:00</span>
                        </li>
                        <li>
                            <i class="fas fa-clock"></i>
                            <span>Pazar: Kapalı</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>© 2023 SolarTek Güneş Enerji Sistemleri. Tüm hakları saklıdır.</p>
            </div>
        </div>
    </footer>

CSS