"charity Profile "
Bootstrap 3.1.0 Snippet by maksim09

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://prodbelgium.beta.gsitechnology.co.uk/cassette.axd/stylesheet/45f0df8126f25fcbaedb1e5f6a3b4bf364f48063/styles" type="text/css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <div id="header"> <div class="navbar navbar-absolute-top"> <div class="container"> <div class="navbar-header"> <div class="row"> <div class="col-md-9 navbar-brand"> <a href="/default.aspx" title="Philantropie.be"> <div id="logo"> <img alt=" " id="Index" src="http://prodbelgium.beta.gsitechnology.co.uk/Content/images/logoFR.png"> <span class="logoDesc"><span>Agir en connaissance de cause</span></span> </div> </a> </div> <div class="col-md-3 header-right align-right"> <ul id="LoginPartial" class="nav navbar-nav navbar-top navbar-right"> <li> <div id="newsletter-button"> <a href="#" id="NewsletterHeader">Newsletter</a> </div> <div id="newsletter-content" class="box-content" style="display: none;"> <div class="white-background newsletter"> <div class="newsletter-form"> <form id="newslettersignup" class="form-inline" action="/new/Account/SubscribeNewsletter" autocomplete="off" data-bind="parsleyValidation{onFormValidate:Newsletter},enterKeyPress:Newsletter" novalidate=""> <div class="form-group"> <label class="control-label" for="NewsletterEmail">E-mail</label> <input class="form-control" data-bind="value: NewsletterEmail" data-parsley-required="True" data-parsley-required-message="Champ obligatoire" data-parsley-type="email" data-parsley-type-email-message="Merci de introduire une adresse e-mail valide" data-parsley-validation-threshold="3" id="NewsletterEmail" name="NewsletterEmail" placeholder="Obligatoire" value="" data-parsley-id="4656" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"> <ul class="parsley-errors-list" id="parsley-id-4656"></ul> </div> <button class="btn search-button newsletter-button-submit" id="ContinueButton" type="submit">Continuez</button> </form> </div> </div> </div> </li> <li> <a href="/new/Account/Register" id="InscriptionButton">Inscription</a> </li> <li><a href="/Login.aspx" id="LoginButton">Login</a> </li> </ul> <script style="color: rgb(84, 84, 84);"> var jsonLoginPartialModel = '{"NewsletterHeader":"","InscriptionButton":"","LogoutButton":"","LoginButton":"","NewsletterEmail":"","ContinueButton":""}'; </script> <a href="http://www.kbs-frb.be/index.aspx?LangType=2060" id="Index" target="_blank" title=""> <img alt="" class="align-center" src="http://prodbelgium.beta.gsitechnology.co.uk/images/Logo_FRB_FR.png"> </a> </div> </div> </div> <div class="row align-center"> <ul class="nav navbar-nav main-nav"> <li><a href="/Default.aspx">Accueil</a> </li> <li><a href="#">A Propos</a> <ul> <li><a href="/about_us.aspx">Philanthropie.be</a> </li> <li><a href="/Useful_links.aspx">Liens utiles</a> </li> <li><a href="/Partners.aspx">Partenaires</a> </li> <li><a href="/FAQs.aspx">Questions Fréquentes</a> </li> <li><a href="/Terms.aspx">Conditions Générales</a> </li> </ul> </li> <li><a href="#">Espace association</a> <ul> <li><a href="/Registration.aspx">Inscription</a> </li> <li><a href="/Login.aspx">Login - Mise à jour</a> </li> <li><a href="/Login/CPBChangePassword.aspx">Modifier Mot de Passe</a> </li> <li><a href="/UserGuide.aspx">Guide de l'utilisateur</a> </li> </ul> </li> <li><a href="/Nieuws.aspx">Espace Infos</a> <ul> <li><a href="/News.aspx">Nouvelles</a> </li> <li><a href="/Dossiers.aspx">Dossiers</a> </li> <li><a href="/Projects.aspx">Appels à projets</a> </li> <li><a href="/Training.aspx">Formations</a> </li> <li><a href="/What_can_I_do.aspx">Que puis-je faire ?</a> </li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="/Contact.aspx">Contact</a> </li> <li><a href="/Feedback.aspx">Formulaire de contact</a> </li> </ul> </li> </ul> </div> </div> </div> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="/new" title="Philantropie.be" class="sygnat"> <img alt="logo" id="Index" src="/Content/images/sygnat-philanthropie.png"> </a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"> </span> </button> </div> <div class="navbar-full"> <ul class="nav navbar-nav main-nav"> <li><a href="/Default.aspx">Accueil</a> </li> <li><a href="#">A Propos</a> <ul> <li><a href="/about_us.aspx">Philanthropie.be</a> </li> <li><a href="/Useful_links.aspx">Liens utiles</a> </li> <li><a href="/Partners.aspx">Partenaires</a> </li> <li><a href="/FAQs.aspx">Questions Fréquentes</a> </li> <li><a href="/Terms.aspx">Conditions Générales</a> </li> </ul> </li> <li><a href="#">Espace association</a> <ul> <li><a href="/Registration.aspx">Inscription</a> </li> <li><a href="/Login.aspx">Login - Mise à jour</a> </li> <li><a href="/Login/CPBChangePassword.aspx">Modifier Mot de Passe</a> </li> <li><a href="/UserGuide.aspx">Guide de l'utilisateur</a> </li> </ul> </li> <li><a href="/Nieuws.aspx">Espace Infos</a> <ul> <li><a href="/News.aspx">Nouvelles</a> </li> <li><a href="/Dossiers.aspx">Dossiers</a> </li> <li><a href="/Projects.aspx">Appels à projets</a> </li> <li><a href="/Training.aspx">Formations</a> </li> <li><a href="/What_can_I_do.aspx">Que puis-je faire ?</a> </li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="/Contact.aspx">Contact</a> </li> <li><a href="/Feedback.aspx">Formulaire de contact</a> </li> </ul> </li> </ul> </div> <div class="navbar-collapse collapse navbar-mobile" style="height: 1px;"> <ul class="nav navbar-nav"> <li><a href="/Default.aspx">Accueil</a> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">A Propos<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/about_us.aspx">Philanthropie.be</a> </li> <li><a href="/Useful_links.aspx">Liens utiles</a> </li> <li><a href="/Partners.aspx">Partenaires</a> </li> <li><a href="/FAQs.aspx">Questions Fréquentes</a> </li> <li><a href="/Terms.aspx">Conditions Générales</a> </li> </ul> </li> <li></li> <li></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Espace association<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/Registration.aspx">Inscription</a> </li> <li><a href="/Login.aspx">Login - Mise à jour</a> </li> <li><a href="/Login/CPBChangePassword.aspx">Modifier Mot de Passe</a> </li> <li><a href="/UserGuide.aspx">Guide de l'utilisateur</a> </li> </ul> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Espace Infos<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/Nieuws.aspx">Espace Infos</a> </li> <li class="divider"></li> <li><a href="/News.aspx">Nouvelles</a> </li> <li><a href="/Dossiers.aspx">Dossiers</a> </li> <li><a href="/Projects.aspx">Appels à projets</a> </li> <li><a href="/Training.aspx">Formations</a> </li> <li><a href="/What_can_I_do.aspx">Que puis-je faire ?</a> </li> </ul> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/Contact.aspx">Contact</a> </li> <li><a href="/Feedback.aspx">Formulaire de contact</a> </li> </ul> </li> </ul> </div> </div> </div> <div class="navbar-lang"> <a class="active" href="/new/Start/ChangeUiLanguage?selectedLanguage=2" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET' });">FR</a><a class="" href="/new/Start/ChangeUiLanguage?selectedLanguage=3" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET' });">NL</a><a class="" href="/new/Start/ChangeUiLanguage?selectedLanguage=4" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET' });">DE</a> </div> </div> <nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation"> <div class="navbar-toggler animate"> <span class="menu-icon"></span> </div> <ul class="navbar-menu animate"> <li> <a href="#about-us" class="animate"> <span class="desc animate"> Who We Are </span> <span class="glyphicon glyphicon-user"></span> </a> </li> <li> <a href="#blog" class="animate"> <span class="desc animate"> What We Say </span> <span class="glyphicon glyphicon-info-sign"></span> </a> </li> <li> <a href="#contact-us" class="animate"> <span class="desc animate"> How To Reach Us </span> <span class="glyphicon glyphicon-comment"></span> </a> </li> </ul> </nav> <br/> <div class="container" style="padding:0"> <div class="row main clearfix"> <section class="col-md-2 card-wrapper affix"> <div class="card profile-card"> <div class="profile-pic"> <img class="media-object img-circle center-block" data-src="holder.js/64x64" alt="64x64" src="http://www.gravatar.com/avatar/0572f2d73025fd3009a79e7abee62b45?s=100&r=pg&d=mm" style="width: 100px; height: 100px;"> </div> <h3 class="text-center text-bolder"> R.O.M.E.O. ASBL</h3> <h5 class="text-muted text-center">Culture / Patrimoine</h5> <hr> <div class="contact-details clearfix"> <div class="detail"> <span class="icon"> <i class="fa fa-lg fa-location-arrow"></i> </span> <span class="info"> San Francisco, California, US </span> <a href='#' > <img alt="map" src="https://maps.googleapis.com/maps/api/staticmap?center=37.7749295,-122.4194155&zoom=12&size=100x1000" style="width: 100px; height: 100px;"> </a> </div> <div class="detail"> <span class="icon"> <i class="fa fa-lg fa-phone"></i> </span> <span class="info"> (912) 555-4321 </span> </div> <div class="detail"> <span class="icon"> <i class="fa fa-lg fa-envelope"></i> </span> <span class="info"> richard.hendriks@gmail.com </span> </div> <div class="detail"> <span class="icon" title="Languages I speak"> <i class="fa fa-lg fa-language"></i> </span> <span class="info"> English </span> </div> </div> <hr> <div class="social-links text-center"> <a class="fa fa-twitter fa-2x social-link link-twitter" href="http://www.twitter.com/neutralthoughts" target="_blank"></a> <a class="fa fa-rss fa-2x social-link link-blog" href="http://richardhendricks.com" target="_blank"></a> </div> </div> </section> <section class="col-md-8 card-wrapper pull-right"> <div class="card background-card"> <h4 class="text-uppercase text-bolder">Background</h4> <hr> <div class="background-details"> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-user"></i> </div> <div class="info"> <h4 class="title text-uppercase"> About </h4> <div class="content"> Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinals!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation! </div> </div> </div> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-building"></i> </div> <div class="info"> <h4 class="title text-uppercase"> Work Experience </h4> <ul class="list-unstyled"> <li class="card card-nested clearfix"> <div class="content has-sidebar"> <p><strong>CEO/President</strong>, Pied Piper</p> <p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p> <ul> <li> Build an algorithm for artist to detect if their music was violating copy right infringement laws </li> <li> Successfully won Techcrunch Disrupt </li> <li> Optimized an algorithm that holds the current world record for Weisman Scores </li> </ul> </div> <div class="sidebar text-muted text-center"> <p> <strong>Joined:</strong>  Nov, 2013 </p> <p> <strong>Left:</strong>  Nov, 2014 </p> <p> <i class="fa fa-clock-o icon-left"></i> 1 year </p> </div> </li> </ul> </div> </div> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-code"></i> </div> <div class="info"> <h4 class="title text-uppercase"> Skills </h4> <div class="content"> <ul class="list-unstyled"> <li class="card card-nested card-skills"> <div class="skill-level js-tooltip" title="" data-placement="left" data-original-title="Master"> <div class="skill-progress master"> </div> </div> <div class="skill-info"> <strong>Web Development</strong> <div class="space-top labels"> <span class="label label-keyword">HTML</span> <span class="label label-keyword">CSS</span> <span class="label label-keyword">Javascript</span> </div> </div> </li> <li class="card card-nested card-skills"> <div class="skill-level js-tooltip" title="" data-placement="left" data-original-title="Master"> <div class="skill-progress master"> </div> </div> <div class="skill-info"> <strong>Compression</strong> <div class="space-top labels"> <span class="label label-keyword">Mpeg</span> <span class="label label-keyword">MP4</span> <span class="label label-keyword">GIF</span> </div> </div> </li> </ul> </div> </div> </div> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-mortar-board"></i> </div> <div class="info"> <h4 class="title text-uppercase"> Education </h4> <div class="content"> <ul class="list-unstyled"> <li class="card card-nested"> <div class="content has-sidebar"> <p> <strong>Information Technology, Bachelor</strong>,  University of Oklahoma </p> <i>4.0</i> <div class="space-top labels"> <span class="label label-keyword">DB1101 - Basic SQL</span> <span class="label label-keyword">CS2011 - Java Introduction</span> </div> </div> <div class="sidebar text-muted text-center"> <p> <strong>Started:</strong>  May, 2011 </p> <p> <strong>Completion:</strong>  Dec, 2013 </p> </div> </li> </ul> </div> </div> </div> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-trophy"></i> </div> <div class="info"> <h4 class="title text-uppercase"> Awards </h4> <div class="content"> <ul class="list-unstyled"> <li class="card card-nested"> <div class="content has-sidebar"> <p> <strong>Digital Compression Pioneer Award</strong>,  Techcrunch </p> <p class="clear-margin"> There is no spoon. </p> </div> <div class="sidebar text-muted text-center"> <p> <strong>Awarded on:</strong>  Oct 31, 2014 </p> </div> </li> </ul> </div> </div> </div> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-child"></i> </div> <div class="info"> <h4 class="title text-uppercase"> Volunteer Work </h4> <div class="content"> <ul class="list-unstyled"> <li class="card card-nested"> <div class="content has-sidebar"> <p> <strong>Teacher</strong>,  CoderDojo </p> <p>Global movement of free coding clubs for young people.</p> <ul> <li> Awarded 'Teacher of the Month' </li> </ul> </div> <div class="sidebar text-muted text-center"> <p> <strong>Since:</strong>  Dec, 2011 </p> <p> <strong>Until:</strong>  Dec, 2012 </p> </div> </li> </ul> </div> </div> </div> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-book"></i> </div> <div class="info"> <h4 class="title text-uppercase"> Publications </h4> <div class="content"> <ul class="list-unstyled"> <li class="card card-nested"> <div class="content has-sidebar"> <p> <strong> <a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)" target="_blank">Video compression for 3d media</a> </strong>,  Hooli </p> <p class="clear-margin">Innovative middle-out compression algorithm that changes the way we store data.</p> </div> <div class="sidebar text-muted text-center"> <p> <strong>Published on:</strong>  Sep 30, 2014 </p> </div> </li> </ul> </div> </div> </div> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-heart"></i> </div> <div class="info"> <h4 class="title text-uppercase"> Interests </h4> <div class="content"> <ul class="list-unstyled"> <li class="card card-nested"> <p> <strong>Wildlife</strong> </p> <div class="space-top labels"> <span class="label label-keyword">Ferrets</span> <span class="label label-keyword">Unicorns</span> </div> </li> </ul> </div> </div> </div> <div class="detail"> <div class="icon"> <i class="fa fa-lg fa-thumbs-up"></i> </div> <div class="info"> <h4 class="title text-uppercase"> References </h4> <div class="content"> <ul class="list-unstyled"> <li class="card card-nested"> <p> <strong>Erlich Bachman</strong> </p> <p class="clear-margin">It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company.</p> </li> </ul> </div> </div> </div> </div> </div> </section> </div> </div>
.clear-margin { margin: 0; } .space-top { margin-top: 10px; } .icon-left { margin-right: 5px; } .icon-right { margin-left: 5px; } .labels { word-spacing: 5px; } .label-keyword { display: inline-block; background: #7eb0db; color: white; font-size: 0.9em; padding: 5px; border: 1px solid #357ebd; } body { font-family: 'Lato'; background: #f0f0f0; color: #333333; } .main { padding: 5px; } .card { background: #ffffff; border: 1px solid #e6e6e6; border-radius: 3px; min-height: 300px; padding: 10px; } .card-nested { min-height: 0; margin-bottom: 10px; border-width: 1px 0 0 0; } .background-card { padding: 10px 20px; } .card-wrapper { padding: 5px; } .text-bolder { font-weight: bold; } .background-details .detail { display: table; padding: 10px 0; } .background-details .detail .icon { min-width: 45px; max-width: 45px; text-align: center; } .background-details .detail .info { width: 100%; } .background-details .detail .title, .background-details .detail .icon { color: #707070; } .background-details .detail .icon, .background-details .detail .info { display: table-cell; padding: 0 10px; } .info .content.has-sidebar { width: 80%; box-sizing: border-box; float: left; padding: 0 10px; border-right: 1px solid #cdcdcd; } .info .sidebar { margin-left: 80%; box-sizing: border-box; padding: 10px; } .profile-pic { padding: 20px 0; } .contact-details .detail { display: table; padding: 10px 0; } .contact-details .detail .icon { padding: 0 10px; color: #707070; } .contact-details .detail .info { font-size: 0.8em; } .contact-details .detail .icon, .contact-details .detail .info { display: table-cell; vertical-align: middle; } .social-link { margin-left: 5px; } .social-link:first-child { margin-left: 0; } .social-link:hover { text-decoration: none; } .link-github { color: #454545; } .link-github:hover { color: #2b2b2b; } .link-twitter { color: #33ccff; } .link-twitter:hover { color: #00bfff; } .link-blog { color: #f36f24; } .link-blog:hover { color: #d8560c; } .link-linkedin { color: #007bb6; } .link-linkedin:hover { color: #005983; } .link-skype { color: #12a5f4; } .link-skype:hover { color: #0986ca; } .card-skills { position: relative; } .skill-level { border-radius: 3px; position: absolute; top: 10px; bottom: 10px; left: 0; width: 10px; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2); } .skill-level .skill-progress { position: absolute; border-radius: 3px; bottom: 0; width: 100%; -webkit-transition: height 1s ease; } .skill-level .skill-progress.beginner { height: 50%; background: #e74c3c; } .skill-level .skill-progress.intermediate { height: 70%; background: #f1c40f; } .skill-level .skill-progress.advanced { height: 80%; background: #428bca; } .skill-level .skill-progress.master { height: 95%; background: #5cb85c; } .skill-info { margin-left: 10px; } .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar-fixed-left { position: fixed !important; top: 40px; left: 0px; border-radius: 0px; } .navbar-minimal { width: 60px; min-height: 60px; max-height: 100%; background-color: rgb(51, 51, 51); background-color: rgba(51, 51, 51, 0.8); border-width: 0px; z-index: 1000; } .navbar-minimal > .navbar-toggler { position: relative; min-height: 60px; border-bottom: 1px solid rgb(81, 81, 81); z-index: 100; cursor: pointer; } .navbar-minimal.open > .navbar-toggler, .navbar-minimal > .navbar-toggler:hover { background-color: rgb(158, 202, 59); } .navbar-minimal > .navbar-toggler > span { position: absolute; top: 50%; right: 50%; margin: -8px -8px 0 0; width: 16px; height: 16px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9IjAgMCAxNiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsN2gxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDksMCw4LjU1MiwwLDgKCVMwLjQ0OCw3LDEsN3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLDEyaDE0YzAuNTUyLDAsMSwwLjQ0OCwxLDFzLTAuNDQ4LDEtMSwxSDFjLTAuNTUyLDAtMS0wLjQ0OC0xLTEKCVMwLjQ0OCwxMiwxLDEyeiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsMmgxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDQsMCwzLjU1MiwwLDMKCVMwLjQ0OCwyLDEsMnoiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjMzLDI4Ljk3bDExLjY0LTExLjY0YzAuNDU5LTAuNDU5LDEuMjA0LTAuNDU5LDEuNjYzLDAKCWMwLjQ1OSwwLjQ1OSwwLjQ1OSwxLjIwNCwwLDEuNjYzTDIuOTkzLDMwLjYzM2MtMC40NTksMC40NTktMS4yMDQsMC40NTktMS42NjMsMEMwLjg3MSwzMC4xNzQsMC44NzEsMjkuNDMsMS4zMywyOC45N3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLjk5MywxNy4zM2wxMS42NDEsMTEuNjRjMC40NTksMC40NTksMC40NTksMS4yMDQsMCwxLjY2MwoJcy0xLjIwNCwwLjQ1OS0xLjY2MywwTDEuMzMsMTguOTkzYy0wLjQ1OS0wLjQ1OS0wLjQ1OS0xLjIwNCwwLTEuNjYzQzEuNzg5LDE2Ljg3MSwyLjUzNCwxNi44NzEsMi45OTMsMTcuMzN6Ii8+Cjwvc3ZnPgo=); background-repeat: no-repeat; background-position: 0 0; -webkit-transition: -webkit-transform .3s ease-out 0s; -moz-transition: -moz-transform .3s ease-out 0s; -o-transition: -moz-transform .3s ease-out 0s; -ms-transition: -ms-transform .3s ease-out 0s; transition: transform .3s ease-out 0s; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .navbar-minimal > .navbar-menu { position: absolute; top: -1000px; left: 0px; margin: 0px; padding: 0px; list-style: none; z-index: 50; background-color: rgb(51, 51, 51); background-color: rgba(51, 51, 51, 0.8); } .navbar-minimal > .navbar-menu > li { margin: 0px; padding: 0px; border-width: 0px; height: 54px; } .navbar-minimal > .navbar-menu > li > a { position: relative; display: inline-block; color: rgb(255, 255, 255); padding: 20px 23px; text-align: left; cursor: pointer; border-bottom: 1px solid rgb(81, 81, 81); width: 100%; text-decoration: none; margin: 0px; } .navbar-minimal > .navbar-menu > li > a:last-child { border-bottom-width: 0px; } .navbar-minimal > .navbar-menu > li > a:hover { background-color: rgb(158, 202, 59); } .navbar-minimal > .navbar-menu > li > a > .glyphicon { float: right; } .navbar-minimal.open { width: 320px; } .navbar-minimal.open > .navbar-toggler > span { background-position: 0 -16px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .navbar-minimal.open > .navbar-menu { top: 60px; width: 100%; min-height: 100%; } @media (min-width: 768px) { .navbar-minimal.open { width: 60px; } .navbar-minimal.open > .navbar-menu { overflow: visible; } .navbar-minimal > .navbar-menu > li > a > .desc { position: absolute; display: inline-block; top: 50%; left: 130px; margin-top: -20px; margin-left: 20px; text-align: left; white-space: nowrap; padding: 10px 13px; border-width: 0px !important; background-color: rgb(51, 51, 51); background-color: rgba(51, 51, 51, 0.8); opacity: 0; } .navbar-minimal > .navbar-menu > li > a > .desc:after { z-index: -1; position: absolute; top: 50%; left: -10px; margin-top: -10px; content:''; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid rgb(51, 51, 51); border-right-color: rgba(51, 51, 51, 0.8); } .navbar-minimal > .navbar-menu > li > a:hover > .desc { left: 60px; opacity: 1; } } .back-to-top { cursor: pointer; position: fixed; bottom: 20px; right: 20px; display:none; }
$(document).ready(function() { var panels = $('.user-infos'); var panelsButton = $('.dropdown-user'); panels.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-to-top').click(function () { $('#back-to-top').tooltip('hide'); $('body,html').animate({ scrollTop: 0 }, 800); return false; }); $('#back-to-top').tooltip('show'); //Click dropdown panelsButton.click(function() { //get data-for attribute var dataFor = $(this).attr('data-for'); var idFor = $(dataFor); //current button var currentButton = $(this); idFor.slideToggle(400, function() { //Completed slidetoggle if(idFor.is(':visible')) { currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>'); } else { currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>'); } }) }); $('[data-toggle="tooltip"]').tooltip(); $('button').click(function(e) { e.preventDefault(); alert("This is a demo.\n :-)"); }); }); $(function () { /* START OF DEMO JS - NOT NEEDED */ if (window.location == window.parent.location) { $('#fullscreen').html('<span class="glyphicon glyphicon-resize-small"></span>'); $('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/PbDb5'); $('#fullscreen').attr('title', 'Back To Bootsnipp'); } $('#fullscreen').on('click', function(event) { event.preventDefault(); window.parent.location = $('#fullscreen').attr('href'); }); $('#fullscreen').tooltip(); /* END DEMO OF JS */ $('.navbar-toggler').on('click', function(event) { event.preventDefault(); $(this).closest('.navbar-minimal').toggleClass('open'); }) });

Related: See More


Questions / Comments: