Workshop HTML & Css

Workshop #1 04.09.2019.
-------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Zadatak 2.
Napraviti 3 linka koji će imati umjesto teksta slike društvenih mreža.
Npr. prvi link bi bio sadržavao mali logo facebooka, i kada bi se kliknulo na
njega, odveo bi nas na facebook.com
HTML
<a href="https://www.facebook.com/" target="_blank">

<img src="http://cofarming.info/wp-content/uploads/2017/01/facebook-icon-preview-1-400x400.png"
width=150/>
</a>
<a href="https://www.instagram.com/" target="_blank">
<img src="https://www.smartmoderation.com/homepage/img/instagram-icon.png" width=150/>
</a>
<a href="www.zeforge.org" target="_blank">
<img src="https://pbs.twimg.com/profile_images/1111729635610382336/_65QFl7B_400x400.png" width=150/>
</a>
Zadatak 3.
Napraviti tablicu sa 4 reda po 3 kolone u kojoj će se nalaziti informacije o
našim linkovima.
Prvi red treba da bude header sa poljima "red. br.", "slika", "putanja".
U ostalim redovima treba da se nalaze informacije o linku na osnovu datog
headera.
<html>
<head>
<title>Vjezba 3</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Zadatak 3</title>
</head>
<body>
<table border=1 width="1000px" align="center">

<thead bgcolor="#ccc">
<tr>
<th width=40px>R.broj</th>
<th>Slika</th>
<th>Putanja</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1.</td>
<td><img src="https://cdn.pixabay.com/photo/2014/04/03/00/43/tiger-309218__340.png"
width="70px"></td>
<td><a href="http://www.zeforge.org/" target="_blank">LINK</a></td>
</tr>
<tr align="center">
<td>2.</td>
<td><img src="https://cdn.pixabay.com/photo/2014/04/03/00/43/wildcat-309222__340.png"
width="70px"></td>
</tr>
<tr align="center">
<td>3.</td>
<td><img src="https://cdn.pixabay.com/photo/2017/01/21/19/36/football-1998122__340.png"
width="70px"></td>
</tr>
<tr align="center">
<td>4.</td>
<td><img src="https://cdn.pixabay.com/photo/2018/08/31/13/34/nfl-3644686__340.png"
width="70px"></td>
</tr>
</tbody>
</table>
</body>
</html>
</body>
</html>
-----------------------------
Mehmed
<td>www.instagram.com</td>
</tr>
<tr>
<td>3</td>
<td> <a href="https://twitter.com" target="_blank"> <img
src="https://image.flaticon.com/icons/svg/124/124021.svg" width=200px
</img>
</a></td>
<td>www.twitter.com</td>
</tr><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
</style
</head>
<body>
<table style=th:400px" border="2px">
<tr>"wid
<th>red. br.</th>
<th>slika</th>
<th>putanja</th>
</tr>
<tr>
<td>1</td>
<td> <a href="https://facebook.com" target="_blank"> <img
src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-512.png"
width=200px
</img>
</a></td>
td>www.facebook.com</td>
<
</tr>
<tr>
<td>2</td>
<td> <a href="https://instagram.com" target="_blank"> <img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/599px-Instagram_icon.pn
g" width=200px
</img>
</a></td>
</table>
</body>
</html>
Ismar
<!DOCTYPE html>
<html>
<body>
<h2>Zadatak 3 Ismar</h2>
<table style="width:25%; border:solid 1px">

