Веб дизајн/К1 2022
Пређи на навигацију
Пређи на претрагу
Prvi kolokvijum 2022. godine održan je 28. marta. Postavka je dostupna sa stranice predmeta. Bootstrap biblioteka se uvozila preko minifikovanih JavaScript i CSS fajlova koji su bili dati u materijalima.
1. zadatak
Rešenje
<!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/bootstrap.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-9 col-sm-12 text-left" id="header">
Dobrodošli na portal!
</div>
<div class="col-lg-3 col-sm-12 d-flex justify-content-end" id="nav">
<button type="button" class="btn btn-info">Početna Profil Poruke <span class="badge bg-danger">26</span></button>
</div>
</div>
<div class="row" id="main">
<div class="col-lg-3 col-sm-12" id="boja">
</div>
<div class="col-lg-6 col-sm-12">
<div class="alert alert-info">
Za više informacija o dnevnoj tabeli, kliknite <a href="#" id="link1" class="alert-link">ovde.</a>
</div>
<ul class="pagination justify-content-center">
<li class="page-item"><a href="#" class="page-link">Prethodna</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">6</a></li>
<li class="page-item"><a href="#" class="page-link active">7</a></li>
<li class="page-item"><a href="#" class="page-link text-muted">Sledeća</a></li>
</ul>
<table class="table table-bordered table-info text-center">
<th>Korisničko ime</th>
<th>Nivo</th>
<th>Više informacija</th>
<tr>
<td>ranger99</td>
<td>32</td>
<td><a href="#">više</a></td>
</tr>
<tr>
<td>c0c0s</td>
<td>31</td>
<td><a href="#">više</a></td>
</tr>
<tr>
<td>hello_world</td>
<td>29</td>
<td><a href="#">više</a></td>
</tr>
</table>
</div>
<div class="col-lg-3 col-sm-12" id="boja">
</div>
</div>
<div class="row" id="footer">
<hr style="color: aqua;">
<div class="text-center" id="donate">
Donirajte:
<span class="badge bg-dark">5$</span><input type="radio" name="donacija">
<span class="badge bg-dark">10$</span><input type="radio" name="donacija">
<span class="badge bg-dark">25$</span><input type="radio" name="donacija">
<button type="button" class="btn btn-info">Doniraj</button>
</div>
<hr style="color: aqua; height: 5px;">
</div>
</div>
</body>
</html>
zadatak1.css
#header{
font-size: 28px;
font-weight: bold;
}
#link1{
font-weight: bold;
text-decoration: underline;
}
#boja{
background-color: lightblue;
}
#main{
padding-top: 20px;
}
#footer{
padding-top: 15px;
}
#donate{
padding-bottom: 15px;
}
hr{
height: 10px;
margin-bottom: 5px;
}