Веб дизајн/К1 2020
Пређи на навигацију
Пређи на претрагу
Prvi kolokvijum 2020. godine održan je 11. marta. Bile su dve grupe, i postavka je dostupna sa stranice predmeta.
Grupa 1
Korišćene slike mogu se preuzeti ovde.
1. zadatak
Rešenje
<!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>
2. zadatak
Rešenje
zadatak2.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/[email protected]/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/[email protected]/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.jpg" 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.jpg" 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>
zadatak2.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;
}
Grupa 2
Zadaci iz ove grupe su rađeni na vežbama.