6. kolo takmičenja u programiranju [ HTML / CSS ]

6. kolo takmičenja u programiranju - Zadatak HTML / CSS


Pravila igre

1. Bodove će dobiti samo onaj ko prvi tačno uradi zadatak.
2. Prihvata se samo potpuno tačan kod, djelimično tačni kodovi se odbacuju.
3. Rješenje postavljate tako što ćete zapakovati HTML i CSS fajlove i upload na neku stranicu za upload fajlova.
4. U svakoj postavci će vam biti objašnjen uslov za tačan kod.
5. Pobjednik kola (takmičar sa najvećim brojem bodova) kao nagradu dobija 15 CHB.
6. Spam, glupiranje i opčenito postavljanje postova koji nemaju veze sa temom će biti kažnjeni.

ZADATAK:

Pomoću HTML-a i CSS-a napraviti izgled stranice kao na slici.

https://i.imgur.com/KA3EbOd.png


Napomene:

- Slike u krugovima i naslovna slika ne moraju biti identične, možete na internetu naći neke koje su slične;
- Logo u lijevom gornjem vrhu ne mora biti identičan, možete na internetu naći sličan;
- U gornjem meniju (Početna, O nama, Proizvodi, Kontakti) prilikom prelaska miša preko njih, mora biti druga nijansa žute boje.



SRETNO !

Ja sam predlozio ovo i ispostavilo se da nisam spreman. Prestao sam sa kodiranjem isto kao i programiranjem pre vise od godinu dana i do tada sam ucio html i css a nisam ni tada puno znao (otprilike malo vise od ovoga, pravljenje jednostavnijih stranica). Sada sam cisto pokusao da uradim ovo na brzinu nesto i uspeo sam a ni sam ne znam kako, kod je uzasan i sve je PRElose nabacano (klase i identifikatori) jer sam na brzinu uradio a i nisam nikada imao neko veliko znanje, ali eto, ****ga... xd
Nadam se da ce mi ovaj pdf vratiti volju i da opet pocnem :D

KLIK

Citiraj:

---

Prvotno napisano od Wicked

Ja sam predlozio ovo i ispostavilo se da nisam spreman. Prestao sam sa kodiranjem isto kao i programiranjem pre vise od godinu dana i do tada sam ucio html i css a nisam ni tada puno znao (otprilike malo vise od ovoga, pravljenje jednostavnijih stranica). Sada sam cisto pokusao da uradim ovo na brzinu nesto i uspeo sam a ni sam ne znam kako, kod je uzasan i sve je PRElose nabacano (klase i identifikatori) jer sam na brzinu uradio a i nisam nikada imao neko veliko znanje, ali eto, ****ga... xd
Nadam se da ce mi ovaj pdf vratiti volju i da opet pocnem :D

KLIK

---

Ovo ti je ok manje - više, par stvari treba ispraviti:
- Staviti u gornjem meniju padding-top nekoliko pixela, čisto da ga odmakneš logo od vrha stranice
- Staviti top-margine na div "informacije" da ga odmakneš malo od slike
- Na ove krugove staviti "border 2px neka narandžasta nijasna"
- Staviti background-color neku svjetliju narandžastu na ove divove ispod
- Napraviti razmak između ovih divova ispod.

Sve u svemu, probaj editovati ovako kako sam napisao pa ćemo vidjeti ako niko drugi do tada ne uradi, ti si pobjednik :)

Citiraj:

---

Prvotno napisano od Tarik

Ovo ti je ok manje - više, par stvari treba ispraviti:
- Staviti u gornjem meniju padding-top nekoliko pixela, čisto da ga odmakneš logo od vrha stranice
- Staviti top-margine na div "informacije" da ga odmakneš malo od slike
- Na ove krugove staviti "border 2px neka narandžasta nijasna"
- Staviti background-color neku svjetliju narandžastu na ove divove ispod
- Napraviti razmak između ovih divova ispod.

Sve u svemu, probaj editovati ovako kako sam napisao pa ćemo vidjeti ako niko drugi do tada ne uradi, ti si pobjednik :)

---

Ovo dole mi je ruzno ispalo zato sto sam sve hteo da mi lepo stane u 100vh, mrzelo me sve od pocetka da menjam hahahhaha.
Posto sam vec neuredno od pocetka, mrzi me od pocetka da radim pa evo, ako prodje prodje... Nadam se da ce sledeci put biti bolje. :D
Inace, upload sam samo kod pa ga zameni sa ovim prvim.
KLIK

Kod mene ovako nesto, koristio sam slike ovog wickeda hehe

https://prnt.sc/1fe0stw

Nadam se da sam utrefila sve kriterijume :D Ni ja nisam odavno radila sa html/css
edit: poslije sam vidjela da slika ima orange border pa sam i to dodala
https://workupload.com/file/F2zwzZqT9t2

Evo i od mene file sa klasicnom Html/css
File download - https://easyupload.io/5s1wjo
Izgled- https://prnt.sc/1fe0stw

A evo i verzija koristeci bootstrap predefinisane klase ( nadam se da je dozvoljeno )
File download- https://easyupload.io/touoe2
Izgled - https://prnt.sc/1fejstj

@KatarinaWolf pobjednica takmičenja. Ona je prva ponudila najviše slično rješenje u odnosu na sliku. Nagrada: 15 CHB.