Kolokvijumi

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAJT 1</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-
DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="CSS\style.css">
</head>
<body>
<div id="header">
<div id="logo">
<a href="index.html"> <h1>LuxCars</h1></a>
</div>
<div id="Navigacija">
<ul>
<li><a href="#">Brza Pretraga</a></li>
<li><a href="#">Delovi i Oprema</a></li>
<li><a href="#">Prodaja</a></li>
<li><a href="#">Auto Osiguranje</a></li>
<li><a href="#">Agencija</a></li>
<li><a href="#">Usluge i Krediti</a></li>
<li><a href="#">Ponuda Vozila</a></li>
</ul>
</div>
</div>
<div id="PozadinskaSlika">
</div>
<div class="wrapp">
<div class="car">
<div class="photo">
<img src="img/auto-1.jpg" alt="Auto-1"></div>
<h2>Mercedes Benz G 400</h2>
<p><i class="fa-solid fa-map-location-dot"></i> Senjak </p>
<div id="desno-tekst">
<p>150000€</p>
</div>
<a href="#">Saznaj Više</a>
</div>
<div class="car">
<div class="photo">
<img src="img/auto-2.jpg" alt="Auto-2"> </div>
<p>150000€</p>
</div>
</div>
<div class="car">
<div class="photo">
<p>150000€</p>
</div>
</div>
<div class="car">
<div class="photo">
<p>150000€</p>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
#header{
width: 100%;
background-color: rgba(102, 100, 100, 0.9);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
}
#logo{
width:20%;
padding-left: 20%;
}
#logo a{
text-decoration: none;
color:white;
}
#Navigacija{
width: 50%;
}
#Navigacija ul{
list-style-type: none;
}
#Navigacija ul li{
display: inline-block;
}
#Navigacija ul li a{
color: white;
margin: 0px 7px;
}
#PozadinskaSlika{
width: 100%;
height: 600px;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../img/cover.jpg");
background-position: top;
background-size: cover;
}
.wrapp{
width: 80%;
margin: 30px auto;
display: flex;
}
.car{
width: 20%;
}
.car .photo{
width: 100%;
}
.car .photo img{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.car .p{
text-align: left;
}
#desno-tekst{
text-align: right;
}
.car h2{
padding:10px 0px;
}
.car{
border: 1px solid rgb(102,100, 100);
border-radius: 10px;
}
.car h2, p{
padding: 5px 10px;
}
.car a{
padding: 10px 15px;
background-color: rgba(102,100, 100, 0.9);
color: white;
margin-left: 100px;
margin-bottom: 15px;
margin-top: 0px;
}
<!DOCTYPE html>
<head>
<title>Kol3_19/20</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Mrs+Sheppards|Roboto|Yellowtail&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto|Yellowtail&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.png">
</head>
<body>
<header class="centar">
<div id="logo"><a href="index.html"><h1>folio</h1></a></div>
<nav>
<ul>
<li class="aktivni"><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="cover">
<div id="naslov"> <h2>I'M FREELANCER.</h2> </div>
<p> Designer, Developeur, Photographer</p>
<div id="soc">
<ul>
<li><a href="#"><i class='fab fa-facebook-f'></i></a></li>
<li><a href="#"><i class='fab fa-twitter'></i></a></li>
<li><a href="#"><i class='fab fa-instagram'></i></a></li>
<li><a href="#"><i class='fab fa-google-plus-g'></i></a></li>
<li><a href="#"><i class='fab fa-tumblr'></i></a></li>
<li><a href="#"><i class='fab fa-linkedin-in'></i></a></li>
</ul>
</div>
</div>
<section>
<div class="centar">
<div id="slike">
<div id="slika"><img src="img/lice.jpeg" alt="lice" /></div>
</div>
<div id="tekst">
<h3>ovo je neki duzi tekst i to je neki tekst o dizajneru koji se nalazi u vise redova. ovo je neki duzi tekst i to je neki tekst o
dizajneru koji se nalazi u vise redova. </h3>
<p>Ovo je takodje neki duzi tekst i to je neki tekst o dizajneru koji se nalazi u vise redova. ovo je neki duzi tekst i to je neki
tekst o dizajneru koji se nalazi u vise redova. ovo je neki duzi tekst i to je neki tekst o dizajneru koji se nalazi u vise redova</p>
</div>
</div>
</section>
<section>
<article>
<i class="fas fa-heart"></i>
<h4>Naslov </h4>
<p>Ovo je takodje neki duzi tekst i to je neki tekst koji se nalazi u vise redova. </p>
</article>
<article>
<h4>Naslov </h4>
</article>
<article>
<h4>Naslov </h4>
</article>
<article>
<h4>Naslov </h4>
</article>
</div>
</section>
<div id="portfolio">
<h5> My portfolio</h5>
<div id="strelica"><i class="fas fa-arrow-up"></i></div>
</div>
<footer>
<p>Copyright © 2020. All rights reserved</p>
</footer>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</body>
*{
margin:0px;
padding:0px;
}
.centar{
width:75%;
margin:0px auto;
padding:10px 5px;
display:flex;
justify-content:space-between;
}
#logo{
font-family: 'Mrs Sheppards', cursive;
}
#logo a{
color:#008080;
}
a{
text-decoration:none;
}
ul{
list-style:none;
display:flex;
padding-top:10px;
/* justify-content:space-around; */
}
nav ul li a{
/* display:block; */
padding:0px 20px;
font-family: 'Roboto', sans-serif;
color:#777;
}
.aktivni a{
color:#008080;
}
#cover{
width:100%;
padding-top:180px;
/* padding-left:12%; */
padding-bottom:180px;
background-image:url("../img/coverlice.jpeg");
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
#naslov{
color:#fff;
font-size:24px;
width:375px;
border-right:7px solid #fff;
margin-bottom:20px;
margin-left:11%;
letter-spacing:6px;
}
#cover p{
font-size:15px;
color:#fff;
letter-spacing:5px;
margin-left:11%;
}
#cover ul li a{
display:block;
padding:10px;
color:#fff;
margin-top:30px;
font-size:11px;
}
#cover ul{
margin-left:11%;
}
section{
width:100%;
background-image: linear-gradient(rgba(200,200,200,0.6), rgba(200,200,200,0));
padding:70px 0px;
}
#slike{
width:30%;
height:400px;
border: 20px solid #008080;
position:relative;
/* top:70px; */
}
#slika{
width:100%;
position:absolute;
top:-50px;
left:60px;
}
#slika img{
width:100%;
}
#tekst{
width:50%;
color:#777;
padding-top:60px;
}
#tekst h3{
font-size:22px;
margin-bottom:50px;
}
article{
color:#777;
width:20%;
}
article i{
font-size:20px;
margin-bottom:15px;
}
article h4{
text-transform:uppercase;
margin-bottom:15px;
}
h5{
font-size:24px;
color:#777;
text-align:center;
}
#portfolio{
margin:50px auto;
width:75%;
border-bottom:1px solid #777;
z-index:-10;
position:relative;
}
#strelica{
position:absolute;
z-index:10;
left:47%;
bottom:-23px;
text-align:center;
padding-top: 5px;
border-radius: 50%;
background-color: #008080;
width: 55px;
height: 50px;
}
#strelica i{
font-size:40px;
color:#fff;
}
span{
display:block;
width:80%;
margin: 0px auto;
height: 1px;
background-color:#000;
}
footer{
color:#777;
text-align:center;
}
<html>
<head>
<title>GARAGE - Sajt</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="zaglavljeGore">
<div class="okvir">
<div class="informacija" id="prvaLista">
<ul>
<li>
<a href="http://www.facebook.com">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="http://www.twitter.com">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.google.com">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="http://www.pinterest.com">
<i class="fa fa-pinterest"></i>
</a>
</li>
</ul>
</div>
<div class="informacija">
<p>Give us a call : +66666666</p>
</div>
<div class="informacija" id="poslednjaLista">
<ul>
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Register</a>
</li>
</ul>
</div>
<div class="cistac"></div>
</div>
</div>
<div id="zaglavljeDole">
<div class="okvir">
<div id="logo">
<a href="index.html">
<img src="img/logo1.png" alt="Logo"/>
</a>
</div>
<div id="meni">
<ul>
<li>
Home
</a>
</li>
<li>
Categories <i class="fa fa-arrow-down"></i>
</a>
<ul>
<li>Ugnjezdeni link</li>
</ul>
</li>
<li>
DEALERS <i class="fa fa-arrow-down"></i>
</a>
<ul>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
<li id="postNewCar">
<a href="#">Post new car</a>
</li>
</ul>
</div>
</div>
</div>
<div id="slajder">
<div id="slajderTekst">
<p>Neki tekst </p>
</div>
<div id="donjiBlok">
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Oswald');
*{
margin: 0px;
padding: 0px;
}
body {
font-family: 'Oswald', sans-serif;
}
.cistac {
clear: both;
}
ul {
}
a{
}
#zaglavljeGore {
width: 100%;
/* height: 50px; */
padding: 10px 0px;
}
.okvir {
width: 1024px;
margin: 0px auto;
}
.informacija {
width: 33%;
float: left;
}
#zaglavljeGore a, #zaglavljeGore p {
color: #fff;
}
#zaglavljeGore ul li {
}
#prvaLista ul li {
margin-left: 10px;
}
/* #zaglavljeGore .okvir .informacija {
margin-top: 10px;
} */
.informacija p {
text-align: center;
text-transform: uppercase;
}
#poslednjaLista ul {
text-align: right;
}
#poslednjaLista ul li:first-child {
border-right: 3px solid #fff;
}
#poslednjaLista ul li {
padding: 0px 10px;
}
#zaglavljeGore a:hover {
color: orange;
}
#zaglavljeDole {
width: 100%;
height: 100px;
border: 5px solid #000;
}
/* SLIKA GARAGE POZICIONIRANJE */
#zaglavljeDole .okvir {
position: relative;
}
#logo {
position: absolute;
top: 10px;
z-index: 2;
}
#meni {
width: 700px;
float: right;
}
#meni ul {
margin-top: 35px;
}
#meni ul li {
margin: 0px 10px;
}
/* Ugnjezdena lista */
#meni ul li ul {
display: none;
}
#meni ul li a {
padding-bottom: 10px;
color: #000;
}
#meni ul li a:hover {
border-bottom: 4px solid orange;
}
#postNewCar a {
padding: 10px;
border: 4px solid orange;
}
#postNewCar a:hover {
background-color: orange;
color: #fff;
}
/* SLAJDER */
#slajder {
width: 100%;
background-image: url('../img/porche.jpg');
height: 670px;
background-repeat: no-repeat;
background-position: 50% 50%; /* po slici*/
position: relative;
}
#slajderTekst {
position: absolute;
top: 30%;
left: 30%;
font-size: 40px;
}
#donjiBlok {
position: absolute;
bottom: 0px;
width: 100%;
height: 200px;
background: rgba(255,255,255, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<title>Sajt - Kolaci</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css2?family=Itim&family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="prvi" class="centar">
<div id="mail"><p>Mail adresa</p></div>
<div id="logo"><a href="index.html">Logo</a></div>
<div id="tel"><p>Broj telefona</p></div>
</div>
<div id="menu" >
<ul>
<li id="narandzasto"><a href="#">Naslovna</a></li>
<li><a href="#">O nama</a></li>
<li><a href="#">Cenovnik</a></li>
<li><a href="#">Prepruke</a></li>
<li><a href="#">Galerija</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="slajder">
<div id="tamni">
<div id="naslov" class="centar">
<p id="pisana">Super hrskavo</p>
<h1>Kolaci</h1>
<p id="ispodNaslova">Slatkiiiiiii!</p>
<ul>
<li id="dugme1"><a href="#">Procitaj vise </a></li>
<li id="dugme2"><a href="#"><i class="play material-icons">play_arrow</i> </a> Play
video</li>
</ul>
</div>
</div>
</div>
<span>About us</span>
<h2>Welcome to cacezone</h2>
<div class="centar" id="slika-tekst">
<div id="slika">
<img src="img/torta.jpg" alt="torta" />
</div>
<div id="tekst">
<h3>Manji naslov koji se proteze u 2 reda. Manji naslov koji se proteze u 2 reda. Manji naslov koji se
proteze u 2 reda.</h3>
<p>Prateci tekst u tri reda. Prateci tekst u tri reda. Prateci tekst u tri reda.Prateci tekst u tri reda.Prateci
tekst u tri reda. Prateci tekst u tri reda. Prateci tekst u tri reda. Prateci tekst u tri reda. Prateci tekst u tri reda. Prateci tekst u tri
reda. </p>
<div id="dva-bloka">
<div class="blok">
<div id="i"><i class="ikona material-icons">favorite</i></div>
<h4>100% HELTHY</h4>
<p>Prateci tekst u tri reda. Prateci tekst u tri reda. Prateci tekst u tri reda. Prateci tekst u
tri reda. Prateci tekst u tri reda.</p>
</div>
<div class="blok">
<div id="i"><i class="ikona material-icons">favorite</i></div>
<h4>100% HELTHY</h4>
<p>Prateci tekst u tri reda. Prateci tekst u tri reda. Prateci tekst u tri reda. Prateci tekst
u tri reda. Prateci tekst u tri reda.</p>
</div>
</div>
</div>
</div>
<footer></footer>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body{
/* background-color: #c2c2c2; */
}
a{
}
.cistac{
clear: both;
}
.centar{
width: 85%;
margin: 0px auto;
}
#mail{
width: 35%;
padding: 20px;
/* background-color: #005588; */
float: left;
}
#logo{
width: 20%;
padding: 20px;
background-color: #ff9900;
float: left;
text-align: center;
/* margin-left: 5%; */
}
#logo a{
padding: 10px 30px;
border: 2px solid #fff;
/* text-decoration: none; */
font-size: 20px;
}
#tel{
width: 25%;
padding: 20px;
/* background-color: #550088; */
float: right;
text-align: right;
}
#menu{
text-align: center;
}
#menu ul{
padding: 20px 0px;
}
#menu ul li{
display: inline;
margin-right: 20px;
}
#menu ul li a{
/* text-decoration: none; */
color: #fff;
}
#menu #narandzasto a{
color: #ff9900;
}
#slajder{
background-image: url("../img/slajder.jpg");
background-repeat: no-repeat;
}
#tamni{
background-color: rgba(0,0,0,0.4);
padding: 200px 50px;
color: #fff;
}
#tamni h1{
font-size: 80px;
margin: 20px 0px;
}
#pisana{
font-family: 'Pacifico', cursive;
font-size: 40px;
color: #ff9900;
}
#ispodNaslova{
font-size: 40px;
font-weight: bold;
}
#naslov ul{
margin-top: 30px;
display:flex;
}
#naslov ul li{
margin-right: 40px;
}
#dugme1{
padding: 15px;
}
#dugme1 a{
color: #fff;
padding: 5px 40px;
/* margin: 10px; */
}
li#dugme2{
text-align:center;
}
#dugme2 a{
/* margin-top: 5px; */
margin-right: 10px;
}
#dugme2 i{
color: #ff9900;
padding: 10px 10px 10px 10px;
border-radius: 50%;
background-color: #fff;
}
span{
font-family: 'Pacifico', cursive;
color: #ff9900;
display: block;
text-align: center;
margin-top:30px;
font-weight: bolder;
}
h2{
margin-top: 10px;
text-align: center;
}
#slika{
width: 40%;
float: left;
}
#slika img {
width: 100%;
/* height: inherit; */
}
#tekst{
width: 50%;
float: right;
}
#dva-bloka{
display: flex;
}
h3{
}
#i{
padding:4px;
width: 40px;
margin: 40px 0px 20px 0px;
}
.ikona{
padding: 8px;
color: #fff;
font-size: 20px;
}
.blok h4{
}
footer{
margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sajt treći kolokvijum</title>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header class="centriranje">
<div id="logo"><a href="index.html">Saša Stanković, 12/22, BPI</a></div>
<div id="meni">
<ul>
<li><a href="index.html">Početna</a></li>
<li><a href="courses.html">Kursevi</a></li>
<li><a href="news.html">Novosti</a></li>
<li><a href="about.html">O nama</a></li>
<li><a href="gallery.html">Galerija</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
</header>
<div id="slajder">
<div class="centriranje">
<h1>Dobrodošli na</h1>
<p>Neki običan tekst Neki običan tekst Neki običan tekst</p>
</div>
</div>
<div id="kontejner">
<div class="blok">
<img src="img/sl1.jpg" alt="grad" />
<div class="abs">
<h2>Program za nove studente</h2>
<p class="drugi">Neki običan pasus Neki običan pasus</p>
</div>
</div>
<div class="blok">
<img src="img/sl1.jpg" alt="grad" />
<div class="abs">
<h2>Program za nove studente</h2>
<p class="drugi">Neki običan pasus Neki običan pasus</p>
</div>
</div>
</div>
</div>
<footer>
<p id="zeleni">Želimo da znamo</p>
<h3>Šta naši korisnici kažu</h3>
<span id="crta"></span>
</footer>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
#slajder{
background-image: url("img/pozadina.jpg");
/* background-position: right top; */
padding: 200px 0px;
}
#slajder p{
color: #fff;
font-size: 20px;
text-align: center;
margin-top: 10px;
}
.centriranje{
width: 80%;
margin: 0px auto;
}
header{
display: flex;
/* background-color: #f1f1f1; */
color: #555;
padding: 10px;
font-size: 20px;
}
#slogo{
text-align: right;
}
#meni{
padding-top: 20px;
}
#meni ul{
}
#meni ul li{
display: inline;
margin-left: 20px;
}
a{
color: #555;
}
h1{
text-align: center;
font-family: Arial;
color: #fff;
padding-left: 30px;
}
#logo{
/* font-family: 'Permanent Marker', cursive; */
font-family: Arial;
/* font-size: 20px; */
width: auto;
}
#kontejner{
/* margin-top: 100px; */
width: 80%;
display: flex;
padding: 50px 0px;
}
.blok{
/* margin-bottom: 60px; */
position: relative;
width: 40%;
}
.blok img{
width: 100%;
}
.blok h2{
font-size: 20px;
}
.blok p{
margin-top: 20px;
}
.drugi{
font-weight: bold;
}
.abs{
position: absolute;
left: 70%;
top: 10%;
background-color: #fff;
box-shadow: 2px 2px 2px #555;
width: 70%;
padding: 10px;
}
footer{
text-align: center;
padding: 40px;
}
footer p{
color: #009922;
font-size: 20px;
}
footer h3{
color: #fff;
}
#crta{
width: 50px;
height: 4px;
display: block;
margin: 10px auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Organizacija</title>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-
lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="cover">
<div id="navigacija">
<ul>
<li class="aktivanLink"><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="coverTekst">
<h1>Zipper</h1>
<p>best destination to explore...</p>
</div>
</div>
<div id="testimonials">
<h2>Testimonials</h2>
<span id="naslov"></span>
<div class="blok">
<div class="blokSadrzaj">
<div class="blokSlika">
<i class='fas fa-tree'></i>
</div>
<div class="blokTekst">
<p>Ut vulputate eros non ante lobortis viverra. Vestibulum ut est lorem.
Sed nec blandit lorem, eget iaculis quam. Mauris quis odio id sapien scelerisque mollis.</p>
</div>
</div>
</div>
<div class="blok margine">
</div>
</div>
</div>
</div>
<div class="blok">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="services">
<div class="sadrzaj levo">
<div class="sadrzajTekst">
<h2>Our services</h2>
<p>Aliquam sollicitudin mi sollicitudin justo viverra, nec posuere lorem fringilla.
Morbi quam arcu, dignissim ac rutrum vel, hendrerit feugiat tortor. Ut vulputate eros non ante lobortis viverra.</p>
<p>Vestibulum ut est lorem. Sed nec blandit lorem, eget iaculis quam. Mauris
quis odio id sapien scelerisque mollis. Maecenas aliquet luctus erat sit amet aliquet. Vestibulum mattis porta tristique.
Vivamus suscipit bibendum lorem, at efficitur enim hendrerit nec.</p>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="sadrzaj">
<div class="sadrzajTekst">
<h2>Contact</h2>
<form method="post" action="obrada.php">
<input type="text" placeholder="Your name" id="ime" name="ime"/>
<input type="email" placeholder="Your email" id="email"

