Веб дизајн/К1 2020 - Историја измена

DjoleRkc: /* Grupa 2 */ resenje delimicno

2024-04-18T10:15:07Z

Grupa 2: resenje delimicno

KockaAdmiralac: Ispravka linka

2023-10-29T22:51:20Z

Ispravka linka

← Старија измена		Верзија на датум 30. октобар 2023. у 00:51
Ред 1:		Ред 1:
	{{tocright}}		{{tocright}}
	'''Prvi kolokvijum 2020. godine''' održan je 11. marta. Bile su dve grupe, i postavka je dostupna [https://rti.etf.bg.ac.rs/rti/si2vd/rokovi/~~K1%202020~~.zip sa stranice predmeta.] ''Bootstrap'' biblioteka se uvozila preko minifikovanih JavaScript i CSS fajlova koji su bili dati u materijalima.		'''Prvi kolokvijum 2020. godine''' održan je 11. marta. Bile su dve grupe, i postavka je dostupna [https://rti.etf.bg.ac.rs/rti/si2vd/rokovi/VD_1920_K1.zip sa stranice predmeta.] ''Bootstrap'' biblioteka se uvozila preko minifikovanih JavaScript i CSS fajlova koji su bili dati u materijalima.

	== Grupa 1 ==		== Grupa 1 ==

KockaAdmiralac: Napomena o Bootstrap

2022-07-16T19:20:37Z

Napomena o Bootstrap

← Старија измена		Верзија на датум 16. јул 2022. у 21:20
Ред 1:		Ред 1:
	{{tocright}}		{{tocright}}
	'''Prvi kolokvijum 2020. godine''' održan je 11. marta. Bile su dve grupe, i postavka je dostupna [https://rti.etf.bg.ac.rs/rti/si2vd/rokovi/K1%202020.zip sa stranice predmeta.]		'''Prvi kolokvijum 2020. godine''' održan je 11. marta. Bile su dve grupe, i postavka je dostupna [https://rti.etf.bg.ac.rs/rti/si2vd/rokovi/K1%202020.zip sa stranice predmeta.] ''Bootstrap'' biblioteka se uvozila preko minifikovanih JavaScript i CSS fajlova koji su bili dati u materijalima.

	== Grupa 1 ==		== Grupa 1 ==

KockaAdmiralac: F

2022-07-10T10:59:55Z

← Старија измена		Верзија на датум 10. јул 2022. у 12:59
Ред 233:		Ред 233:
	<div class="col col-lg-3 col-md-6 col-12 logo facebook">		<div class="col col-lg-3 col-md-6 col-12 logo facebook">
	<a href="https://facebook.com/">		<a href="https://facebook.com/">
	<img src="facebook.png" alt="~~facebook~~ logo">		<img src="facebook.png" alt="Facebook logo">
	</a>		</a>
	</div>		</div>

KockaAdmiralac: Dodate slike i ispravljene ekstenzije

2022-07-10T10:59:16Z

Dodate slike i ispravljene ekstenzije

← Старија измена		Верзија на датум 10. јул 2022. у 12:59
Ред 3:		Ред 3:

	== Grupa 1 ==		== Grupa 1 ==
			Korišćene slike mogu se preuzeti [[Medij:VD K1 2020 slike.zip\|ovde]].

	=== 1. zadatak ===		=== 1. zadatak ===
	==== Rešenje ====		==== Rešenje ====
Ред 216:		Ред 218:
	<div class="col col-lg-3 col-md-6 col-12 logo nordeus">		<div class="col col-lg-3 col-md-6 col-12 logo nordeus">
	<a href="https://nordeus.com/">		<a href="https://nordeus.com/">
	<img src="nordeus.~~png~~" alt="Nordeus logo">		<img src="nordeus.jpg" alt="Nordeus logo">
	</a>		</a>
	</div>		</div>
	<div class="col col-lg-3 col-md-6 col-12 logo nvidia">		<div class="col col-lg-3 col-md-6 col-12 logo nvidia">
	<a href="https://nvidia.com/">		<a href="https://nvidia.com/">
	<img src="nvidia.~~png~~" alt="Nvidia logo">		<img src="nvidia.jpg" alt="Nvidia logo">
	</a>		</a>
	</div>		</div>

KockaAdmiralac: Rešenja prvog kolokvijuma 2020. godine

2022-07-10T10:42:24Z

Rešenja prvog kolokvijuma 2020. godine

Нова страница

{{tocright}}
'''Prvi kolokvijum 2020. godine''' održan je 11. marta. Bile su dve grupe, i postavka je dostupna [https://rti.etf.bg.ac.rs/rti/si2vd/rokovi/K1%202020.zip sa stranice predmeta.]

== Grupa 1 ==
=== 1. zadatak ===
==== Rešenje ====
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
header, nav, ul, li, section, main, form, p, label, input, body, h1, footer {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, section, header, nav, footer {
width: 100%;
}
header > p {
background-color: lightgray;
padding: 5px;
margin-bottom: 1px;
text-align: right;
}
header > img {
width: 100%;
}
nav {
background-color: lightgray;
padding: 5px;
}
nav > ul {
display: flex;
font-weight: bold;
justify-content: center;
list-style-type: none;
width: 100%;
}
nav > ul > li:not(:last-child)::after {
content: "|";
padding: 5px;
}
section {
background-color: lightgray;
height: 500px;
margin-top: 1px;
text-align: center;
}
main {
background-color: white;
box-sizing: border-box;
height: 100%;
margin: 0 auto;
padding: 3px;
text-align: center;
width: 1000px;
}
main > h1 {
border-bottom: 1px solid lightgray;
padding-top: 50px;
padding-bottom: 20px;
}
.form-row > label {
text-align: left;
}
main > form {
box-sizing: border-box;
margin: 20px auto;
width: 400px;
}
.form-row {
display: grid;
grid-template-columns: 250px 1fr;
margin-bottom: 3px;
}
.form-row > div {
display: flex;
}
.submit-button {
margin-top: 20px;
}
footer {
background-color: lightgray;
margin-top: 1px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<p>12.03.2020.</p>
<img src="image.jpg" />
</header>
<nav>
<ul>
<li>Početna stranica</li>
<li>O nama</li>
<li>Kontakt</li>
</ul>
</nav>
<section>
<main>
<h1>Postanite deo naše kompanije</h1>
<form>
<p class="form-row">
<label for="ime">Ime firme:</label>
<input type="text" id="ime" name="ime">
</p>
<p class="form-row">
<label for="adresa">Adresa:</label>
<input type="text" id="adresa" name="adresa">
</p>
<p class="form-row">
<label for="mejl">Mejl:</label>
<input type="email" id="mejl" name="mejl">
</p>
<div class="form-row">
<label>Način plaćanja:</label>
<div>
<p>
<input type="radio" name="nacin" id="kartica">
<label for="kartica">Kartica</label>
</p>
<p>
<input type="radio" name="nacin" id="kes">
<label for="kes">Keš</label>
</p>
</div>
</div>
<p class="form-row">
<label for="tos">Slažem se sa uslovima korišćenja:</label>
<input type="checkbox" id="tos" name="tos">
</p>
<p class="form-row">
<label for="datum">Datum:</label>
<input type="date" id="datum" name="datum">
</p>
<input type="submit" value="Prijavi se" class="submit-button">
</form>
</main>
</section>
<footer>Copyright</footer>
</body>
</html>
</syntaxhighlight>

=== 2. zadatak ===
==== Rešenje ====
===== <code>zadatak2.html</code> =====
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="zadatak2.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="#">Moj indeks</a>
<div class="justify-content-end dropdown">
<a class="btn btn-success dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Petar Petrovic
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><a class="dropdown-item" href="#">Podesavanja</a></li>
<li><a class="dropdown-item" href="#">Ocene</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Odjava</a></li>
</ul>
</div>
</div>
</nav>
<div class="container mt-15">
<div class="row text-center justify-content-md-center">
<div class="col-auto">
<h1 class="border-bottom pb-3 fw-bold">Moje ocene</h1>
<table class="table table-striped table-bordered">
<thead class="table-light">
<tr>
<th>Predmet</th>
<th>Datum polaganja</th>
<th>Ocena</th>
</tr>
</thead>
<tbody>
<tr>
<td>Veb dizajn</td>
<td>10.9.2019.</td>
<td>10</td>
</tr>
<tr>
<td>Objektno orijentisano programiranje 2</td>
<td>11.6.2019.</td>
<td>9</td>
</tr>
<tr>
<td>Arhitektura racunara</td>
<td>28.6.2019.</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col col-lg-3 col-md-6 col-12 logo nordeus">
<a href="https://nordeus.com/">
<img src="nordeus.png" alt="Nordeus logo">
</a>
</div>
<div class="col col-lg-3 col-md-6 col-12 logo nvidia">
<a href="https://nvidia.com/">
<img src="nvidia.png" alt="Nvidia logo">
</a>
</div>
<div class="col col-lg-3 col-md-6 col-12 logo microsoft">
<a href="https://microsoft.com/">
<img src="microsoft.png" alt="Microsoft logo">
</a>
</div>
<div class="col col-lg-3 col-md-6 col-12 logo facebook">
<a href="https://facebook.com/">
<img src="facebook.png" alt="facebook logo">
</a>
</div>
</div>
</div>
<footer class="container-fluid">
<p class="text-center fw-bold fst-italic">
Made by: Petar Petrovic
</p>
</div>
</body>
</html>
</syntaxhighlight>

===== <code>zadatak2.css</code> =====
<syntaxhighlight lang="css">
:root {
--bs-light-rgb: 144, 238, 144;
--bs-bg-opacity: 1;
}

.navbar-brand {
color: #5E5E5E;
font-size: 28px;
}

.container {
margin-top: 15px;
}

.logo {
box-sizing: border-box;
height: 40px;
text-align: center;
}

.nordeus {
background-color: #E7482A;
}

.nvidia {
background-color: black;
}

.microsoft {
background-color: #575352;
}

.facebook {
background-color: #3B5998;
}

.logo img {
height: 100%;
}

.logo img:hover {
border-left: 1px dotted white;
border-right: 1px dotted white;
}

footer {
background-color: lightgreen;
color: #5E5E5E;
}
</syntaxhighlight>

== Grupa 2 ==
Zadaci iz ove grupe su rađeni na vežbama.

[[Категорија:Веб дизајн]]
[[Категорија:Рокови]]