| @@ -11,7 +11,7 @@ | ||
| <div id='loader'></div> | ||
| <div id="page"> | ||
| <!-- Begin Navbar --> | ||
| <nav id="navbar"></nav> | ||
| <script src="scripts/navbar.js" type="text/javascript"></script> | ||
| <!-- End Navbar --> | ||
|
|
||
| @@ -23,4 +23,5 @@ function parallex(){ | ||
| function load_page() { | ||
| document.getElementById("loader").style.display = "none"; | ||
| document.getElementById("loadpage").style.display = "none"; | ||
|
|
||
| } | ||
| @@ -0,0 +1,198 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="no"> | ||
| <!-- | ||
| FILE NAME: beregninger.html | ||
| WRITTEN BY: Sander Bjerklund Lindberg | ||
| WHEN: November 2017 | ||
| PURPOSE: Give info on calculations of beer brewing and tables for different beer sorts | ||
| --> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Beregninger</title> | ||
| <link rel="stylesheet" type="text/css" href="css/style.css"> | ||
| </head> | ||
| <body> | ||
| <div id='loadpage'></div> | ||
| <div id='loader'></div> | ||
| <div id="page"> | ||
| <!-- Begin Navbar --> | ||
| <div id="navbar"></div> | ||
| <script src="scripts/navbar.js" type="text/javascript"></script> | ||
| <!-- End Navbar --> | ||
| <div class="content"> | ||
| <div id="tittel"> | ||
| <img class="logo align-left" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <h1>Beregninger og Tabeller</h1> | ||
| <img class="logo align-right" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <hr> | ||
| </div> | ||
|
|
||
| <div class = "shortcutLinks"> | ||
|
|
||
| <a href="#kalkulator">Kalkulator</a> | ||
| <a href="#omkalkulasjonen">Om Kalkulasjonen</a> | ||
| <a href="#tabell">Tabell</a> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <div id="calculatorContainer"> | ||
|
|
||
| <div id="calculator"> | ||
| <section class="sectionDesign"> | ||
| <h2 id="kalkulator">Kalkulator</h2> | ||
| <form id="calculatorFrm"> | ||
| <p>Beregn ABV (alkoholprosent) her!</p> | ||
| <label for="og">Original gravity:</label> | ||
| <br> | ||
| <input type="number" name="og" id="og"> | ||
| <br> | ||
| <label for="fg">Endelig gravity:</label> | ||
| <br> | ||
| <input type="number" name="fg" id="fg"> | ||
| <br> | ||
| <button type="submit" id="btnSubmit">Regn om!</button> | ||
| <button type="button" id="btnReset">Tilbakestill</button> | ||
| </form> | ||
|
|
||
| <span id="result"></span> | ||
| </section> | ||
| <br> | ||
| <section class="sectionDesign"> | ||
| <h2 id="omkalkulasjonen">Om Kalkulasjonen</h2> | ||
| <p > | ||
| Mengden alkohol (i volum) i ølen bestemmes ved å måle gravitien før og etter gjæring. Med mindre du legger til gjæringselementer | ||
| etter målt gravity, fil du kunne bruke disse tallene for å beregne alkohol i volum. Dette skyldes | ||
| at alkohol har lavere tetthet enn vann. Og derfor, ettersom noen av ingrediensene dine blir omdannet | ||
| til alkohol, reduseres ølens tetteht. | ||
| <br> | ||
| <br> Formelen som brukes i kalkulatoren over lyder som følger: | ||
| <br> | ||
| </p> | ||
| <blockquote> | ||
| <b>ABV = (OG - EG) * 131.25</b> | ||
| <br> (OG = Original Gravity, EG = Endelig Gravity) | ||
| </blockquote> | ||
| </section> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <br> | ||
| <section class="sectionDesign"> | ||
|
|
||
| <h2 id="tabell">Tabell</h2> | ||
| <div id="tableDiv"> | ||
| <table> | ||
| <tr> | ||
| <th>SRM/Lovibond</th> | ||
| <th>Example</th> | ||
| <th>Beer color</th> | ||
| <th>EBC</th> | ||
| </tr> | ||
| <tr> | ||
| <td>2</td> | ||
| <td>Berliner Weisse, Pale Lager, Witbier, Pilsener</td> | ||
| <td style="background:#F8F753; color:#000000; font-family:monospace;"></td> | ||
| <td>4</td> | ||
| </tr> | ||
| <tr> | ||
| <td>3</td> | ||
| <td>Blonde Ale, Maibock</td> | ||
| <td style="background:#F6F513; color:#000000; font-family:monospace;"></td> | ||
| <td>6</td> | ||
| </tr> | ||
| <tr> | ||
| <td>4</td> | ||
| <td>Weissbier</td> | ||
| <td style="background:#ECE61A; color:#000000; font-family:monospace;"></td> | ||
| <td>8</td> | ||
| </tr> | ||
| <tr> | ||
| <td>6</td> | ||
| <td>India Pale Ale, American Pale Ale</td> | ||
| <td style="background:#D5BC26; color:#000000; font-family:monospace;"></td> | ||
| <td>12</td> | ||
| </tr> | ||
| <tr> | ||
| <td>8</td> | ||
| <td>Saison, Weissbier</td> | ||
| <td style="background:#BF923B; color:#000000; font-family:monospace;"></td> | ||
| <td>16</td> | ||
| </tr> | ||
| <tr> | ||
| <td>10</td> | ||
| <td>ESB, English Bitter</td> | ||
| <td style="background:#BF813A; color:#000000; font-family:monospace;"></td> | ||
| <td>20</td> | ||
| </tr> | ||
| <tr> | ||
| <td>13</td> | ||
| <td>Double IPA, Biere de Garde</td> | ||
| <td style="background:#BC6733; color:#000000; font-family:monospace;"></td> | ||
| <td>26</td> | ||
| </tr> | ||
| <tr> | ||
| <td>17</td> | ||
| <td>Amber Ale, Vienna Lager, Dark Lager, Marzen</td> | ||
| <td style="background:#8D4C32; color:#ffffff; font-family:monospace;"></td> | ||
| <td>33</td> | ||
| </tr> | ||
| <tr> | ||
| <td>20</td> | ||
| <td>Dunkelweizen, Brown Ale, Bock, Dunkel, Dunkelweizen</td> | ||
| <td style="background:#5D341A; color:#ffffff; font-family:monospace;"></td> | ||
| <td>39</td> | ||
| </tr> | ||
| <tr> | ||
| <td>24</td> | ||
| <td>Porter, Irish Dry Stout, Doppelbock</td> | ||
| <td style="background:#261716; color:#ffffff; font-family:monospace;"></td> | ||
| <td>47</td> | ||
| </tr> | ||
| <tr> | ||
| <td>29</td> | ||
| <td>Stout</td> | ||
| <td style="background:#0F0B0A; color:#ffffff; font-family:monospace;"></td> | ||
| <td>57</td> | ||
| </tr> | ||
| <tr> | ||
| <td>35</td> | ||
| <td>Baltic Porter, Foreign Stout</td> | ||
| <td style="background:#080707; color:#ffffff; font-family:monospace;"></td> | ||
| <td>69</td> | ||
| </tr> | ||
| <tr> | ||
| <td>40+</td> | ||
| <td>Imperial Stout</td> | ||
| <td style="background:#030403; color:#ffffff; font-family:monospace;"></td> | ||
| <td>79</td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| </div> | ||
| </section> | ||
|
|
||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- Footer--> | ||
| <div id='footer'></div> | ||
| <script src="scripts/footer.js"></script> | ||
|
|
||
| <!-- End Footer--> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <script src="scripts/calculator.js" type="text/javascript"></script> | ||
| <script src="scripts/parallexEffect.js" type="text/javascript"></script> | ||
| <script src="scripts/olmoeler.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
| @@ -0,0 +1,126 @@ | ||
| <!--<!DOCTYPE html> | ||
| <html lang="no"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Bildegalleri</title> | ||
| <link rel="stylesheet" href="css/style.css" type="text/css"> | ||
| </head> | ||
| <body> | ||
| <div id='loadpage'></div> | ||
| <div id='loader'></div> | ||
| <div id="page"> | ||
| <div id="navbar"></div> | ||
| <script src="scripts/navbar.js" type="text/javascript"></script> | ||
| <div class="content" id="content"> | ||
| <div id="tittel"> | ||
| <img class="logo align-left" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <h1>Bildegalleri</h1> | ||
| <img class="logo align-right" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <hr> | ||
| </div> | ||
| <div class="imageView"> | ||
| <div id="slideshow"> | ||
| <img id="slideshowImage" src="images/bildegalleri/0.jpg"> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div id="imageContainer" class="imageContainer"></div> | ||
| </div> | ||
| </div> | ||
| <script src="scripts/bildeGalleri.js"></script> | ||
| <script src="scripts/olmoeler.js"></script> | ||
| <script src="scripts/parallexEffect.js" type="text/javascript"></script> | ||
| </body> | ||
| </html>--> | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="no"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Bildegalleri</title> | ||
| <link rel="stylesheet" href="css/style.css" type="text/css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id='loadpage'><div id='loader'></div></div> | ||
|
|
||
| <div id="page"> | ||
|
|
||
| <!-- Begin Navbar --> | ||
| <div id="navbar"></div> | ||
| <script src="scripts/navbar.js" type="text/javascript"></script> | ||
| <!-- End Navbar --> | ||
|
|
||
| <div class="content" id="content"> | ||
|
|
||
| <div id="tittel"> | ||
| <a href="index.html"> | ||
| <img alt="logo" class="logo align-left" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| </a> | ||
| <h1>Bildegalleri</h1> | ||
| <a href="index.html"> | ||
| <img alt="logo" class="logo align-right" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| </a> | ||
| <hr> | ||
| </div> | ||
| <!-- | ||
| <div class="imageView"> | ||
| <div id="slideshow"> | ||
| <a id="prev" href="#" class="previous round">‹</a> | ||
| <img alt="slideshow" id="slideshowImg" src="images/bildegalleri/0.jpg"> | ||
| <a id="next" href="#" class="next round">›</a> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| --> | ||
|
|
||
| <section class = sectionDesign> | ||
| <div id="centerlizeGalleri"> | ||
| <div id="wrapperGalleri" class="imageContainer"></div> | ||
| </div> | ||
| </section> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- Footer--> | ||
| <div id='footer'></div> | ||
| <script src="scripts/footer.js"></script> | ||
|
|
||
| <!-- End Footer--> | ||
| </div> | ||
| <div id="overlay-back" onclick="clickOverlay()"> | ||
|
|
||
| </div> | ||
| <div id="coverGalleri" onclick="clickOverlay()"> | ||
|
|
||
|
|
||
| </div> | ||
| <script src="scripts/bildeGalleri.js" type="text/javascript"></script> | ||
| <script src="scripts/olmoeler.js"></script> | ||
| <script src="scripts/parallexEffect.js" type="text/javascript"></script> | ||
| </body> | ||
|
|
||
| </html> |
| @@ -0,0 +1,170 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="no"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Bryggeguide</title> | ||
| <link rel="stylesheet" href="css/style.css" type="text/css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id='loadpage'></div> | ||
| <div id='loader'></div> | ||
| <div id="page"> | ||
| <!-- Begin Navbar --> | ||
| <div id="navbar"></div> | ||
| <script src="scripts/navbar.js" type="text/javascript"></script> | ||
| <!-- End Navbar --> | ||
|
|
||
| <div id="content" class="content"> | ||
| <div id="tittel"> | ||
| <img class="logo align-left" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <h1>Bryggeguide</h1> | ||
| <img class="logo align-right" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <hr> | ||
| </div> | ||
|
|
||
|
|
||
| <div class = "shortcutLinks"> | ||
|
|
||
| <a href="#ingredienser">Ingredienser</a> | ||
| <a href="#faser">Faser</a> | ||
|
|
||
| <a href="#utstyr">Utstyr</a> | ||
| <a href="#oppskrift">Oppskrift</a> | ||
| <a href="#forskjelligeøltyper">Forskjellige Øltyper</a> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <section class="sectionDesign"> | ||
| <p>Det finnes mange forskjellige øltyper, og alle kan brygges fra tryggheten i din egen stue eller garasje. Som du kanskje skjønner avhenger øltypen du får helt an på bryggeprosessen. Noe øl bruker byggmalt, annet bruker hvetemalt, noe har mye humle, mens annet har lite. Kort sagt; det finnes uendelig mange måter å brygge øl på så bare fantasien setter grenser. Siden dette er en guide vil det her hovedsaklig tas fram kjente øltyper som er enkle å brygge med høy sannsynlighet for suksess, <b>om gjort riktig!</b></p> | ||
| </section> | ||
|
|
||
| <br> | ||
|
|
||
| <section class="sectionDesign"> | ||
| <h2 id = "ingredienser" >Ingredienser</h2> | ||
|
|
||
| <ol class="rounded-list"> | ||
|
|
||
| <li>Spiret og tørket byggmalt som er knust (kan som oftest knuses der du kjøper kornet). Noen øltyper er brygget på hvetemalt.</li> | ||
| <li>Humle som gir den bitre smaken i ølet (type og mengde varierer veldig fra øl til øl).</li> | ||
| <li>Gjær tilsettes sist før lagring. Den spiser sukkeret fra malten og danner etanol og kullsyre.</li> | ||
| <li>Sukker (tilsettes helt til slutt før tapping på flaske. Gjæren spiser sukkeret og danner CO<sub>2</sub> som gir kullsyren og skummet til ølen).</li> | ||
| </ol> | ||
|
|
||
| </section> | ||
| <br> | ||
|
|
||
| <section class="sectionDesign"> | ||
|
|
||
| <h2 id = "faser">Faser</h2> | ||
| <p >Ølbrygging kan deles inn i noen hovedfaser som ofte går igjen i ølbrygging:</p> | ||
| <ol class="rounded-list"> | ||
|
|
||
|
|
||
| <li>Vann varmes opp til en temperatur i en stor kjele, gjerne ett par grader over det oppskriften sier. Når vannet ligger jevnt ved denne temperaturen kan malten tilsettes i en egen maltpose som lar vannet renne gjennom men holder på kornet, dette burde senke temperaturen ned til det oppgitt i oppskriften. Kjelen skal holdes konstant på denne temperaturen i en gitt tid.</li> | ||
| <li>Når tiden er over tas maltposen ut, og blandingen skal kokes over en periode. Noe av humlen blir tilsatt i løpet av denne perioden, men dette varierer.</li> | ||
| <li>Nå skal brygget kjøles ned så raskt som overhode mulig. Dette gjøres ved å ha rør ned i brygget som det renner kaldt vann gjennom.</li> | ||
| <li>Brygget blir så helt opp i kar som det skal gjære i, og gjæren blir tilsatt. Det er viktig å ha en lokkemekanisme som slipper ut CO<sub>2</sub> som blir produsert, men som ikke slipper inn oksygen.</li> | ||
| <li>Etter en kortere lagringsperiode blir brygget helt over i et nytt kar, hvor gjærrester på bunn og topp blir værende igjen. Deretter tilsettes sukkeret blandet ut i vann, og brygget helles over i flasker som korkes.</li> | ||
| <li>Ølet blir nå i flaskene i en lengre lagringsperide. Sitt og vent. Kjøp deg gjerne en pils og se på fotball med kompisgjengen. Mal garasjen så du viser kona at du kan være produktiv også i denne fasen.</li> | ||
| <li>Suksess! Etter lagringsperioden skal du i teorien ha ditt eget øl klart på flaske. Len deg bakover, åpne den første flasken og hør den magiske lyden av øl som bruser.</li> | ||
| </ol> | ||
| </section> | ||
| <br> | ||
|
|
||
| <section class="sectionDesign"> | ||
|
|
||
| <h2 id = "utstyr">Utstyr</h2> | ||
| <p>Om man skal brygge selv er det viktig å investere i riktig utstyr først. Dette kan fort bli litt dyrt, som er hvorfor folk (og spesielt studenter) ofte går sammen i laug for å spleise på dette. Vanlig bryggevolum er på rundt 25L per batch som denne guiden er brygget rundt. Om du skal begynne selv er dette det du trenger:</p> | ||
| <ol class="rounded-list"> | ||
|
|
||
|
|
||
| <li>Fermenteringdunk med gjærlås hvor gjæret kan godgjøre seg uten oksygen tilstede. Gjærlåsen slipper ut CO2, men hindrer oksygen i å slippe inn. Når gjæren prøver å "fordøye" sukkeret uten oksygen tilstede danner den etanol, på samme måte som vi danner melkesyre. Kan være greit å ha to for omtapping for å skille vekk klumper med gjær og eventuell humle.</li> | ||
| <li>Gryte i enten stål eller aluminium. Den bør ha tappekran med kulelås om mulig for enkel tapping, og helst ha et volum på minst 30L. Brukes aluminium vær forsiktig så du ikke skrubber løs det beskyttende oksidasjonlaget på overflaten som hindrer metallisk smak på ølet.</li> | ||
| <li>Termometer for å ha oversikt over temperaturen er fundamentalt. I meskingsprosessen er det viktig at blandingen ligger stabilt på riktig temperatur for at ølet blir riktig, og man må også passe på at blandingen er godt nok avkjølt før tapping. Digitalt termometer er anbefalt, men vanlig termometer funker også.</li> | ||
| <li>BIAB pose, også kjent som meskepose. Brukes til å holde på malten under meskingsprosessen, hvor den lar vann og sukker slippe gjennom men holder på kornene.</li> | ||
| <li>Saniteringsblanding er også vitalt for en god batch. Folk tenker kanskje ikke så ofte på det, men forskjellen på en god og en dårlig øl er ofte at utstyret er desinfisert godt nok så ikke bakterier slipper til. Gjær trives best alene, og må det sloss med bakterier om næringsstoffene vil dette drastisk påvirke smaken. Hvilke blandinger som brukes varierer litt. Noen bruker sterk base (kaustisk soda / KOH) til rengjøring og deretter fosforsyre til desinfisering, men Star San desinfiseringsmiddel er også populært.</li> | ||
| <li>Sleiv med langt skaft gjør det lettere å røre og passe på at alt er godt blandet.</li> | ||
| <li>Litermål er kjekt å ha uansett, men til ølbrygging bør du ha et på rundt 3-5L.</li> | ||
| <li>Tomflasker trengs som alle vet om man skal lage øl. 50 halvlitere, eller 75 0,33-litersflasker burde være mer enn nok. Flasker kan kjøpes til pantepris på de fleste daglivarebutikker. I tillegg trengs børste til rengjøring og desinfisering, nye korker og korkemaskin.</li> | ||
| <li>Silikonslanger og tappestang for tapping av ølet enten på omtapp i nytt kar eller på flaske.</li> | ||
| <li>Kjølecoil er ikke et "must", men hjelper ganske mye. Det kjøres kaldt vann gjennom den og has oppi etter kokingen for å raskt kjøle ned blandingen før tapping.</li> | ||
| <li>Hydrometer er heller ikke noe man må ha, men det gjør det mulig å kalkulere alkoholprosenten på brygget. Hydrometeret måler gravity, som er det som brukes i alkoholkalkulatoren. Målingene gjøres før lagring og før tapping på flaske, og endringen gjør det mulig å se hvor mye alkohol som er dannet.</li> | ||
| </ol> | ||
|
|
||
| </section> | ||
|
|
||
| <br> | ||
|
|
||
| <section class="sectionDesign"> | ||
|
|
||
| <h2 id = "oppskrift">Basisoppskrift IPA </h2> | ||
|
|
||
| <h3>Nøkketall:</h3> | ||
|
|
||
| <p>OG: 1,064, FG: 1,011, alkohol: 6,9%</p> | ||
|
|
||
|
|
||
| <h3>Ingredienser:</h3> | ||
|
|
||
| <ol class="rounded-list"> | ||
| <li>5,0 kg pale malt</li> | ||
| <li>0,4 kg karamellmalt</li> | ||
| <li>85 g Cascade (humle) (kokes 60 minutter, tilpasses til 60 IBU)</li> | ||
| <li>15 g Cascade (kokes 10 minutter) | ||
| </li> | ||
| <li>15 g Cascade (kokes 2 min)</li> | ||
| <li>15 g Cascade (tilsettes ved start av kjøling)</li> | ||
| <li>20 g Cascade til tørrhumling (tilsettes ca 5 dager etterpå)</li> | ||
| <li>Nøytral alegjær</li> | ||
|
|
||
|
|
||
|
|
||
| </ol> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| Fremagngsmåte: | ||
|
|
||
| Meskes ved 63 grader i 60 minutter. Gjæres ved 20 grader. | ||
| <p >Ølbrygging kan deles inn i noen hovedfaser som ofte går igjen i ølbrygging:</p> | ||
|
|
||
| </section> | ||
| <br> | ||
|
|
||
| <section class="sectionDesign"> | ||
|
|
||
| <h2 id = "forskjelligeøltyper">Forskjellige øltyper</h2> | ||
|
|
||
| <h3>Pale Ale</h3> | ||
| <p>Pale Ale (evt Indian Pale Ale eller American Pale Ale) regnes av mange som det greieste å begynne med når du er ny med ølbrygging. Ikke fordi du ikke gjør feil, men fordi den inneholder forholdsvis mye humle som tildekker smaken av eventuelle tabber. Disse er fortsatt forholdsvis enkle å brygge og har kort gjæringsperiode så de anbefales varmt til de som er nye i gamet. <b>Obs, humlen gir den bitre smaken i ølet så IPA, APA, og Pale Ale regnes som noen av de bitreste øltypene.</b></p> | ||
|
|
||
| <h3>Hveteøl</h3> | ||
| <p>Hveteøl får navnet sitt fra hvetemalt som brukes ved siden av byggmalten, og utgjør som regel mer enn halvparten av malten. Tyskland har tradisjonelt vært hovedprodusent av hveteøl, men også i Belgia, og i nyere tid vestkysten av USA, produseres den mye. Hveteøl kjennetegnes ved at den ofte er overgjæret og ufiltrert, og har generelt en lysere farge en øl fra rent bygg. Hveteøl lagres kaldt, over en lengre periode enn Pale Ale, og finnes både som pils og som sterkøl.</p> | ||
|
|
||
| <h3>Lager</h3> | ||
| <p>Lager, også kalt undergjæret øl, finnes hovedsaklig i to hovedgrupper; lys lager og mørk lager. Pils, som er den mest populære ølen i Norge, er en lys lager. Mørk lager kjennes nok best av mange som Bayer, og er som regel søtere og mindre bitter enn lys lager.</p> | ||
| <h3>Porter og strout</h3> | ||
| <p>Porter er kjent som en kraftig og mektig ale, med lang lagringstid. Malten skal være brent, og har ofte en mørk smak av karamell, sjokolade eller kaffe. Stout er på en måte storebroren til porter i og med at den er en porter som tar alt et steg videre. Stout er neste helt sort og er nesten et måltid i seg selv. Guinness er en stout.</p> | ||
| </section> | ||
| <br> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
| <!-- Footer--> | ||
| <div id='footer'></div> | ||
| <script src="scripts/footer.js"></script> | ||
|
|
||
| <!-- End Footer--> | ||
|
|
||
| </div> | ||
| <script src="scripts/olmoeler.js"></script> | ||
| <script src="scripts/parallexEffect.js" type="text/javascript"></script> | ||
| </body> | ||
|
|
||
| </html> |
| @@ -0,0 +1,49 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="no"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Bryggelaug</title> | ||
| <link rel="stylesheet" type="text/css" href="css/style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="page"> | ||
|
|
||
| <!-- Begin Navbar --> | ||
| <div id="navbar"></div> | ||
| <script src="scripts/navbar.js" type="text/javascript"></script> | ||
| <!-- End Navbar --> | ||
|
|
||
|
|
||
| <div id="content" class="content"> | ||
| <div id="tittel"> | ||
| <a href="index.html"> | ||
| <img alt="logo" class="logo align-left" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| </a> | ||
| <h1>Gløshaugens Bryggelaug</h1> | ||
| <a href="index.html"> | ||
| <img alt="logo" class="logo align-right" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| </a> | ||
| <hr> | ||
| </div> | ||
| <h3>Liste over Gløshaugens bryggelaug</h3> | ||
| <p>Klikk på logoen for mer informasjon</p> | ||
| <div id="wrapperLaug"></div> | ||
| </div> | ||
| <div id="overlay-back" onclick="clickOverlay()"></div> | ||
| <div id="cover"></div> | ||
|
|
||
| <!-- Footer--> | ||
| <div id='footer'></div> | ||
| <script src="scripts/footer.js"></script> | ||
|
|
||
| <!-- End Footer--> | ||
| </div> | ||
|
|
||
| <script src="scripts/bryggeLaug.js" type="text/javascript"></script> | ||
| <script src="scripts/olmoeler.js"></script> | ||
| <script src="scripts/parallexEffect.js" type="text/javascript"></script> | ||
| </body> | ||
|
|
||
| </html> |
| @@ -0,0 +1,129 @@ | ||
| .navt { | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| text-align: center; | ||
| background-image: url("../images/testbackground.png"); | ||
|
|
||
| } | ||
| .navt li { | ||
|
|
||
| display: inline; | ||
| } | ||
| .navt a { | ||
|
|
||
| display: inline-block; | ||
| padding: 0 12px; | ||
| font-weight: normal; | ||
| color: white; | ||
| height: 44px; | ||
| line-height: 44px; | ||
| } | ||
| .navt li a:hover { | ||
| color: white; | ||
| background-color: pink; | ||
| } | ||
| .navt img { | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| #logo{ | ||
|
|
||
| max-height:200px; | ||
| width: auto; | ||
| margin: 0 auto; | ||
| display:inline-block; | ||
|
|
||
| } | ||
| body { | ||
| font-size: 17px; | ||
| font-family: "Proxima Nova", "Times New Roman", "sans-serif"; | ||
| line-height: 150%; | ||
| background-image: url("../images/beerpattern3.jpg"); | ||
| background-repeat: repeat; | ||
| } | ||
|
|
||
| .content{ | ||
| background-color:#faf5f2; | ||
| width:100%; | ||
| height:auto; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| h1{ | ||
| padding-top :0; | ||
| margin-top:0; | ||
| text-align:center; | ||
| } | ||
|
|
||
|
|
||
| .container { | ||
| width: 150px; | ||
| height: 150px; | ||
|
|
||
|
|
||
|
|
||
| float:left; | ||
| margin: 12px; | ||
| /* add following */ | ||
| background-size:cover; | ||
| background-position:50% 50%; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .container:hover{ | ||
| width:170px; | ||
| height:170px; | ||
| margin: 0px; | ||
|
|
||
| border:black solid 2px; | ||
|
|
||
| } | ||
| .imageGrid{ | ||
| width:80%; | ||
| margin:0 auto; | ||
| display:block; | ||
|
|
||
| } | ||
|
|
||
| .imageView img{ | ||
|
|
||
|
|
||
|
|
||
| } | ||
| .imageView{ | ||
|
|
||
| display:inline-block; | ||
| width:100%; | ||
|
|
||
| text-align:center; | ||
|
|
||
| } | ||
|
|
||
| .imageView a { | ||
| text-decoration: none; | ||
|
|
||
| padding: 8px 16px; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .imageView a:hover { | ||
| background-color: #ddd; | ||
| color: black; | ||
| } | ||
|
|
||
| .previous { | ||
| background-color: #f1f1f1; | ||
| color: black; | ||
| } | ||
|
|
||
| .next { | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| } | ||
|
|
||
| .round { | ||
| border-radius: 50%; | ||
| } |
| @@ -0,0 +1,128 @@ | ||
| #page:before { | ||
| content: " "; | ||
| position: absolute; | ||
| z-index: -1; | ||
| top: 5px; | ||
| left: 5px; | ||
| right: 5px; | ||
| bottom: 5px; | ||
| border: 5px solid #ffea00; | ||
| } | ||
| #developersDiv{ | ||
| font-style: italic; | ||
| } | ||
|
|
||
| #liste { | ||
| list-style-type: none; | ||
| padding: 0; | ||
| font-weight: bold; | ||
|
|
||
| } | ||
|
|
||
| body { | ||
| font-size: 17px; | ||
| font-family: "Proxima Nova", "Times New Roman", "sans-serif"; | ||
| line-height: 150%; | ||
| background-image: url("../images/beerpattern3.jpg"); | ||
| background-repeat: repeat; | ||
| } | ||
|
|
||
| #problemsList { | ||
| text-align: left; | ||
| margin: auto; | ||
| margin-bottom: 10px; | ||
| width: 25%; | ||
| list-style-type: none; | ||
| } | ||
| #logoBilde{ | ||
| width:200px; | ||
| height:auto; | ||
| } | ||
|
|
||
| .link{ | ||
| position:relative; | ||
| top:-20px; | ||
|
|
||
| font-size:16px; | ||
|
|
||
| } | ||
|
|
||
| p { | ||
| margin: auto; | ||
| width: 600px; | ||
| } | ||
|
|
||
| #page { | ||
| position:relative; | ||
| margin: auto; | ||
| width: 800px; | ||
| text-align: center; | ||
| padding: 5px; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| .double-border { | ||
| background-color: #ffffff; | ||
| border: 2px solid black; | ||
| padding: 2em; | ||
| width: 800px; | ||
| height: auto; | ||
| position: relative; | ||
| margin: 0 auto; | ||
| margin-top: 50px; | ||
| } | ||
|
|
||
| .double-border:before { | ||
| background: none; | ||
| border: 8px solid #aeccca; | ||
| content: ""; | ||
| display: block; | ||
| position: absolute; | ||
| top: 4px; | ||
| left: 4px; | ||
| right: 4px; | ||
| bottom: 4px; | ||
| pointer-events: none; | ||
| } | ||
| #headingOne,h2 { | ||
| color: #c9587b; | ||
| text-shadow: 1px 1px 1px #d0b08f; | ||
| text-align: center; | ||
|
|
||
|
|
||
| } | ||
| #headingOne{ | ||
| position:relative; | ||
| top:-20px; | ||
| } | ||
| hr{ | ||
| border: none; | ||
| height: 2px; | ||
| /* Set the hr color */ | ||
| color: #333; /* old IE */ | ||
| background-color: #333; /* Modern Browsers */ | ||
| } | ||
| #innholdListe { | ||
| padding: 0; | ||
| text-align: center; | ||
| } | ||
| #innholdListe>li { | ||
| list-style-type: none; | ||
| font-weight: bold; | ||
| } | ||
| #innholdListe>li>p { | ||
| font-weight: 100; | ||
| text-align: center; | ||
| } | ||
| #spesielleKrav{ | ||
| text-align:center; | ||
| } | ||
| a { | ||
| color: #c9587b; | ||
| text-decoration: none; | ||
| } | ||
| a:hover { | ||
| font-size: 102%; | ||
| color: #b45569; | ||
| } |
| @@ -0,0 +1,83 @@ | ||
|
|
||
| body { | ||
| background-image: url("../images/beerpattern3.jpg"); | ||
| width: 80%; | ||
| margin: 0 auto; | ||
|
|
||
| } | ||
|
|
||
| .content{ | ||
| background-color:#faf5f2; | ||
| } | ||
|
|
||
| .navt { | ||
| list-style: none; | ||
| margin: 0 auto; | ||
| padding: 0; | ||
| text-align: center; | ||
|
|
||
|
|
||
| background-image: url("../images/testbackground.png"); | ||
|
|
||
| } | ||
|
|
||
| h1{ | ||
| margin-top:0; | ||
| text-align:center; | ||
| color:orange; | ||
| } | ||
| .navt li { | ||
|
|
||
| display: inline; | ||
| text-decoration: none; | ||
|
|
||
| } | ||
| .navt a { | ||
|
|
||
| display: inline-block; | ||
| /*padding: 0 12px;*/ | ||
| font-weight: normal; | ||
| font-size: 1.5vw; | ||
| color: white; | ||
| height: 44px; | ||
| line-height: 44px; | ||
| text-decoration: none; | ||
| /*padding: 14px 16px;*/ | ||
| padding: 14px 0.5vw; | ||
| font-family:Apple Chancery, sans-serif; | ||
| } | ||
| nav { | ||
| top: 60px; | ||
| position: absolute; | ||
| width: 90%; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| overflow: hidden; | ||
| background-color: #b4501a | ||
| } | ||
| nav>ul { | ||
| margin: 0 auto; | ||
| width: 40%; | ||
| } | ||
| #logo { | ||
| display: block; | ||
| align-self: left; | ||
| } | ||
| .navt li a:hover { | ||
| color: white; | ||
| background-color: pink; | ||
| } | ||
| .navt img { | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| #logo{ | ||
|
|
||
| max-height:200px; | ||
| width: auto; | ||
| } | ||
|
|
||
| p{ | ||
|
|
||
| text-align:center; | ||
| } |
| @@ -0,0 +1,44 @@ | ||
| Copyright (c) 2011 TypeSETit, LLC (typesetit@att.net), | ||
| with Reserved Font Name "Alex Brush" | ||
|
|
||
| This Font Software is licensed under the SIL Open Font License, Version 1.1. | ||
| This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL | ||
|
|
||
| ----------------------------------------------------------- | ||
| SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 | ||
| ----------------------------------------------------------- | ||
|
|
||
| PREAMBLE | ||
| The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. | ||
|
|
||
| The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. | ||
|
|
||
| DEFINITIONS | ||
| "Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. | ||
|
|
||
| "Reserved Font Name" refers to any names specified as such after the copyright statement(s). | ||
|
|
||
| "Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). | ||
|
|
||
| "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. | ||
|
|
||
| "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. | ||
|
|
||
| PERMISSION & CONDITIONS | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: | ||
|
|
||
| 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. | ||
|
|
||
| 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. | ||
|
|
||
| 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. | ||
|
|
||
| 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. | ||
|
|
||
| 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. | ||
|
|
||
| TERMINATION | ||
| This license becomes null and void if any of the above conditions are not met. | ||
|
|
||
| DISCLAIMER | ||
| THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. |
| @@ -0,0 +1,44 @@ | ||
| Copyright (c) 2011 TypeSETit, LLC (typesetit@att.net), | ||
| with Reserved Font Name "Allura" | ||
|
|
||
| This Font Software is licensed under the SIL Open Font License, Version 1.1. | ||
| This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL | ||
|
|
||
| ----------------------------------------------------------- | ||
| SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 | ||
| ----------------------------------------------------------- | ||
|
|
||
| PREAMBLE | ||
| The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. | ||
|
|
||
| The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. | ||
|
|
||
| DEFINITIONS | ||
| "Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. | ||
|
|
||
| "Reserved Font Name" refers to any names specified as such after the copyright statement(s). | ||
|
|
||
| "Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). | ||
|
|
||
| "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. | ||
|
|
||
| "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. | ||
|
|
||
| PERMISSION & CONDITIONS | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: | ||
|
|
||
| 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. | ||
|
|
||
| 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. | ||
|
|
||
| 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. | ||
|
|
||
| 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. | ||
|
|
||
| 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. | ||
|
|
||
| TERMINATION | ||
| This license becomes null and void if any of the above conditions are not met. | ||
|
|
||
| DISCLAIMER | ||
| THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. |
| @@ -0,0 +1,23 @@ | ||
| September 13, 2002 | ||
|
|
||
| You may use this font in any of your projects. If you use this font for a commercial project or design something really fantastic with it, drop me a line. | ||
|
|
||
| DISCLAIMER: | ||
|
|
||
| BLACK JACK works fine on my Macintosh. No guarantee of any kind is made this this will work on your machine. Typadelic makes no warranties, express or implied, regarding this font. Typadelic does not warrant, guarantee or make any represenations regarding the use or the results of the use of this font in terms of its reliability, or otherwise. In no event will Typadelic be liable for any consequential, incidental or indirect damages arising out of the use or inability to use BLACK JACK. (This notice must be included with any distribution). | ||
|
|
||
| Please take a moment to mention where you found BLACK JACK and feel free to comment or criticize, care of "ronna@typadelic.com" | ||
|
|
||
| BLACK JACK is free, but it is NOT in the public domain and remains the exclusive property of Typadelic. | ||
|
|
||
| COPYRIGHT & DISTRIBUTION INFORMATION: | ||
|
|
||
| BLACK JACK is copyright ©2002 Typadelic Fonts. All rights reserved. | ||
|
|
||
| IMPORTANT: You may only distribute BLACK JACK WITH PRIOR WRITTEN PERMISSION FROM THE AUTHOR; after receiving said permission, YOU MUST INCLUDE THIS DOCUMENT. To sum up, this font may not be remixed or redistributed in any way (it may not be sold, distributed commercially, or made available for download) without permission. | ||
|
|
||
| FOR PERMISSION TO DISTRIBUTE IN ANY WAY, SHAPE, OR FORM, WRITE TO THE FOLLOWING EMAIL ADDRESS: | ||
|
|
||
| ronna@typadelic.com | ||
|
|
||
| Other fonts, free or otherwise, available at <http://www.typadelic.com> or <http://www.myfonts.com> |
| @@ -0,0 +1,58 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Forside</title> | ||
| <link rel="stylesheet" href="css/style.css" type="text/css"> | ||
| </head> | ||
| <body> | ||
| <div id='loadpage'></div> | ||
| <div id='loader'></div> | ||
| <div id="page"> | ||
| <!-- Begin Navbar --> | ||
| <div id="navbar" ></div> | ||
| <script src="scripts/navbar.js" type="text/javascript"></script> | ||
| <!-- End Navbar --> | ||
|
|
||
|
|
||
| <div id="content" class="content"> | ||
| <div id="tittel"> | ||
| <img class="logo align-left" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <h1>Gløshaugen Bryggeforum</h1> | ||
| <img class="logo align-right" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <hr> | ||
| </div> | ||
|
|
||
|
|
||
| <div> | ||
| <section class="sectionDesign"> | ||
| <h2 >Hvem er vi?</h2> | ||
| <p> | ||
|
|
||
| Gløshaugen bryggeforum er et sted hvor forskjellige bryggelaug på Gløshaugen NTNU kan møtes og diskutere den edle kunsten å brygge øl. Forumet ble startet opp i 2015 for å bedre kommunikasjonen mellom laugene, for å kunne dele erfaringer, og for å kunne hjelpe og støtte opp eventuelle nye bryggelaug. De kan bli funnet på <a href="https://www.facebook.com/groups/125544317795174/">Facebooksiden</a>, eller du kan melde deg på <a href="http://eepurl.com/byuxZP">e-postlisten</a>. | ||
| </p></section> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <br> | ||
|
|
||
| <section class="sectionDesign"><p> | ||
| <span id="members">Medlemmer: XXX</span> | ||
| </p></section> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
| <!-- Footer--> | ||
| <div id='footer'></div> | ||
| <script src="scripts/footer.js"></script> | ||
|
|
||
| <!-- End Footer--> | ||
| </div> | ||
|
|
||
| <script src="scripts/olmoeler.js"></script> | ||
| <script src="scripts/parallexEffect.js" type="text/javascript"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,85 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="no"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Om oss</title> | ||
| <link rel="stylesheet" href="css/style.css" type="text/css"> | ||
| </head> | ||
| <body> | ||
| <div id='loadpage'></div> | ||
| <div id='loader'></div> | ||
| <div id="page"> | ||
| <div id="navbar"></div> | ||
| <div id="content" class="content"> | ||
| <div id="tittel"> | ||
| <img class="logo align-left" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <h1>Om Gløshaugens Bryggeforum</h1> | ||
| <img class="logo align-right" src="images/gjennomsiktiglogoOutlineWithShadow.png"> | ||
| <hr> | ||
| </div> | ||
| <div> | ||
| <section class="sectionDesign"><p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae nulla scelerisque, rutrum turpis et, consectetur diam. | ||
| Nullam ut pretium tortor, a scelerisque arcu. Vestibulum scelerisque lorem ac urna mollis lobortis. | ||
| Nam hendrerit, tellus nec ultricies lobortis, lorem sapien pellentesque ligula, vel mattis mauris metus ac purus. | ||
| Etiam quis tellus sed magna tempor egestas fringilla vel dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, | ||
| per inceptos himenaeos. Nulla facilisi. | ||
| </p></section> | ||
|
|
||
|
|
||
|
|
||
| <br><br> | ||
| <section class="sectionDesign"><p> | ||
| Cras iaculis fermentum lorem et vulputate. Sed elit ipsum, ultrices nec tellus faucibus, varius euismod dui. | ||
| Suspendisse eu massa ac urna posuere pulvinar a quis orci. Phasellus dictum dignissim efficitur. Integer et metus libero. | ||
| Cras molestie ante tortor, eget finibus augue vulputate id. Phasellus blandit scelerisque lacinia. Nam ut quam ipsum. | ||
| Aliquam luctus tempus libero, non lobortis enim laoreet quis. Phasellus fringilla mi ut velit elementum mollis. | ||
| </p></section> | ||
|
|
||
| <br><br> | ||
| <section class="sectionDesign"><p> | ||
| Nam facilisis malesuada odio in porttitor. Duis placerat mauris neque, eget auctor libero varius at. | ||
| Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas placerat purus id velit lacinia, | ||
| nec commodo risus volutpat. Vivamus lacus libero, sodales vitae interdum at, bibendum a purus. Vivamus vitae dui pharetra, | ||
| rhoncus nisl id, consectetur diam. In sed est vel ante lacinia placerat. Curabitur enim justo, ullamcorper nec neque in, venenatis | ||
| suscipit urna. Praesent luctus pharetra diam ac semper. Aenean cursus, nunc non pharetra dapibus, turpis nulla egestas mi, vel | ||
| ullamcorper enim elit in arcu. Vestibulum pretium sodales luctus. Curabitur felis lectus, iaculis et convallis ac, vulputate non dolor. | ||
| Sed lorem enim, gravida a magna et, posuere mattis nisi. Donec consequat molestie est, congue vulputate purus malesuada sit amet. | ||
| Pellentesque eget elit ut risus feugiat ornare non molestie nulla. | ||
| </p></section> | ||
|
|
||
| <br><br> | ||
| <section class="sectionDesign"><p> | ||
| Phasellus malesuada turpis ut pellentesque euismod. Proin mauris risus, volutpat sed ante bibendum, elementum vehicula nunc. | ||
| In dui tellus, congue vitae quam non, luctus fringilla sem. Sed quis consectetur ipsum. | ||
| Quisque mi tortor, congue ut turpis ac, euismod rutrum quam. Donec vehicula, sem rhoncus consectetur consequat, | ||
| lectus augue posuere ipsum, in ullamcorper tellus quam et nisi. Suspendisse finibus nisl vel tincidunt dapibus. | ||
| Ut porta velit sit amet turpis rutrum, quis aliquet dui volutpat. Donec consequat magna at porta facilisis. Donec non nisl ipsum. | ||
|
|
||
| </p></section> | ||
| <br><br> | ||
| <section class="sectionDesign"><p> | ||
| Suspendisse malesuada risus urna, hendrerit euismod nunc rutrum varius. Curabitur ut ex at nibh facilisis ullamcorper a vitae sapien. | ||
| Vivamus urna urna, malesuada nec lacinia ut, ultrices non velit. Suspendisse lacinia massa ac nisl aliquet tempus. | ||
| Quisque volutpat ante elit, non lacinia nisl vulputate vitae. Mauris euismod luctus odio quis condimentum. | ||
| Sed posuere cursus nulla non hendrerit. Integer vitae dictum lacus. Donec aliquet porttitor odio ac tempor. | ||
| Cras maximus, ligula a egestas imperdiet, ante eros tincidunt enim, quis viverra nulla mi a dui. Cras eget malesuada metus, | ||
| id commodo erat. Curabitur nec tincidunt orci. Donec quis nisl pellentesque, maximus magna eu, auctor ante. | ||
| Curabitur in lacus massa. Maecenas mattis est non ante fringilla fermentum. | ||
| </p></section> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| <!-- Footer--> | ||
| <div id='footer'></div> | ||
| <script src="scripts/footer.js"></script> | ||
|
|
||
| <!-- End Footer--> | ||
| </div> | ||
| <script src="scripts/navbar.js"></script> | ||
| <script src="scripts/olmoeler.js"></script> | ||
| <script src="scripts/parallexEffect.js" type="text/javascript"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,134 @@ | ||
| /* | ||
| FILE NAME: scripts/bildeGalleri.js | ||
| WRITTEN BY: Sander Bjerklund Lindberg | ||
| WHEN: November 2017 | ||
| PURPOSE: Slideshow for the gallery page | ||
| */ | ||
|
|
||
| //Referanser til HTML elementer | ||
| //let prev = document.getElementById("prev"); | ||
| //let next = document.getElementById("next"); | ||
| //let slideshowImg = document.getElementById("slideshowImg"); | ||
| let imageContainer = document.getElementById("wrapperGalleri"); | ||
| let overlayBack = document.getElementById("overlay-back"); | ||
| let cover = document.getElementById("coverGalleri"); | ||
|
|
||
| //Variabel for å holde filnavn og bildebesrkivelse. | ||
| let imageFileNames = [{ | ||
| fileName: "1.jpg", | ||
| description: "Nå er Mannhullets IPA fra IPA-off på tapp! Kom og kjøp før det blir tomt!" | ||
| }, | ||
| { | ||
| fileName: "2.jpg", | ||
| description: "Sigurd Aurvåg Sørum" | ||
| }, | ||
| { | ||
| fileName: "3.jpg", | ||
| description: "Sigurd Aurvåg Sørum, Andreas Bro Kolstø og Even Wollebæk Førrisdal" | ||
| }, | ||
| { | ||
| fileName: "4.jpg", | ||
| description: "Gløshaugen Bryggeforum (1) foran Nidarosdomen!" | ||
| }, | ||
| { | ||
| fileName: "5.jpg", | ||
| description: "Er det det at Haakon og Sigrid alene har blitt satt i spotligthen som utløser frustrasjonen? " + | ||
| "Men Hvorfor er da Kristian så fornøyd?" | ||
| }, | ||
| { | ||
| fileName: "6.jpg", | ||
| description: "" | ||
| }, | ||
| { | ||
| fileName: "7.jpg", | ||
| description: "" | ||
| }, | ||
| { | ||
| fileName: "8.jpg", | ||
| description: "" | ||
| }, | ||
| { | ||
| fileName: "9.jpg", | ||
| description: "Maltet har kommet. \n" + | ||
| "Lagres på samfundet. Kan hentes når det har blitt betalt for. Ta kontakt med " + | ||
| "<a href='mailto:sampleEmail@domain.com'>Sigbjørn Albert</a>" | ||
| }, | ||
| { | ||
| fileName: "10.jpg", | ||
| description: "" | ||
| }, | ||
| ]; | ||
|
|
||
| /*Funksjon for å bla til neste bilde i slideshowet. | ||
| Variablen I er en teller, som inkrementerer for hver gang brukeren trykker på knappen. | ||
| NÃ¥r I er det samme som antall filnavn, skal den hoppe tibake til start*/ | ||
| let i = 0; | ||
| /*next.onclick = function (evt) { | ||
| evt.preventDefault(); | ||
| if (i === imageFileNames.length - 1) { | ||
| i = 0; | ||
| } else { | ||
| i++; | ||
| } | ||
| slideshowImg.src = "images/bildegalleri/" + imageFileNames[i].fileName; | ||
| }; | ||
| */ | ||
| /*Denne funksjonen er den motsatte av den forrige, da denne går bakover i bilder*/ | ||
|
|
||
| /* | ||
| prev.onclick = function (evt) { | ||
| evt.preventDefault(); | ||
| console.log(slideshowImg); | ||
| if (i === 0) { | ||
| i = imageFileNames.length - 1; | ||
| } else { | ||
| i-- | ||
| } | ||
| slideshowImg.src = "images/bildegalleri/" + imageFileNames[i].fileName; | ||
| };*/ | ||
|
|
||
| function clickOverlay() { | ||
| cover.innerHTML = ""; | ||
| cover.style.display = overlayBack.style.display = "none"; | ||
| cover.style.visibility = overlayBack.style.visibility = "hidden"; | ||
| } | ||
|
|
||
| //Loop for å legge til alle bildene i filnavn-arrayet i HTMLen. | ||
| for (let i = 0; i < imageFileNames.length; i++) { | ||
| let img = document.createElement("img"); | ||
| let y = document.createElement("div"); | ||
| let z = document.createElement("div"); | ||
| z.setAttribute("class", "imageGrid"); | ||
| img.setAttribute("id", i); | ||
| img.setAttribute("class", "image"); | ||
| img.setAttribute("src", "images/bildegalleri/" + imageFileNames[i].fileName); | ||
| img.setAttribute("alt", imageFileNames[i].description); | ||
| y.setAttribute("class", "desc"); | ||
| y.innerHTML = imageFileNames[i].description; | ||
|
|
||
| z.appendChild(img); | ||
| z.appendChild(document.createElement("hr")); | ||
| z.appendChild(y); | ||
|
|
||
| imageContainer.appendChild(z); | ||
|
|
||
| let elem = document.getElementById(i.toString()); | ||
| elem.onclick = function () { | ||
| let img = document.createElement("img"); | ||
|
|
||
| img.setAttribute("src", "images/bildegalleri/" + imageFileNames[this.id].fileName); | ||
| img.setAttribute("id", "img" + imageFileNames[this.id]); | ||
| img.setAttribute("onclick", "clickOverlay()"); | ||
| img.setAttribute("class", "coverImgGalleri"); | ||
|
|
||
|
|
||
| img.innerHTML = "<a id=\"prev\" href=\"#\" class=\"previous round\">‹</a>\n" + | ||
| " <a id=\"next\" href=\"#\" class=\"next round\">›</a>"; | ||
|
|
||
| cover.appendChild(img); | ||
|
|
||
| cover.style.display = overlayBack.style.display = "block"; | ||
| cover.style.visibility = overlayBack.style.visibility = "visible"; | ||
| } | ||
| } |
| @@ -0,0 +1,249 @@ | ||
| let content = document.getElementById("content"); | ||
| let cover = document.getElementById("cover"); | ||
| let wrapperLaug = document.getElementById("wrapperLaug"); | ||
| let overlayBack = document.getElementById("overlay-back"); | ||
|
|
||
| //Objekt over alle bryggelaugene i Gløshaugen bryggeforum | ||
| let bryggelaug = [{ | ||
| name: "Ontap", | ||
| linjeforening: "Online", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 33, | ||
| logo: "ontap.png", | ||
| leder: "Aslak Hollund", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Invitro", | ||
| linjeforening: "Volvox&Alkymisten", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 5, | ||
| logo: "invitro.png", | ||
| leder: "Charlie Shea", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "AarhøneKroa Pikobryggeri", | ||
| linjeforening: "Aarhønen", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 6, | ||
| logo: "aarhonekroa.png", | ||
| leder: "Sondre Evjen", | ||
| kontaktinfo: { | ||
| telefon: 12345678, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Delta Bryggelaug", | ||
| linjeforening: "Delta", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 15, | ||
| logo: "sample.jpg", | ||
| leder: "Martin Madsen", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Indøk Ølbryggelaug", | ||
| linjeforening: "Janus", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 11, | ||
| logo: "sample.jpg", | ||
| leder: "Marius Hofgaard", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Maskins BrüggeCom", | ||
| linjeforening: "Smørekoppen", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 123456, | ||
| leder: "Ola Nordmann", | ||
| logo: "sample.jpg", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Omega Haandbrygercommitée", | ||
| linjeforening: "Omega", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 12, | ||
| leder: "Nicholas Fraser Ødegård", | ||
| logo: "omega.png", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Nanobryggeriet", | ||
| linjeforening: "Timini", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 6, | ||
| logo: "sample.jpg", | ||
| leder: "Leik Isdal", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Ølkom", | ||
| linjeforening: "Emil", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 123456, | ||
| logo: "sample.jpg", | ||
| leder: "Ola Nordmann", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Nablas Ølbryggerlaug", | ||
| linjeforening: "Nabla", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 39, | ||
| logo: "sample.jpg", | ||
| leder: "Camilla Idina Elvebakken", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Ababrygg", | ||
| linjeforening: "Abakus", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 45, | ||
| logo: "sample.jpg", | ||
| leder: "Vemdund Santi", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "CHØLeSCAB", | ||
| linjeforening: "Høiskolens Chemikerforening", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 12, | ||
| logo: "sample.jpg", | ||
| leder: "Henrik Kiær", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Mannhullet", | ||
| linjeforening: "Mannhullet", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 25, | ||
| logo: "mannhullet.jpg", | ||
| leder: "Ola Nordmann", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| name: "Fylkesbrygg", | ||
| linjeforening: "Emil", | ||
| styremedlemmer: "Styremedlem 1, styremedlem 2, styremedlem 3, styremedlem 4 ....", | ||
| medlemmer: 4, | ||
| logo: "sample.jpg", | ||
| leder: "HÃ¥kon Eidsvik", | ||
| kontaktinfo: { | ||
| telefon: 123456789, | ||
| epost: "test@test.no" | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| function clickOverlay() { | ||
| cover.innerHTML = ""; | ||
| cover.style.display = overlayBack.style.display = "none"; | ||
| cover.style.visibility = overlayBack.style.visibility = "hidden"; | ||
| } | ||
|
|
||
| for (let i = 0; i < bryggelaug.length; i++) { | ||
| let img = document.createElement("img"); | ||
| let div = document.createElement("div"); | ||
| let div2 = document.createElement("div"); | ||
|
|
||
| div2.setAttribute("class", "imageGrid"); | ||
|
|
||
| img.setAttribute("class", "bryggelaugImg"); | ||
| img.setAttribute("onclick", "clickLaug()"); | ||
| img.setAttribute("id", i); | ||
| img.setAttribute("alt", bryggelaug[i].logo); | ||
| img.setAttribute("src", "images/Logoer/" + bryggelaug[i].logo); | ||
|
|
||
| div.setAttribute("class", "bryggelaugDiv"); | ||
|
|
||
| div.innerHTML = "<h2 class='bryggeluagHeader'>" + bryggelaug[i].name + "</h2>"; | ||
|
|
||
| div.appendChild(img); | ||
| wrapperLaug.appendChild(div); | ||
| content.appendChild(wrapperLaug); | ||
|
|
||
| let x = document.getElementById(i); | ||
| x.onclick = function () { | ||
| let img = document.createElement("img"); | ||
| let div = document.createElement("div"); | ||
| let divKontakt = document.createElement("div"); | ||
|
|
||
| img.setAttribute("src", "images/Logoer/" + bryggelaug[this.id].logo); | ||
| img.setAttribute("id", i); | ||
| img.setAttribute("class", "coverImg"); | ||
| img.setAttribute("alt", bryggelaug[i].logo); | ||
|
|
||
| cover.appendChild(img); | ||
|
|
||
| div.setAttribute("id", "infoDiv"); | ||
| div.innerHTML = "<b>Navn: </b>" + bryggelaug[this.id].name; | ||
| div.innerHTML += "<br><b>Linjeforening: </b>" + bryggelaug[this.id].linjeforening; | ||
| div.innerHTML += "<br><b>Styremedlemmer: </b>" + bryggelaug[this.id].styremedlemmer; | ||
| div.innerHTML += "<br><b>Antall medlemmer: </b>" + bryggelaug[this.id].medlemmer; | ||
| div.innerHTML += "<br><b>Leder: </b>" + bryggelaug[this.id].leder; | ||
|
|
||
| divKontakt.setAttribute("id", "contactDiv"); | ||
| divKontakt.innerHTML += "<h3>Kontakt</h3>"; | ||
| divKontakt.innerHTML += "<b>Telefon: </b>" + bryggelaug[this.id].kontaktinfo.telefon; | ||
| divKontakt.innerHTML += "<br><b>Epost: </b><a href='mailto:" + bryggelaug[i].kontaktinfo.epost + | ||
| "'>" + bryggelaug[this.id].kontaktinfo.epost + "</a>"; | ||
|
|
||
| div.appendChild(divKontakt); | ||
| cover.appendChild(div); | ||
|
|
||
| cover.style.display = overlayBack.style.display = "block"; | ||
| cover.style.visibility = overlayBack.style.visibility = "visible"; | ||
| } | ||
| } |
| @@ -0,0 +1,35 @@ | ||
| /* | ||
| FILE NAME: scripts/calculator.js | ||
| WRITTEN BY: Sander Bjerklund Lindberg | ||
| WHEN: October 2017 | ||
| PURPOSE: Calculator for abv in beer brew | ||
| */ | ||
|
|
||
|
|
||
| //Referanser til HTML-elementer | ||
| let og = document.getElementById("og"); | ||
| let fg = document.getElementById("fg"); | ||
| let result = document.getElementById("result"); | ||
| let btnSubmit = document.getElementById("btnSubmit"); | ||
| let btnReset = document.getElementById("btnReset"); | ||
|
|
||
| //Deklarasjon av en variabel for videre bruk. | ||
| let abv; | ||
|
|
||
| //Når knappen med ID "btnSubmit", skal valuene i input elementene kjøres i en formel og skrives til siden. | ||
| btnSubmit.onclick = function calc(evt) { | ||
| evt.preventDefault(); | ||
| abv = (og.value - fg.value) * 131.21; | ||
| result.innerHTML = "Abv: " + abv.toFixed(2); | ||
| result.style.visibility = "visible"; | ||
| }; | ||
|
|
||
|
|
||
| //Funksjonen reseter formet. | ||
| btnReset.onclick = function (evt) { | ||
| evt.preventDefault(); | ||
| og.innerHTML = ""; | ||
| fg.innerHTML = ""; | ||
| result.innerHTML = " "; | ||
| result.style.visibility = "hidden"; | ||
| }; |
| @@ -0,0 +1,22 @@ | ||
| /* | ||
| FILE NAME: scripts/navbar.js | ||
| WRITTEN BY: Sander Bjerklund Lindberg | ||
| WHEN: November 2017 | ||
| PURPOSE: store the navbar for use on all pages | ||
| */ | ||
|
|
||
|
|
||
|
|
||
|
|
||
| function loadfooter(){ | ||
| let footer = document.getElementById("footer"); | ||
|
|
||
| footer.innerHTML = ""; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| addLoadEvent(loadfooter); | ||
|
|
||
|
|
||
|
|
| @@ -0,0 +1,93 @@ | ||
| /* | ||
| FILE NAME: scripts/navbar.js | ||
| WRITTEN BY: Sander Bjerklund Lindberg | ||
| WHEN: November 2017 | ||
| PURPOSE: store the navbar for use on all pages | ||
| */ | ||
|
|
||
|
|
||
| //Innholdet i elementet med id = "navbar" skal byttes ut med navbaren | ||
| function addLoadEvent(func) { | ||
| let oldonload = window.onload; | ||
| if (typeof window.onload != 'function') { | ||
| window.onload = func; | ||
| } else { | ||
| window.onload = function() { | ||
| if (oldonload) { | ||
| oldonload(); | ||
| } | ||
| func(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function loadNavbar(){ | ||
| let navbar = document.getElementById("navbar"); | ||
|
|
||
| navbar.innerHTML = | ||
| "<div id = \"scroll\">"+ | ||
| "</div>"+ | ||
|
|
||
| "<p id=\"oel\"></p>" + | ||
| "<ul class=\"navt\">\n" + | ||
| "\n" + | ||
| "\n" + | ||
|
|
||
| " <li><a href=\index.html\>Hjem</a>\n" + | ||
| " </li>\n" + | ||
| " <li><a href=\"om.html\">Om oss</a>\n" + | ||
| " </li>\n" + | ||
| "\n" + | ||
| " <li><a href=\"bryggeguide.html\">Bryggeguide</a>\n" + | ||
| " </li>\n" + | ||
| " <li>\n" + | ||
| "\n" + | ||
|
|
||
| "\n" + | ||
| " </li>\n" + | ||
| "\n" + | ||
| " <li><a href=\"beregninger.html\">Beregninger og tabeller</a>\n" + | ||
| " </li>\n" + | ||
| " <li><a href=\"bildegalleri.html\">Bildegalleri</a>\n" + | ||
| " </li>\n" + | ||
| " <li><a href=\"bryggelaug.html\">Bryggelaug</a>\n" + | ||
| " </li>\n" + | ||
| "</ul>" + | ||
|
|
||
| " <div class=\"navNarrow\">\n" + | ||
| " <i class=\"fi fo-bars fum\" onclick='fjernmeny()'><p id=\"menytekst\">Meny</p></i>\n" + | ||
| " <div class=\"narrowLinks hidden\" >\n" + | ||
| " <a href=index.html>Hjem</a>\n" + | ||
| " <a href=\"om.html\">Om oss</a>\n" + | ||
| " <a href=\"bryggeguide.html\">Bryggeguide</a>\n" + | ||
| " <a href=\"beregninger.html\">Beregninger og tabeller</a>\n" + | ||
| " <a href=\"bildegalleri.html\">Bildegalleri</a>\n" + | ||
| " <a href=\"bryggelaug.html\">Bryggelaug</a>\n" + | ||
| " </div>\n" + | ||
| " </div>"; | ||
| let navLinks = document.querySelector('.navNarrow'); | ||
| let narrowLinks = document.querySelector('.narrowLinks'); | ||
|
|
||
| navLinks.addEventListener('click', toggler); | ||
| function toggler() { | ||
| narrowLinks.classList.toggle('hidden'); | ||
|
|
||
| } | ||
| document.getElementById("menytekst").style.display = "block"; | ||
| } | ||
|
|
||
| console.log("loadNavbar"); | ||
| addLoadEvent(loadNavbar); | ||
| console.log("end"); | ||
|
|
||
|
|
||
| function fjernmeny() { | ||
| let menytekst = document.getElementById("menytekst"); | ||
| console.log(menytekst.style.display); | ||
| if(menytekst.style.display === "block"){ | ||
| menytekst.style.display = "none"; | ||
| } | ||
| else{ | ||
| menytekst.style.display = "block"; | ||
| } | ||
| } |
| @@ -0,0 +1,97 @@ | ||
| /* | ||
| FILE NAME: scripts/olmoeler.js | ||
| WRITTEN BY: Marcus Tiedemann Økland Henriksbø | ||
| WHEN: November 2017 | ||
| PURPOSE: Counter for beer | ||
| */ | ||
|
|
||
| let start = new Date(2017, 8, 1); | ||
| let rate = (500/30/24/60/60/1000); | ||
| let already_beer = 500.00; | ||
|
|
||
|
|
||
|
|
||
| function install_Beer_DOM(){ | ||
| document.getElementById("oel").innerHTML = | ||
| "<div id=\"oelbildeclipping\" class=\"noSelect\" >" | ||
| + | ||
| "<input id=\"oelbilde\" class=\"noSelect\" type=\"image\" src=\"images/beer.png\" alt=\"Øl:\" onclick=\"drink();\"/>" | ||
| +"</div>" | ||
| + "<img id=\"oelbildeempty\" class=\"noSelect\" src=\"images/beerempty.png\">" | ||
|
|
||
| + "<b id=\"literbrygget\">"+"</b>" +" liter brygget" | ||
|
|
||
| +"<audio src=\"sounds/drinkingSound1.wav\" id=\"drinkingSound1\" autostart=\"false\"></audio>" | ||
| +"<audio src=\"sounds/drinkingSound2.wav\" id=\"drinkingSound2\" autostart=\"false\"></audio>" | ||
| +"<audio src=\"sounds/burping.wav\" id=\"burping\" autostart=\"false\"></audio>" | ||
| ; | ||
| Beer_maker(); | ||
| } | ||
|
|
||
|
|
||
|
|
||
| function Beer_maker(){ | ||
| elapsed = new Date(); | ||
| beers = parseFloat((elapsed - start) * rate).toFixed(3) + already_beer; | ||
| document.getElementById("literbrygget").innerHTML= parseFloat(beers).toFixed(0); | ||
| } | ||
|
|
||
|
|
||
|
|
||
| drinkingAnimationIntervalId = -1; | ||
|
|
||
| function drink(){ | ||
| if(currentFrame === 0) | ||
| drinkingAnimationIntervalId = setInterval(drinkingFrame,20) | ||
| } | ||
|
|
||
|
|
||
| currentFrame = 0; | ||
| toppx = 0; | ||
|
|
||
| function drinkingFrame(){ | ||
| if(currentFrame > 20 && currentFrame < 40){ | ||
|
|
||
| } | ||
|
|
||
| else if(currentFrame > 50 && currentFrame < 70){ | ||
|
|
||
| } | ||
| else{ | ||
| toppx += 1; | ||
| } | ||
|
|
||
| if(currentFrame === 0){ | ||
|
|
||
| document.getElementById('drinkingSound1').play(); | ||
| } | ||
|
|
||
| if(currentFrame === 40){ | ||
| document.getElementById('drinkingSound1').currentTime=0; | ||
| document.getElementById('drinkingSound1').play(); | ||
| } | ||
|
|
||
| if(currentFrame === 70){ | ||
| document.getElementById('drinkingSound2').play(); | ||
| } | ||
|
|
||
| document.getElementById('oelbildeclipping').style.top = toppx.toString() + "px"; | ||
| document.getElementById('oelbilde').style.top = (-toppx).toString() + "px"; | ||
| currentFrame ++; | ||
|
|
||
| if(currentFrame === 100){ | ||
| clearInterval(drinkingAnimationIntervalId); | ||
| currentFrame = 0; | ||
| toppx = 0; | ||
| document.getElementById('burping').play(); | ||
| } | ||
| console.log("FILIP") | ||
| } | ||
|
|
||
| addLoadEvent(install_Beer_DOM); | ||
|
|
||
|
|
||
|
|
||
| console.log(new Date()- start); | ||
| console.log(new Date()); | ||
|
|
| @@ -0,0 +1,26 @@ | ||
|
|
||
|
|
||
| (function(){ | ||
| addLoadEvent(load_page); | ||
| addLoadEvent(parallex); | ||
| window.onscroll = parallex; | ||
|
|
||
| })(); | ||
|
|
||
| function parallex(){ | ||
| let parallax2 = document.querySelectorAll("body"), | ||
| speed = 0.5; | ||
| [].slice.call(parallax2).forEach(function(el,i){ | ||
|
|
||
| let windowYOffset = window.pageYOffset, | ||
| elBackgrounPos = "50% " + (windowYOffset * speed) + "px"; | ||
|
|
||
| el.style.backgroundPosition = elBackgrounPos; | ||
|
|
||
| }); | ||
| } | ||
|
|
||
| function load_page() { | ||
| document.getElementById("loader").style.display = "none"; | ||
| document.getElementById("loadpage").style.display = "none"; | ||
| } |