<tr>
<th>red.broj</th>
<th>slika</th>
<th>pitanja</th>
</tr>
<tr>
<td>1</td>
<td><img src="https://slika.nezavisne.rs/2012/05/750x450/20120503100208_139496.jpg" alt="Smiley face"
height="100" width="100"><a href="https://slika.nezavisne.rs/2012/05/750x450/20120503100208_139496.jpg">
</a><a href = ></td>
<td><a href="https://www.zeforge.org">Visit our link</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="https://www.express.hr/media/img/35/ca/7b731cb7c0980c206175.jpeg" alt="Smiley face"
height="100" width="100"><a href="https://www.express.hr/media/img/35/ca/7b731cb7c0980c206175.jpeg">
</a><a href = ></td>
<td><a href="https://www.zeforge.org">Visit link2</a></td>
</tr>
<tr>
<td>3</td>
<td><img
src="https://www.nationalgeographic.rs//files/images/2013/Vincent_van_Gogh___National_Gallery_of_Art_6813
08748.jpg" alt="Smiley face" height="100" width="100"><a
href="https://www.nationalgeographic.rs//files/images/2013/Vincent_van_Gogh___National_Gallery_of_Art_681
308748.jpg"> </a><a href = ></td>
<td><a href="https://www.zeforge.org">Visit link3</a></td>
</tr>
</table>
</body>
</html>
---------------------------------
Tarik Osmanbašić
<!DOCTYPE html>
<html>
<table style="width:100%; border:solid 1px">

<tr>
<th>
<h1>Red. Br.</h1></th>
<th><h1>Slika</h1></th>
<th><h1>Putanja</h1></th>
</tr>
<tr>
<td style="text-align:center">1</td>
<td><img
src="https://sites.google.com/site/itsmyworld7177/_/rsrc/1468739249740/najljepsa-mjesta-na-svijetu/Wizard
%27s%20hat%2C%20Oregon.jpg" style="width:200px; height:150px;"/></td>
<td><a href="#">...</a></td>
</tr>
<tr>
<td><img
%27s%20hat%2C%20Oregon.jpg" style="width:200px; height:150px;" /></td>
<td><a href="#">...</a></td>
</tr>
<tr>
<td><img
%27s%20hat%2C%20Oregon.jpg" style="width:200px; height:150px;"/></td>
<td><a href="#">...</a></td>
</tr>
<tr>
<td><img
%27s%20hat%2C%20Oregon.jpg" style="width:200px; height:150px;" /></td>
<td><a href="#">...</a></td>
</tr>
</table>
</html>
Zadatak 4.
Unutar jednog div elementa napraviti 2 različite liste i jedan inline element
između te dvije liste.
Šta će liste sadžavati vi odlučite.
------------------
Tarik Osmanbašić
<div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<button>
HELP
</button>
<ol>
<li>D</li>
<li>E</li>
<li>F</li>
</ol>
</div>
-----------
Mehmed
<!DOCTYPE html>
<html>
<head>
<style>
</style
</head>
<body>
<div>
<ol>
<li>Jedan</li>
<li>Dva</li>
<li>Tri</li>
</ol>
<img src="https://image.flaticon.com/icons/svg/124/124021.svg" width=100px </img>
<ul>
<li>Pet</li>
<li>Sest</li>
<li>Sedam</li>
<li>Osam</li>
</ul>
</div>
</body>
</html>
----- ELVIR ---------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Zadatak 4</title>
</head>
<body>
<div style="background-color: #ccc">
<ul>
<li>unordered lista</li>
</ul>
<span><img src="http://www.zeforge.org/img/NSoft-logo.png" style="width:100px; padding-left:20px"></span>
<ol>
<li>ordered lista</li>
</ol>
</div>
</body>
</html>
</body>
</html>
---------------------------------------------------------------------------
Ajas
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.facebook.com/" target="_blank">

<img src="http://cofarming.info/wp-content/uploads/2017/01/facebook-icon-preview-1-400x400.png" width=150/>
</a>
<a href="https://www.instagram.com/" target="_blank">
<img src="https://www.smartmoderation.com/homepage/img/instagram-icon.png" width=150/>
</a>
<a href="www.zeforge.org" target="_blank">
<img src="https://pbs.twimg.com/profile_images/1111729635610382336/_65QFl7B_400x400.png" width=150/>
</a>
<table style="width:100%" border>

