What is a ctk zadatak 1 - osnovni grid? How do you make a ctk zadatak 1 - osnovni grid? This script and codes were developed by Antonio Erdeljac on 06 December 2022, Tuesday.
CTK zadatak 1 - Osnovni grid Previews
CTK zadatak 1 - Osnovni grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CTK zadatak 1 - Osnovni grid</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- 1. Pomoću link elementa dodajemo Font-Awesome skriptu za ikonu datoteke -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- 2. Postavljamo vertikalno centrirani DIV kojeg smo uskladili u CSSu klasom "vertikalno_centrirano" -->
<div class="vertikalno_centrirano">
<!-- 3. Postavljamo DIV kartice koji ima ID "kartica" --> <div id="kartica"> <!-- 4. Dijelimo "kartica" na lijevu i desnu stranu, zapocevsi lijevim <DIV> - om sa klasom "lijevo" --> <div class="lijevo"> <!-- 5. Postavljamo FontAwesome ikonicu pomocu klase "fa fa-file", tu klasu nismo definirali, ali smo je priložili u 1. koraku. elementu <i> dodajemo ID "datoteka" --> <i class="fa fa-file" id="datoteka"></i> </div> <!-- 6. Dijelimo "kartica" na desnu stranu klasom "desno" --> <div class="desno"> <!-- 7. stvaramo naslov datoteke u paragrafu sa ID "ime"--> <p id="ime">ctk.png</p> <!-- 8. stvaramo crtu pomocu DIV elementa sa ID "crta" --> <div id="crta"> <!-- 9. stvaramo postotak prijenosa datoteke u paragrafu sa ID "postotak"--> <p id="postotak">100%</p> </div> </div> </div>
</div>
</body>
</html>
CTK zadatak 1 - Osnovni grid - Script Codes CSS Codes
/* 1. Nabavljamo font sa google fonts koristeći import */
@import url('https://fonts.googleapis.com/css?family=Roboto');
/* 2. Primjenjujemo font html i body elementima,
postavljamo visinu oba elementa na 100% radi vertikalnog
centriranja, također postavljamo i pozadinsku boju */
html,body { height:100%; background-color: #ecf0f1; font-family: Roboto, Arial;
}
/* 3. Stvaramo klasu za vertikalno centriranje, postavljamo visinu na 100%, display na flex radi relativnosti te
uskljađujemo elemente prema centru */
.vertikalno_centrirano { height: 100%; display: flex; align-items: center;
}
/* 4. Stvaramo ID kartice, postavljamo visinu i širinu te pozadinsku boju, zaobljujemo rubove pomocu border-radius-a, font povecavamo na 30 radi preglednosti te margine postavljamo na automatsko podešavanje radi horizontalnog centriranja, te zadnje padding radi preglednosti */
#kartica { width:500px; background-color:#fff; border-radius:10px; font-size:30px; margin: auto; padding:50px;
}
/* 5. Stvaramo ID datoteke, postavljamo joj boju na zelenu pomocu hex koda i color property-a */
#datoteka { color:#1abc9c;
}
/* 6. stvaramo id imena datoteke, font postavljamo na 15px a boju na zelenu. */
#ime_datoteke { font-size:15px; color:#7f7f82;
}
/* 7. Dijelimo karticu na lijevu i desnu stranu, započevši sa lijevom koja uzima manji postotak jer na na toj strani samo ikona datoteke. Koristimo se naredbama width i float kako bi odredili poziciju. Postavljamo font na 70px*/
.lijevo { width:20%; float:left; font-size:70px;
}
/* 8. stvaramo desnu stranu koja uzima veći dio jer se u njemu nalazi crta, ime datoteke te postotak, takodjer postavljamo boju i uskljađujemo text prema centru. */
.desno { width:80%; float:left; font-size:15px; color: #1abc9c; text-align:center;
}
/* 9. stvaramo ID crte, pomoću heighta crta je tanka, postavljamo pozadinsku boju, a ne samo boju zato jer je to
element, takodjer postavljamo gornju marginu radi preglednosti */
#crta { height:2px; background-color:#1abc9c; margin-top:10px;
}
/* 10. stvaramo id postotka, odvajamo ga od crte prema dole */
#postotak { padding-top:10px;
}
Do you need developer help for CTK zadatak 1 - Osnovni grid?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!
