Fric-frac Views HTML-CSS

Op de HTML voor de views te maken baseren we ons op Fric-frac Wireframes. De uitleg over de CSS vind je op Programmeren 3 Fric-frac realisatie CSS. De uitleg wordt gegeven voor de Fric-frac app in ASP.NET MVC, die we in Programmeren 3 gemaakt hebben. We gaan dezelfde techniek gebruiken in PHP.

Inleiding

Zorg er voor dat je de volgende bestanden in een map met de css in de root van je project hebt staan. Je vindt ze in mijn worspace op Cloud9:

|-css
    |-fonts
        |-tower-pattern.svg
        |-tower-pattern.ttf
        |-tower-pattern.woff
    |-app.css
    |-iconfont.css

Admin

Views/Index.php We volgen de wireframe voor de Index pagina van het Admin gedeelte. Je vindt die wireframe op Fric-frac Wireframes:

<nav class="control-panel">
    <a href="/Home/Index" class="tile">
        <span class="icon-menu2"></span>
        <span class="screen-reader-text">Home</span>
    </a>
    <h1 class="banner">Fric-frac</h1>
</nav>
<section class="show-room index">
    <a class="tile" href="/Person/Index">
        <span class="icon-group"></span>
        <span class="screen-reader-text">Index Personen</span>
        <h1>Index Personen</h1>
    </a>
    <a class="tile" href="/Country/Index">
        <span class="icon-earth"></span>
        <span class="screen-reader-text">Index Landen</span>
        <h1>Index Landen</h1>
    </a>
    <div class="tile">Informatieve tegel</div>
    <div class="tile">Informatieve tegel</div>
    <a class="tile" href="/Role/Index">
        <span class="icon-group2"></span>
        <span class="screen-reader-text">Index Rollen</span>
        <h1>Index Rollen</h1>
    </a>
    <a class="tile" href="/User/Index">
        <span class="icon-user"></span>
        <span class="screen-reader-text">Index Gebruikers</span>
        <h1>Index Gebruikers</h1>
    </a>
    <div class="tile">Informatieve tegel</div>
    <a class="tile" href="/Event/Index">
        <span class="icon-lightning"></span>
        <span class="screen-reader-text">Index Events</span>
        <h1>Index Events</h1>
    </a>
    <a class="tile" href="/EventCategory/Index">
        <span class="icon-tag"></span>
        <span class="screen-reader-text">Index Event Categorieën</span>
        <h1>Index Event Categorieën</h1>
    </a>
    <a class="tile" href="/EventTopic/Index">
        <span class="icon-tag-stroke"></span>
        <span class="screen-reader-text">Index Event Topics</span>
        <h1>Index Event Topics</h1>
    </a>
    <div class="tile">Informatieve tegel</div>
</section>

Onder ondertitel

Paragraaf

2019-04-13 11:41:17