<tr>
<th>red. broj</th>
<th>slika</th>
<th>putanja</th>
</tr>
<tr>
<td> 1</td>
<td> <img src="http://cofarming.info/wp-content/uploads/2017/01/facebook-icon-preview-1-400x400.png" width=150/></td>
<td> "http://cofarming.info/wp-content/uploads/2017/01/facebook-icon-preview-1-400x400.png"</td>
</tr>
<tr>
<td>2</td>
<td><img src="https://www.smartmoderation.com/homepage/img/instagram-icon.png" width=150/></td>
<td> .. ... ...</td>
</tr>
<tr>
<td>3</td>
<td> <img src="https://pbs.twimg.com/profile_images/1111729635610382336/_65QFl7B_400x400.png" width=150/></td>
<td> ......</td>
</tr>
<tr>
</table>
</body>
</html>
Workshop #2 09.09.2019.
Zadatak 2.
Napraviti div element, a unutar njega napraviti jedan span element.
I span i div elementi trebaju sadržavati neki tekst.
Div element - boju teksta obojiti u plavo, a pozadinu obojiti u crveno.
Span element - pozadinu obojiti u bijelo (koristiti descendant selektor).
Dodati još dva span elementa. Jedan treba sadržavati klasu a drugi id.
Span element sa klasom - pozadinu obojiti u žuto.
Span element sa id atributom - pozadinu obojiti u zeleno.
HTML
<div>
Div element
<span>Span Element</span>
<span class="green">Class element</span>
<span id="yellow">Id element</span>
</div>
CSS
div {
background-color: #f00;
color: #00f;
}
div span{
background-color: #fff;
}
span.green {
background-color: #
0f0;
}
div span#yellow{
background-color: yellow;
}
Ismar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" c ontent=" width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Div elementi</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div c lass="plav"><h5>Div1</h5></div>
<div c lass="zelen"><p>Div2</p></div>
</body>
</html>
body{
background-color: gray;
}
div{
width: 100px;
height: 100px;
float: right;
}
.plav{
background-color: blue;
}
.zelen{
background-color: green;
}
<div>
Div element
<span>Span element</span>
<span class="green">Class element</span>
<span id="Yellow"></span>
</div>
</body>
</html>
Zadatak 3.
Napraviti 2 div elementa sa sljedećim zajedničkim svojstvima:
❏ širina - 100px
❏ visina - 100px
❏ float: right;
Za svaki element dodati klasu koja će označavati boju pozadine elementa:
❏ prvi div element treba biti plave boje
❏ drugi div element treba biti zelene boje
Smanjivati i povećavati širinu web pretraživača. Uočiti ponašanje elemenata na
web stranici.
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="blue">prvi div 1</div><span>span</span>
<div class="green">drugi div 2&nbsp&nbsp</div>
</body>
</html>
CSS
div, span {
width: 100px;
height: 100px;
float: right;
color: white;
font-weight: bold;
}
span {
color: red;
}
.blue {
background-color: blue;
}
.green {
}
Workshop #3 11.09.2019.
Zadatak 1.
Napraviti header i footer.
Postaviti apsolutnu poziciju.
Dimenzije header-a i footer-a:
širina - 100%
visina - 100px
Boju header-a postaviti u crnu
Boju footer-a postaviti u tamno crvenu
HTML
/header>
<header> <
<footer> < /footer>
CSS

* {
margin: 0;
padding: 0;
}
header, footer {
position: absolute;
width: 100%;
height: 100px;
}
header {
top: 0;
background-color: black;
}
footer {
bottom: 0;
background-color: darkred;
}
-------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Zadatak 2.
U header-u napraviti 2 div elementa.
Elemente pozicionirati desno u header-u.
Text jednog elementa postaviti u “Login”, a drugog u “Register”.
Elementi će predstavljati “login” i “register” button.
Postaviti id atribute sa vrijednostima “logBtn” i “regBtn”.
Boju button-a postaviti u zelenu, rubove crne (2px), veličinu fonta 16px,
centrirati tekst.
Kada mišem pređemo preko button-a (hover stanje), promijeniti im boje u:
Login - crvena (#ff192e)
Register - crvena (#ff192e)
HTML
<header>
<div id="regBtn" class="button">
Register
</div>
<div id="logBtn" class="button">
Login
</div>
</header>
<footer> </footer>
CSS

* {
margin: 0;
padding: 0;
}
header, footer {
position: absolute;
width: 100%;
height: 100px;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.button {
float: right;
margin: 20px;
width: 150px;
height: 60px;
line-height: 60px;
background-color: #0f0;
font-size: 16px;
text-align: center;
border: 2px solid #000;
cursor: pointer;
}
#logBtn:hover {
background-color: #ff192e;
}
#regBtn:hover {
}
-------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Zadatak 3.
U header-u napraviti div element koji će predstavljati logo i dodati klasu
“logo”. Element pozicionirati lijevo.
Dimenzije div elementa:
širina - 100px;
visina - 50px;
Boja pozadine: #cc33ff
Dodati “transition” efekt:
Kada pređemo mišom preko logo elementa, povećati širinu za 50px u 0.7s
HTML
<header>
<div><img src="http://zeforge.org/img/logo-za-web.png" class="logo"></div>
<div id="regBtn" class="button">
Register
</div>
<div id="logBtn" class="button">
Login
</div>
</header>
<footer> </footer>
CSS

* {
margin: 0;
padding: 0;
}
header, footer {
position: absolute;
width: 100%;
height: 100px;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.button {
float: right;
margin: 20px;
width: 150px;
height: 60px;
line-height: 60px;
font-size: 16px;
text-align: center;
cursor: pointer;
}
#logBtn:hover {
}
#regBtn:hover {
}
.logo {
float: left;
width: 150px;
background-color: #cc33ff;
margin: 25px;
transition: all .7s linear;
cursor: pointer;
}
.logo:hover {
width: 200px;
}
-------------------------------------------------------------------------------------------------------------------------------
HTML
<!DOCTYPE html>
<html>
<head>
<title>Zadaca 3</title>
</head>
<body>
<header>
<div class="logo">
</div>
<div class="dugme">
<button id="logBtn" type="button">Login</button>
</div>
<div class="dugme">
<button id="regBtn" type="button">Register</button>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
CSS
body {width: 100%;
height: 600px;
padding: 0px;
margin: 0px;
}
header {position: absolute;
top: 0;
background-color : black;
height: 100px;
width: 100%;
}
main {position: absolute;

top: 100px;
height: 400px;
width:100%;
}
.logo {
height: 50px;
width: 100px;
float:left;
margin: 25px;
transition-property: width;
transition-duration: 0.7s;
}
.logo:hover {width:150px;}
.dugme {
float: right;
margin: 20px;
}
#logBtn {width: 110px;
height:60px;
border: 2px;
border-color: black;
font-size: 16px;
text-align: center;
}
#logBtn:hover {
background-color: red;
}
#regBtn {width: 110px;
height: 60px;
border: 2px;
border-color: black;
font-size: 16px;
text-align: center;
}
#regBtn:hover {
}
footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background-color : darkred;
}
-------------------------------------------------------------------------------------------------------------------------------


HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div>
<div class="logo"> <img src="https://spark.ba/wp-content/uploads/2017/12/ZeForge_Logo.png" alt="ZeForge-Logo" id="logo1"></div>
<div id="buttons"><button id="logBtn">Login</button><button id="regBtn">Register</button></div>
</div>
</header>
<footer>
</footer>
</body>
</html>
CSS
body{
margin: auto;
padding: 0;
}
header{
position: absolute;
height: 100px;
width: 100%;
}
footer{
position: absolute;
height: 100px;
width: 100%;
background-color: rgb(73, 4, 4);
bottom: 0%;
}
#buttons{
float: right;
}
#regBtn, #logBtn{
height: 50px;
width: 100px;
border: solid 2px #ff192e;
font-size: 16px;
}
#regBtn:hover, #logBtn:hover{
height: 50px;
width: 100px;
border: solid 2px black;
font-size: 16px;
}
.logo, #logo1{
width: 100px;
height: 50px;
transition: height 0.7s;
float: left;
}
.logo:hover, #logo:hover{
height: 150px;
width: 100px;
}
-------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Zadatak 4.
Na body postaviti visinu od 700px i poziciju “relative”.
Između header-a i footer-a dodati novi div element. Postaviti atribut id na
vrijednost “content”.
Postaviti boju pozadine elementa na vrijednost “#252525” i poziciju “relative”
Dimenzije elementa:
Širina - 100%
Visina - 500px;
Top - 100px;
HTML
<header>
<div id="regBtn" class="button">Register</div>
<div id="logBtn" class="button">Login</div>
<div id="content"></div>
</header>
<footer> </footer>
CSS

* {
margin: 0;
padding: 0;
}
header, footer {
position: absolute;
width: 100%;
height: 100px;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.button {
float: right;
margin: 20px;
width: 150px;
height: 60px;
line-height: 60px;
font-size: 16px;
text-align: center;
cursor: pointer;
}
#logBtn:hover {
}
#regBtn:hover {
}
.logo {
float: left;
width: 150px;
margin: 25px;
cursor: pointer;
}
.logo:hover {
width: 200px;
}
body {
position: relative;
height: 700px;
}
#content {
position: relative;
top: 100px;
width: 100%;
height: 500px;
background-color: #252525;
}
-------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hederifoter</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<header>
<div class="logo"></div>
<div>
<button id="logBtn">Login</button>
</div>
<div >
<button id="regBtn">Register</button>
</div>
</header>
<body>
<main>
<div id="content"></div>
</main>
<footer>
<div></div>
</footer>
</body>
</html>
header{
position: absolute;
width: 100%;
height: 100px;
}
footer{
position: absolute;
bottom: 0px;
width: 100%;
height: 100px;
}
header div{
float: right;
margin: 20px;
padding-right: 20px;
#logBtn , #regBtn {
background-color: grey;
border: 2px;
font-size: 16px;
text-align: center;
cursor: pointer;
width: 100px;
height: 50px;
}
#logBtn:hover , #regBtn:hover {
}
.logo{
float: left;
width: 100px;
height: 50px;
transition-property: width;
transition-duration: 0.7s;
}
.logo:hover{
width: 150px;
}
body{
height: 700px;
position: relative;
}
#content{
position: relative;
}
#content{
width: 100%;
height: 500px;
top: 100px;
}
---------------------------------------------------------------------------------------------------------
Zadatak 5.
U #content dodati novi div element sa atributom id=”#logBox”.
Boja pozadine: #eeeeee
Dimenzije elementa:
širina - 80%
visina - 300px
Stilizirati ga da bude vertikalno i horizontalno centriran
HTML
<header>
<div id="content">
<div id="logBox"></div>
</div>
</header>
<footer> </footer>
CSS

* {
margin: 0;
padding: 0;
}
header, footer {
position: absolute;
width: 100%;
height: 100px;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.button {
float: right;
margin: 20px;
width: 150px;
height: 60px;
line-height: 60px;
font-size: 16px;
text-align: center;
cursor: pointer;
}
#logBtn:hover {
}
#regBtn:hover {
}
.logo {
float: left;
width: 150px;
margin: 25px;
cursor: pointer;
}
.logo:hover {
width: 200px;
}
body {
position: relative;
height: 700px;
}
#content {
position: relative;
top: 100px;
width: 100%;
height: 500px;
}
#logBox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 80%;
height: 300px;
margin: auto;
background-color: #eeeeee;
}
-------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Zadatak 6.
U #logBox dodati novi element form.
Dimenzije forme:
širina - 80%
visina - 180px
Centrirati horizontalno i vertikalno.
HTML
<header>
<div id="content">
<div id="logBox"></div>
</div>
</header>
<form>
<input type="text" placeholder="Username..." />
<br/>
<input type="password" placeholder="Password..." />
<br/>
<input type="email" p laceholder="Email" />
<br />
<input type="button" value="Log in" />
</form>
<footer> </footer>
CSS

* {
margin: 0;
padding: 0;
}
header, footer {
position: absolute;
width: 100%;
height: 100px;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.button {
float: right;
margin: 20px;
width: 150px;
height: 60px;
line-height: 60px;
font-size: 16px;
text-align: center;
cursor: pointer;
}
#logBtn:hover {
}
#regBtn:hover {
}
.logo {
float: left;
width: 150px;
margin: 25px;
cursor: pointer;
}
.logo:hover {
width: 200px;
}
body {
position: relative;
height: 700px;
}
#content {
position: relative;
top: 100px;
width: 100%;
height: 500px;
}
#logBox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 80%;
height: 300px;
margin: auto;
}
form {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 180px;
transform: translate(-50%, -5
0%);
text-align: center;
}
-------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zadaca 3</title>
<link rel="stylesheet" href="css/zadaca.css">
</head>
<body>
<header>
<div class="logo">
<h3>ZeForge Academy</h3>
</div>
<div id="regBtn" class="btn">Register</div>
<div id="logBtn" class="btn">Login</div>
</header>
<div id="content">
<div id="logBox">
<div id="miniBox">
<form action="">
<input type="text" placeholder="Name...">
<br>
<input type="email" placeholder="Email...">
<br>
<input type="password" placeholder="Name...">
<br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
position: relative;
height: 700px;;
}
header, footer {
position: absolute;
width: 100%;
height: 100px;
}
header {
top: 0;
background: #000;
}
footer {
bottom: 0;
background: #ad030e;
}
.btn {
float: right;
margin: 20px 15px;
width: 150px;
height: 60px;
line-height: 60px;
font-size: 18px;
text-align: center;
cursor: pointer;
}
#logBtn:hover, #regBtn:hover {
background: #ff192e;
}
.logo {
color: #fff;
float: left;
width: 150px;
height: 60px;
background: #cc33ff;
margin: 20px;
cursor: pointer;
}
.logo:hover {
width: 200px;
transition: 0.7s;
}
.logo > h3 {
font-size: 16px;
margin: 20px 5px;
}
#content {
position: relative;
width: 100%;
height: 500px;
background: #252525;
top: 100px;
}
#logBox {
position: absolute;
background: #eeeeee;
width: 80%;
height: 300px;
top: 100px;
left: 10%;
}
#miniBox {
position: absolute;
background: #3b3838;
width: 60%;
height: 200px;
top: 50px;
left: 20%;
}
form {
width: 40%;
margin: 10px auto;
}
input[type=text],input[type=email],input[type=password],input[type=submit],select {
width: 100%;
padding: 5px 5px;
border-radius: 4px;
box-sizing: border-box;
margin-top: 5px;
}
input:focus {
border: #fff 1px solid;
}
input[type=submit],select {
cursor: pointer;
}
-------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<header>
<div>
<div class="logo"> <img s
rc="
https://spark.ba/wp-content/uploads/2017/12/ZeForge_Logo.png" alt="ZeForge-Logo"
id="logo1"></div>
<div id="buttons"><button i d="logBtn">Login</button><button id="regBtn">Register</button></div>
</div>
</header>
<div i d="content">
<div id="logBox">
<form action="">
<input type="text" name="firstname" value="">

