Veb dizajn/K1 Jun 2021
Pređi na navigaciju
Pređi na pretragu
Prvi kolokvijum u junskom roku 2021. godine održan je 10. 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.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bundle.min.js"></script>
<link rel="stylesheet" href="zadatak1.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 jumbotron">
<nav class="navbar2">
<img src="./slike k1/logo.png" alt="Logo" class="logo justify-content-left">
<h2 class="naslov">Špageterija</h2>
<img src="./slike k1/logo.png" alt="Logo" class="logo justify-content-right">
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 d-flex midrow">
<img src="./slike k1/slika1.jpg" alt="Bolonjeze" id="s1">
<img src="./slike k1/slika2.jpg" alt="Karbonara" id="s2">
<img src="./slike k1/slika3.jpg" alt="Arabiata" id="s3">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 bg-warning rounded">
Najbolje špagete u gradu! Naručite i uverite se u to!
</div>
</div>
<div class="row">
<div class="class col-lg-4 col-md-4 col-sm-4"></div>
<div class="col-lg-4 col-md-4 col-sm-4">
<form action="">
<table class="table table-light table-striped">
<tr>
<td>Ime:</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td>Prezime:</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td>Testenina:</td>
<td colspan="2"><select>
<option value="Pene">Pene</option>
<option value="Fusili">Fusili</option>
<option value="Taljatele">Taljatele</option>
</select>
</td>
</tr>
<tr>
<td>Dodatak</td>
<td colspan="2">
<input type="checkbox" value="Pesto sos" name="sos">Pesto sos
<input type="checkbox" value="Napoletana sos" name="sos">Napoletana sos
<input type="checkbox" value="Bademi">Bademi
<input type="checkbox" value="Parmezan">Parmezan
</td>
</tr>
<tr>
<td colspan="3" class="text-center">
<button class="btn">Naruči</button>
</td>
</tr>
</table>
</form>
</div>
<div class="class col-lg-4 col-md-4 col-sm-4"></div>
</div>
</div>
</body>
</html>
zadatak1.css
.logo{
width: 50px;
}
.navbar2{
display: flex;
justify-content: space-between;
}
.naslov{
text-align: center;
font-size: 28px;
font-weight: bold;
}
.jumbotron{
background-color: lightgray;
padding-top: 60px;
padding-bottom: 60px;
margin-bottom: 10px;
}
#s1, #s2, #s3{
width: 30%;
}
.midrow{
justify-content: space-between;
padding-left: 0px;
padding-right: 0px;
margin-top: 20px;
}
.bg-warning{
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}
.btn{
background-color: lightsalmon;
font-weight: bold;
border: 2px solid black;
}
.btn:hover{
background-color: lightgray;
}