Helios

Geschätzte Lektüre: 20 Minuten 129 Ansichten

Einfaches Praxisprojekt • Lernprojekt

⬇️  Bildmaterialien • ZIP herunterladen

Quellcode

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!----------------- © Murad Ghanaimy • ebla Studio © -------------------------->
    <meta name="Murad Ghanaimy" content="Designed & powered by Murad Ghanaimy">
    <meta name="description" content="Murad Ghanaimy • ebla Studio">
    <meta name="author" content="Murad Ghanaimy • ebla Studio">
    <meta name="copyright" content="Murad Ghanaimy • ebla Studio">
    <meta name="keywords" content="Murad Ghanaimy • ebla Studio">
    <meta name="robots" content="index, follow">
    <!----------------- © Murad Ghanaimy • ebla Studio © -------------------------->
    <link rel="website icon" type="png" href="img/Favicon_50x50.png">
    <link rel="stylesheet" href="style.css">
    <title>Helios</title>
</head>
<body>
    <!------------ Header ------------------>
    <header class="header" >
        <!------------ Header ------------------>
        <div class="logo">
            <h1>Helios</h1>
        </div>
        <!------------ Header ------------------>
        <nav class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Produkte</a></li>
                <li><a href="#">Über uns</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <!------------ Hero Banner ------------------>
    <section class="hero">
        <div class="container">
            <h1>Photovoltaik für Einsteiger</h1>
            <p>Mit Helios sauberen Strom erzeugen – einfach, hell, zukunftsorientiert.</p>
            <a href="#produkte" class="btn">Mehr erfahren →</a>
        </div>
    </section>
    <!------------ Produktgalerie ------------------>
    <section class="Produktgalerie">
        <h2 class="headline-Produktgalerie">Produktgalerie</h2>
        <small>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt sed iure dolorem veritatis.
        </small>
        <section class="bilder">
            <img src="img/Helios_500x500_04.jpg" alt="Bild">
            <img src="img/Helios_500x500_06.jpg" alt="Bild">
            <img src="img/Helios_500x500_01.jpg" alt="Bild">
        </section>
    </section>
    <!------------ Produkte ------------------>
    <article class="produkte">
        <div class="container">
            <h2>Helios-Systeme</h2>
            <div class="produkte-grid">
                <div class="card">
                    <h3>Solar Modul</h3>
                    <p>405W, monokristallin, hohe Effizienz</p>
                    <strong>ab 149 €</strong>
                </div>
                <div class="card">
                    <h3>Stromspeicher</h3>
                    <p>5 kWh, erweiterbar, intelligentes Management</p>
                    <strong>ab 2.890 €</strong>
                </div>
                <div class="card">
                    <h3>Wechselrichter</h3>
                    <p>Smart & effizient, App-gesteuert</p>
                    <strong>ab 780 €</strong>
                </div>
            </div>
        </div>
    </article>
    <!------------ Infozeile (einfache Fakten) ------------------>
    <div class="info-row">
        <div> 25 Jahre Garantie</div>
        <div>Förderfähig</div>
        <div>85% Eigenverbrauch</div>
    </div>
    <!------------ Info-Box + ein Bild ------------------>
    <section class="text-bild-section">
        <div class="text-box">
            <h2>Das ist die Überschrift</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam error impedit sapiente magnam voluptates saepe 
                quidem excepturi modi commodi officia? Rem odit vel perferendis suscipit reprehenderit sit recusandae, 
                nam a magnam vitae nemo minima officiis dolores iste neque obcaecati reiciendis omnis quos explicabo, 
                ipsum optio quidem repellat beatae. Sint illo aliquid.
                <br> <br>
                Nam a magnam vitae nemo minima officiis dolores iste neque obcaecati reiciendis omnis quos explicabo, 
                ipsum optio quidem repellat beatae. Sint illo aliquid consequuntur officiis at ipsum ipsa exercitationem. 
                Sequi, similique! Natus quasi quos labore distinctio optio consequatur repudiandae.
            </p>
            <small>
                Optional noch ein zweiter Absatz für mehr Inhalt.
            </small>
        </div>
        <div class="bild-box">
            <img src="img/Helios_500x500_02.jpg" alt="Bild">
        </div>
    </section>
    <!------------ Kontaktformular ------------------>
    <section class="kontakt">
        <div class="container">
            <h2>Schreiben Sie uns</h2>
            <div class="underline"></div>
            <div class="contact-form">
                <!-- Zwei Felder nebeneinander via Flexbox -->
                <input class="name" type="text"  placeholder="Name: Max Mustermann" />
                <input type="email" placeholder="E-Mail-Adresse" />
                <input type="tel"   placeholder="Telefon (optional)" />
                <!-- Dropdown zur Themenauswahl -->
                <select>
                    <option>Thema auswählen …</option>
                    <option>Angebot anfordern</option>
                    <option>Technische Frage</option>
                    <option>Finanzierung</option>
                    <option>Sonstiges</option>
                </select>
                <!-- Mehrzeiliges Textfeld -->
                <textarea placeholder="Ihre Nachricht …"></textarea>
                <button class="btn" style="align-self: flex-start;">Nachricht senden</button>
            </div>
        </div>
    </section>
    <!------------ Zitat ------------------>
    <section class="zitat">
        <h2>Headline</h2>
        <p>
            „Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam vel cum totam at fuga ab suscipit, 
            odit amet cumque.“
        </p>
        <small>
            Lorem ipsum dolor sit amet.
        </small>
    </section>
    <!------------ Zitat ------------------>
    <footer>
        <p>
            Officiis odit dolor natus? Doloribus voluptate odio accusamus aliquid. Impedit.
        </p>
        <hr>
        <small>
            © Murad Ghanaimy | Helios, Lernprojekt für Schüler und Studenten.
        </small>
    </footer>

