A CodePen by dominikfiala. dominikfiala.cz!!!!!

index.slim

doctype 5
html
  head
    title Dominik Fiala – Tvůrce webových stránek
  body
    h1.hidden Dominik Fiala – Webové stránky a aplikace na míru

    div.section-wrap#menu
      div.section
        h2.hidden Navigace
        ul.row-fluid
          li.span3.active: a href="#uvod" Úvod
          li.span3: a href="#prace" Ukázky prací
          li.span3: a href="#dovednosti" Dovednosti
          li.span3: a href="#kontakt" Kontakt

    div.section-wrap#uvod
      div.section
        div.row-fluid
          div.span8
            h2 Ahoj světe!
            p Jmenuji se <strong><a href="obsah/dominik-fiala-zivotopis.pdf" title="Životopis ve formátu PDF vhodném pro tisk">Dominik Fiala</a></strong>.
            p Rád tvořím <strong>krásné a&nbsp;funkční webové stránky</strong>, jezdím na kole a piji kávu.
            p Pod mýma rukama vznikají snadno použitelné internetové prezentace a aplikace, zahalené do slušivého kabátku.
          div.span4
            img src="http://placehold.it/220x300" title="Vyskytuji se i v reálném světě!" alt="Dominik Fiala, portrét"

    div.section-wrap#prace
      div.section
        h2 Ukázky prací
        div.row-fluid
          div.span1
            p Vlevo
          div.span10
            h3 Reference #01
            div.row-fluid
              div.span8
                div.carousel.slide
                  div.carousel-inner
                    div.item.active: img src="http://placehold.it/960x320&text=Slide 1"
                    div.item: img src="http://placehold.it/960x320&text=Slide 2"
                    div.item: img src="http://placehold.it/960x320&text=Slide 3"
                    div.item: img src="http://placehold.it/960x320&text=Slide 4"
                    div.item: img src="http://placehold.it/960x320&text=Slide 5"
                    div.item: img src="http://placehold.it/960x320&text=Slide 6"
                    div.item: img src="http://placehold.it/960x320&text=Slide 7"
                    div.item: img src="http://placehold.it/960x320&text=Slide 8"
                    div.item: img src="http://placehold.it/960x320&text=Slide 9"
                    div.item: img src="http://placehold.it/960x320&text=Slide 10"
                    div.item: img src="http://placehold.it/960x320&text=Slide 11"
              div.span4
                p Popisek první reference.
          div.span1
            p Vpravo


    div.section-container#dovednosti
      div.section
        h2 Dovednosti
        h3 Tvorba webových stránek na míru
        p Odstavec o tom jak jsem úžasný
        div.row-fluid
          div.span4
            h3 Grafika
            p Odstavec o grafice
          div.span4
            h3 Programování
            p Odstavec o programování
          div.span4
            h3 Grafika
            p Odstavec o grafice

    div.section-container#kontakt
      div.section
        h2 Kontakt
        ul
          li.mail: a href="mailto:jsem@dominikfiala.cz" title="Dnes k oslovení člověka stačí pár pohybu prstem. Napište mi o čemkoliv." jsem@dominikfiala.cz
          li.phone +420&nbsp;721&nbsp;090&nbsp;491

script.js

$('.carousel').carousel({
  interval: false
});

links = '<span class="hidden">Obrázky: </span>';
$.each($(".carousel-inner .item"), function(index, value) {
  value = index + 1;
  links += '<li><a href="#" data-slide="'+ index +'" class="set-slide"><b>'+ value +'</b></a></li>\n';
});
$(".carousel").append('<ul class="carousel-nav">'+ links +'</ul>');

$(".set-slide").click(function(event) {
  event.preventDefault();
  slide = $(this).data("slide");
  $(".carousel").carousel(slide);
});

style.less

// Setup
@fontSize: 22px;
@fontColor: #ffffff;
@menuHeight: @fontSize * 2.75;

@colorUvod: #490A3D;
@colorPrace: #BD1550;
@colorDovednosti: #E97F02;
@colorKontakt: #8A9B0F;

// Basics
body {
  font-size: @fontSize;
  color: @fontColor;
  line-height: @fontSize * 1.75;
  font-family: "Dosis", sans-serif;
	font-weight: 500;
}
strong, b {
  font-weight: 700;
}
a {
  color: @fontColor !important;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}

// Layout
.section-wrap {
  width: 100%;
}
.section {
  margin: 0 auto;
  padding: @fontSize * 3;
  max-width: 1040px;
  min-width: 320px;
  
  h2 {
    text-transform: uppercase;
    font-size: 175%;
    margin-bottom: 0.5em;
  }
}

// Menu
#menu {
  position: fixed;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.25);
  //border-bottom: 0.25em solid rgba(0, 0, 0, 0.25);
  
  .section {
    padding: @fontSize / 2 0 0 0;
  }

  ul li {
    display: block;
  }
  ul li a {
    transition: background-color 0.25s ease-out;
    
    border-radius: @fontSize / 4;
    padding: @fontSize * .6 @fontSize * .8;
    
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    line-height: @menuHeight;
    font-weight: 700;
    font-size: 90%;
  }
  ul li:hover a,
  ul li.active a  {
    background-color: rgba(255, 255, 255, 0.15);
  }
  ul li:active a {
    background-color: rgba(255, 255, 255, 0.3);
  }
}


// Sections
.section-mixin (@color) {
  background-color: @color;
  @colorDark: darken(@color, 20%);
  
  h2, h3, h4, p {
    text-shadow:
      2px 2px 1px @colorDark,
      1px 1px 1px @colorDark; 
  }
}

#uvod {
  .section-mixin(@colorUvod);
  
  padding-top: @menuHeight; // Menu offset
  
  p {
    font-size: 125%;
  }
  
  img {
    transition: transform 0.25s ease-out;
  }
  img:hover {
    transform: rotate(2.5deg);
  }
}
#prace {
  .section-mixin(@colorPrace);
  
  .carousel-nav {
    text-align: center;
    padding-top: .7em;
    
    li {
      display: inline;
      
      a {
        @diameter: 2em;
        
        box-sizing: border-box;
        display: inline-block;
        width: @diameter;
        height: @diameter;
        transition: all 0.25s ease-out;
        
        border-radius: @diameter / 2;
        margin: 0 .2em;
        background-color: @colorPrace;
        border: .15em solid darken(@colorPrace, 10%);
        
        color: @fontColor !important;
        text-align: center;
        text-decoration: none;
        font-size: 70%;
        line-height: @diameter - 0.25em;
      }
      a:hover {
        color: @colorPrace !important;
        background-color: @fontColor;
      }
    }
  }
}
#dovednosti {
  .section-mixin(@colorDovednosti);
}
#kontakt {
  .section-mixin(@colorKontakt);
  
  ul li {
    text-align: center;
    line-height: 2em;
    font-size: 150%;
  }
}