Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
  <meta name="description" content="Anything festival - Website with jQuery">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,700|Sintony:400,700" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <link rel="shortcut icon" type="image/x-icon" href="https://github.com/AnikoBorosova/Exercise-Flexbox-festival-website/blob/master/favicon_festival.png?raw=true">
  <title>Anything festival</title>
</head>
​
<body>
  <header id="C1" class="cover">
    <navbar>
      <img class="logo" src="https://github.com/AnikoBorosova/Exercise-Flexbox-festival-website/blob/master/logo_placeholder.png?raw=true" alt="logo">
      <a class="toggle-button"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></a>
      <div class="nav">
        <a href="#C1">Home</a>
        <a href="#C2">About us</a>
        <a href="#C3">Program</a>
        <a href="#C4">Partners</a>
        <a href="#C5">Contact</a>
      </div>
    </navbar>
    <div class="wrapper">
      <h1>Anything festival</h1>
      <h2>4-6. august, Somewhere</h2>
    </div>
  </header>
​
  <main>
    <section id="C2" class="section">
      <h1>About us</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus dolor mauris, at iaculis ex suscipit et. Vestibulum dapibus dolor id arcu tincidunt feugiat. Nulla vitae pharetra ligula, id pharetra magna. Aliquam quis pharetra nisl. Vivamus
        sed nulla hendrerit, tempus risus eu, maximus lorem. Nullam at dapibus risus. Praesent cursus gravida nisi, et maximus ex pretium vel. Fusce nec feugiat eros, eget venenatis ligula. Sed vitae commodo augue. Donec consectetur gravida lobortis.</p>
      <ul class="about-us">
        <li class="info-box">
          <i class="fa fa-calendar fa-5x" aria-hidden="true"></i>
          <h2>When</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus dolor mauris, at iaculis ex suscipit et. Vestibulum dapibus dolor id arcu tincidunt feugiat.</p>
        </li>
        <li class="info-box">
          <i class="fa fa-map-marker fa-5x" aria-hidden="true"></i>
          <h2>Where</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus dolor mauris, at iaculis ex suscipit et. Vestibulum dapibus dolor id arcu tincidunt feugiat.</p>
        </li>
        <li class="info-box">
          <i class="fa fa-money fa-5x" aria-hidden="true"></i>
          <h2>Prices</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus dolor mauris, at iaculis ex suscipit et. Vestibulum dapibus dolor id arcu tincidunt feugiat.</p>
        </li>
      </ul>
    </section>
​
    <section id="C3" class="section">
      <h1>Program</h1>
      <div class="program-box">
      <div class="program-group">
        <h2>Friday</h2>
        <ul class="time-table">
          <li>10:00 – Opening</li>
          <li>12:00 – Lunch break</li>
          <li>13:00 – Awesome program</li>
          <li>15:00 – Slightly boring event</li>
          <li>19:00 – Getting better</li>
          <li>21:00 - Party</li>
        </ul>
      </div>
      <div class="program-group">
        <h2>Saturday</h2>
        <ul class="time-table">
          <li>10:00 – Opening</li>
          <li>12:00 – Lunch break</li>
          <li>13:00 – Awesome program</li>
          <li>15:00 – Slightly boring event</li>
          <li>19:00 – Getting better</li>
          <li>21:00 - Party</li>
        </ul>
      </div>
      <div class="program-group">
        <h2>Sunday</h2>
        <ul>
          <li>10:00 – Closing</li>
          <li>12:00 – Wrap up</li>
          <li>13:00 – Nothing to see here anymore</li>
        </ul>
      </div>
      </div>
    </section>
​
    <section id="C4" class="section">
      <h1>Our partners</h1>
      <div class="partner-logos">
      <a href="#" title="Company One"><img src="https://github.com/AnikoBorosova/Exercise-Flexbox-festival-website/blob/master/partner_one.png?raw=true" alt="Partner One">
      </a>
      <a href="#" title="Company Two"><img src="https://github.com/AnikoBorosova/Exercise-Flexbox-festival-website/blob/master/partner_two.png?raw=true" alt="Partner Two">
      </a>
      <a href="#" title="Company Three"><img src="https://github.com/AnikoBorosova/Exercise-Flexbox-festival-website/blob/master/partner_three.png?raw=true" alt="Partner Three">
      </a>
      <a href="#" title="Company Four"><img src="https://github.com/AnikoBorosova/Exercise-Flexbox-festival-website/blob/master/partner_four.png?raw=true" alt="Partner Four">
      </a>
      </div>
    </section>
​
    <section id="C5" class="section">
      <h1>Contact us</h1>
      <div class="contact">
        <p><i class="fa fa-envelope fa-lg" aria-hidden="true"></i> <a href="mailto:anything@festival.com" class="email">anything@festival.com</a></p>
        <ul class="social-media">
          <li><a href="https://www.facebook.com/#" target="_blank" title="Facebook"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a>
          </li>
          <li><a href="https://www.twitter.com/#" target="_blank" title="Twitter"><i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i></a>
          </li>
          <li><a href="https://www.instagram.com/#" target="_blank" title="Instagram"><i class="fa fa-instagram fa-3x" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>
    </section>
  </main>
​
  <footer>
    <p>Created by <a href="https://www.linkedin.com/in/anikoborosova/" target="_blank" title="View Anikó on LinkedIn">Anikó Borosová</a>, 2017</p>
    <small>
    <p>Header graphics by:</p> 
    <a rel="nofollow" target="_blank" href="https://www.vecteezy.com" title="Vecteezy">Vecteezy</a> |
    <a href="https://www.vecteezy.com/members/kangkikur" target="_blank" title="kangkikur">kangkikur</a>
    </small>
  </footer>
​
</body>
​
</html>
 
/* function to toggle the navigation bar
and make the scroll of links smooth */
​
function contentHide() {
  $('.toggle-button').on('click', function() {
    $('.nav').slideToggle(300);
​
    var $root = $('html, body');
    $('a').click(function() {
      $root.animate({
        scrollTop: $($.attr(this, 'href')).offset().top
      }, 900);
      return false;
    });
​
  });
}
​
$(document).ready(contentHide);
​
​
//method for fading out the headline
​
$(window).scroll(function() {
  $('.wrapper h1, .wrapper h2').css('opacity', 1 - $(window).scrollTop() / 350);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
AnikoBorosovapro
0viewers