Hi,
I am trying to build a webpage and have made a footer on a seperate sheet. I am struggling to get my social images to line up horizonataly. Can anyone help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK REL="stylesheet" HREF="css styles.css" type="text/css">
<meta charset="utf-8">
</head>
<style>
/* BASIC STYLES */ * {
padding: 0; margin: 0; }
li
{ list-style-type: none; }
a { text-decoration: none; }
*
{font-family: Arial}
.footer
{ color: #3E3E3E; background: #FFA642; padding: 3em 0; }
.footer
{ display: grid; grid-template-columns: 7vw 1fr 7vw; grid-template-rows: auto auto; }
.footer-container
{ grid-column: 2 / 3; }
.footer-container
{ grid-column: 2 / 3; display: grid; /* ACTING AS A GRID CONTAINER */
grid-template-columns: 2fr 2fr 2fr 3fr;
grid-template-rows: auto auto;
grid-template-areas: "logo navigation secondary social" "contact contact . newsletter"; }
.footer-container a:hover
{ background-color: #ddd; color: FFA642; }
.footer-logo
{ grid-area: logo; }
.footer-nav
{ grid-area: navigation; justify-self: center; }
.footer-secondary-nav
{ grid-area: secondary; justify-self: center; }
.social-networks
{ grid-area: social; }
.contact-block
{ grid-area: contact; }
.newsletter
{ grid-area: newsletter; }
.social-networks
{ grid-area: social; display: grid; /* ACTING AS A GRID CONTAINER */ grid-template-columns: repeat(3, 10fr);
grid-template-rows: auto auto auto; justify-items: center; }
.social-networks h3
{ grid-column: 1 / -1; }
.linkedin
{ justify-self: right; }
.twitter
{ justify-self: left; }
.instagram
{ justify-self: left; }
.contact-block, .newsletter
{ align-self: end; }
.bottom-line
{ display: grid; grid-template-columns: 10vw 7vw 7vw 10vw; }
.bottom-line p
{ grid-column: 2; }
.legal
{ display: grid; grid-template-columns: repeat(1, 1fr); justify-items: end; }
.newsletter-text, .text-input
{ text-align: center; }
.text-input input
{ border-radius: 0; }
.text-input input:first-child
{ height: 2rem; }
.text-input input:last-child
{ height: 2.25rem; color: #FFA642; border: none; background-color: #3E3E3E; width: 5rem; font-weight: bold; }
.fas, .fab
{ font-size: 1.0rem; }
.newsletter-text icon, .newsletter-text p
{ margin: 0 0 1.1rem; }
.newsletter-text p
{ line-height: 1rem; }
.footer a { color: #3E3E3E; }
.contact-block a
{ display: block; border: 2px solid #3E3E3E; padding: .5rem; margin: 10px 0 0; text-align: center; width: 60%; }
.contact-block a:hover
{ border: 2px solid #3E3E3E; color: #3E3E3E; }
.social-networks
{ border-bottom: 2px solid #3E3E3E; }
.bottom-line { background-color: #3E3E3E; } .bottom-line, .bottom-line a { color: #FFA642; }
/* MEDIA QUERIES */ @media screen and (min-width: 960px) { .footer { height: 15vh; } }
@media screen and (max-width: 960px) { .footer-nav, .footer-secondary-nav { display: none; }
.footer-container
{ grid-template-columns: 1fr 1fr; grid-template-rows: 20vh 25vh; grid-template-areas: "logo social" "contact newsletter"; }
.bottom-line
{ display: grid; grid-template-columns: 7vw 1fr 7vw; }
.bottom-line p { justify-self: center; }
. { grid-column: 2 / -2; justify-items: center; } }
@media screen and (max-width: 768px)
{ .footer-container { grid-template-columns: 1fr; grid-template-areas: "logo" "social" "newsletter" "contact"; }
.footer-logo, .contact-block
{ justify-self: center; align-self: center; }
.social-networks, .newsletter { padding: 3rem 0; }
.contact-block a,
.contact-block p { margin: 0 auto; }
.contact-block h3,
.social-networks h3 { line-height: 2rem; } }
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato|Merriweather" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Footer</title>
</style>
</head>
<body>
<footer class="footer">
<div class="footer-container">
<div class="footer-logo">
<img src="file:///C:/Users/shell/OneDrive/Desktop/IEP%20final%20logo_White.html.png" alt="Footer Logo" style="width:200px;height:150px;">
</div>
<ul class="footer-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Current Positions</a></li>
<li><a href="#">Timesheets</a></li>
</ul>
<ul class="footer-secondary-nav">
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">CV Submission</a></li>
</ul>
<div class="newsletter">
<div class="newsletter-text">
<div class="icon">
<i class="fas fa-paper-plane"></i>
</div>
<p>
Subscribe to our Newsletter
</p>
</div>
<div class="text-input">
<form action="post">
<input type="email" name="Enter Your Email Address" size="20">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="social-networks">
<h3>Keep in touch</h3>
<div class="linkedin">
<a href="https://www.linkedin.com/company/ieprorecruitment/"><img src="https://cdn3.iconfinder.com/data/icons/inficons/512/linkedin.png" alt="image" style="width:30px;height:30px;" </a>
<i class="fab fa-linkedin"></i>
</div>
<div class="twitter">
<a href="https://twitter.com/IEPro3"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAY1BMVEVQq/H///9ApvBHqPFEp/A8pPDs9f1bsPLg7/zx+P57vfT7/f/R5/vC3/n2+/622fjb7Pxtt/OXyvZVrvFks/K+3fnU6Pvn8v2o0vfJ4/qMxfWk0PeDwfSw1viVyfZxufMroO+odDONAAAGvElEQVR4nO2d65ayOgyGIWkREQUBD4jivv+r3OJhxhMKNGn5ZuX5NzNrCi+0zaFp8TxBEARBEARBEARBEARBEARBEARBEARBEARBEARBEIS/CaI6g4iub4UBBMij6pCs5qtkW0c5qD+lEmFSxQv/nmlZe/BXREK+3fjvSDMPvv2rnVs0AoryrbwLq/yDxtO/zpW9Ox2GmsQf9J01eu/7Kp4fTT32jgyHL/oaMv36jwj7tPkb6d3QT+GqeD/+ngnzx0sjYBWc/1J+Gaf9bmcREUvUVSd9Dfu714gQ/fTsgvB21Nb3J6QS9byzQN/fXl8W6sk2+Plt/Kb/DufU4JSyPfg2xTyygovZfOjXlLZCnaeEDV23h3Uvgb4/18tns5lRmgqcndsMqSRC2lOg78+ef7Gm7KNY31qlkQh9xmALpGPm7pGnFBJVZi7QL2in9t+GU/POjwWBQFrbhbu7pkPjpiFove/O7GkdUvUwbILcTKPq4qp9IfoRiHpJYDSeHvrCzPRPzAUerwJP/lsdhhSv8+URGsw3PU39GxaXSQYhzxqrSuG6LV8ukg2X+NpYT8JTEICgiiq83ArBK8T962XmQyXCp4C3C8l/Ot8f1tPbjVDYfXxnvjYDB2NuKHCepNO7H0nss4fbd5ea7Yc0/r6twQQ0VrHtruYDMn7QLejtCJXn1vrcg2Xv10jhzvwwM7TMvwrbg/GkZ07zQ1P9mVIJfHTangj6mUZzY3gnsCULN0Th8dOF4kkPjXrxqalebKjkNXzxsw7d03AEHtuVlDS2gC9PfpF1HI4YUQksSZNQHZIqwb6Txre+wxAOlIlSr5uZDvf6u0YkCJwaamKBHa1YsPvqAagVhb7ZkX49RneLyqcVfn64KiEQ+JzkJ6G7NzlffhqQJAprlhW1HhHBJsNWkRQJDL9iWVHrF9XFuxaRJJEFj8K+kfks3nnw6giQWAsmhQNC8/BwhKdX+S5bMBaFw/ytWZwVeF84QhE8cSkcPEks0qQuFJx04s8KzygVesooUx3ESbYvcgjNFWZcCtE4DXhiRvAOd2z1F50KJyyw56sw0f2XNTk4sgk8ddTp9+vzQ1mA8aJwQjCMjOHopFFxK/b4mLGxBIPjfYpbV5OLd0KXhhhMQB79Xv3leH92wZRziWT1IPcKL2ncWVlPAPTS8VgsOXrpb0QQlIe6divxwBHhU0QEZLCUlJIup5jCY/DHYAZvsAikKIChgsNYnEyE6do7ITGLQrJkPAFbnsjCtLyAEOpa7CuadPXdCKbgkLiCwgAOn+3MaLppwrVJRvcty+aCLYUxgqjpwp/P0aS0i9v3jCK6Z8wGez23uLDBmYXyPLpSmMHwOKU3xjDZHHg3VIJ7s8/bSQnKe03Z8M2kN4mOTQbnTHqT6Na1sbFzm2JL1mB4gt8XiQ6DYabQ8Jmu25PpmbLPMzd67FAmxcI8c0N5JAV4PZlZ09cA+cF6CpUt9m1Bwc6ycbSrrwF1nsX2vPGVFVPRMMm1hit5tLUm0do5LZj5i01almUcBjaHor1X+Lrb0g729DkKMJgDwwecJGxmVg/a0QTFd32xe5SQg2xGaM0jvWA/dcqdvHiBbntWNxKLluICyZ6C7kwdnFhGu5n3G5YC30dsLratLE8zFyzOp4GjU/Wg/n5vNCxdnaoHllIZlbuDEbWVpJudBGILYKGez4WhuEMt2QvbiU+76g0Cc86NcWdFVyDirOmrXA7CGwgZW6aG5GwdAlDVPD4c0fF+FCAsE/o5h628axhKF1VMqnLjfpJ5BkHny11NFB3THvtIB/5HVMwQuFbSAnpEb3CsAmFHlAQf4RhsQI8qVWx+uCYHqMn2CjkNJ1rRR7I0sf3EWgegoDvBy+DISTagoKux4ThbxxDUHz/e0BOWs3WMULijXKZJRhJMXEEFxxXlKvDC5GBbchBUtKKNJ8qxfCAIT+9OFdWaeA1/tnPVQ49eU3lx+QxTU30xiapVSh/Vl3SHPPYlCvxNGs8bynXIlFub7h1OMWihuPvg+ONVyuMtmi1z90ae0il7Jl2OwwZCwbN0H0bj0Negl/SFQmnU4bRMi8AkIbWB5ccDFt2gMKPK4U+3374Z5wiEI0VnjbsdWOsGBNyZ7SpJx/9dQwRvVw4ckussH9fs0gYCLLdhT5WbJHo+KHLcoPaO265rFekh8v7FL4sigvb21Tyctr7OxSbe7ib6X1T3wylg1MoronqbnMKPNE3DE+l6nlR1VHhKvzmn9d8Em4/5wi9/9au+giAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIgiAIbvkfbf5iltAgrL0AAAAASUVORK5CYII=" alt="image" style="width:30px;height:30px;" </a>
<i class="fab fa-twitter"></i>
</div>
<div class="instagram">
<a href="https://www.instagram.com/ieprorecruitment/"><img src="https://toppng.com/public/uploads/preview/ew-instagram-logo-transparent-related-keywords-logo-instagram-vector-2017-115629178687gobkrzwak.png" alt="image" style="width:30px;height:30px;" </a>
<i class="fab fa-instagram"></i>
</div>
</div><!-- .social-networks-->
</div><!-- .footer-container -->
</footer><!-- .footer -->
<div class="bottom-line">
<p>© IEPro Recruitment</p>
<div class="legal">
<a href="#">Built by Shell de Bont</a>
</div>
</div><!-- .bottom-line -->
</body>
</html>
Thank you sooo much in advance!
new 1.html