</body>
</html>

CSS:


/* -------------- body -------------- */
body{
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px;
    width: 1200px;
    margin: 0 auto;
}
/* -------------- Header -------------- */
header{
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #f3aa34;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    border-radius: 15px;
    padding: 0px 25px;
    box-sizing: border-box;
}
/* -------------- Logo -------------- */
.logo h1{
    font-size: 36px;
    color: #f3aa34;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 0;
}

/* -------------- NAV -------------- */
nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
nav ul li {
    margin-left: 10px;
}
nav ul li a {
    text-decoration: none;
    color: #535455;
    text-transform: uppercase;
    padding: 10px 15px;
    transition: all 0.3s;
    border-radius: 25px;
}
nav ul li a:hover{
    background-color: #fff;
    color: #f3aa34;
}
/* -------------- Hero Banner -------------- */
.hero {
    background-image: url('img/Helios_Bild_5400x3200.jpg');
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 25px;
    border-radius: 15px;
}
.hero .container {
   position: relative;
}
.hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: 40px;
    text-transform: uppercase;
}
.hero p {
    margin-bottom: 40px;
    color: #ffffff;
}
.hero a {
    text-decoration: none;
    padding: 15px 30px;
    background: #f3aa34;
    color: #fff;
    box-sizing: border-box;
    border-radius: 30px;
}
.hero a:hover {
    background: #fcbb52;
}
/* -------------- Galerie -------------- */
.Produktgalerie {
    text-align: left;
}
.Produktgalerie .headline-Produktgalerie{
    margin-top: 50px;
    font-size: 38px;
    text-transform: uppercase;
    margin-bottom: 0px;
    text-align: left;
    color: #3b3c42;
}
.Produktgalerie small {
    color: #535455;
}
.Produktgalerie .bilder {
    display: flex; 
    width: 100%;
    justify-content: space-between; 
    margin-top: 30px;
}

.Produktgalerie .bilder img {
    width: 30%;
    height: auto;
    object-fit: cover;
    border-radius: 25px;
}
/* -------------- Produkte -------------- */
.produkte .container h2{
    font-size: 32px;
    text-transform: uppercase;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    color: #3b3c42;
    margin-top: 50px;
}
.produkte-grid {
    display: flex;
    justify-content: space-between;
}
.card {
    background: #ffffff;
    border: 1px solid #f3aa34;
    text-align: center;
    border-radius: 18px;
    padding: 25px;
}
.card h3 {
    text-transform: uppercase;
    color: #f3aa34;
    margin-top: 0px;
    font-size: 30px;
}
.card p {
    color: #828282;
    margin-top: 0px; 
}
.card strong {
    color: #828282;
    
}
/* Infozeile unter Produkten */
.info-row {
    display: flex;
    flex-wrap: wrap;
    background-color: #f3aa34;
    border-radius: 18px;
    justify-content: space-between;
    color: #fff;
    padding: 10px;
    margin-top: 70px;
}
.info-row div {
    padding: 0px 20px;
}
/* -------------- Info-Box -------------- */
.text-bild-section {
    display: flex;       
    justify-content: space-between;             
    align-items: center;
}
.text-box {
    flex: 1; 
    color: #828282;
}
.text-box h2{
    font-size: 32px;
    color: #f3aa34;
}
.bild-box {
    flex: 1;
    padding: 100px;
    padding-right: 0px;
}
.bild-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 25px;
}
/* -------------- Kontaktformular -------------- */
.kontakt {
    width: 100%;
}
.kontakt h2 {
    color: #3b3c42;
    text-transform: uppercase;
    font-size: 36px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3aa34;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    resize: vertical; 
    border: 1px solid #ccc;
    border-radius: 10px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #f3aa34;
}
.kontakt .btn {
    text-decoration: none;
    padding: 15px 30px;
    background: #f3aa34;
    color: #fff;
    border-radius: 30px;
    outline: none;
    border: none;
    text-transform: uppercase;
}
.kontakt .btn:hover {
    background: #fcbb52;
}
/* -------------- Zitat -------------- */
.zitat{
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    border: 1px solid #f3aa34;
    border-radius: 25px;
    margin-left: 20px;
    margin-right: 20px;
}
.zitat h2{
    font-size: 32px;
    margin: 0px;
    margin-top: 10px;
}
/* -------------- Footer -------------- */
footer{
    margin-top: 75px;
    text-align: center;
    background-color: #f9f7f5;
    padding: 50px;
}
footer hr {
    border: 1px solid #e4dcd3;
}
Dieses Dokument teilen

Helios

Oder Link kopieren

INHALT

Abonnieren

×
Cancel