LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

Hey, welcome to my portfolio.

What you're about to see is what I've built so far on my endless learning path."

- Jo

ABOUT ME


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor pellentesque arcu feugiat sodales. In mattis massa massa, at euismod diam varius vitae. Nulla facilisi. Cras tempor nec nulla et accumsan. Pellentesque lacus nisi, condimentum sed vulputate et, lacinia vitae orci. Maecenas bibendum ipsum urna, congue gravida sapien sagittis ac. Nullam ac fringilla libero. Suspendisse consectetur felis vitae gravida blandit.

Jo Orsolini

PORTFOLIO


LIBLUM.com

LIBLUM.com

A full website made with HTML5, CSS3 and JavaScript, promoting Liblum - a Namur, BE multimedia services provider.

Check it out
Progression Bar project

Progression bar controlled w/ li

This is an example of a CSS loading bar controlled by li. You can click on list elements to update the progression.

Check it out
See the code
Tribute to Django

Tribute Page to Django Reinhardt

Tribute Page to Django Reinhardt made with Bootstrap.

Check it out
See the code
Statistics FX

Statistiques

A statistic program developped with JAVA language technology for a belgian company management team.

Check it out
See the code
AppliCar

AppliCar

An Android app for employee tablets of a belgian company to help managing appointments for the car fleet.

Check it out
See the code
Random QuoteGen

Random QuoteGen

A random quote generator using QuotesOnDesign API.

Check it out
See the code
Developer Wallpaper

MORE TO COME

Come back soon...

CSS
#top {
  background-image: url(https://liblum.com/codepen/images/header.jpg);
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
#quote {
  width: 85vw;
  position: fixed;
  display: none;
  color: #fff;
  padding: 10% 0 0 55%;
}
.navbar {
  border: none;
}
#about, #portfolio {
  padding-top: 5em;
  padding-bottom: 5em;
}
hr {
    margin: 40px auto 30px;
    padding: 0;
    max-width: 512px;
    border: 0;
    border-top: solid 2px;
    text-align:center;
}
#about p {
  margin-top: 7em;
}
#arrow-up {
  display: none;
  position: fixed;
  height: 100px;
  float: right;
	padding: 0 .5em 2.1em 0;
	bottom: -1em;
	right: 0;
  color: #333;
}
.thumbnail {
  transition: all 0.6s;
  transform: scale(1);
}
.thumbnail:hover {
  box-shadow: 5px 5px 10px #444;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.thumbnail img {
  min-height: 220px;
}
footer {
  padding: 23px 0 0 30px;
  font-size: 18px;
  background-color: #333;
  height: 70px;
  color: #fff;
}
/* MEDIA QUERIES */
@media screen and (max-width: 901px){
  #profile {
    display: none;
  }
}
JS
$(document).ready(function(){
  $('#quote').fadeIn(2000);
});

$(window).on('scroll', function(){
  if ($(this).scrollTop() >= 150) {
    $('#quote').fadeOut(300);
    $('#arrow-up').slideDown(500);
  } else {
    $("#quote").fadeIn(1000);
    $('#arrow-up').slideUp(500);
  }
  if ($(this).scrollTop() + $(window).height() >= $(document).height()-35){
    $('#arrow-up').css("color", "#fff");
  } else {
    $('#arrow-up').css("color", "#333");
  }
});

$('.navbar-collapse ul li a').click(function() {
  $(".navbar-collapse").collapse('hide');
});

$('a').on('click', function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv