hazemKrimi/react-weather-app
1
0
Fork 0
mirror of https://github.com/hazemKrimi/react-weather-app.git synced 2026-05-01 18:30:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update footer styles

Browse Source
This commit is contained in:
Hazem Krimi
2021-09-19 18:52:48 +01:00
parent 39d821c349
commit e384aef534
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer/index.tsx
+10 -5
View File
@@ -7,16 +7,21 @@ import LI from '../../assets/linkedin.svg';
const Footer: React.FC = () => {
return (
<Wrapper>
<p>Hazem Krimi &copy; {new Date().getFullYear()}</p>
<p>
<a href='https://hazemkrimi.tech' target='_blank' rel='noopener noreferrer'>
Hazem Krimi
</a>{' '}
&copy; {new Date().getFullYear()}
</p>
<div className='contact'>
<a href='https://www.linkedin.com/in/hazemkrimi/' target='_blank' rel='noopener noreferrer'>
<img src={LI} alt='LinkedIn' />
<a href='https://github.com/hazemKrimi' target='_blank' rel='noopener noreferrer'>
<img src={GH} alt='Github' />
</a>
<a href='https://twitter.com/HazemKrimi' target='_blank' rel='noopener noreferrer'>
<img src={TW} alt='Twitter' />
</a>
<a href='https://github.com/hazemKrimi' target='_blank' rel='noopener noreferrer'>
<img src={GH} alt='Github' />
<a href='https://www.linkedin.com/in/hazemkrimi/' target='_blank' rel='noopener noreferrer'>
<img src={LI} alt='LinkedIn' />
</a>
</div>
</Wrapper>
src/components/Footer/styles.ts
+8 -4
View File
@@ -6,20 +6,24 @@ export const Wrapper = styled.div`
align-items: center;
padding: 0.5rem 0rem;
a {
text-decoration: none;
}
p {
justify-self: flex-start;
}
.contact {
display: grid;
grid-template-columns: repeat(3, 24px);
column-gap: 0.25rem;
grid-template-columns: repeat(3, 16px);
column-gap: 0.5rem;
align-items: center;
justify-content: flex-end;
img {
width: 24px;
height: 24px;
width: 16px;
height: 16px;
}
}
`;