Barcelona the trip

In this example below you will see how to do a Barcelona the trip with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by shemiperez, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shemiperez ©
  • HTML
  • CSS
  • JavaScript
        <ul>
      <li>
        <header>
          <section id="main" class="main">
              <div id="site-title" class="main-title color1">
                  <hgroup>
                      <h1><span class="anaheim a">Barcelona</span><span class="alef b">the</span><span class="anaheim c">trip</span></h1>
                  </hgroup>
              </div>
                <nav id="main-nav">
                    <ul>
                        <li><a class="active" href="#main" title="Main">Main</a></li>
                        <li><a href="#First" title="First day">First day</a></li>
                        <li><a href="#second" title="second day">second day</a></li>
                        <li><a href="#third" title="third day">third day</a></li>
                        <li><a href="#fourth" title="fourth day">fourth day</a></li>
                        <li><a href="#credit" title="credit">credit</a></li>
                    </ul>
                </nav>
              <div class="map-slider">
                  <div class="continer">
                      <div class="map-mask"></div>
                      <ul class="map-mask-slider">
                          <li><img alt="barca" src="img/main/main (1).JPG" /></li>
                          <li><img alt="barca" src="img/main/main (2).JPG" /></li>
                          <li><img alt="barca" src="img/main/main (3).JPG" /></li>
                          <li><img alt="barca" src="img/main/main (4).JPG" /></li>
                          <li><img alt="barca" src="img/main/main (5).JPG" /></li>
                      </ul><!--.map-mask-slider-->
                  </div>
              </div><!--.map-slider-->
        </section><!--#main-->
       </header>
        <section id="First" class="First">
            <div class="roo roo1">
                <div id="section-title" class="section-title-left section-title-landing">
                    <h2 class="color2">The landing</h2>
                </div>
                <div class="o-pic h200">
                    <a href="#fbox" class="fbox"><img src="img/day1/landing/landing (1).jpg" alt="landing" title="landing" /></a>
                    <a href="#fbox" class="fbox"><img src="img/day1/landing/landing (2).jpg" alt="landing" title="landing" /></a>
                    <a href="#fbox" class="fbox"><img src="img/day1/landing/landing (3).jpg" alt="landing" title="landing" /></a>
                </div>
            </div><!--.roo1-->
            <div class="roo roo2">
                <div id="section-title" class="section-title-right section-title-Before">
                    <h2 class="color2">Before check in</h2>
                </div>
                <div class="o-pic h200">
                    <a href="#fbox" class="fbox"><img src="img/day1/Before check in/Before check in (1).jpg" alt="Before check in" title="Before check in" /></a>
                    <a href="#fbox" class="fbox"><img src="img/day1/Before check in/Before check in (2).jpg" alt="Before check in" title="Before check in" /></a>
                    <a href="#fbox" class="fbox"><img src="img/day1/Before check in/Before check in (3).jpg" alt="Before check in" title="Before check in" /></a>
                </div>
            </div><!--.roo2-->
            <div class="roo roo3">
                <div id="section-title" class="section-title-left section-title-larambla">
                    <h2 class="color2">La Rambla</h2>
                </div>
                <div class="larambla-text">
                    <p>
                    La Rambla is a street in central Barcelona, popular with tourists and locals alike. A tree-lined pedestrian mall, it stretches for 1.2 kilometers between Barri Gòtic and El Raval, connecting Plaça de Catalunya in the centre with the Christopher Columbus Monument at Port Vell.
                    </p>
                </div>
                <div class="pic-carusel-black">
                <div class="continer h380">
                <span class="button left"><a id="left" title="left"></a></span>
                <span class="button right"><a id="right" title="right"></a></span>
                <ul>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (1).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (2).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (3).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (4).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (5).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (6).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (7).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (8).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (9).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (10).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (11).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (12).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (13).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                <li><a href="#fbox" class="fbox"><img src="img/day1/La Rambla/La Rambla (14).jpg" alt="La Rambla" title="La Rambla" /></a></li>
                </ul>
                </div>
                </div>
            </div><!--.roo3-->
        </section>
      </li>
    </ul>

/*Downloaded from https://www.codeseek.co/shemiperez/barcelona-the-trip-FdGeb */
    @import url(https://fonts.googleapis.com/earlyaccess/alefhebrew.css);
@import url(https://fonts.googleapis.com/css?family=Anaheim);
/*-----------css reset----------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*end css reset
--------------------------------------*/
/*defolt
    ------------------------------------*/
body {
     font-family: "Alef Hebrew",
                  “Helvetica Neue”,
                   Helvetica,
                   Arial,
                  sans-serif;
}
section{
    overflow: hidden;
    height: 993px;
}
#main-nav{
    display: inline-block;
}
.fix{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
#main-nav ul{
    background-color: #fff;
    height: 80px;
    float: left;
}
#main-nav ul li{
    float: left;
}
#main-nav ul li a{
    line-height: 80px;
    padding: 0 20px;
    font-family: "Anaheim";
    font-size: 40px;
    color: #000;
    text-decoration: none;
}
#main-nav ul li a:hover,
#main-nav ul li a:active
{
    color: #000
}
#main-nav ul li a.active{
    text-shadow: 3px 1px 2px rgba(150, 150, 150, 0.95);
}
#section-title{
    height: 100px;
    width: 30%;
    font-family: "Anaheim";
    font-size: 30pt;
    background-color: #fff;
}
.section-title-right h2{
    line-height: 100px;
    float: left;
    margin-left: 10px;
}
.section-title-left h2{
    line-height: 100px;
    float: right;
    margin-right: 10px;
}
.section-title-left{
    float: left;
}
.section-title-right{
    float: right;
}
.h150 img{
   height: 118px;
   width: auto;
   border: 8px solid #fff;
}
.h200 img {
    height: 168px;
    width: auto;
    border: 8px solid #fff;
}
.h380 img {
    height: 248px;
    width: auto;
    border: 8px solid #fff;
}
.roo{
    width: 100%;
    float: left;
}
.button{
    position: absolute;
    z-index: 150;
    width: 59px;
    height: 59px;
    cursor: pointer;
}
.button a{
    display: block;
    width: 59px;
    height: 59px;}
