Jump to content

Help! CSS Container


Shell_Newbie
 Share

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...