Detailpage

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

Thumbnail
This awesome code was written by csssavvy-1471248237, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright csssavvy-1471248237 ©
  • HTML
  • CSS
  • JavaScript
    - var categories = { ICT: { 1: { title: "systeembeheerder", time: "32 - 36 uur", edu: 'MBO', desc: 'We zijn op zoek naar een communicatief sterke systeem en retailnetwerkbeheerder met minimaal vijf jaar ervaring in soortgelijke functies', cat: 'ICT', url: '#1' }, 2: { title: 'front-end developer', time: '32 - 42 uur', edu: 'HBO', desc:'', cat: 'ICT', url: '#2' }, 3: { title: 'functioneel applicatiebeheer', time: '32 - 36 uur', edu: 'HBO', cat: 'ICT', desc:'', url: '#3' } }, Inkoop: { 1: { title: "stage inkoop heren", time: "32 - 36 uur", edu: 'MBO', desc: 'We zijn op zoek naar een communicatief sterke systeem en retailnetwerkbeheerder met minimaal vijf jaar ervaring in soortgelijke functies', cat: 'Inkoop', url: '#1' }, 2: { title: 'Stage inkoop dames', time: '32 - 42 uur', edu: 'HBO', desc:'Voor deze stage zijn we op zoek naar een', cat: 'Inkoop', url: '#2' }, 3: { title: 'Brandbuilder', time: '32 - 36 uur', edu: 'HBO', cat: 'Inkoop', desc:'', url: '#3' } } }
      
.container
 .row
  .col-xs-12.col-md-6.col-md-offset-2
    h2.page-title Vacature titel
    .page-meta
      p 24 - 32 | HBO | ICT
    p.page-body Vacature beschrijving
  .col-xs-12.col-md-3.text-center
    button.btn.btn--block.btn--cta
      a(href='#') Solliciteer op deze functie
    button.btn.btn--block.btn--ghost
      a(href='#') Naar vacature overzicht
    .ts-socials
      h3 Deel deze vacature
      span
        a.fa.fa-facebook
      span
        a.fa.fa-twitter
      span
        a.fa.fa-linkedin
      
    
 .row
  .col-xs-2.col-md-offset-1.hidden-xs.hidden-sm.js-filter-list
    span.ts-filter__close.fa.fa-close.btn.btn--outline.js-close-filter.visible-xs
    h2.category__header Service center
    each category, index in categories
      .card.card--tiny(class=index === 'ICT' ? 'is-active' : '' data-id=index)= index+' ('+Object.keys(index).length+')'
        a.card__link(href='#')
        span.fa.fa-close.card__btn
  .col-xs-12.col-md-8
    each category, index in categories
      - var jobs = category
        .row
          .col-xs-12
            h2.category__header= index
        .row
          each job in jobs
            .col-xs-12.col-md-6
              .card
                .card__title= job.title
                .card__body.hidden-xs.hidden-sm= job.desc
                .card__meta= job.time+'  |  '+job.edu+'  |  '+job.cat
                a.card__link(href=job.url)

/*Downloaded from https://www.codeseek.co/csssavvy-1471248237/detailpage-KXwKdR */
    @secondary-font-color: #3e3e3e;
@cta-color: #96cDBA;
@gutter: 30px;
@font-size: 14px;
@line-height: 1.5;
@lines-to-show: 3;
@main-font: 'Lato', sans-serif;
@secondary-font: 'PT Serif', serif;

body {
    font-family: @main-font;
    color: black;
}

.ts-filter {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: block!important;
  z-index: 1;
  transition: top 3s;
  
  &__close {
    display: inline-block;
    position: absolute;
    top: @gutter / 2;
    right: @gutter / 2;
  }
}

.card {
  color: black;
  padding: 0.6em;
  box-sizing: border-box;
  border: 1px solid black;
  font-size: @font-size;
  line-height: @line-height;
  margin-bottom: @gutter / 2;
  position: relative;
  transition: background-color 0.2s;

  
  &:hover, &.is-active {
    background-color: black;
    color: white;
    
    .card__body {
      color: white;
    }
  }
  
  &__btn {
    display: none;
  }
  
  &__title {
    font-size: 1.5em;
    text-transform: Capitalize;
  }
  
  &__title, &__meta {
    font-family: @secondary-font;
    line-height: @line-height;
  }
  
  &__body {
    color: @secondary-font-color;
    text-overflow: ellipsis;
    height: @font-size*@line-height*@lines-to-show;
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: @lines-to-show;
    -webkit-box-orient: vertical;
    margin-bottom: 0.5em;
  }
  
  &__link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  
  
  &.is-active {
    .card__btn {
      display: block;
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 1em;
      right: 0;
      cursor: pointer;
    }
  }
}

.category__header {
  font-size: 24px;
  font-family: @secondary-font;
}

.txt-center {
  text-align: center;
}

.page-title, .page-subtitle {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: normal;
  line-height: 1;
}

.page-title {
  font-size: 40px;
  font-family: @secondary-font;
}

.page-subtitle {
  font-size: 20px;
  margin-bottom: 1em;
}

.btn--outline {
  border: 1px solid black;
  color: black;
  background-color: transparent;
}

.btn--black {
  background-color: black;
  color: white;
}

.btn--block {
  display: block;
  font-family: @main-font;
  width: 100%;
  margin-bottom: @gutter / 2;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: normal;
  a, a:hover, a:active, a:focus{
    color: black;
  }
}

.btn--cta {
  background-color: #96cDBA;
  color: white;
  
  a {
    &, &:hover, &:active, &:focus, &:visited {
      color: white;
    }
  }
}

.btn--ghost {
  background-color: transparent;
  border: 1px solid black;
}

.form-group {
  width: auto;
  display: inline-block;
  
  .form-control {
    width: auto;
  }
}

.noscroll {
  overflow: hidden;
  display: block;
}

@media screen and (min-width: 992px) {
  .form-group {
    width: 100%;
    
    .form-control {
      width: 100%;
    }
  }
  
  .card {
    margin-bottom: @gutter;
    
    &--tiny {
      margin-bottom: @gutter / 2;
      font-size: 12px;
      text-transform: uppercase;
    }
  }
}


/*Downloaded from https://www.codeseek.co/csssavvy-1471248237/detailpage-KXwKdR */
    (function(){
  var $filter = $('#filter'),
      $filterList = $('.js-filter-list'),
      $filterClose = $('.js-close-filter'),
      $body = $('body');
  
  $filter.on('click', function(e) {
    e.preventDefault();
    
    $body.addClass('noscroll');
    $filterList.addClass('ts-filter');
    $filterList.css({top: 0});
  });
  
  $filterClose.on('click', function(e) {
    e.preventDefault();
    
    $body.removeClass('noscroll');
    $filterList.removeClass('ts-filter');
  })
}());

Comments