API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 24th, 2014
146
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Öl&Sånt</title>
  5. <meta charset="UTF-8">
  6. <meta name="description" content="A website about beer and similar drinks">
  7. <meta name="keywords" content="Beer, Öl, Wine, Vin, Reviews, Recensioner">
  8. <!--Style Sheet-->
  9. <link rel="stylesheet" type="text/css" href="css/flexslider.css" media="screen">
  10. <link rel="stylesheet" type="text/css" href="css/sequence.css" media="screen">
  11. <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen">
  12. <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
  13. <!--Special Styles-->
  14. <link rel="stylesheet" type="text/css" href="css/style.css" title="default" media="screen">
  15. <link rel="alternate stylesheet" type="text/css" href="css/elegant.css" title="elegant" media="screen">
  16. <link rel="alternate stylesheet" type="text/css" href="css/modern.css" title="modern" media="screen">
  17. <link rel="alternate stylesheet" type="text/css" href="css/colorfull.css" title="colorfull" media="screen">
  18. <!--Responsive-->
  19. <link rel="stylesheet" type="text/css" href="css/responsitive.css" media="all">
  20. <!--Google fonts-->
  21. <link href='http://fonts.googleapis.com/css?family=Russo+One&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  22. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
  23. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
  24. <!--Javascript-->
  25. <script src="js/jquery-1.7.2.min.js"></script>
  26. <!--[if lt IE9]>
  27. <script src="js/html5.js"></script>
  28. <script src="js/IE7.js"></script>
  29. <![endif]-->
  30. </head>
  31. <body>
  32. <header class="dark">
  33.  <nav>
  34.    <div id="logo">
  35.      <h1>Öl&Sånt</h1>
  36.    </div>
  37.    <div id="menu">
  38.      <ul>
  39.        <li> <a href="#slider" >Home</a> <a href="#Öl" >Öl</a> <a href="#work">Work</a> <a href="#about">About</a> <a href="#blog">Blog</a> <a href="#contact">Kontakta Oss</a> </li>
  40.      </ul>
  41.    </div>
  42.  </nav>
  43. </header>
  44. <!--<div id="switcher"> <a class="switch-button open"></a>
  45.  <div class="content">
  46.    <ul class="headercolor">
  47.      <span>Header color</span>
  48.      <li class="red"><a href="#light">Light</a></li>
  49.      <li class="blue"><a href="#dark">Dark</a></li>
  50.    </ul>
  51.    <ul class="theme">
  52.      <span>Theme</span>
  53.      <li><a href="#" rel="default" class="styleswitch">default</a></li>
  54.      <li><a href="#" rel="elegant" class="styleswitch">elegant</a></li>
  55.      <li><a href="#" rel="modern" class="styleswitch">modern</a></li>
  56.      <li><a href="#" rel="colorfull" class="styleswitch">colorfull</a></li>
  57.    </ul>
  58.  </div>
  59. </div>-->
  60. <section id="slider">
  61.  <div id="sequence-preloader">
  62.    <div class="preloading"> <img src="images/icons/loader.gif" alt=""> </div>
  63.  </div>
  64.  <div id="slideshow"> <img class="prev" src="images/prev.png" alt=""> <img class="next" src="images/next.png" alt="">
  65.    <ul>
  66.      <li> <img class="backgrd" src="images/bg/red.jpg" alt=""> <img class="image1" src="images/timmermans.png" alt=""> <img class="image2" src="images/cherr2.png" alt="">
  67.        <div class="info">
  68.          <h2>Timmermans Kriek</h2>
  69.          <p>Körsbärsöl
  70.             </p>
  71.        </div>
  72.        <a href="#" class="more">Läs mer</a> </li>
  73.      <li> <img class="backgrd" src="images/bg/orange.jpg" alt=""> <img class="image1" src="images/passion.png" alt=""> <img class="image2" src="images/cocktail2.png" alt="">
  74.        <div class="info">
  75.          <h2>Cocktails</h2>
  76.          <p>Olika cocktails,<br/>
  77.            Läs mer här</p>
  78.        </div>
  79.        <a href="#" class="more">Läs mer</a> </li>
  80.      <li> <img class="backgrd" src="images/bg/yellow.jpg" alt=""> <img class="image1" src="images/leffe3.png" alt=""> <img class="image2" src="images/leffexx.png" alt="">
  81.        <div class="info">
  82.          <h2>Leffe Blond</h2>
  83.          <p>Läs mer om<br/>
  84.            Leffe blond </p>
  85.        </div>
  86.        <a href="#" class="more">Läs mer</a> </li>
  87.    </ul>
  88.  </div>
  89. </section>
  90. <section id="Öl" class="container dark">
  91.  <div class="content">
  92.    <div class="title icon-power">
  93.      <h1>Öl <span>IPA, APA, Lager, Lambicus, Saison</span></h1>
  94.      <div class="description"></div>
  95.    </div>
  96.    <div class="full">
  97.      <div class="column-half">
  98.        <p>Här skall det länkas till olika öler.</a><br/>
  99.        Till exempel<br/> <a href="exempel.html"> O'hara's Red Irish Ale
  100.        <br/>
  101.        <a href="exempel2.html"> Timmermans Kriek
  102.        <br/>
  103.        <br/>
  104.        </p>
  105.      </div>
  106.      <div class="column-half">
  107.        <div class="image"><img src="images/bärs.png" alt=""></div>
  108.      </div>
  109.    </div>
  110.    <div class="full">
  111.      </div>
  112.    </div>
  113.  </div>
  114. </section>
  115. <section id="work" class="container light">
  116.  <div class="content">
  117.    <div class="title icon-preview">
  118.      <h1>Work <span>Läs mer om öl här.</span></h1>
  119.      <div class="description">
  120.        <nav id="filter"></nav>
  121.      </div>
  122.    </div>
  123.    <article class="portfolio">
  124.      <ul id="stage">
  125.        <li data-tags="Fruktigt">
  126.          <div class="thumb"><a rel="lightbox" href="images/sample/timmermans.png"><img src="images/sample/timmermans.png" alt=""></a></div>
  127.          <div class="info">
  128.            <h3>Timmermans Kriek Lambicus</h3>
  129.            <p>Läs mer om vad vi tycker om denna Kriek</p>
  130.          </div>
  131.        </li>
  132.        <li data-tags="PALEALE">
  133.          <div class="thumb"><a rel="lightbox" href="images/sample/lagunitas.jpg"><img src="images/sample/lagunitas.jpg" alt=""></a></div>
  134.          <div class="info">
  135.            <h3>Lagunitas Pale Ale</h3>
  136.            <p>Värd pengarna, en öl för en stor publik</p>
  137.          </div>
  138.        </li>
  139.        <li data-tags="Belgiskt">
  140.          <div class="thumb"><a rel="lightbox" href="images/sample/chimay.jpg"><img src="images/sample/chimay.jpg" alt=""></a></div>
  141.          <div class="info">
  142.            <h3>Chimay</h3>
  143.            <p>Den blå</p>
  144.          </div>
  145.        </li>
  146.        <li data-tags="Lager">
  147.          <div class="thumb"><a rel="lightbox" href="images/sample/Slyfox.jpg"><img src="images/sample/Slyfox.jpg" alt=""></a></div>
  148.          <div class="info">
  149.            <h3>Tyskland</h3>
  150.            <p>Öl i mängder, det vankas oktober</p>
  151.          </div>
  152.        </li>
  153.        <li data-tags="Saison">
  154.          <div class="thumb"><a rel="lightbox" href="images/sample/saison.jpg"><img src="images/sample/saison.jpg" alt=""></a></div>
  155.          <div class="info">
  156.            <h3>Saison</h3>
  157.            <p>Svindyrt och tokgott</p>
  158.          </div>
  159.        </li>
  160.        <li data-tags="Vin&Sprit">
  161.          <div class="thumb"><a rel="lightbox" href="images/sample/passion.png"><img src="images/sample/passion.png" alt=""></a></div>
  162.          <div class="info">
  163.            <h3>Mojito</h3>
  164.            <p>Mynta och Lime</p>
  165.          </div>
  166.        </li>
  167.      </ul>
  168.    </article>
  169.  </div>
  170. </section>
  171. <section id="about" class="container dark">
  172.  <div class="content">
  173.    <div class="title icon-and">
  174.      <h1>About <span> Vad gör vi här?</span></h1>
  175.      <div class="description">
  176.        <p>Just nu är vi två grabbar som har ett brinnande intresse för öl
  177.        Men vem vet, kanske blir vi fler?</p>
  178.      </div>
  179.    </div>
  180.    <div class="full">
  181.      <div class="image"><img src="images/sample/office.jpg" alt=""></div>
  182.      <div class="divider"></div>
  183.      <div class="column-half">
  184.        <div class="subtitle">
  185.          <h3>Bakgrund:</h3>
  186.        </div>
  187.        <p>Detta började som ett skolprojekt för Jimmy. Han var seriös med hemsidan och ville göra den till verklighet.<br/>
  188.        Där kom Marcus in i bilden.</br>
  189.        </br>
  190.        Vi är inte högutbildade somelier eller dylikt utan detta gör vi för att vi gillar öl och vi vill uttrycka våra åsikter om denna dryck. </p>
  191.      
  192.      </div>
  193.      <div class="column-half">
  194.        <div class="subtitle">
  195.          <h3>Utbildning och erfarenheter.</h3>
  196.        </div>
  197.        <div class="accordion" id="list1">
  198.          <!--Accordion-->
  199.          <a>Jimmy</a>
  200.          <div>
  201.            <p>Jimmy gick i grundskolan i Västerhaninge som liten pojkvasker och läser förnärvarande på Jensen Education där han utbildar sig till Programmerare.</br>
  202.            Jimmy studerade på Media på Fredrika Bremer men hoppade av och började jobba som fotograf. Efter en tid tog det äventyret slut och där började hans resturangkarriär som kock</p>
  203.          
  204.          </div>
  205.          <a>Marcus</a>
  206.          <div>
  207.            <p>Marcus gick grundskolan i Västerhaninge när han var liten. Därefter bar det av mot Industri-linjen på Fredrika Bremerskolan i Haninge.</br>
  208.            Efter det var det svetsarbeten och några år som snickare men nu svidar han om sig till Truckförare.</p>
  209.          </div>
  210.          <a>Syftet med hemsidan</a>
  211.          <div>
  212.            <p>Hemsidan är tänkt att vara inriktad på mat och dryck. Främst öl men det kommer utökas i framtiden till viner, matresor och liknande.</br>
  213.            Vi kommer betygsätta öl och ölprovningar i första hand och när vi är etablerade nog kommer vi spinna vidare mot mat och resturanger.</br>
  214.            Alla betyg vi sätter är självfallet personliga och bara för att vi tycker att någonting är gott innebär det inte att alla andra måste göra detta.</p>
  215.          </div>
  216.        </div>
  217.        <!--Accordion end-->
  218.      </div>
  219.      <div class="column-half last">
  220.        <div class="subtitle">
  221.          <h3>Månadens gästskribent</h3>
  222.        </div>
  223.        <ul class="tabs-nav">
  224.          <li class="active-tab"><a href="#tab1">Gäst1</a></li>
  225.          <li><a href="#tab2">Gäst2</a></li>
  226.          <li><a href="#tab3">Gäst3</a></li>
  227.        </ul>
  228.        <!-- end tab navigation -->
  229.        <div class="tabs-container">
  230.          <div class="tab-content" id="tab1">
  231.            <p>Här skriver vi om första månadens gäst.</p>
  232.          </div>
  233.          <!-- end tab1 -->
  234.          <div class="tab-content" id="tab2">
  235.            <p>Här skriver vi om andra månadens gäst.</p>
  236.          </div>
  237.          <!-- end tab2 -->
  238.          <div class="tab-content" id="tab3">
  239.            <p>Här skriver vi om tredje månadens gäst</p>
  240.          </div>
  241.          <!-- end tab3 -->
  242.        </div>
  243.        <!-- end tab container -->
  244.      </div>
  245.    
  246.      </div>
  247.    </div>
  248.  </div>
  249. </section>
  250. <section id="blog" class="container light">
  251.  <div class="content">
  252.    <div class="title icon-note">
  253.      <h1>Bloggen <span> Dag för dag!</span></h1>
  254.      <div class="description">
  255.         <p>Korta intryck om saker vi upplever i samband med Öl&Sånt   </p>
  256.      </div>
  257.    </div>
  258.    <div id="box">
  259.      <article class="post">
  260.        <figure><img src="images/sample/oharas.png" alt=""></figure>
  261.        <figcaption>O'hara's Red Ale<span>moments ago</span></figcaption>
  262.      </article>
  263.      <article class="post">
  264.        <figure>
  265.          <iframe class="video" src="http://www.linkedtube.com/static/flash/player.swf?sum=&btn=&txt=&vis=never&url=&vid=XEEasR7hVhA" frameborder="0"  webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  266.        </figure>
  267.        <figcaption>Slipknot - The Devil In I<span>2 hours ago</span></figcaption>
  268.      </article>
  269.      <article class="post">
  270.        <figure>
  271.          <p>Kämpar för fullt med att bli klar med allting</p>
  272.        </figure>
  273.        <figcaption>Seriöst jobbigt<span>1 day ago</span></figcaption>
  274.      </article>
  275.      <article class="post">
  276.        <figure><img src="images/sample/trött.jpg" alt="">
  277.          <p>Måste bli klar!</p>
  278.        </figure>
  279.        <figcaption>Sleep is overrated anyway.<span>week ago</span></figcaption>
  280.      </article>
  281.    </div>
  282.  </div>
  283. </section>
  284. <section id="contact" class="container dark second">
  285.  <div class="content">
  286.    <div class="title icon-phone">
  287.      <h1>Kontakta oss <span>Vill ni komma i kontakt med oss går det bra</span></h1>
  288.      <div class="description"> <a href="http://instagram.com/serolofficial"><img src="images/icons/instagram.png" alt=""class="social"></a> <a href="https://www.facebook.com/groups/1510279295882066/"><img src="images/icons/facebook.png" alt="" class="social"></a></div>
  289.    </div>
  290.    <div class="full">
  291.      <div id="Kontakta Oss-form">
  292.        <form id="Kontakta Oss-us" action="#">
  293.          <div class="column-half">
  294.            <div class="formblock">
  295.              <input type="text" name="Kontakta OssName" id="Kontakta OssName" value="" class="txt requiredField" placeholder="Name:">
  296.            </div>
  297.            <div class="formblock">
  298.              <input type="text" name="email" id="email" value="" class="txt requiredField email" placeholder="Email:">
  299.            </div>
  300.            <div class="formblock">
  301.              <input type="text" name="website" id="website" value="" class="txt website" placeholder="Website:">
  302.            </div>
  303.            <div class="formblock">
  304.              <textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"></textarea>
  305.            </div>
  306.            <button name="submit" type="submit" class="subbutton"></button>
  307.          </div>
  308.          <div class="column-half last">
  309.            <div id="map"></div>
  310.            <p>Vi håller förnärvarande till i Stockholmsområdet. Det är där majoriteten av våra ölprover och andra tester kommer att utföras</p>
  311.          </div>
  312.        </form>
  313.      </div>
  314.    </div>
  315.  </div>
  316. </section>
  317. <footer> <a href="https://twitter.com/serolofficial" class="twitter"> <span class="twitter"></span>
  318.  <p class="twitter_status"></p>
  319.  </a>
  320.  <section class="footer">
  321.    <p>&copy; Copyright 2014 <a href="#">Öl&Sånt©</a> All Rights Reserved | Website Template By <a target="_blank" href="http://madabout.rs/">Nikola Susa</a> | Download more: <a href="http://www.csstemplatesfree.org">CSS Website Templates</a></p>
  322.  </section>
  323. </footer>
  324. <!--Javascript-->
  325. <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  326. <script src="js/jquery.flexslider-min.js"></script>
  327. <script src="js/sequence.jquery-min.js"></script>
  328. <script src="js/waypoints.min.js"></script>
  329. <script src="js/quicksand.js"></script>
  330. <script src="js/jquery.masonery.js"></script>
  331. <script src="js/modernizr.custom.js"></script>
  332. <script src="js/gmaps.js"></script>
  333. <script src="js/jquery.accordion.js"></script>
  334. <script src="js/lightbox.js"></script>
  335. <script src="js/styleswitch.js"></script>
  336. <script src="js/custom.js"></script>
  337. <!--Sequence slider-->
  338. <script>
  339. var options = {
  340.    autoPlay: true,
  341.    nextButton: ".next",
  342.    prevButton: ".prev",
  343.    preloader: "#sequence-preloader",
  344.    prependPreloader: false,
  345.    prependPreloadingComplete: "#sequence-preloader, #slideshow",
  346.    animateStartingFrameIn: true,
  347.    transitionThreshold: 500,
  348.    nextButtonAlt: " ",
  349.    prevButtonAlt: " ",
  350.    afterPreload: function () {
  351.        $(".prev, .next").fadeIn(500);
  352.         if (!slideShow.transitionsSupported) {
  353.             $("#slideshow").animate({
  354.                 "opacity": "1"
  355.             }, 1000);
  356.         }
  357.     }
  358. };
  359. var slideShow = $("#slideshow").sequence(options).data("sequence");
  360. if (!slideShow.transitionsSupported || slideShow.prefix == "-o-") {
  361.     $("#slideshow").animate({
  362.         "opacity": "1"
  363.     }, 1000);
  364.     slideShow.preloaderFallback();
  365. }
  366. </script>
  367. <script>
  368. new GMaps({
  369.     div: '#map',
  370.     lat: 59.17,
  371.     lng: 18.05
  372. });
  373. </script>
  374. <script>
  375. if (typeof jQuery == 'undefined') {
  376.     document.write(unescape("%3Cscript src='js/jquery.js'%3E%3C/script%3E"));
  377. }
  378. </script>
  379. </body>
  380. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!