span.left a{
    background-image: url(img/cl.png);
}
span.right a{
    width: 59px;
    height: 59px;
    background-image: url(img/cr.png);
}
/*main
    -----------------------------------*/
.color1{
    color: #8f530d;
}
.main{
    background-color: #8f530d;
}
.main #site-title{
    width: 60%;
    height: 200px;
    background-color: #FFF;
    margin: 25px 0;
}
.main #site-title hgroup{
    display: block;
    position: relative;
    width: 40%;
    overflow: hidden;
    height: 200px;
    float: right;
}
.main #site-title hgroup h1{
    font-size: 72pt;
}
.main #site-title hgroup h1 span{
    position: absolute;
}
.main #site-title hgroup h1 span.a{
   font-family: "Anaheim";  
    top: -15px;
    right: 70px;
}
.main #site-title hgroup h1 span.b {
    font-weight: bold;
    top: 50px;
    right: 180px;
    font-size: 110pt;
}
.main #site-title hgroup h1 span.c{
    font-family: "Anaheim";
    top: 110px;
    right: 30px;
}
/*map slider
    --------------------------------------------*/
.main .map-slider{
    width: 733px;
    height: 653px;
    overflow: hidden;
    margin: 10px auto;
}
.main .addm{
    margin: 90px auto;
}
.main .map-slider .continer{
    position: relative;
    width: 100%;
}
.main .map-slider .continer .map-mask{
    width: 733px;
    height: 653px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-image: url(img/main/map-mask.png);
}
.main .map-slider .continer ul li img{
    width: auto;
    height: 653px;
    position: absolute;
    z-index: 99;
}
/*First
    -------------------------------------------*/
.color2{
    color: #b42b2b;
}
#First{
    background-color: #b42b2b;
}
#First .roo1{
    margin: 130px 0 0 0;
}
#First .roo1 .o-pic{
    width: 70%;
    float: right;
}
#First .roo1 .o-pic img{
    margin: 0 50px;
    float: right;
}
#First .roo2{
    margin: 30px 0 0 0;
}
#First .roo2 .o-pic{
    width: 70%;
    float: left;
}
#First .roo2 .o-pic img{
    margin: 0 110px;
    float: left;
}
#First .roo3{
    margin: 30px 0 0 0;
}
#First .roo3 .larambla-text{
    float: right;
    width: 70%;
    font-size: 18pt;
    color: #fff;
    font-weight: normal;
}
#First .roo3 .larambla-text p{
    padding: 15px;
}
.pic-carusel-black{
    clear: both;
    overflow: hidden;
    height: 290px;
    width: 97%;
    margin: 0 auto;
}
.pic-carusel-black .continer {
    margin: 25px 0 0 0;
    position: relative;
}
.pic-carusel-black .continer ul {
   height: 270px;
   position: absolute;
   top: 0;
   left: 0;
}
.pic-carusel-black .continer ul li {
    margin: 0 20px;
    float: left;
}
.pic-carusel-black .continer ul li img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
}
.pic-carusel-black .continer ul li img:hover{
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    filter: grayscale(0);
}
.pic-carusel-black span.left {
    left: 5px;
    top: 100px;
}
.pic-carusel-black span.right{
    right: 5px;
    top: 100px;
}


/*Downloaded from https://www.codeseek.co/shemiperez/barcelona-the-trip-FdGeb */
    jQuery(function ($) {
    function fixNav() {
        var $cache = $('#main-nav');
        var $slider = $('.map-slider');
        if ($(window).scrollTop() > 250) {
            $cache.addClass("fix");
            $slider.addClass("addm");
        } else {
            $cache.removeClass("fix");
            $slider.removeClass("addm");
        }
    }
    $(window).scroll(fixNav);
    fixNav();
    //carusel slider black
    $(document).ready(function () {
        var $slider = $('.pic-carusel-black .continer ul');
        $slider.find('img:first').load(function () {
            var i = 3;
            var liWidth = $slider.find('img:first').width();
            var liFullWidth = parseInt(liWidth * $slider.find('img').length);
            $slider.css('width', liFullWidth + 'px');
            $('.button a').click(function() {
                    var left = (this.id == 'right') ? parseInt($slider.css('left').toString().replace('-', '')) : parseInt($slider.css('left'));
                    var side = (this.id == 'right') ? (((left + (liWidth * i)) == liFullWidth) ? 0 : -(left + liWidth)) : ((left < 0) ? -(parseInt(left.toString().replace('-', '')) - liWidth) : 0);
					rotate(side);
                    return false;
                });
                var rotate = function(leftY) {
                    $slider.stop(true, true).animate({
                        left : leftY
                    }, 500);
                }
        });
    });
});

Comments