css - learning creative&openminded

<!DOCTYPE html >

<body>
<div class=”zaglavlje”>
<p><a href=”dokument.doc”>Preuzmite dokument u word formatu.</a> dolor sit amet, consectetur adipiscing elit. Nunc diam eros, malesuada vitae dapibus id, semper in felis. Suspendisse non quam interdum nisi consequat viverra. Curabitur non neque purus, nec blandit augue. Donec vel sodales nisl. Duis ultrices scelerisque consectetur. Etiam laoreet mauris vitae libero sodales ac lacinia nulla tristique. Nullam et placerat felis. Nunc pulvinar, erat vitae mattis sagittis, massa lacus iaculis mauris, sit amet vehicula tellus enim et lectus. Nulla facilisi. Curabitur hendrerit fringilla posuere. Nam laoreet posuere cursus. Sed ipsum libero, tristique a volutpat bibendum, interdum sit amet mauris. Suspendisse a metus a risus ultricies pulvinar. Fusce urna elit, feugiat nec faucibus vel, interdum et risus. Nunc aliquam, est sit amet congue venenatis, erat enim fermentum sapien, nec volutpat risus dui a tortor. Fusce id elit id ante ultrices vehicula. Duis elementum orci vel enim sodales malesuada a in mauris.</p></div>

<div class=”sadrzaj”>
<p><a href=”brosura.pdf”>Provjerite našu pdf brošuru!</a> Consequat vel venenatis non, pellentesque id lacus. Fusce dignissim sagittis turpis, a sollicitudin erat lacinia non. Etiam malesuada iaculis turpis, nec placerat nisl tincidunt nec. Duis ac eros nec orci commodo dictum eget sit amet sem. Proin interdum dapibus dapibus. Phasellus auctor ligula eu odio ullamcorper a hendrerit justo auctor. Praesent tincidunt, velit sed porta auctor, elit quam egestas diam, sed luctus mi arcu id mauris. Suspendisse potenti. Integer id dui lectus, nec sodales felis. Sed consectetur gravida augue, ut faucibus nisi semper quis. Ut sagittis iaculis tortor, vel sodales massa volutpat ut. Suspendisse eu felis nunc. Duis a libero vel neque malesuada consectetur. Proin augue leo, tempor vitae pretium sit amet, lacinia sed augue. In accumsan, diam at varius vestibulum, enim ante sagittis nibh, vel congue neque urna at ipsum. Cras dignissim euismod ligula, a rhoncus lectus elementum non. Proin nec nunc tellus, non aliquam est. Sed vel diam eu lectus iaculis varius.</p>
<p><a href=”obracun.xls”>Obračun plaća</a>. Sed hendrerit ultricies vulputate. Curabitu.podnozje pr sem mauris, posuere non placerat in, ultricies ac massa. Donec convallis ullamcorper elit, ut dapibus mi suscipit eu. Aliquam placerat turpis sit amet lorem sollicitudin et iaculis quam convallis. Vivamus lacinia leo sem. Fusce enim diam, adipiscing ac varius at, ornare vitae risus. Sed a nulla leo, molestie mattis dui. In hac habitasse platea dictumst. Nunc rhoncus enim velit, in suscipit neque. Vivamus sed lectus orci, et tincidunt risus. Maecenas sed urna vitae justo aliquet euismod ultrices in lacus. Aliquam facilisis feugiat dapibus. Praesent pulvinar tincidunt justo. Pellentesque enim quam, laoreet nec lacinia ullamcorper, commodo in arcu. Nullam vel luctus elit. Aenean et odio vitae justo feugiat condimentum ut eu lectus.</p>
<p><a href=”kontakt.html”>Posjetite našu kontakt stranicu</a>. magna felis feugiat tortor, a bibendum dolor lorem bibendum erat. Pellentesque eleifend interdum orci in ultricies. Proin pellentesque risus volutpat ipsum congue ac facilisis tortor pharetra. Vivamus a volutpat diam. Morbi in nunc turpis. Ut libero nisl, sodales eget volutpat non, commodo non velit. Mauris tincidunt, arcu at accumsan accumsan, odio quam volutpat lacus, placerat eleifend sem urna nec purus. Vivamus velit erat, tincidunt non consequat a, fermentum vel lorem. Cras at metus vel elit iaculis lacinia quis eget est. Cras dictum rutrum lorem, eget condimentum lorem placerat et. In sodales ipsum ac neque varius id malesuada nunc lacinia. Sed sit amet magna lectus, at cursus lorem. Nulla lobortis lobortis tempor. Suspendisse potenti.</p>
</div>
<div class=”podnozje”>
<p>Quisque posuere adipiscing sollicitudin. Duis eget tellus nec mauris vehicula iaculis vel id orci. Cras faucibus sapien eu est ornare at imperdiet massa faucibus. Suspendisse in lectus non risus malesuada bibendum non vel turpis. Etiam in ultrices velit. Vestibulum quis commodo erat. Donec est diam, gravida mattis fringilla quis, dapibus auctor justo. Ut tempus orci hendrerit felis varius sit amet lacinia mi scelerisque. Ut lobortis massa ac ante dapibus eget hendrerit justo mollis. Ut metus augue, lacinia non sollicitudin vitae, accumsan a justo. Aliquam euismod orci sodales augue volutpat ullamcorper. Cras vitae nisi purus. Ut gravida neque ut diam ultricies pharetra. Mauris ut diam nunc, et fringilla mi. Vivamus lacus quam, mollis at auctor id, ultricies in turpis. Aliquam neque tortor, laoreet vel consectetur ac, facilisis at massa. Maecenas augue ligula, luctus eget venenatis a, gravida a dolor.</p>
</div>
</body>
</html>

