Mobiilimalli konspekt


Minu ülesanne oli teha mobiilimall, ehk lehekülg mis sobib vaatamiseks nii arvutil, kui ka mobiilil.
Lehe tegemiseks kasutasin PhpStorm-i.
    <php require("p2is.php"); ?>
<h2>Tuletõlrje anekdood</h2>
<br>
<div>"Hallo! Kas see on tuletõrje? Tulge ruttu siia, mul maja põleb!"
    "Palun rahunege seltsimees ja seletage, kuidas teie juurde saab!"
    "Tule jumal appi! Seletan! Istuge oma suurde, punasesse masinasse ja sõitke!"</div>
<br>
<php require("jalus.php"); ?>
See koodi osa on see mida sa näed iga anekdoodi vajutades. php require tähendab seda, et sinna lisandub koodi osa mis on kirjutatud p2is.php failis, sama asi ka jalus.php-ga. Iga anekdoodi jaoks on taoline leht ja nende ainuke erinevus ongi anekdood.
<div id="header">
    <div class="nav">
        <ul>
            <li><a href="anekdood1.php">Tuletõlrje anekdood</a></li>
            <li><a href="anekdood2.php">Juku anekdood</a></li>
            <li><a href="anekdood3.php">Arvutifriik anekdood</a></li>
            <li><a href="anekdood4.php">Aja muutus</a></li>
            <li><a href="anekdood5.php">Politseikoer anekdood</a></li>
        </ul>
    </div>
</div>
<div class="clear"></div>
<h2>Tuletõlrje anekdood</h2>
<div>"Hallo! Kas see on tuletõrje? Tulge ruttu siia, mul maja põleb!"
    "Palun rahunege seltsimees ja seletage, kuidas teie juurde saab!"
    "Tule jumal appi! Seletan! Istuge oma suurde, punasesse masinasse ja sõitke!"</div>
    <div class="nav2">
    <p>Design by ChatGPT</p>
</div>
See koodi osa põhimõtteliselt paneb kõik kokku ja samuti kui jõuad lehele näed alguses seda mis siin on.
body {
    background: #0f0f0f;
    font-family: "Inter", Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #e6e6e6;
}
See on CSS kujundus ja see on body jaoks. Siin lisatakse tausta värvi, teksti värvi ja samuti teksti fonti.
.nav ul li a:hover {
    background: #00eaff;
    color: #0f0f0f;
    border-radius: 6px;
}
See on CSS kujundus navigeerimis menüü jaoks. See ei ole terve navigeerimis menüü kujundus, vaid see on ainult osa sellest kui hiir on nuppu peal. See muudab nuppu tausta värvi siniseks, teksti värvi mustaks ja teeb nurgad natuke ilusamaks.
h2 {
    font-size: 20px;
    font-weight: 600;
    color: #00eaff;
    border-left: 4px solid #00eaff;
    padding: 10px 14px;
    margin: 15px 10px;
    background: #1a1a1a;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 234, 255, 0.15);
}
See CSS kood lisab kujunduse anekdoodide pealkirjade jaoks. Näiteks lisab pealkirja teksti värvi, tausta värvi, kasti varja ja selle värvi.
@media screen and (max-width: 768px)  {
    html{
        scroll-behavior: smooth;
    }
}
See CSS aitab sobitada lehe ehk css kujunduse mobiili jaoks.