2. Koodifragmendid

PHP faili lugemine

See kood loeb teksti failist ja kuvab selle veebilehel. Kasutatakse dünaamilise sisu kuvamiseks.

<?php
$autor = file_get_contents('autor.txt');
echo nl2br($autor);
?>

Responsiivne navigatsioon

CSS kood, mis muudab menüü mobiilseadmetes vertikaalseks ja suurendab nuppude suurust puutetundlikkuse parandamiseks.

@media screen and (max-width: 768px) {
    .nav ul {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .nav ul li a {
        display: block;
        padding: 12px 15px;
        text-align: center;
    }
}

Kaasaegne gradientne taust

Loob visuaalselt atraktiivse tausta lineaarse gradiendiga, mis muudab saidi välimuse kaasaegsemaks.

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

Klaasefekt (Glass morphism)

Kaasaegne disainitrend, mis loob poolläbipaistva "klaasi" efekti taustahägunemisega.

#header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Animatsioonid

Sujuv sisu ilmumine lehele laadimise ajal, mis parandab kasutajakogemust.

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#content {
    animation: fadeInUp 0.8s ease;
}

Hover efektid

Interaktiivsed efektid, mis reageerivad hiire liikumisele ja parandavad kasutajaliidest.

.nav ul li a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

Mobiilne optimiseerimine

Väikeste ekraanide jaoks kohandatud stiilid, mis tagavad hea kasutatavuse nutitelefonides.

@media screen and (max-width: 480px) {
    #content {
        margin: 10px 3px;
        padding: 15px 10px;
    }
    
    .teade {
        font-size: 14px;
        padding: 15px 10px;
    }
}

3. Projekti struktuur

• p2is.php - päise ja navigatsiooni fail
• jalus.php - jaluse fail
• index.php - pealeht
• kujundus.css - kõik stiilid
• *.php - erinevate kategooriate lehed