I have a footer section with four icons positioned in the center of the far right, followed by a text "Made by [NAME] in 2022, GitHub" which I'm having trouble aligning properly.
Below is the HTML code snippet:
HTML
<div class='footer'>
<div class='icons'>
<a href='https://github.com/'><img src='images/github.png' style="width:30px;
height: 30px;" class='github'></a>
<a href='https://www.linkedin.com/in/'><img src='images/linkedin.png'
style="width: 30px; height: 29px;" class='linkedin'></a>
<a href='https://www.instagram.com/'><img src='images/instagram.jpeg'
style="width:30px; height: 30px;" class='instagram'></a>
<a href='https://www.facebook.com/'><img src='images/facebook.png'
style="width:30px; height: 30px;" class='facebook'></a>
<p><em>Made by NAME in 2022, GitHub</em></p>
</div>
</div>I am struggling with positioning the text under the 'icons' class and have individually styled each icon to try and achieve this alignment.
CSS
.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: white;
}
.icons:link {
padding-top: 1.7rem;
display: flex;
justify-content: flex-start;
}
.github {
margin-right: 15px;
margin-left: 15px;
margin-top: 30px;
}
.linkedin {
margin-right: 15px;
margin-top: 30px;
}
.instagram {
margin-right: 15px;
margin-top: 30px;
}
.facebook {
margin-top: 30px;
}
p {
font-size: 1rem;
margin-right: 20px;
text-align: end;
}