Primer 1 v2

HTML ove strane izgleda ovako:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Strana - Primer 1</title>
<link href="stil1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="zagl">
<div id="zagl2">
<font color="white">Smart</font><font color="green">Net</font>
</div>
<div id="zagl3poc">
<span><font color="green">HOME</font></span>
</div>
<div id="zagl3">
<span><font color="white">SERVICES</font></span>
</div>
<div id="zagl3">
<span><font color="white">HOSTING</font></span>
</div>
<div id="zagl3">
<span><font color="white">SOLUTION</font></span>
</div>
<div id="zagl3">
<span><font color="white">CONTACT</font></span>
</div>
</div>

<section id="vmeni">
<ul id="vlista">
<ui><div id="oblak3"><span>Web Hosting</span><br>Stavka I</div></ui>
<ui><div id="oblak">Stavka II</div></ui>
<ui><div id="oblak"><span>E-mail Hosting</span><br>Stavka III</div></ui>
<ui><div id="oblak">Stavka IV</div></ui>
</ul>
</section>
<div id="desno">
<img id="slika" src="sl29.png" width="1380" />
</div>
<div id="prelaz"></div>
<div class="detalj">
<div class="prvired">Naslov</div>
</div>
<div class="detalj2">
</div>
</div>
</div>
</body>
</html>
CSS ove strane izgleda ovako:

@charset "utf-8";
#zagl{
background-color:#222222;
width:90%;
margin-left:40px;
float:left;
border-radius:5px;
display:inline-flex;
vertical-align:middle;
position:static;
}
#zagl2{
background-color: #222222;
width: 37%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 8vmin;
border-radius: 5px;
display:inline-block;
text-align:left;
text-indent:35px;
}
#zagl3{
width: 12%;
height: 12vmin;
font-size: 1.5vw;
border-color:#FFFF00;
border-radius: 5px;
display:table;
text-align:center;
float:left;
}
#zagl3 span{
display:table-cell;
}
#zagl3poc span{
display:table-cell;
}
#zagl3poc{
width: 12%;
height: 12vmin;
font-size: 1.5vw;
border-color:#FFFF00;
border-radius: 5px;
display:table;
font-weight:bold;
text-align:center;
float:left;
}
#logo_wrapper img {
max-width: 100%;
height: 350px;
margin-left:45px;
}
#slika{
max-width: 100%;
height:340px;
}
#vlista{
clear:left;
}
#vmeni{
width:15%;
float:left;
}
#desno{
width: 73%;
left: 260px;
height: 200px;
top:100px;
z-index: -1;
position: absolute;
}
#flag {
width: 220px;
height: 50px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 20px solid #FFFFFF;
border-left: 110px solid transparent;
border-right: 110px solid transparent;
}
#oblak2 {
width: 220px;
height: 80px;
margin-top:4px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#oblak {
width: 220px;
height: 50px;
background: #e5e5e5;
margin-top:4px;
margin-left:0;
padding-left:0;
position: relative;
color: BLACK;
font-size: 10px;
font-weight:bold;
padding-top:30px;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#oblak:hover{
background: linear-gradient(to right, #39c7eb, #212121);

}
#oblak2:after {
content:"";
position: absolute;
right: 100%;
top: 0px;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 46px solid red;
border-bottom: 40px solid transparent;
}
#oblak3 {
width: 220px;
height: 60px;
left:0;
background: linear-gradient(to right, #39c7eb, #212121);
margin-top:4px;
position: relative;
color: white;
font-size: 10px;
padding-top:20px;
text-align: center;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
#oblak3 span,#oblak span{
font-size:20px;
}
#oblak3:after {
content:"";
position: absolute;
right: 100%;
top: 0;
width: 0;
height: 0;
left:220px;
opacity:1;
border-top: 40px solid transparent;
border-left: 46px solid #222222;
border-bottom: 40px solid transparent;
}
#levo{
position:static;
width:220px;
height:80px;
background-color:yellow;
}
.detalj{
float:left;
height:300px;
width:21%;
margin-left:45px;
background:#efefef;
border-radius:10px;
}
.detalj2{
float:left;
height:300px;
width:21%;
margin-left:25px;
background:#efefef;
border-radius:10px;
}
.prvired{
width:100%;
font-size:22px;
height:40px;
padding-top:10px;
border-radius:10px 10px 0 0;
background: linear-gradient(to right bottom, #39c7eb, #293f50);
text-align: center;
}
#prelaz{
clear:both;
}
.zaglavlje{
height:50px;
background-color:ligh-green;

Primer 1 v2

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

Primer 1 v2

Uploaded by

Copyright:

Available Formats

HTML ove strane izgleda ovako:

CSS ove strane izgleda ovako:

background: linear-gradient(to right, #39c7eb, #212121);

You might also like