Jump to content

Shell_Newbie

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Shell_Newbie

  • Rank
    Newbie
  1. 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
×
×
  • Create New...