Napravite: Sajt za Turističku Agenciju - Mozak

Website koji ćemo napraviti: vidi LIVE . Preuzmite website besplatno i koristi bez obveze DOWNLOAD.

Klini da vidiš live sajt !

U novom fajlu “index.html” pohranimo Bootstrap Starter Template. U starter templejtu učitali smo neophodne JS i CSS kodove.

HTML

Sekcija: Osnovna CSS pravila

Definirajmo osnovna CSS pravila za našu temu:
CSS

U ovom dijelu ćemo izmjeniti dafaultni prikaz btn-primary gumba.

CSS

U našoj temi koristimo font Pacifico koji smo preuzali sa fonts.google.com. Kako bi mogli upotrebljavati ovaj font na našoj stranici moramo ga prvobitno učitati dodavajući ovaj code između <head> </head> elementa.

   <link href=”https://fonts.googleapis.com/css2?family=Pacifico&display=swap” rel=”stylesheet”>

Odjeljak: Navigacija

Koristimo svijetlu bootstrap navigaciju . Gumb, button je hamburger element koji se pojavljuje na malim ekranima, i omogućava otvaranje navigacionog panela.

HTML
CSS

Odjeljak: Jumbotron

Meni smo smjestili unutar Jumbotrona kako bi navigacija bila iznad slike koju koristimo za Jumbotron.

HTML
CSS

Odjeljak: O nama

HTML

Sekcija: Ponuda

Za kreiranje panela ponude koristili smo Bootstrap kartice. Svaki od njih ima definiran donji razmak pb-5, što pomaže kod mobilnog prikaza. Kartični elementi su skladišteni u kolone čija je veličina definirana sa col-12 col-md-6 col-lg-4. Na ovaj način kod malih ekrana jedna ponuda zauzima 100% širine ekrana. Kod srednjih ekrana imamo 2 ponude u redu, a kod velikih ekrana 4 ponude u jednome redu.

HTML

Efekat povećavanja ponude na klik postigli smo sledećim CSS pravilom.

CSS

Sekcija: Kontakt

Bootstrap posjeduje predefinisane izglede za html forme kao i klase koje pomažu prilikom upravljanja sa njima (BT forme). Klasa form-row omogućava nam da forme raspoređujemo pomoću standardnih bootstrap kolona.

Sekcija: Footer

U footeru imamo jednu cover sliku. Kako bi tekst nad njom bio vidljiv obojili smo ga korištenjem izvorne bootstrap klase text-white.

HTML
CSS

Ovo je bio primjer toka izrade web stranice korištenjem Bootstrap framework-a. Detaljan opis svih bootstrap elemenata pronađite u bootstrap dokumentaciji.

Hvala na čitanju.