Shell_Newbie Posted May 3, 2020 Share Posted May 3, 2020 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,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" 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now