Add carousel, service info and style changes

This commit is contained in:
Moris Zen
2018-07-09 19:30:46 +02:00
parent 83968b1639
commit 04287d5615
5 changed files with 229 additions and 9 deletions

View File

@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
{props.headline && (
<h1
className={`${props.light ? headlineDark : ''}
font-light pt-1 pb-2`}
font-normal pt-1 pb-2`}
>
{props.headline}
</h1>

View File

@@ -0,0 +1,160 @@
import React from 'react'
import Link from 'gatsby-link'
import Carousel from 'react-leaf-carousel'
const Technologies = ({ ...props }) => (
<Carousel
breakpoints={[
{
breakpoint: 500,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
},
},
]}
dots={false}
autoCycle={true}
arrows={false}
showSides={true}
pauseOnHover={false}
cycleInterval={2500}
showSides={false}
sidesOpacity={0.5}
sideSize={0.1}
slidesToScroll={4}
slidesToShow={4}
scrollOnDevice={true}
>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=55b64e&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=904098&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ef4d9c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00f3d1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00ffff&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ee1f34&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=91b4c0&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6347&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ebbfbf&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=def1f9&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=cdf2c6&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=9fa616&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=2c4caa&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=44e3e1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6666&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=94e1e3&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=29083c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ffff99&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=616161&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ed7ebe&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
</Carousel>
)
export default Technologies