name="email"/>
<textarea id="poruka" name="poruka" placeholder="Message"
></textarea>
<input type="submit" value="Submit"/>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
*{
margin:0px;
padding:0px;
}
body{
font-family:Arial;
color:#fff;
}
#cover{
width:100%;
height:700px;
background-image:url("../img/cover.jpg");
background-repeat:no-repeat;
}
#navigacija{
width:100%;
text-align:center;
background:rgba(10, 50, 155, 0.5);
padding:20px 0px;
position:fixed;
top:0px;
}
ul{
list-style-type:none;
}
ul li{
display:inline;
margin:0px 40px;
}
#navigacija ul li a{
color:#fff;
}
#navigacija ul .aktivanLink a, #navigacija ul li a:hover{
color:#fff1ab;
}
#coverTekst{
text-align:center;
padding-top:100px;
/* margin-top:100px; */
letter-spacing:2px;
text-shadow:4px 4px 5px #000;
}
#coverTekst h1{
font-size:40px;
margin-bottom:30px;
}
#coverTekst p{
font-size:20px;
}
#testimonials, #about,#services,#contact{
width:100%;
height:500px;
}
#testimonials{
background:url("../img/testimonials.jpg") no-repeat;
background-position:bottom left;
}
#testimonials h2{
text-align:center;
padding:50px 0px 0px;
}
#naslov{
display:block;
width:5%;
height:4px;
background-color:#fff;
margin:25px auto;
}
.blok{
width:386px;
float:left;
}
.cistac{
clear:both;
}
.margine{
margin:0px 20px;
}
.blokSadrzaj{
width:300px;
margin:0px auto;
padding:40px 0px;
}
.blokSlika{
text-align:center;
}
.blokSlika i{
font-size:50px;
}
.blokTekst p{
line-height:30px;
}
#about{
background:url("../img/about.jpg") no-repeat;
}
.centar{
width:1200px;
margin:0px auto;
}
.sadrzaj{
width:450px;
height:500px;
margin-right:0px;
margin-left:auto;
}
.sadrzajTekst{
width:380px;
margin:0px auto;
padding-top:50px;
}
.sadrzajTekst h2{
color:#fff1ab;
margin-bottom:30px;
}
.sadrzajTekst p{
margin-bottom:40px;
line-height:30px;
}
#services{
background:url("../img/services.jpg") no-repeat;
}
.levo{
margin-left:0px;
margin-right:auto;
}
#contact{
background:url("../img/contact.jpg") no-repeat;
}
input, textarea{
display:block;
width:100%;
margin-bottom:20px;
border:none;
}
input[type="submit"]{
width:20%;
color:#fff;
padding:10px 20px;
}
input[type="text"], input[type="email"], textarea{
padding:10px 0px 10px 10px;
}
textarea{
min-height:180px;
}
::placeholder{
color:#fff;
font-family:Arial;
}
input:focus, textarea:focus{
border:1px solid #f00;
border-radius:3px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sajt prvi</title>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="slajder">
<header>
<div id="logo"><a href="index.html">Logo</a></div>
<div id="meni">
<ul>
<li><a href="index.html">Naslovna</a></li>
<li><a href="drugastrana.html">Druga strana</a></li>
<li><a href="trecastrana.html">Treca strana</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
</header>
<h1>STIL</h1>
</div>
</div>
<div class="blokovi centriranje">
<h2>Naslov drugog reda</h2>
<p id="prviPasus">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is
simply dummy text of the printing and typesett</p>
<div id="kontejner">
<div class="kolona">
<div class="blok">
<i class="fa fa-address-book velicina"></i>
<h3>Naslov 1</h3>
<p>Pasuss 1 Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</p>
</div>
<div class="blok">
<i class="fa fa-android velicina"></i>
<h3>Naslov 2</h3>
industry.</p>
</div>
</div>
<div class="kolona podigni">
<div class="blok">
<i class="fa fa-anchor velicina"></i>
<h3>Naslov 3</h3>
industry.</p>
</div>
<div class="blok">
<i class="fa fa-adn velicina"></i>
<h3>Naslov 4</h3>
industry.</p>
</div>
</div>
<div class="kolona">
<div class="blok">
<h3>Naslov 5</h3>
industry.</p>
</div>
<div class="blok">
<h3>Naslov 6</h3>
industry.</p>
</div>
</div>
</div>
</div>
<div class="gradijent">
<div class="centriranje tekst-slika">
<div id="tekst">
<h2>Naslov za blok sa tekstom</h2>
<p>It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.</p>
<a href="kontakt.html" class="dugme">Kontakt</a>
</div>
<div id="slika">
<img src="img/suma.jpg" alt="Slika sume" />
</div>
</div>
</div>

</body>
</html>
*{
margin: 0px;
padding: 0px;
}
@font-face{
font-family: Ista-sirina;
src: url(../font/Space_Mono/SpaceMono-Regular.ttf);
}
#slajder{
background-image: url("../img/pozadina.jpg");
/* background-position: right top; */
padding: 40px 0px 100px;
}
.centriranje{
width: 80%;
margin: 0px auto;
}
header{
display: flex;
/* background-color: #f1f1f1; */
/* color: #ffffff; */
padding: 30px;
font-size: 20px;
}
#meni{
padding-top: 30px;
}
#meni ul{
}
#meni ul li{
display: inline;
margin-left: 20px;
}
a{
color: #ffffff;
}
h1{
width: 20%;
margin: 0px auto;
font-family: Ista-sirina;
color: #fff;
font-size: 120px;
word-wrap: break-word;
letter-spacing: 30px;
padding-left: 30px;
}
#logo{
font-family: 'Permanent Marker', cursive;
font-size: 50px;
}
.blokovi{
padding-top: 30px;
text-align: center;
}
.blokovi h2{
}
#prviPasus {
width: 40%;
margin: 0px auto;
}
.velicina{
font-size: 30px;
}
#kontejner{
margin: 70px auto;
/* background-color: #ffff00; */
/* text-align: center; */
width: 70%;
}
.kolona{
float: left;
width: 30%;
}
.blok{
padding: 20px;
box-shadow: 10px 10px 15px 12px rgba(0,0,0,0.15)
}
.blok h3{
}
.blok i{
}
.podigni{
margin-top: -20px;
margin-right: 5%;
margin-left: 5%;
}
.cistac{
clear: both;
}
.gradijent{
background-image: linear-gradient(to right, #202060 , #e600e6);
padding: 20px 0px;
}
#tekst{
width: 45%;
margin-right:5%;
float: left;
}
#tekst p{
margin-bottom:30px;
color: #ffffff;
}
#tekst h2{
color: #fff;
}
#slika{
width: 35%;
float: right;
}
img{
width: 90%;
}
.tekst-slika{
width: 60%;
margin: 0px auto;
}
.dugme{
background-color: rgba(0,0,0,0);
padding:10px;
border: 1px solid #ffffff;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Laboratorijski kolokvijum</title>
<link href="stil.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="podaci">
<h2>Ime i prezime, broj indeksa</h2>
</div>
<div id="omot">
<div id="zaglavlje">
</div>
<div id="meni">
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</div>
<div id="sadrzaj">
<div id="blok">
<img src="slike/sn.jpg"/>
<p>A social networking service is an online platform that is used by people to
build social networks or social relations with other people who share similar personal or career interests, activities,
backgrounds or real-life connections. The variety of stand-alone and built-in social networking services currently available in
the online space introduces challenges of definition; however, there are some common features:(1) social networking services
are Web 2.0 internet-based applications, (2) user-generated content (UGC) is the lifeblood of SNS organisms,(3) users create
service-specific profiles for the site or app that are designed and maintained by the SNS organization,and (4) social networking
services facilitate the development of online social networks by connecting a user's profile with those of other individuals
and/or groups.</p>
</div>
<div class="blok1">
<div class="bl">
<table border="1">
<form>
<tr>
<th colspan="2"><h3>Upitnik</h3></td>
</tr>
<tr>
<td>Ime i prezime:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Pol:</td>
<td><input type="radio" name="pol"/>Muški
<input type="radio" name="pol"/>Ženski
</td>
</tr>
<tr>
<td rowspan="2">Društvene mreže:</td>
<td><input type="checkbox" name="pol"/>Facebook
<input type="checkbox" name="pol"/>Twitter
</td>
</tr>
<tr>
<td><input type="checkbox" name="pol"/>Instagram
<input type="checkbox" name="pol"/>Snapchat
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Upiši">
<input type="reset" value="Odustani">
</td>
</tr>
</form>
</table>
</div>
<div class="bl">
<h3>Ime i prezime</h3>
<img class="sl"src="slike/slika1.jpg"/>
</div>
<div class="bl">
<ul>
</ul>
</div>
</div>
</div>
<div id="futer">
<p>Visoka ICT škola</p>
</div>
</div>
</body>
</html>
*
{
margin:0px;
padding:0px;
}
ul
{
list-style:none;
}
a
{
}
body
{
color:#374941;
}
#omot
{
width:1000px;
margin:10px auto;
border-radius:5px;
}
#zaglavlje
{
width:1000px;
height:200px;
background:url(slike/header2.jpg);
}
#zaglavlje h2
{
text-align:center;
font-size:30px;
}
#meni
{
width:1000px;
background:#E28655;
height:40px;
text-align:center;
}
#meni ul
{
margin:0px auto;
padding-top:5px;
}
#meni li
{
display:inline;
border-right:2px solid #090909;
padding-right:10px;
padding-left:10px;
}
#meni ul li a
{
color:#090909;
font-size:24px;
}
img
{
width:100px;
height:100px;
}
#sadrzaj
{
width:1000px;
background:#E28655;
height:600px;
padding-top:30px;
}
.cistac{clear:both;}
#podaci
{
position:fixed;
width:100%;
height:50px;
background:#090909;
text-align:center;
}
#podaci h2
{
color:white;
padding-top:10px;
}
#blok
{
width:700px;
height:auto;
border:2px solid #374941;
border-radius:7px;
padding:10px;
margin:0px auto;
margin-bottom:30px;
}
#blok img
{
float:left;
margin-right:10px;
}
#blok p
{
text-align:justify;
}
.bl
{
width:250px;
height:auto;
float:left;
border-radius:7px;
margin-right:5px;
margin-left:15px;
padding:10px;
}
.bl table
{
margin:0px auto;
}
.bl td
{
padding:5px;
}
.bl h3
{
letter-spacing:3px;
text-align:center;
margin-bottom:10px;
}
.blok1
{
width:900px;
height:auto;
margin:0px auto;
margin-bottom:20px;
}
.sl
{
padding-left:75px;
}
.vesti h3
{
text-align:center;
font-size:20px;
padding-top:10px;
}
.vesti
{
width:285px;
height:auto;
border:1px solid gray;
float:left;
margin-left:9px;
border-radius:5px;
}
.vesti img
{
float:left;
margin:10px 10px 0px 10px;
}
.vesti p
{
padding:10px;
text-align:justify;
}
.bl ul
{
margin-top:5px;
}
.bl li
{
border-bottom:2px dashed #374941;
padding:5px;;
}
.bl a
{
color:#374941;
font-weight:bold;
}
#futer
{
border-top:1px double gray;
height:50px;
width:1000px;
background:#090909;
}
#futer p
{
color:white;
text-align:center;
padding-top:15px;
text-decoration:underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Laboratorijski kolokvijum</title>
<link href="stil.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="podaci">
<h2>Ime i prezime, broj indeksa</h2>
</div>
<div id="omot">
<div id="zaglavlje">
</div>
<div id="meni">
<ul>
<li><a href="#">Usluge</a></li>
<li><a href="#">O nama</a></li>
</ul>
</div>
<div id="sadrzaj">
<div id="levo">
<div class="blok">
<ul>
</ul>
</div>
<div class="blok">
<h3>Ime i prezime</h3>
<img src="slike/slika1.jpg"/>
</div>
</div>
<div id="desno">
<div id="gore">
<img src="slike/sn.jpg"/>
<p>A social networking service is an online platform that is used by people to
build social networks or social relations with other people who share similar personal or career interests, activities,
backgrounds or real-life connections. The variety of stand-alone and built-in social networking services currently available in
the online space introduces challenges of definition; however, there are some common features:(1) social networking services
are Web 2.0 internet-based applications, (2) user-generated content (UGC) is the lifeblood of SNS organisms,(3) users create
service-specific profiles for the site or app that are designed and maintained by the SNS organization,and (4) social networking
services facilitate the development of online social networks by connecting a user's profile with those of other individuals
and/or groups.</p>
</div>
<div id="dole">
<table border="1">
<form>
<tr>
<th colspan="2"><h3>Upitnik</h3></td>
</tr>
<tr>
<td>Ime i prezime:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Pol:</td>
<td><input type="radio" name="pol"/>Muški
<input type="radio" name="pol"/>Ženski
</td>
</tr>
<tr>
<td rowspan="2">Društvene mreže:</td>
<td><input type="checkbox" name="pol"/>Facebook
<input type="checkbox" name="pol"/>Twitter
</td>
</tr>
<tr>
<td><input type="checkbox" name="pol"/>Instagram
<input type="checkbox" name="pol"/>Snapchat
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Upiši">
<input type="reset" value="Odustani">
</td>
</tr>
</form>
</table>
</div>
</div>
</div>
<div id="futer">
<p>Visoka ICT škola</p>
</div>
</div>
</body>
</html>
*
{
margin:0px;
padding:0px;
}
ul
{
list-style:none;
}
a
{
}
body
{
color:#fff;
}
#omot
{
width:1000px;
margin:10px auto;
border-radius:10px;
}
#zaglavlje
{
width:1000px;
height:200px;
background:url(slike/header4.png);
}
#zaglavlje h2
{
text-align:right;
font-size:30px;
}
#meni
{
width:1000px;
background:#008889;
height:40px;
text-align:right;
}
#meni ul
{
margin:0px auto;
padding-top:5px;
}
#meni li
{
display:inline;
border-right:2px solid #fff;
padding-right:10px;
padding-left:10px;
}
#meni ul li a
{
color:#fff;
font-size:24px;
}
img
{
width:100px;
height:100px;
}
#sadrzaj
{
width:1000px;
height:500px;
padding-top:30px;
}
.cistac{clear:both;}
#podaci
{
position:fixed;
width:100%;
height:50px;
background:#008889;
text-align:center;
}
#podaci h2
{
color:#fff;
padding-top:10px;
}
#levo
{
width:300px;
height:600px;
float:left;
}
.blok
{
width:250px;
height:auto;
border-radius:10px;
margin:0px auto;
margin-bottom:20px;
padding:10px;
background:#008889;
}
.blok li
{
border-bottom:1px dashed #fff;
padding:5px;
}
.blok a
{
color:#fff;
font-weight:bold;
font-size:18px;
}
.blok h3
{
color:#fff;
text-align:center;
}
.blok img
{
padding-left:75px;
}
#desno
{
float:right;
width:650px;
height:600px;
}
#gore
{
border:1px solid gray;
border-radius:10px;
width:600px;
margin:0px auto;
padding:10px;
margin-bottom:20px;
}
#dole
{
border:1px solid #ccc;
border-radius:10px;
width:600px;
margin:0px auto;
padding:10px;
background:#ccc;
}
#dole table
{
margin:0px auto;
border:1px solid white;
}
#dole td
{
padding:5px;
}
#dole h3
{
letter-spacing:3px;
}
#gore img
{
float:left;
margin-right:10px;
}
#gore p
{
text-align:justify;
color:#ccc;
}
#futer
{
width:1000px;
height:50px;
background:#008889;
text-align:center;
border-radius:10px;
border-top-left-radius:0px;
border-top-right-radius:0px;
}
#futer p
{
text-decoration:underline;
font-weight:bold;
padding-top:15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Moja Web Stranica</title>
</head>
<body>
<header>
<img src="logo.png" alt="Logo">
<nav>
<ul>
<li><span class="separator">|</span></li>
<li><a href="#">Novosti</a></li>
<li><span class="separator">|</span></li>
</ul>
</nav>
</header>
<div class="content">
<div class="left">
<img src="my_image.jpg" alt="Moja Slika">
</div>
<div class="right">
<p>Ovde ide neki tekst...</p>
</div>
</div>
<footer>
<p>© 2023 Moje Ime</p>
</footer>
</body>
</html>
/* Header stilovi */
header {
display: flex;
background-color: #f0f0f0;
padding: 10px;
}
img {
max-height: 50px;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
.separator {
color: #333;
margin: 0 10px;
}
/* Stilovi sadržaja */
.content {
background-image: url('background.jpg');
display: flex;
padding: 20px;
}
.left {
flex: 1;
padding: 20px;
}
.left img {
max-width: 100%;
}
.right {
flex: 1;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
}
/* Stilovi footera */
footer {
text-align: center;
background-color: #f0f0f0;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Moja Web Stranica</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<div class="logo">
<img src="logo.jpg" alt="Logo">
</div>
<nav>
<ul>
<li><a href="#">Novosti</a></li>
</ul>
</nav>
</header>

<div class="container">
<div class="left">
<img src="fotografija.jpg" alt="Fotografija">
</div>
<div class="right">
<p>Nešto teksta ovde...Nešto teksta ovde...Nešto teksta ovde...Nešto teksta ovde...Nešto teksta ovde...Nešto teksta
ovde...Nešto teksta ovde...Nešto teksta ovde...Nešto teksta ovde...</p>
</div>
</div>

<footer>
<p>© 2024 Ime Prezime. Sva prava zadržana.</p>
</footer>
</body>
</html>
/* style.css */
/* Gornji deo */
header {
padding: 10px 0;
display: flex;
}
.logo img {
width: 50px; /* Prilagodite veličinu loga po potrebi */
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #fff; /* Menjamo boju teksta na belu boju */
background-color: #333; /* Menjamo boju pozadine na #333 */
padding: 5px 10px; /* Dodajemo malo prostora oko teksta */
border-radius: 5px; /* Zaobljujemo ivice */
}
nav ul li a:hover {
background-color: #000; /* Promenimo boju pozadine na hover */
}
/* Središnji deo */
.container {
background-image: url('pozadinska_slika.jpg');
padding: 50px;
display: flex;
border-radius: 20px; /* Dodajemo zaobljenost kontejnerima */
overflow: hidden; /* Da bi se slika pozadine lepo uklopila */
}
.left img {
max-width: 100%;
margin-right: 20px; /* Odvajamo sliku od kontejnera sa tekstom */
}
.right {
border-radius: 20px; /* Dodajemo zaobljenost desnom kontejneru */
background-color: rgba(255, 255, 255, 0.8); /* Postavljamo prozirnu belu pozadinu */
padding: 20px;
}
/* Futer */
footer {
color: #fff;
padding: 10px;
text-align: center;
}
<html>
<head>
<title>Tabele i forme</title>
</head>
<body>
<h3>Tabele</h3>
<table border="1">
<tr>
<td>Pera</td>
<td>Peric</td>
<td>1/18</td>
</tr>
<tr>
<td>Zika</td>
<td>Zikic</td>
<td>2/18</td>
</tr>
</table>
<hr/>
<h3>Tabela sa zaglavljem </h3>
<table border="1">
<tr>
<th>ID</th>
<th>Ime</th>
<th>Prezime</th>
</tr>
<tr>
<td>1</td>
<td>Luka</td>
<td>Lukic</td>
</tr>
</table>
<hr/>
<h3>THEAD / TBODY</h3>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Ime</th>
<th>Prezime</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pera</td>
<td>Peric</td>
</tr>
<tr>
<td>1</td>
<td>Pera</td>
<td>Peric</td>
</tr>
<tr>
<td>1</td>
<td>Pera</td>
<td>Peric</td>
</tr>
</tbody>
</table>
<hr/>
<h3>Tabela sa atributima: cellpadding i cellspacing</h3>
<table border="1" cellpadding="10" cellspacing="20">
<tr>
<th>ID</th>
<th>Ime</th>
<th>Prezime</th>
</tr>
<tr>
<td>1</td>
<td>Luka</td>
<td>Lukic</td>
</tr>
</table>
<hr/>
<h3>Spajanje redova</h3>
<table border="1">
<tr>
<th>ID</th>
<th>Ime</th>
<th>Prezime</th>
</tr>
<tr>
<td>1</td>
<td>Pera</td>
<td rowspan="2">Peric</td>
</tr>
<tr>
<td>2</td>
<td>Zika</td>

</tr>
</table>
<hr/>
<h3>Spajanje po kolonama</h3>
<table border="1">
<tr>
<th>ID</th>
<th>Ime</th>
<th>Prezime</th>
</tr>
<tr>
<td>1</td>
<td colspan="2">Pera Peric</td>

</tr>
<tr>
<td>2</td>
<td>Zika</td>
<td>Zikic</td>
</tr>
</table>
<hr/>
<table border="1" cellpadding="10">
<tr>
<td rowspan="2"></td> 
<td colspan="2" align="center">Average</td> 
<td rowspan="2">Red eyes</td> 
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<tr>
<td>Males</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>Females</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<hr/>
<h2>Forme</h2>
<form action="drugaStrana.html" method="GET">

<h3>Tekstualno polje</h3>
<input type="text" id="tekstualnoPolje" name="txtPolje" placeholder="Unesite tekst "/>
<h3>Polje za lozinku</h3>
<input type="password" id="lozinka" name="tbLozinka"/>
<h3>Skriveno polje</h3>
<input type="hidden" id="skrivenoPolje" name="hdnPolje" value="Vrednost1"/>
<h3>Dropdown lista: </h3>
<select id="dropdownLista" name="listaOpcija">
<option value="OP1">Opcija 1</option>
<option value="OP2" selected="selected">Opcija 2</option>
<option value="OP3">Opcija 3</option>
</select>
<h3>Za unos fajla:</h3>
<input type="file" id="fajl" name="uploadFajl" multiple="multiple" />
<h3>Veliko polje za unos</h3>
<textarea cols="30" rows="10"></textarea>
<h3>Izbor SAMO JEDNE opcije - radio:</h3>
<input type="radio" id="opcija1" name="pol" value="Z"/> Zenski
<input type="radio" id="opcija2" name="pol" value="M"/> Muski
<h3>Izbor VISE opcija - checkbox</h3>

<input type="checkbox" id="izbor1" name="izbor1" value="IZ1"/> Izbor 1
<input type="checkbox" id="izbor2" name="izbor2" value="IZ2" checked="checked"/> Izbor 2
<input type="checkbox" id="izbor3" name="izbor3" value="IZ3"/> Izbor 3
<input type="submit" id="dugmeSubmit" name="submitDugme" value="Posalji"/>

</form>
<h3>Tabela + forma</h3>
<form id="forma" name="forma" action="obrada.php" method="POST">
<table border="1">
<tr>
<th>Name</th>
<th>Value</th>
</tr>
<tr>
<td>
<label for="nameTxt">Name</label>
</td>
<td>
<input type="text" id="tbName" name="nameTxt"/>
</td>
</tr>
<tr>
<td>
<label for="gender">Gender</label>
</td>
<td>
<input type="radio" id="genderMale" name="gender" value="M"/> Male
<input type="radio" id="genderFemale" name="gender" value="F"/> Female
</td>
</tr>
<tr>
<td>
<label for="colorEye">Eye color</label>
</td>
<td>
<select id="eyeColor" name="colorEye">
<option value="0">
Izaberite
</option>
<option value="1" selected="selected">
Green
</option>
<option value="2">
Brown
</option>
<option value="3">
Blue
</option>
</select>
</td>
</tr>
<tr>
<td>

<label for="apply">Check all that apply</label></td>
<td>
<input type="checkbox" id="apply1" name="apply1" value="A1"/> Apply1
<input type="checkbox" id="apply2" name="apply2" value="A2"/> Apply2
</td>
</tr>
<tr>
<td colspan="2">
<label for="tekst">Describe your athletic ability</label> <br/>
<textarea cols="45"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="posalji" name="posalji"/>
<input type="reset" id="reset" name="reset"/>
<input type="button" id="button" name="button" value="ISPROGRAMIRAJ!"/>
</td>
</tr>
</table>
</form>
<h3>Fieldset / legend: </h3>

<form>
<fieldset>
<legend>Tekst u legend</legend>
<input type="text" placeholder="UNesi nesto"/>
</fieldset>
</form>
<h3>Tabela + forma + slika</h3>
<table>
<form action="" method="">
<tr>
<th colspan="2">Sta je na slici?</th>
</tr>
<tr>
<td rowspan="3">
<img src="images/pingvin.jpg" alt="Pingvin" />
</td>
<td>
<input type="radio" name="ptica" id="papagaj" value="papagaj" />Papagaj
</td>
</tr>
<tr>
<td>
<input type="radio" name="ptica" id="pingvin" value="pingvin" />Pingvin
</td>
</tr>
<tr>
<td>
<input type="radio" name="ptica" id="noj" value="Noj" />Noj
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="" id="" value="Odgovor" />
</td>
</tr>
</form>
</table>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><
br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

Kolokvijumi

Uploaded by

Copyright:

Available Formats

You might also like

Kolokvijumi

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kolokvijumi

Uploaded by

Copyright:

Available Formats

<!

<input type="email" placeholder="Your email" id="email"

<form action="drugaStrana.html" method="GET">

<h3>Izbor VISE opcija - checkbox</h3>

<input type="submit" id="dugmeSubmit" name="submitDugme" value="Posalji"/>

<h3>Fieldset / legend: </h3>

You might also like