Веб дизајн/К1 Јун 2020
Пређи на навигацију
Пређи на претрагу
Prvi kolokvijum u junskom roku 2020. godine održan je 19. juna. Postavka je dostupna sa stranice predmeta. Bootstrap biblioteka se uvozila preko minifikovanih JavaScript i CSS fajlova koji su bili dati u materijalima.
Rešenje
zadatak1_1.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="zadatak1.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>
<header class="container-fluid">
<div class="row pt-5">
<div class="col-lg-2 col-4">
<img src="slika1.png" alt="Avion">
</div>
<div class="col-lg-9 col-6 p-4">
<h1 class="fw-bold">Aerodrom Nikola Tesla</h1>
</div>
<div class="col-lg-1 col-2">
<img src="slika2.png" alt="Kalendar">
</div>
</div>
</header>
<nav class="container-fluid">
<div class="row">
<div class="btn btn-success col-6 col-lg-3 mt-3">Rezerviši let</div>
<div class="btn btn-danger col-6 col-lg-3 mt-3">Jeftine karte</div>
<div class="btn btn-warning col-6 col-lg-3 mt-3">Nove destinacije</div>
<div class="btn btn-info col-6 col-lg-3 mt-3">Kontakt</div>
</div>
</nav>
<form class="container" action="zadatak1_2.html" method="POST">
<div class="row">
<div class="col mt-2">
<div class="progress">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
</div>
</div>
<div class="row">
<div class="col text-center mt-5">
<h2 class="d-inline text-decoration-underline fw-bold">Popunite potrebne podatke</h2>
</div>
</div>
<div class="row p-4">
<label for="ime" class="col-6 col-form-label">Ime:</label>
<div class="col-6">
<input type="text" name="ime" id="ime">
</div>
</div>
<div class="row p-4">
<label for="prezime" class="col-6 col-form-label">Prezime:</label>
<div class="col-6">
<input type="text" name="prezime" id="prezime">
</div>
</div>
<div class="row p-4">
<label for="nacin" class="col-6 col-form-label">Način plaćanja:</label>
<div class="col-6">
<select name="ime" id="ime">
<option>Keš</option>
<option>Kartica</option>
</select>
</div>
</div>
<div class="row p-4">
<label for="tos" class="col-6 col-form-label">Prihvatam uslove korišćenja:</label>
<div class="col-6">
<input type="checkbox" name="tos" id="tos">
</div>
</div>
<div class="row p-4">
<div class="col text-center">
<input type="submit" class="btn btn-success" value="Sačuvaj">
</div>
</div>
</div>
</body>
</html>
zadatak1_2.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="zadatak1.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>
<header class="container-fluid">
<div class="row pt-5">
<div class="col-lg-2 col-4">
<img src="slika1.png" alt="Avion">
</div>
<div class="col-lg-9 col-6 p-4">
<h1 class="fw-bold">Aerodrom Nikola Tesla</h1>
</div>
<div class="col-lg-1 col-2">
<img src="slika2.png" alt="Kalendar">
</div>
</div>
</header>
<nav class="container-fluid mt-5">
<div class="row">
<div class="btn btn-success col-3">Rezerviši let</div>
<div class="btn btn-danger col-3">Jeftine karte</div>
<div class="btn btn-warning col-3">Nove destinacije</div>
<div class="btn btn-info col-3">Kontakt</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col mt-2">
<div class="progress">
<div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
</div>
</div>
<div class="row">
<div class="col text-center mt-5">
<h2 class="d-inline text-decoration-underline fw-bold">Uspešno ste uneli podatke! Hvala.</h2>
</div>
</div>
</div>
</body>
</html>
zadatak1.css
header {
background-color: lightgray;
}
header img {
box-sizing: border-box;
display: block;
height: auto;
margin: 25px;
width: calc(100% - 50px);
}
nav .btn {
padding: 20px;
}
.progress {
width: 100%;
}
h2 {
color: orange;
}
form h2 {
color: green;
}
.row.p-4:nth-child(odd) {
background-color: lightgray;
}