Dizajn interaktivnih medija 1
1 Poglavlja 4 5 5. poglavlje
U petom poglavlju je za body text odarbano pismo Roboto slab koje ima pretežno mehaničku konstrukciju, ali u isto vrijeme nije pretje- rano geometrijski oblikovano što ga čini ugodnim za dugo čitanje. Veličina pisma je 14 px, a prored iznosi 1.6em. Prored je malo veći nego uobičajeno iz razloga što pismo ima viši x-height stoga traži više prostora među redovima. Boja slova nije čista crna nego malo svijetlija, tamno siva (#111111). Boja teksta je odabrana prema poza- dinskoj boji koja također nije nije čisto bijela već ima primjese plave boje (#f6fbff). Sve te boje su uvjetovane pozadinskom slikoma koja je većinom u tamnomodrim i plavim tonovima te kako bi se izbijegli veliki kontrasti između modre, bijele i ponovno crne, boje su lagano prigušene i više harmonične. Što na kraju doprinosi što ugodnojem čitanju ovoga teksta. Kako je peto poglavlje vrlo duga potrebno je unijeti određenu dinamiku u tekst da bi bilo zanimljivije za čitanje. Tako su dva dijela teksta na određen način izadvojena. Prvi izdvojeni dio obuhvača “tekst”, u biti govor iz knjige “The Hitchhiker’s Guide to the Galaxy”. Kako je to električna knjiga s time uvelike drugačija od naše uobi- čajene percepcije knjige, ideja je bila spoj jednog i drugog. Tako je taj dio teksta u pismu Josefin Slab iako je slab pismo jednako kao Roboto slab postoje znatne razlike među njima. Josefin Slab je daleko manje ugodnija za dugo čitanje zbog svog vrlo niskog x-he- ighta i velike razlike između visine verzala i kurenata. Zato što ima mehaničan oblik i vrlo je svijetle boje teksta, koja je dodatno nagla- šena s proredom većim nego što je potrebno, podsijeća na distor- zirani glas tehničke sprave. Veličina pisma je 16 px, a prored je 1.6 morem (vodom), a odabrano pismo je Nunito. Nunito je sans-serifno em. Drugi naglašeni dio je fusnota na dnu poglavlja koja ustvari nije pismo dosta geometrijsko i u rezu semi-bolda da bi se postigao efekt samo fusnota koja se referira na određeni pojam u teksu već je to i snage i prisutnosti glasa u našoj glavi koji ne možemo kontrolirati. završni dio poglavlja. Priča u knjizi kaže da Arthur stavlja ribicu u Naslov i podnaslov poglavlja je u pismu Bowlby One SC u verzalima uho koja mu objašnjava stvari i bića oko njega. Ideja je bila bojom i plave boje. Bowlby One SC je display pismo debelog reza te ima zao- pismom dočarat zvuk glasa ribice u uhu koji je u isto vrijeme pro- bljene rubove što mu daje dozu neozbiljnosti i zbog toga je prikladan doran i ugodan. Za fusnote je odabrana modra boja koja predstavlja ovakvoj vrsti književnosti koja ima elemente humora. Veličina naslova dubinu, ugodnost, znanje te je kao plava boja direktna poveznica s poglavlja je 5 em, a naslova djela 2 em.
6 7 HTML
/DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti-
onal.dtd”>
dal|Josefin+Slab|Lekton|Lilita+One|Oswald:300,400,500|Roboto+Slab|Signika+Nega-
tive:400,600&display=swap” rel=”stylesheet”>
rel=”stylesheet”>
tr:200,300,400,500,600,700&display=swap” rel=”stylesheet”
taa:300,400,500,600,700|Dosis:200,300,400,500,600,700,800|Fredoka+One|Nuni-
to:200,300,400,600,700,800,900|Rubik:300,400,500,700,900|Varela+Round&display=swap”
rel=”stylesheet”>
poglavlja/”>0
DIM1/1.html”>1
ZAD1/poglavlje2/chapter%2002.html”>2
8 9 ZAD1/poglavlje3/chapter%2003.html”>3
Vogons cut down and burned the crab meat with; elegant gazelle-like creatures with DIM1/Poglavlja/4/4.html”>4
as transport because their backs would snap instantly, but the Vogons sat on them DIM1/5.html”>5
HTML/6.html”>6
Vog years every last Vogon had migrated to the Megabrantis cluster, the political hub DIM1/7.html”>7
Service. They have attempted to acquire learning, they have attempted to acquire
Thus the planet Vogsphere whiled away the unhappy millennia until the
... style and social grace, but in most respects the modern Vogon is little different
wet slap
because they like the company, but
The Hitchhiker’s Guide to the Galaxy
mostly because it annoys the Vogons. Which is exactly the sort of thingChapter 5
Prostetnic Vogon Jeltz was not a pleasant sight, even for other Vogons.
His highly domed nose ros high above a small piggy forehead. His dark green rubbery skin was thick enough for him to play the game of Vogon Civil Service politics, and play it well, and waterproof enough for him to survive indefinitely at sea depths of up to a thousand feet with no ill effects.
Not that he ever went swimming of course. His busy schedule would not allow it. He was the way he was because billions of years ago when the Vogons had first crawled out of the sluggish primeval seas of Vogsphere, and had lain panting and heaving on the planet’s virgin shores... when the first rays of the bright young
Vogsol sun had shone across them that morning, it was as if the forces of evolution ad simply given up on them there and then, had turned aside in disgust and written them off as an ugly and unfortunate mistake. They never evolved again; they should never have survived.
The fact that they did is some kind of tribute to the thick-willed slug-brained stubbornness of these creatures. Evolution? they said to themselves,
Who needs it?, and what nature refused to do for them they simply did without until such time as they were able to rectify the grosser anatomical inconveniences with surgery.
Meanwhile, the natural forces on the planet Vogsphere had been working overtime to make up for their earlier blunder. They brought forth scintillating jewelled scuttling crabs, which the Vogons ate smashing their shells with iron mallets; tall aspiring trees with breathtaking slenderness and colour which the
10 11 float: left; CSS width: 616px; background-color: #f6fbff;
}
ul{
font-weight: regular;
margin: 0em;
*{ padding:0em;
margin:0; list-style: none;
padding:0;} float: center;
body{ width: 100%;
}
background-image: url("../image/uni.jpg"); li{
background-repeat: no-repeat; width:5.26%;
float: left;
background-size: cover; text-align: center;
background-attachment: fixed; margin-right: 0.1em;
}
text-align: center; .izbornik, .sadrzaj{
color: #111; padding: 0.80em;
text-rendering: optimizeLegibility !important; }
font-family: 'Roboto Slab', serif;
font-size: 14px; a, a:link, a:visited{
line-height: 1.6em; color: #111;
border-style: hidden; text-decoration: none;
} padding: 10px 10px;
.omot{ }
text-align: left; a:hover, a:active{
width: 640px; color: #6666aa;
margin: 0 auto; text-decoration: none;
} }
h1{
.sadrzaj{ margin: auto ;
float: left; margin-top: 2em;
width: 616px; font-family: 'Bowlby One SC', cursive;
background-color: #f6fbff; font-size: 2em;
} line-height: 1.5em;
color: #206677;
.izbornik{ text-align: center;
12 13 span.book{
} font-family: 'Josefin Slab',
serif;
h2{ font-size: 16px;
margin: 1.5em; color: armenian;
font-family: 'Bowlby One SC', cursive; }
font-size: 5em;
line-height: 1.5em; div.book {
color: #206677; margin-bottom: 3em;
text-align: center; margin-left: 2em;
float:center; margin-right: 4em;
} margin-top: 3em;
width: 90%;
h2{ box-sizing: border-box;
padding: 0.16em; }
}
div.footnotes {
p { margin-bottom: 3em;
margin-bottom: 1em; margin-left: 4em;
margin-left: 2em; margin-right: 4em;
margin-right: 1em; margin-top: 3em;
margin-top: 1em; width: 80%;
width: 90%; font-family:'Nunito', sans-se-
background-color: #f6fbff; rif;
font-weight: 600;
} font-size: 15px;
color: #6666aa;
span.ford{
font-family:'Roboto Slab', serif; }
font-size: 14px; div.stanka{
} margin-bottom: 1em;
margin-left: 0em;
span.arthur{ margin-right: 1em;
font-family:'Roboto Slab', serif; margin-top: 3em;
font-size: 14px; width: 90%;
}
}
span.captain{ @media only screen and (max-width: 663px) {
}
.omot {
14 15 width:80%; .izbornik{
margin: 0 10%; width:100%;
} }
.sadrzaj{
width:100%; p {
} margin: 1em;
width: 90%;
.izbornik{ }
width: 100%;
} ul{
.footnotes{ width: 100%;
width: 50%; padding:0.80em;
} margin:0em;
text-align: center;
ul{ }
width: 100%;
padding: 0.80em; li{width: 10%;}
}
h2{
li{ width: 100%;
width: 5.26%; font-size: 2.5em;
} margin:0em;
}
h2 {
margin: 0.3em; .sadržaj {
font-size: 3.5em; width: 100%;
} }
h1{ .book{
margin: auto; width:50%;
font-size: 1.3em; margin: 0em;
text-align: -webkit-center; }
float: center;
width: 50%;} .footnotes {
} margin-bottom: 3em;
@media only screen and (max-width: 380px){ margin-left: 2em;
margin-right: 4em;
.omot{ margin-top: 3em;
width:80%; width: 80%;
margin: 0 10%; }
} }
16 17 18 19 28.poglavlje
Dvadesetosmo poglavlje je drugacije oblikovano od petog poglavlja zbog toga što su u dvadesetosmom i davdesetdevetom poglavlju uglavnom dijalozi. Oni su naglašeni na nacin da svaki lik ima drugo pismo te da se kroz njega naglasi karakter lika, a da u isto vrijeme sva pisma medusobno budu dovoljno razlicita tako da nedode do miješanja. Za body tekst je odredeno pismo Zilla Slab u velicini 16 px s pro- redom 1.5 em. Zilla Slab je prvenstveno web pismo, a i ugodno je za duže citanje. Kroz poglavlje prloazimo kroz razgovor izmedu cetiri lika,a to znaci da imamo još cetiri fonta. edan od likova je Deeptho- ught. A on je humano racunalo, ali kako je elektronicko bice njegov font je dosta geometrijski, kvadratican, pomalo i hladan samo u svrhu naglašavanja Deepthoughtove elektronicke prirode. Kori- šteni sans-serifni font je Quantico, na velicini je od 16 px. Drugi lik je Loonquawl za kojeg je odabrano sans-serifno pismo Darker Grotesque. Velicina pisma je 19 px i u semi-boldu.Phouchg ima takoder sans-serifno pismo, Sarabun, koje je u italicu na velicini od 15 px. Italic iz razloga što je bilo teško naci pet potpuno razlicitih pisama koji ce se dovoljno razlikovati i donekle dobro slagati. Zadnji lik u poglavlju je Slartibartfast koji izgovara samo jednu recenicu na kraju. Njegovo pismo je EB Garamond na velicini od 19 px i u semi-boldu. Pozadinska boja tamno zelena (#006666) je više bazica kako bi podlozi teksta stvorila nekakav kontrast i osnažila dojam cijeloku- pnog uzbudenja kroz poglavlje koje na kraju završi s kratkim spo- jem i bez željenog odgovora. Ovog puta pozadina teksta je bijele boje s crnim slovima. Naslov i podnaslov su u Black Ops One pismu jako tamnoj zele- noj boji (#003333), velicina naslova poglavlja je 6 em,a knjge 1em. Ovo stencil pismo je odabrano zbog tehnickog karaktera, oštrih rubova,... Izbornik je u pismu Darker Grotesque i u svijetlo zelenoj boji.
20 21 HTML
The Hitchhiker’s Guide to the Galaxy
Chapter 28
It was a long time before anyone spoke.
TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Out of the corner of his eye Phouchg could see the sea of tense expe-
ctant faces down in the square outside.
”We’re going to get lynched aren’t we?
class=”phouchg”>” he whispered.
”htIt was a tough assignment,
ss=”deepthought”>” said Deep Thought mildly.
”Forty-two!” yelled tesque:400,500,600,700|EB+Garamond:400,600|Julius+Sans+One|Quantico|Sarabun:300i,40 Loonquawl. “Is that all you’ve got to show for seven and a
0,400i,500,500i,600,600i|Zilla+Slab:300,400&display=swap” rel=”stylesheet”> half million years’ work?”
”I checked it very thoroughly,
ss=”deepthought”>” said the computer, “and that quite
you’ve never actually known what the question is.”
”But it was the Great Question! The Ultimate
- Question of Life, the Universe and Everything!” howled
- 0 a>
- but
DIM1/1.html”>1
what actually is it?” - A slow stupefied silence crept over the men as they stared at the
ZAD1/poglavlje2/chapter%2002.html”>2
computer and then at each other. - ”Well, you know, it’s just Everything ...
ZAD1/poglavlje3/chapter%2003.html”>3
Everything ...” offered Phouchg weakly. - ”Exactly!” said
DIM1/Poglavlja/4/4.html”>4
Deep Thought. “So once you do know what the question actu- - ”
DIM1/5.html”>5
HTML/6.html”>6
- ” said Loonquawl, “can you just please tell us the html”>7 ... Question?”
”Yes,” said Deep
”Oh terrific,” muttered
”Look, alright, alright,
”The Ultimate Question?
22 23 hought”>”
”YES!”
CSS”Of Life, the Universe, and Everything?”
”YES!”
Deep Thought pondered this for a moment.
”Tricky,” he said.
Phouchg gaped at Deep Thought.
body{”What a dull name,” margin: 4px; he said and great incisions appeared down the length of his body. Loonquawl too padding: 1px; suddenly sustained horrific gashed from nowhere. The Computer console blotched and background-color:#006666; cracked, the walls flickered and crumbled and the room crashed upwards into its own ceiling ...
text-align: center;Slartibartfast was standing in front of Arthur holding the two wires. text-rendering: optimizeLegibility !important;
”End of the tape,” he expla- font-size: 16px; ined.
line-height: 1.5em;- width: 640px;
... margin: 0 auto;
.sadrzaj{
float: left;
width: 616px;
background-color: #ffffff;
}
.izbornik{
float: left;
width: 644px;
background-color: none;
font-family: ‘Darker Grotesque’, sans-serif;
font-weight: 700;
color: #003333;
margin-bottom: 1.5em;
24 25 margin-top: 2em; }
}
h2{ ul{ margin: 1em 0;
font-family: ‘Black Ops One’, cursive;
margin: 0em; font-size: 6em;
padding: 0em; line-height: 1.3em;
list-style: none; color: #003333;
width: 100%; text-align: center;
float: center; padding: 0.125em;
} li{ }
width: 5.263%;
float: left;
text-align: center;
margin-right: 0.1em; p {
margin-bottom: 1em;
} margin-left: 1em;
margin-right: 1em;
.sadrzaj{ margin-top: 1em;
padding: 0.75em; width: 95%;
} }
a, a:link, a:visited{ span.deepthought{
color: #eeeeee; font-family:’Quantico’, sans-serif;
text-decoration: none; font-size: 16px;
padding: 10px 10px; }
} a:hover, a:active{ span.Loonquawl{
color: #008b8b; font-family:’Darker Grotesque’, sans-serif;
text-decoration: none; font-size: 19px;
background-color: #eeeeee; font-weight:600;
} }
h1{ span.phouchg{
margin: 2em 0; font-family:’Sarabun’, sans-serif;
font-family: ‘Black Ops One’, cursive; font-size: 15px;
font-size: 1em; font-weight:400;
line-height: 1.5em; font-style:italic;
color: #003333; }
text-align: center;
26 27 span.pl{ margin:0em;
font-family: ‘Julius Sans One’, sans-serif; text-align: center;
font-size: 16px; }
}
h2 { span.stari{ font-size: 4em;
font-family:’EB Garamond’, serif; }
font-size:18 px; }
font-weight:600;
}
@media only screen and (max-width: 470px) { div.pauza{
margin-bottom: 3em; .izbornik {
margin-left: 0em; width: 100%;
margin-right: 1em; }
margin-top: 5em;
width: 100%; li {
} width: 10%;
}
@media only screen and (max-width: 670px) { h2 {
font-size: 2.5em;
.omot { }
width:80%;
margin: 0 10%; }
}
.sadrzaj{
width:100%;
}
.izbornik{
width: 100%;
}
il {
width: 5.263%;
}
ul{
width: 100%;
padding:0.75em;
28 29 30 31 29.poglavlje
Pismo body teksta je Solway, isto slab-serifno, medutim ovaj font je tamnije boje nego Zilla Slab pa ovog puta dijalozi su svijetlije boje teksta. Što je u predhodnom slucaju bilo drugacije. Velicina pisma je 16 px, a prored 1.3 em. Ovdije isto imamo cetiri lika i jednoglasje koje u verzalima pisma Bebas Neue, velicine 18 px. Ford je jedan od likova koji ima sans-serifno pismo Ubuntu na velicini 16 px. To pismo ima oštar i jako tehnican karakter te odgovara snažnom For- dovom liku. Zaphod je u serifnom pismu EB Garamond na velicini 18 px. Magrathean je u pismu Poppins na veicini 15 px, a Trillia je u sans-serifnom pismu Libre Franklin u italicu, na velicini 15 px. Pozadinski gradijent koji se preljeva iz crvene do ljubicate te ponovno do crvene. Takva pozadina je odabrana zbog teme poglav- lja tj. prica se o radanju, iluziji stvaranja raskošnog planeta pred ocima. Pismo za naslove i izbornik ima odredenu dinamiku u sebi pto simulira njihovo putovanje i iluzornu pojavu pred njima. Audiowide za naslov poglavlje je velicine 5 em, za naslov knjige 1 em i izbornika 16 px.
32 33 ... HTML
The Hitchhiker’s Guide to the Galaxy
CHAPTER 29
”Zaphod! Wake up!”
TR/xhtml1/DTD/xhtml1-transitional.dtd”>
”Mmmmmwwwwwerrrrr?”
”Hey come on, wake up.”
”Just let me stick to what I’m good at, yeah? span class=”zaphod”>” muttered Zaphod and rolled away from the voice back to sleep.
”Do you want me to kick you?”
ramond:400,500,600|Libre+Franklin:400,400i,500,500i,600,600i|Passion+One|Poppin-
”Would it give you a lot of pleasure? class=”zaphod”>” said Zaphod, blearily.
”No.”
”Nor me. So what’s the point? Stop bugging me. span class=”zaphod”>” Zaphod curled himself up.
”He got a double dose of the gas,
ss=”trillian”>” said Trillian looking down at him, “two windpipes.”
”And stop talking,” said
- Zaphod, “it’s hard enough trying to sleep anyway. What’s the
- ” lja/”>0
- With an amazingly balletic movement Zaphod was standing and scanning
DIM1/1.html”>1
the horizon, because that was how far the gold ground stretched in every direction, ZAD1/poglavlje2/chapter%2002.html”>2
like because nothing in the Universe gleams in quite the same way that a planet of ZAD1/poglavlje3/chapter%2003.html”>3
DIM1/Poglavlja/4/4.html”>4
DIM1/5.html”>5
- ”A catalogue,” said
HTML/6.html”>6
Trillian, “an illusion.” - ”How can you say that?” html”>7 cried Zaphod, falling to his hands and knees and staring at the ground. He poked it
”It’s gold,” said Ford.
”Who put all that there?”
”Don’t get excited,” said Ford,
”A who?”
34 35 and prodded it with his fingernail. It was very heavy and very slightly soft – chutes.
he could mark it with his fingernail. It was very yellow and very shiny, and when heIn a moment the scene vanished and left them in a springtime meadow breathed on it his breath evaporated off it in that very peculiar and special way full of cows.
that breath evaporates off solid gold. ...”Trillian and I came round a while ago,” said Ford. “We shouted and yelled till somebody came and then carried on shouting and yelling till they got fed
- with us. This is all Sens-O-Tape.”
Zaphod stared at him bitterly.
”Ah, shit,” he said, “ class=”zaphod”>you wake me up from my own perfectly good dream to show me somebody else’s.”
He sat down in a huff.
”What’s that series of valleys over there he said.
”Hallmark,” said Ford. “We had a look.”
”We didn’t wake you earlier,” said Trillian. “The last planet was knee deep in fish.”
”Fish?”
”Some people like the oddest things.”
”And before that,” said Ford,
“we had platinum. Bit dull. We thought you’d like to see this one though.”
Seas of light glared at them in one solid blaze wherever they looked.
”Very pretty,” said Zaphod petulantly.
In the sky a huge green catalogue number appeared. It flickered and changed, and when they looked around again so had the land.
As with one voice they all went, “Yuch.”
The sea was purple. The beach they were on was composed of tiny yellow and green pebbles - presumably terribly precious stones. The mountains in the distance seemed soft and undulating with red peaks. Nearby stood a solid silver beach table with a frilly mauve parasol and silver tassles.
In the sky a huge sign appeared, replacing the catalogue number. It said, Whatever your tastes, Magrathea can cater for you. We are not proud.
And five hundred entirely naked women dropped out of the sky on para-
36 37 CSS } ul{
font-weight: regular;
margin: 0em;
padding: 0em;
list-style: none;
float: center; body{ width: 100%;
margin: 3px; font-family:’Audiowide’, cursive;
padding: 0px; font-size: 13px;
background: rgb(125,9,150); background: radial-gradient(circle, rgba(125,9,150,1) 0%, rgba(255,255,0,1) 45%, } rgba(253,29,29,1) 93%); li{
width: 5.263%;
text-align: center; float: left;
color: #111; text-align: center;
text-rendering: optimizeLegibility !important; margin-right: 0.1em;
font-family: ‘Solway’, serif; margin-left:0em;
font-size: 16px; padding: 0;
line-height: 1.3em; }
} .sadrzaj{
.omot{ padding: 0.65em;
text-align: left; }
width: 640px;
margin: 0 auto; a, a:link, a:visited{
} color: #ffffff;
text-decoration: none;
.sadrzaj{ padding: 10px 10px;
float: left; }
width: 616px; a:hover, a:active{
background-color: #ffffff; color: #ffff00;
} text-decoration: none;
}
.izbornik{
float: left; h1{
width: 634px; margin-top: 8em;
background-color: none; margin-bottom: 0.5em;
margin-bottom: 2em; font-family: ‘Audiowide’, cursive;
margin-top: 1em; font-size: 1em;
38 39 line-height: 1.5em; }
color: #fe5a15;
text-align: center; span.all{
} font-family:’Bebas Neue’, cursive;
font-size: 18px; h2{ }
margin: 1em 0;
margin-bottom: 2.5em; span.trillian{
margin-top: 0em; font-family: ‘Libre Franklin’, sans-serif;
font-family: ‘Audiowide’, cursive; font-size: 15px;
font-size: 5em; font-style: italic;
line-height: 2em; }
text-align: center;
background: -webkit-linear-gradient(#fd1d1d, #ffff00); @media only screen and (max-width: 600px) {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; .omot {
padding: 0.13em; width:80%;
margin: 0 10%;
} }
.sadrzaj{ p { width:100%;
margin-bottom: 1em; }
width: 90%;
margin-left: 2em; .izbornik{
margin-right: 2 em; width: 100%;
} }
span.ford{ ul{
font-family:’Ubuntu’, sans-serif; width: 100%; font-size: 16px; padding:0.65em;
} margin:0em;
text-align: center; span.zaphod{ }
font-family: ‘EB Garamond’, serif;
font-size: 18px; il {
} width: 7.25%;
} span.magrathean{
font-family:’Poppins’, sans-serif; h2 {
font-size: 15 px; font-size: 3em;
}
40 41
}
@media only screen and (max-width: 500px){
.izbornik {
width: 100%;
}
li {
width: 10%;
}
}
@media only screen and (max-width: 350px) {
body {
font-size: 14px;
}
h2{ 3 web-a font-size: 2.5em;
}
}
42 Skica/kolaž
44 45 “3 web-a”
Stranica je trebala imati tri web elementa: klizni side bar, padajuci izbornik i slide fotografija. Stranica je organizirana u grid s marginama od 2 em, osim gor- nje koja iznosi 0.5 em. Informacije su s obzirom na važnost i vrijeme objavljivanja odijeljene u dvije grupe. Pva grupa su dva najnovija posta cija je širina 50%, a druga grupa su starij objave koje su orga- nizirane po cetiri u jednom redu. Slide s fotografijama se nalazi na vrhu stranice te kako se radi o stranici koja objavljuje novosti vezane u kulturu, vrte se slike pozna- tih umjetnika. Osnovno pismo je Zilla Slab jer je suvremeni font koje je izraden za korištenje na webu, ugodan je i nije pretjerano name- tljiv. Velicina body teksta je 15 px, a prored 1.5em. Naslovi objava u takoder u Zilli, ali ovog puta u bold rezu i na velicini od 2 em.Pojmovi u izborniku su velicine 25 px, sive su boje, a kad se kurzorom prede preko, pojam pobjeli. Ali u isto vrijeme se pokaže padajuci izbornik koje mu je velicina pisma nešto manja, 12 px te su pojmovo ružicate boje. Pojmovi se u izborniku nalaze jedan isod drugog. Na dnu stranice je footer s osnovim podacima i strelica koja nas vodi na sljedecu stranicu. Glavni naslov je u pismu Plaster zbog zanimljivog oblika koji se vrlo dobro slaže uz tematiku ove stranice, na velicini je od 7 em.
46 47 48 49 50 51 HTML
TR/xhtml1/DTD/xhtml1-transitional.dtd”>
tial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0”>
tter:400,700|Emilys+Candy|Plaster|Staatliches|Zilla+Slab+Highlight:400,700|-
Zilla+Slab:300,400,500,500i,600,600i,700&display=swap&subset=latin-ext”
rel=”stylesheet”>
Korejski superstar
Bong već godinama snima vrtoglave i zabavne filmove, a 2003. napravio je
08.01.2020.
Izložba Damira Sobote
Mlada slikarska nada na tragu najbolje tradicije Ivana Picelja
11.01.2020.
Maja Posavec i Ivan Kapec
Minimalistične, nenametljive i baš zato krasne i vješte obrade Leonarda
07.01.2020.
Catalonottijeva metoda
Posljednja ljubav inspektora Montalbana ispripovijedana ‘na talijanski
10.01.2020.
Slavni hvatski arhitekt
Jedna djevojčica poželjela je skidati kolačiće s mog kazališta Trešnja.
07.01.2020.
Šest šetnji Slave Raškaj
Facebook/DVK
Zagrebačka 3, 21000 Split
56 57 border: white; CSS color: black; padding: 1.5em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width:50%;
:root{ float: left;
--txt:#000000; font-family:’Plaster’, cursive;
--bck: #FFE4E1;
} }
html, body{margin-top: 0.5em; button:hover, button:active, button:visited, button:link{
margin-bottom: 2em; opacity: 50%;
margin-left: 2em; border: white;
margin-right: 2em; text-decoration: none;
padding:0;} } body{ .header{
color: black; background-color: var(--bck);
background: var(--bck); height: 4em;
font-family:’Zilla Slab’, serif; margin: 1.2em;
font-size: 15px; padding: 1.3em;
font-weight: 400; width: 100%;
line-height: 1.5em; float:center;
}
text-rendering: optimizeLegibility !important; h1{
} font-family: ‘Plaster’, cursive;
*, *:before, *:after, div, h1, h2, h3, h4, h5, h6, p, a, ol, dl, ul, span {box-sizing: font-size: 7em; border-box !important;} line-height: 1em;
.mySlides {
width: 100%%; text-align:center;
height: 60%; color: black;
overflow: hidden;
display: none; }
padding: 1.2em;
} .sidenav {
.mySlides:first-of-type{display:block} height: 100%; /* 100% Full-height */
width: 0;/*width - change this with JavaScript */
button{ position: fixed; /* Stay in place */
background-color: #FFE4E1; z-index: 1; /* Stay on top */
58 59 top: 0; /* Stay at the top */ border: none;
left: 0; width: culc(700px/3);
background-color: black; /* Black*/ text-align: center;
overflow-x: hidden; /* Disable horizontal scroll */ }
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ /* The container
} .padajuci {
position: relative;
.sidenav a { float: center;
padding: 1.5em 2.5em 1.5em 1.9em; padding-top:1.5em;
text-decoration: none; padding-bottom:1.5em;
font-size: 25px; }
color: #818181;
display: block; /* Dropdown Content (Hidden by Default) */
transition: 0.4s; .dropdown-content {
} display: none;
position: absolute;
.sidenav a:hover { background-color: white;
color: #f1f1f1; min-width: 160px;
} z-index: 1;
}
.sidenav .closebtn {
position: relative; /* Links inside the dropdown */
text-align: right; .dropdown-content a {
margin-right: 1.9em; color: pink;
font-size: 250%; padding-left: 2.5em;
padding: 0; font-size: 120%;
} text-align: left;
text-decoration: none;
#main { height: 10%;
transition: margin-left .5s;
padding: 20px; }
}
} /* Change color of dropdown links on hover */
.dropdown-content a:hover {color: #FF33FF;}
/* Dropdown Button */
.padajuci { /* Show the dropdown menu on hover */
background-color: black; .padajuci:hover .dropdown-content {display: block;}
color: white;
padding: 1.5em; /* Change the background color of the dropdown button when the dropdown content
font-size: 12px; is shown */
60 61 .padajuci:hover .dropdown-content{background-color: black;}
img{ width: 100%;}
.padajuci:hover{
height: 15em; .slika{
-webkit-transition: height 5s; /* Safari prior 6.1 */ width: 100%;
transition: height .5s; height: 0%;
} padding: 0.75em; h3{ }
font-family: ‘Zilla Slab’, serif; .cetvrt{
font-weight: 700; width: 25%;
font-size: 2em; height: 100%;
line-height:1.2em; overflow:hidden;
color:#8A2BE2; float: left;
margin-top: 0.15em; padding: 0.75em;
margin-bottom: 0.15em; }
padding: 0.5em;
} .slikac{
height: 100%; h3 a{ width: 100%;
text-decoration: none; padding: 0.75em;
color: black; overflow: hidden;
} }
h3 a:hover{ .date{
color: #800080; font-weight: 700;
text-decoration: none; color: #800080;
} }
p{ .footer{
padding-left: 0.75em; font-size:12px;
padding-right: 0.75em;
} float:left;
width:100%;
.pola{ line-height:0.5em;
margin-top: 0.75em; padding:0.75em;
width: 50%; }
overflow: hidden;
float: left; .next{
padding: 0.75em; font-size: 2em;
float:right;
} background-color: black;
62 63 padding:0.75em; font-size: 4em;
color:var(--bck); line-height:1em;
} padding-left: 0.4em;
.next:hover{ }
opacity: 50%; button{
} font-size:12px;
padding: 1.2em; a{ }
text-decoration:none; .sidenav {
color: purple; height: 100%; /* 100% Full-height */
font-weight:500; width: 0%; /* 0 width - change this with JavaScript */
}
}
@media only screen and (max-width: 1445px) { }
.cetvrt{
width: 25%; @media only screen and (max-width: 605px){
} .cetvrt{
.mySlides{ width:100%;
width:100%; font-size:15px;
}
} h3{
} font-size:2em;
line-height:1em;
@media only screen and (max-width: 1135px) { }
.pola{ button{
width: 100%; font-size:10px;
margin:0; padding: 0.8em;
} }
h1{font-size: 3em;}
.cetvrt{ }
width: 50%;
float: left; @media only screen and (max-width: 430px){
overflow: hidden; h1{
font-size:13px; font-size: 2.5em;
margin:0; }
} }
.slikac{width: 99%;} @media screen and (max-height: 450px) {
} .sidenav {padding-top: 15px;} h3{font-size:1.7em;} .sidenav a {font-size: 18px;}
@media only screen and (max-width: 750px){ }
h1{
64 65 Javascript
function openNav() {
document.getElementById(“mySidenav”).style.width = “350px”;
}
/* Set the width of the side navigation to 0 */ function closeNav() {
document.getElementById(“mySidenav”).style.width = “0px”;
}
var slideIndex = 1; showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName(“mySlides”);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
x[slideIndex-1].style.display = “block”;
}
66 67 68