***** css

@charset “utf-8″;
.zaglavlje p, .sadrzaj p, .podnozje p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
background-color: #ccc;
margin: 0 0 5px 0;
padding: 20px;
border-bottom: 3px solid #999;
}
.sadrzaj p {
border: 3px solid #999;
padding: 50px;
background-color: #efefef;
}

.podnozje p {
border-top: 3px solid #999;
border-bottom: none;
}

.sadrzaj, .podnozje, .zaglavlje {
background-color:#333;
padding:10px;
margin:10px;
}

a[href$=”.doc”]{
padding-right:20px;
background-image:url(page_white_word.png);
background-repeat:no-repeat;
background-position:right;

}
a[href$=”.xls”]{
padding-right:20px;
background-image:url(page_excel.png);
background-repeat:no-repeat;
background-position:right;
}
a[href$=”.pdf”]{
padding-right:20px;
background-image:url(page_white_acrobat.png);
background-repeat:no-repeat;
background-position:right;
}
a[href$=”.html”]{
padding-right:20px;
background-image:url(page_link.png);
background-repeat:no-repeat;
background-position:right;
}

DRUGI ZADATAK

<!DOCTYPE html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>6.1</title>
<link href=”stil.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div class=”omot”>
<div class=”tekst”>
<h1>Naslov</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt, tortor sed consequat convallis, lectus nibh imperdiet nunc, ac gravida massa tellus quis mauris. Mauris feugiat venenatis eros, non pulvinar ligula vulputate eget. Etiam fringilla massa non lorem placerat porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean leo nisl, suscipit rhoncus convallis nec, rhoncus a libero. In eget orci erat. Aenean id ullamcorper nisi. Praesent orci nisl, volutpat vel aliquam vel, ultricies sit amet felis. Donec fermentum rhoncus arcu vitae fermentum. Nullam elit nunc, malesuada ac bibendum ac, adipiscing et orci. Quisque ut suscipit mi. Donec lacinia risus et lectus feugiat sagittis adipiscing felis posuere. Aenean ultricies hendrerit purus, vitae semper lacus pulvinar mollis. Nullam pellentesque egestas vestibulum. Aenean sollicitudin ornare tortor in porttitor. Cras id tellus a sem consequat blandit a eu lorem. Maecenas augue metus, imperdiet eu pretium eleifend, porttitor et quam.</p>
<h2>Podnaslov</h2>
<p>Cras sed leo arcu, ut fermentum odio. Cras placerat, augue eu gravida varius, libero lectus aliquam nulla, eu blandit diam velit ac mi. Donec pretium, sapien id vehicula viverra, libero augue mattis tellus, a eleifend purus neque in neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dapibus, quam porttitor porttitor ultricies, nisl quam aliquet ligula, ac placerat est mi at nunc. Praesent egestas ante vel mauris blandit luctus. Etiam mattis malesuada quam. Sed a dui gravida magna tempor aliquam sed a nulla. Donec tellus enim, aliquam at pretium vel, eleifend id ipsum. Donec elit purus, auctor ut mattis ac, congue vitae nunc. Nulla vitae tempus felis.</p>
<h2>Podnaslov</h2>
<p>In nec erat augue. In hac habitasse platea dictumst. Vestibulum ultrices, enim vel vehicula congue, nulla mi tempor odio, eget suscipit sem urna ut nisl. Fusce feugiat, lectus quis hendrerit tempus, lorem libero malesuada nulla, ac scelerisque nunc urna ut quam. Pellentesque ut ultrices metus. Nulla gravida ornare turpis sit amet euismod. Ut leo erat, congue ac pulvinar ut, vehicula sed sem. Quisque egestas mauris quam, non laoreet velit. In sit amet est diam. Nam mattis viverra elit et viverra. Pellentesque quis aliquam ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin varius, lorem at vehicula imperdiet, lacus ipsum adipiscing velit, id vehicula sem odio id nisl. Donec vitae est ipsum, sed hendrerit mi. Aliquam erat volutpat. Sed lorem nunc, lacinia a molestie nec, tincidunt ut metus.</p>
</div>
</div>
</body>
</html>

ISPIT