Line 4: | Line 4: | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
− | + | <title>Bootstrap Example</title> | |
− | + | <meta charset="utf-8"> | |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
− | + | <!--<style> | |
− | + | .body { | |
− | + | position: relative; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | .affix { | |
− | < | + | top: 20px; |
− | + | } | |
+ | |||
+ | div.col-sm-9 div { | ||
+ | height: 250px; | ||
+ | font-size: 28px; | ||
+ | } | ||
+ | |||
+ | #overview {color: #fff; background-color: #1E88E5;} | ||
+ | #medal-requirements {color: #fff; background-color: #673ab7;} | ||
+ | #bronze {color: #fff; background-color: #ff9800;} | ||
+ | #silver {color: #fff; background-color: #00bcd4;} | ||
+ | #gold {color: #fff; background-color: #009688;} | ||
+ | |||
+ | @media screen and (max-width: 810px) { | ||
+ | #overview, #medal-requirements, #bronze, #silver, #gold { | ||
+ | margin-left: 150px; | ||
+ | } | ||
+ | } | ||
+ | </style>--> | ||
+ | |||
+ | <script> | ||
+ | /* activate sidebar */ | ||
+ | $('#sidebar').affix({ | ||
+ | offset: { | ||
+ | top: 235 | ||
+ | } | ||
+ | }); | ||
− | + | /* activate scrollspy menu */ | |
− | + | var $body = $(document.body); | |
− | + | var navHeight = $('.navbar').outerHeight(true) + 10; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | $body.scrollspy({ | |
− | + | target: '#rightCol', | |
− | + | offset: navHeight | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* smooth scrolling sections */ | |
− | + | $('a[href*=#]:not([href=#])').click(function() { | |
− | + | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { | |
− | + | var target = $(this.hash); | |
− | + | target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | |
− | + | if (target.length) { | |
− | + | $('html,body').animate({ | |
+ | scrollTop: target.offset().top - 50 | ||
+ | }, 1000); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | </head> | ||
+ | <div class="container"></div> | ||
+ | <div id="masthead"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-7"> | ||
+ | <h1>Achievements | ||
+ | <p class="lead">in short</p> | ||
+ | </h1> | ||
+ | </div> | ||
+ | <div class="col-md-5"> | ||
+ | <div class="well well-lg"> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-6"> | ||
+ | <img src="//placehold.it/180x100" class="img-responsive"> | ||
+ | </div> | ||
+ | <div class="col-sm-6"> | ||
+ | Some text here | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> <!-- /container --> | ||
+ | </div> <!-- /masthead --> | ||
− | + | <!-- main --> | |
− | + | <div class="container"> | |
− | + | <div class="row"> | |
− | + | <!-- left --> | |
− | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. | + | <div class="col-md-9"> |
+ | <h2 id="overview">Overview</h2> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <hr> | ||
− | + | <h2 id="medal-requirements">Medal Requirements</h2> | |
− | + | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | |
− | + | <hr> | |
− | + | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | |
− | + | <hr> | |
− | + | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | |
− | + | <hr> | |
− | <ul class="nav | + | <hr> |
+ | |||
+ | <h2 class="bronze">Bronze</h2> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <hr> | ||
+ | |||
+ | <h2 class="silver">Silver</h2> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <hr> | ||
+ | |||
+ | <h2 class="gold">Gold</h2> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p> | ||
+ | <hr> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div> | ||
+ | <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div> | ||
+ | <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div> | ||
+ | </div> | ||
+ | <hr> | ||
+ | <hr> | ||
+ | |||
+ | |||
+ | </div> <!-- /left --> | ||
+ | |||
+ | <!-- right --> | ||
+ | <div class="col-md-3" id="rightCol"> | ||
+ | <ul class="nav nav-stacked" id="sidebar"> | ||
<li><a href="#overview">OVERVIEW</a></li> | <li><a href="#overview">OVERVIEW</a></li> | ||
<li><a href="#medal-requirements">OVERVIEW</a></li> | <li><a href="#medal-requirements">OVERVIEW</a></li> | ||
Line 90: | Line 160: | ||
<li><a href="#gold">GOLD</a></li> | <li><a href="#gold">GOLD</a></li> | ||
</ul> | </ul> | ||
− | + | </div> <!-- /right --> | |
− | </div> | + | |
− | </div> | + | </div> <!-- /row --> |
− | + | </div> <!-- /container --> | |
− | </ | + | |
</html> | </html> |
Revision as of 12:44, 13 August 2016
Achievements
in short
Overview
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Medal Requirements
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Bronze
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Silver
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Gold
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.