<br>
<input type="text" name="lastname" value="">
<br>
<input type="email" name="email" value="">
<br>
<input type="submit" value="Submit">
/form>
<
</div>
</div>
<footer>
</footer>
</body>
</html>
CSS
body{
position: relative;
margin: auto;
padding: 0;
height: 700px;
}
header{
position: absolute;
height: 100px;
width: 100%;
}
footer{
position: absolute;
height: 100px;
width: 100%;
background-color: rgb(7
3, 4
, 4)
;
bottom: 0%;
}
#buttons{
float: right;
}
#regBtn, #logBtn{
height: 50px;
width: 100px;
border: solid 2px #ff192e;
font-size: 16px;
}
#regBtn:hover, #logBtn:hover{
height: 50px;
width: 100px;
border: solid 2px black;
font-size: 16px;
}
.logo, #logo1{
width: 100px;
height: 50px;
transition: height 0.7s;
float: left;
}
.logo:hover, #logo:hover{
height: 150px;
width: 100px;
}
#content{
position: relative;
width: 100%;
height: 500px;
top: 100px;
}
#logBox{
position: absolute;
width: 80%;
height: 300px;
margin-top: 5%;
margin-left: 10%;
}
form{
display: block;
position: absolute;
height: 180px;
width: 80%;
margin-top: 4%;
margin-left: 10%;
text-align: center;
}
Workshop #4 18.09.2019.
Boostrap web page
HTML
CSS

Workshop HTML & Css

Uploaded by

Document Information

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

Workshop HTML & Css

Uploaded by

Copyright:

Available Formats

Workshop #1 04.09.2019.

<a href="https://www.facebook.com/" target="_blank">

<table border=1 width="1000px" align="center">

<table style="width:25%; border:solid 1px">

<table style="width:100%; border:solid 1px">

----- ELVIR ---------------------------------------------------

<div style="background-color: #ccc">

<a href="https://www.facebook.com/" target="_blank">

<table style="width:100%" border>

<div class="blue">prvi div 1</div><span>span</span>

<div class="green">drugi div 2&nbsp&nbsp</div>

main {position: absolute;

<link rel="stylesheet" href="css/style.css">

<input type="text" name="firstname" value="">

You might also like

Workshop HTML &amp; Css

Uploaded by

Document Information

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

Workshop HTML &amp; Css

Uploaded by

Copyright:

Available Formats

Workshop #1 04.09.2019.

<a​ ​href​=​"https://www.facebook.com/"​ ​target​=​"_blank"​>

<table​ ​border​=​1​ ​width​=​"1000px"​ ​align​=​"center">

<table​ ​style​=​"​width​:​25​%;​ border​:​solid ​1px​">

<table​ ​style​=​"​width​:​100​%;​ border​:​solid ​1px​">

----- ELVIR ---------------------------------------------------

<div​ ​style​=​"​background​-​color​:​ ​#ccc​">

<a​ ​href​=​"https://www.facebook.com/"​ ​target​=​"_blank">

​<table​ ​style​=​"​width​:​100​%​"​ ​border>

<div​ ​class​=​"blue"​>​prvi div 1​</div><span>​span​</span>

<div​ ​class​=​"green"​>​drugi div 2&nbsp&nbsp​</div>

main ​{​position​:​ absolute;

​<link​ ​rel​=​"stylesheet"​ ​href​=​"css/style.css">

​<input​ ​type​=​"text"​ ​name​=​"firstname"​ ​value​=​"">

You might also like

Workshop HTML & Css

Workshop HTML & Css

<a href="https://www.facebook.com/" target="_blank">

<table border=1 width="1000px" align="center">

<table style="width:25%; border:solid 1px">

<table style="width:100%; border:solid 1px">

<div style="background-color: #ccc">

<a href="https://www.facebook.com/" target="_blank">

<table style="width:100%" border>

<div class="blue">prvi div 1</div><span>span</span>

<div class="green">drugi div 2&nbsp&nbsp</div>

main {position: absolute;

<link rel="stylesheet" href="css/style.css">

<input type="text" name="firstname" value="">