Scribd
Upload
51 views6 pages

Primer 1 v2

This document contains HTML and CSS code that defines the structure and styling of a web page. The HTML defines sections for a header with navigation links, content areas with images and text blocks, and footer sections. The CSS styles these elements by specifying properties for colors, fonts, sizes, positions and other visual attributes. It aims to create a multi-section layout with navigation, images, and descriptive text blocks styled harmoniously.

Uploaded by

Zorica Boskov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views6 pages

Primer 1 v2

This document contains HTML and CSS code that defines the structure and styling of a web page. The HTML defines sections for a header with navigation links, content areas with images and text blocks, and footer sections. The CSS styles these elements by specifying properties for colors, fonts, sizes, positions and other visual attributes. It aims to create a multi-section layout with navigation, images, and descriptive text blocks styled harmoniously.

Uploaded by

Zorica Boskov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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>
<!--
<div id="logo_wrapper">
<img src="Priroda.gif"/>
</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 class="prvired">Naslov</div>
</div>
<div class="detalj2">
<div class="prvired">Naslov</div>
</div>
<div class="detalj2">
<div class="prvired">Naslov</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{
background-color: #222222;
width: 12%;
height: 12vmin;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.5vw;
border-color:#FFFF00;
border-radius: 5px;
display:table;

text-align:center;
float:left;
}
#zagl3 span{
display:table-cell;
vertical-align:middle;
}
#zagl3poc span{
display:table-cell;
vertical-align:middle;
}
#zagl3poc{
background-color: #222222;
width: 12%;
height: 12vmin;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
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;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
-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;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
-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);
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#prelaz{
clear:both;
}
.zaglavlje{
height:50px;
background-color:ligh-green;

You might also like