senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS tweaks, add reverse properties to services

Browse Source
This commit is contained in:
Moris Zen
2018-07-06 17:49:35 +02:00
parent 6469d1bcfa
commit 191c298a49
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Service.js
View File

@@ -2,14 +2,18 @@ import React from 'react'
import InfoBox from './InfoBox' import InfoBox from './InfoBox'
const Service = ({ ...props }) => ( const Service = ({ ...props }) => (
<div className="lg:flex items-center justify-center m-auto"> <div
className={`md:flex ${
props.reversed ? 'flex-row-reverse' : ''
} items-center justify-center m-auto`}
>
<img <img
src={props.img} src={props.img}
className={`w-full lg:max-w-sm p-4 z-10 ${props.imgClasses}`} className={`w-full md:max-w-sm p-4 z-10 ${props.imgClasses}`}
alt={`${props.title} agency`} alt={`${props.title} agency`}
/> />
<InfoBox <InfoBox
classes="bg-white p-8 shadow lg:m-0 opacity-70 lg:max-w-sm" classes="bg-white p-8 shadow md:m-0 opacity-70 md:max-w-sm"
headline={props.title} headline={props.title}
text={props.text} text={props.text}
/> />

2
src/pages/index.js
View File

@@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import SectionIntro from '../components/SectionIntro' import SectionIntro from '../components/SectionIntro'
import InfoBox from '../components/InfoBox'
import Button from '../components/Button' import Button from '../components/Button'
import Card from '../components/Card' import Card from '../components/Card'
import Service from '../components/Service' import Service from '../components/Service'
@@ -45,6 +44,7 @@ const IndexPage = ({ ...props }) => (
/> />
<Service <Service
reversed
img={ImgFullstack} img={ImgFullstack}
title="Fullstack Web Development" title="Fullstack Web Development"
text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time" text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time"