Jump to content
Sign in to follow this  
Shell_Newbie

Help! CSS Container

Recommended Posts

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...