gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: align sponsors and give background

Browse Source
This commit is contained in:
Ahmad Abdolsaheb
2019-03-04 13:00:35 +03:00
committed by mrugesh mohapatra
parent 7d18cd8de6
commit 4046bb3a0d
2 changed files with 122 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/pages/sponsors.css
View File

@ -2,6 +2,8 @@
display: block;
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.sls {
@ -12,4 +14,13 @@
.sl {
max-height: 80px;
background-color: white;
padding: 5px;
border-radius: 10px;
width: 150px;
height: 100px;
margin-bottom: 50px;
display: flex;
align-items: center;
justify-content: center;
}

161
client/src/pages/sponsors.js
View File

@ -1,6 +1,7 @@
import React, { Fragment } from 'react';
import Helmet from 'react-helmet';
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import Media from 'react-media';
import { Link, Spacer } from '../components/helpers';
@ -25,17 +26,17 @@ const SponsorsPage = () => {
</h3>
<hr />
<Row className='sls'>
<Link to='https://www.class-central.com'>
<Link className='sl' to='https://www.class-central.com'>
<img
alt="Class Central's logo"
className='img-responsive sl'
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/class-central-logo.jpg'
/>
</Link>
<Link to='https://www.tsugicloud.org'>
<Link className='sl' to='https://www.tsugicloud.org'>
<img
alt="TsugiCloud's logo"
className='img-responsive sl'
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/tsugicloud-logo.png'
/>
</Link>
@ -43,52 +44,112 @@ const SponsorsPage = () => {
<h2>In-kind sponsors</h2>
<h3>These companies donate their services to freeCodeCamp.org</h3>
<hr />
<Row className='sls'>
<Link to='https://netlify.com'>
<img
alt="Netlify's logo"
className='img-responsive sl'
src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
/>
</Link>
<Link to='https://www.mlab.com/'>
<img
alt="mLab's logo"
className='img-responsive sl'
src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
/>
</Link>
<Link to='https://auth0.com'>
<img
alt="Auth0's logo"
className='img-responsive sl'
src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
/>
</Link>
</Row>
<Row className='sls'>
<Link to='https://www.discourse.org/'>
<img
alt="Discourse's logo"
className='img-responsive sl'
src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
/>
</Link>
<Link to='https://algolia.com'>
<img
alt="Algolia's logo"
className='img-responsive sl'
src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
/>
</Link>
<Link to='https://cloudflare.com'>
<img
alt="Cloudflare's logo"
className='img-responsive sl'
src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
/>
</Link>
</Row>
<Media query='(min-width: 500px)'>
{matches =>
matches ? (
<Fragment>
<Row className='sls'>
<Link className='sl' to='https://netlify.com'>
<img
alt="Netlify's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
/>
</Link>
<Link className='sl' to='https://www.mlab.com/'>
<img
alt="mLab's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
/>
</Link>
<Link className='sl' to='https://auth0.com'>
<img
alt="Auth0's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
/>
</Link>
</Row>
<Row className='sls'>
<Link className='sl' to='https://www.discourse.org/'>
<img
alt="Discourse's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
/>
</Link>
<Link className='sl' to='https://algolia.com'>
<img
alt="Algolia's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
/>
</Link>
<Link className='sl' to='https://cloudflare.com'>
<img
alt="Cloudflare's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
/>
</Link>
</Row>
</Fragment>
) : (
<Fragment>
<Row className='sls'>
<Link className='sl' to='https://netlify.com'>
<img
alt="Netlify's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
/>
</Link>
<Link className='sl' to='https://www.mlab.com/'>
<img
alt="mLab's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
/>
</Link>
</Row>
<Row className='sls'>
<Link className='sl' to='https://auth0.com'>
<img
alt="Auth0's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
/>
</Link>
<Link className='sl' to='https://www.discourse.org/'>
<img
alt="Discourse's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
/>
</Link>
</Row>
<Row className='sls'>
<Link className='sl' to='https://algolia.com'>
<img
alt="Algolia's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
/>
</Link>
<Link className='sl' to='https://cloudflare.com'>
<img
alt="Cloudflare's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
/>
</Link>
</Row>
</Fragment>
)
}
</Media>
</Col>
</Row>
</Grid>