Klipfolio Website Design

Klipfolio Web Design

Our web developers use cards, buttons, and signature blocks to create the ideal user experience on our website. If you get stuck while writing code, you can get some help from Bootstrap.

Klipfolio Triangle Banners

Triangle Banner 1

Klipfolio triangle banner formation 1
<section class="banner--colored-triangles overflow-hidden triangles-formation--2"> <div class="big-container grid--2-col"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-1 bg--green"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-2 bg--orange"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-3 bg--yellow"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-4 bg--blue"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path> </svg> <div class="col-left"> <header> <h1 class="strong h2" style="line-height: 1.3;">PLACEHOLDER TEXT</h1> </header> </div> <div class="col-right"> <img data-src="/sites/all/themes/klipfolio_theme/img/illustrations/illustration-brand-guideline.svg" class="illustration" alt="Klipfolio Brand Guideline Banner"> </div> </div> </section>

* Replace placeholder text

Triangle Banner 2

Klipfolio triangle banner formation 2
<section class="banner--colored-triangles overflow-hidden triangles-formation--2"> <div class="big-container grid--2-col"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-1 bg--green"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-2 bg--orange"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-3 bg--yellow"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-4 bg--blue"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path> </svg> <div class="col-left"> <header> <h1 class="strong h2" style="line-height: 1.3;">PLACEHOLDER TEXT</h1> </header> </div> <div class="col-right"> <img data-src="/sites/all/themes/klipfolio_theme/img/illustrations/illustration-brand-guideline.svg" class="illustration" alt="Klipfolio Brand Guideline Banner"> </div> </div> </section>

* Replace placeholder text

Triangle Banner 3

Klipfolio triangle banner formation 3
<section class="banner--colored-triangles overflow-hidden triangles-formation--3"> <div class="big-container tri-form-3-grid"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-1 bg--green"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-2 bg--purple"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-3 bg--yellow"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-4 bg--orange"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-5 bg--magenta"> <path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" /> </svg> <header> <h1 class="strong text-center" style="line-height: 1.3;">PLACEHOLDER TEXT</h1> </header> </div> </section>

* Replace placeholder text

Klipfolio Card Design

Card Design 1

Klipfolio card design 1
<section class="shadow border-curved" style="margin-bottom: 60px; overflow: hidden; display: block;"> <div class="container"> <div class="row-flex"> <div class="col-md-6 col-left " style="margin:auto;"> <div class="" style="padding: 50px;"><a href="PLACEHOLDER TEXT"><img typeof="foaf:Image" class="Lazyload" data-src="PLACEHOLDER TEXT" width="100%" alt="PLACEHOLDER TEXT" style="width:100%;"></a></div> </div> <div class="col-md-6 col-right vertical-center bg--blue-very-light"> <div style="width: 80%;" class="gap-south gap-north"> <h2 class="strong"><a href="PLACEHOLDER TEXT">PLACEHOLDER TEXT</a></h2> <p>PLACEHOLDER TEXT</p> <a href="PLACEHOLDER TEXT"><button class="grey">PLACEHOLDER TEXT</button></a> </div> </div> </div> </div> </section>

* Replace placeholder text

Card Design 2

Klipfolio card design 2
<div class="card-column gap-south-45"> <div class="card shadow"> <div class="card-body"><img class="gap-south-45 lazyload" data-src="/PLACEHOLDER TEXT" alt="PLACEHOLDER TEXT"> <p class="strong text-grey gap-south-0">PLACEHOLDER TEXT</p> <h2 class="strong h4 gap-south-30">PLACEHOLDER TEXT</h2> <p>PLACEHOLDER TEXT</p> </div> <div class="card-cta"> <a href="PLACEHOLDER TEXT" class="strong icon-cta-arrow">PLACEHOLDER TEXT</a> </div> </div> </div>

* Replace placeholder text

Card Design 3

Klipfolio card design 3
<div class="card with-border"> <div class="card-image"> <figure class="klip-screenshot"> <img data-src="PLACEHOLDER TEXT" class="shadow-double lazyload" alt="PLACEHOLDER TEXT" data-src="PLACEHOLDER TEXT"> </figure> </div> <div class="card-body"> <h4 class="strong" style="margin: 0;"><a href="PLACEHOLDER TEXT">PLACEHOLER TEXT</a></h4> <section class="block-sm template-overview"> <p>PLACEHOLER TEXT</p> </section> <section class="block-sm template-services"> <p class="strong">PLACEHOLER TEXT</p> <div class="integration_logo"><a href="PLACEHOLDER TEXT"><img typeof="foaf:Image" class=" lazyloaded" data-src="PLACEHOLDER TEXT" width="100" height="100" alt=""></a></div> </section> </div> <div class="card-cta"> <a href="PLACEHOLDER TEXT"><button class="grey">PLACEHOLDER TEXT</button></a> <a href="PLACEHOLDER TEXT" target="_blank" rel="nofollow"><button class="blue">PLACEHOLDER TEXT</button></a> </div> </div>

* Replace placeholder text

Klipfolio Buttons

Primary CTA Button Red

normal state red CTA button

* normal state

hover state red CTA button

* hover state

* test button

<button class="red" >PLACEHOLDER TEXT</button>

* Replace placeholder text

Primary CTA Button Red with glow

normal state CTA red with glow button

* normal state

hover state CTA red with glow button

* hover state

* test button

<button class="red with-glow" >PLACEHOLDER TEXT</button>

* Replace placeholder text

Primary CTA Button Blue

normal state blue CTA button

* normal state

hover state blue CTA button

* hover state

* test button

<button class="blue" >PLACEHOLDER TEXT</button>

* Replace placeholder text

Primary CTA Button Grey

normal state grey CTA button

* normal state

hover state grey CTA button

* hover state

* test button

<button class="grey" >PLACEHOLDER TEXT</button>

* Replace placeholder text

Links CTA

<a href="add-link-here" class="icon-cta-arrow strong " >PLACEHOLDER TEXT</a>

* Replace placeholder text