Jump to content

Shell_Newbie

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by Shell_Newbie

    Help! CSS Container

    in CSS

    Posted

    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...