Веб дизајн/К1 2020
Пређи на навигацију
Пређи на претрагу
Први колоквијум 2020. године одржан је 11. марта. Биле су две групе, и поставка је доступна са странице предмета. Боотстрап библиотека се увозила преко минификованих ЈаваСцрипт и ЦСС фајлова који су били дати у материјалима.
Група 1
Коришћене слике могу се преузети овде.
1. задатак
Решење
<!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. задатак
Решење
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;
}
Група 2
Коришћене слике могу се преузети овде.
Коришћене боје: лигхтблуе хеадер/фоотер позадина, даркблуе ивице на сликама, ред ивице на сликама приликом преласка мишем преко њих. Величина текста у хеадер у је 21пx. Централни део странице је одвојен од хеадер а 25пx. Део са распоредом колоквијума и део са лого има фирме су за уређаје са великим екранима заузимају централни део у односу 9:3, а за уређаје са средњом величином екрана у односу 7:5. Све слике су линкови. Преласком миша преко слике добија се ефекат приказан на лого у Фацебоок а.
1. задатак
- Овај задатак није решен. Помозите СИ Wики тако што ћете га решити.
2. задатак
Решење
zadatak2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="zadatak2.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script srt = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bundle.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12" id="header">
<nav class="navbar navbar-expand-sm navbar-light">
<img src="image.jpg" alt="Logo" id="logo">
<ul class="navbar-nav" id="lista">
<li class="nav-item"><a href="#" class="nav-link">Pocetna</a></li>
<li class="nav-item"><a href="#" class="nav-link active">Raspored</a></li>
<li class="nav-item"><a href="#" class="nav-link">Prijava ispita</a></li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-7">
<div id="rasporedklk">
Raspored Kolokvijuma
</div>
<table class="table text-center table-dark table-striped table-bordered">
<th>Predmet</th>
<th>Datum polaganja</th>
<th>Sala</th>
<tr>
<td>Veb dizajn</td>
<td>12.3.2020.</td>
<td>70</td>
</tr>
<tr>
<td>Objektno orijentisano programiranje 2</td>
<td>13.3.2020.</td>
<td>70</td>
</tr>
<tr>
<td>Arhitektura racunara</td>
<td>15.3.2020.</td>
<td>65</td>
</tr>
</table>
</div>
<div class="col-lg-3 col-md-5 text-center" id="slike">
<div class="okoSlike">
<a href="#"><img src="nordeus.jpg" alt="Nordeus" class="firme"></a>
</div>
<div class="okoSlike">
<a href="#"><img src="nvidia.jpg" alt="Nvidia" class="firme"></a>
</div>
<div class="okoSlike">
<a href="#"><img src="microsoft.png" alt="Microsoft" class="firme"></a>
</div>
<div class="okoSlike">
<a href="#"><img src="facebook.png" alt="Facebook" class="firme"></a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center" id="footer">
Made by: Pera Peric
</div>
</div>
</div>
</body>
</html>
zadatak2.css
#header{
background-color: lightblue;
text-align: center;
font-size: 21px;
}
#logo{
width: 5%;
height: 30px;
}
#lista{
font-weight: bold;
}
#rasporedklk{
margin-top: 25px;
margin-bottom: 25px;
text-align: center;
font-size: 21px;
font-weight: bold;
}
#slike{
background-color: blue;
}
.okoSlike{
padding: 5px;
}
.firme{
height: 25%;
border-style: dashed;
border-color: darkblue;
}
.firme:hover{
border-style: dashed;
border-width: 5px;
border-color: red;
}
#footer{
background-color: lightblue;
font-weight: bold;
}