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 = () => { const Footer: React.FC = () => {
return ( return (
<Wrapper> <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'> <div className='contact'>
<a href='https://www.linkedin.com/in/hazemkrimi/' target='_blank' rel='noopener noreferrer'> <a href='https://github.com/hazemKrimi' target='_blank' rel='noopener noreferrer'>
<img src={LI} alt='LinkedIn' /> <img src={GH} alt='Github' />
</a> </a>
<a href='https://twitter.com/HazemKrimi' target='_blank' rel='noopener noreferrer'> <a href='https://twitter.com/HazemKrimi' target='_blank' rel='noopener noreferrer'>
<img src={TW} alt='Twitter' /> <img src={TW} alt='Twitter' />
</a> </a>
<a href='https://github.com/hazemKrimi' target='_blank' rel='noopener noreferrer'> <a href='https://www.linkedin.com/in/hazemkrimi/' target='_blank' rel='noopener noreferrer'>
<img src={GH} alt='Github' /> <img src={LI} alt='LinkedIn' />
</a> </a>
</div> </div>
</Wrapper> </Wrapper>
src/components/Footer/styles.ts
+8 -4
View File
@@ -6,20 +6,24 @@ export const Wrapper = styled.div`
align-items: center; align-items: center;
padding: 0.5rem 0rem; padding: 0.5rem 0rem;
a {
text-decoration: none;
}
p { p {
justify-self: flex-start; justify-self: flex-start;
} }
.contact { .contact {
display: grid; display: grid;
grid-template-columns: repeat(3, 24px); grid-template-columns: repeat(3, 16px);
column-gap: 0.25rem; column-gap: 0.5rem;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
img { img {
width: 24px; width: 16px;
height: 24px; height: 16px;
} }
} }
`; `;