The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Need help to align items left in footer
JUI43555
post Apr 9 2023, 07:38 AM
Post #1


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
Hi all, i need to align all items in the footer to the left like the screenshot below. This is for the media query when it's in mobile. Except the social icons which need to remain in the center as is.

Tried everything but cant seem to work it out what m doing wrong. Thanks.

IPB Image


CODE
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Frontend Mentor | Fylo landing page with two column layout</title>
        <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <main>
            <div class="container">
                <header>
                    <img src="images/logo.svg" alt="Fylo logo" class="logo" />
                    <ul class="main-nav">
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Team</a></li>
                        <li><a href="#">Sign In</a></li>
                    </ul>
                </header>
                <div class="top-flex">
                    <div class="top-flex__left">
                        <h1>All your files in one secure location, accessible anywhere.</h1>
                        <p>Fylo stores your most important files in one secure location. Access them wherever you need, share and collaborate with friends, family, and co-workers.</p>
                        <div class="email-form-container">
                            <input type="text" class="email" placeholder="Enter your email..." />
                            <button class="email-form-button"><a href="#">Get started</a></button>
                        </div>
                    </div>
                    <div class="top-rightimage">
                        <img src="images/illustration-1.svg" alt="" class="illustrations" />
                    </div>
                </div>

                <!-- <img src="images/bg-curve-desktop.svg" alt="" class="curve1" /> -->

                <div class="middle-flex">
                    <div class="middle-container__content">
                        <h1>Stay productive, wherever you are</h1>
                        <p>Never let location be an issue when accessing your files. Fylo has you covered for all of your file storage needs.</p>
                        <p>Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required!</p>
                        <a href="#">See how Fylo works <img src="images/icon-arrow.svg" alt="" class="arrow" /></a>
                        <div class="testimonial-box">
                            <img src="images/icon-quotes.svg" alt="quotation marks" />
                            <p>Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>
                            <div class="user-info">
                                <div><img src="images/avatar-testimonial.jpg" alt="" /></div>
                                <div>
                                    <h4>Kyle Burton</h4>
                                    <small>Founder & CEO, Huddle</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="middle-imageright">
                        <img src="images/illustration-2.svg" alt="" class="illustrations" />
                    </div>
                </div>
                <div class="bottom-flex">
                    <div class="bottom-section__content">
                        <h1>Get early access today</h1>
                        <p>It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.</p>
                    </div>
                    <div class="bottom-section_form">
                        <input type="text" class="email2" placeholder="email@example.com.au" />
                        <button><a href="#">Get started for free</a></button>
                    </div>
                </div>
                <footer>
                    <div class="footer-container">
                        <div class="footer-container__logo-contact flex">
                            <img src="images/logo_white.svg" alt="" class="footer-logo" />
                            <p><img src="images/icon-phone.svg" alt="" />Phone: +1-543-123-4567</p>
                            <p><img src="images/icon-email.svg" alt="" />example@fylo.com</p>
                        </div>
                        <div class="row1 flex">
                            <ul>
                                <li><a href="#"></a>About Us</li>
                                <li><a href="#"></a>Jobs</li>
                                <li><a href="#"></a>Press</li>
                                <li><a href="#"></a>Blog</li>
                            </ul>
                        </div>
                        <div class="row2 flex">
                            <ul>
                                <li><a href="#"></a>Contact Us</li>
                                <li><a href="#"></a>Terms</li>
                                <li><a href="#"></a>Privacy</li>
                            </ul>
                        </div>

                        <div class="social">
                            <a href="#"><img src="assets/small_facebook_media_online_social_icon.png" alt="facebook" /></a>
                            <a href="#"><img src="Assets/small_twitter_icon.png" alt="twitter" /></a>
                            <a href="#"><img src="assets/small_instagram_media_online_social_icon.png" alt="instagram" /></a>
                        </div>
                    </div>
                </footer>
            </div>
        </main>
    </body>
</html>


CODE
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@400;700&display=swap");

/* font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif; */

:root {
    /* ### Primary */

    --Very-Dark-Blue: hsl(243, 87%, 12%);
    --Desaturated-Blue: hsl(238, 22%, 44%);

    /* ### Accent */

    --Bright-Blue: hsl(224, 93%, 58%);
    --Moderate-Cyan: hsl(170, 45%, 43%);

    /* ### Neutral */

    --Light-Grayish-Blue: hsl(240, 75%, 98%);
    --Light-Gray: hsl(0, 0%, 75%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

main {
    margin: 0 auto;
    max-width: 100%;
    /* width: 1200px; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Raleway", sans-serif;
}

body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #4b4e6d;
    background-color: #fff;
}
.container {
    margin: 0 auto;
}

/* header */
header {
    display: flex;
    justify-content: space-between;
    padding: 30px;
}

.logo {
    width: 150px;
    height: 45px;
    align-items: center;
    margin: 30px 0;
}

.illustrations {
    width: 500px;
    margin: auto 50px;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    list-style: none;
    align-items: center;
    margin: 30px 0;
}

.main-nav li {
    margin-right: 30px;
}

.main-nav a {
    color: var(--Very-Dark-Blue);
    text-decoration: none;
}

/* top section */

.top-flex {
    display: flex;
    padding: 30px;
    align-items: center;
}

.top-flex > div {
    flex: 1;
}

.top-flex__left h1 {
    line-height: 50px;
    margin-bottom: 10px;
}

.top-flex__left p {
    margin-bottom: 20px;
    word-spacing: 0.1rem;
}

/* email & button */
.email-form-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.email {
    width: 70%;
    border: 1px solid grey;
    border-radius: 5px;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    padding: 10px;
}

.email-form-button {
    background-color: var(--Bright-Blue);
    color: white;
    padding: 10px;
    border: none;
    border-radius: 3px;
    width: 30%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.email-form-button a {
    color: white;
    text-decoration: none;
}

/* Middle section */
.curve1 {
    float: left;
}

.middle-flex {
    /* background-color: var(--Light-Grayish-Blue); */
    background-color: rgba(248, 248, 253);
    display: flex;
    padding: 30px;
    align-items: center;
}

.middle-flex > div {
    flex: 1;
}

.middle-container__content h1 {
    margin-bottom: 20px;
}

.middle-container__content p {
    margin-bottom: 15px;
    word-spacing: 0.1rem;
}

.middle-container__content a {
    color: var(--Moderate-Cyan);
    text-underline-offset: 8px;
}

/* testimonial card */

.testimonial-box {
    background-color: #fff;
    padding: 20px;
    margin-top: 30px;
    width: 60%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    border-radius: 5px;
}

.testimonial-box p {
    font-size: 14px;
    font-weight: 600;
    line-height: 25px;
}

.user-info {
    display: flex;
    align-items: center;
    font-size: 12px;
}

.user-info img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

/* Dark purple bottom section */
.bottom-flex {
    background-color: var(--Desaturated-Blue);
    display: flex;
    padding: 40px;
}

.bottom-flex > div {
    flex: 1;
}

.bottom-section__content {
    margin: 40px 0;
    color: white;
}

.bottom-section_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bottom-section__content h1 {
    margin-bottom: 20px;
}

.bottom-section__content p {
    width: 80%;
}

.email2 {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
}

.bottom-section_form button {
    background-color: var(--Bright-Blue);
    color: white;
    text-decoration: none;
    padding: 10px;
    border: none;
    border-radius: 3px;
    width: 35%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.bottom-section_form button a {
    text-decoration: none;
    color: white;
}

/* Footer */
footer {
    color: white;
    background-color: var(--Very-Dark-Blue);
}

.footer-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.flex {
    margin: 140px 20px;
}

.footer-logo {
    margin-bottom: 10px;
}

.footer-container__logo-contact {
    margin-top: 50px;
}

.footer-container__logo-contact img {
    margin-right: 15px;
}

.footer-container__logo-contact p {
    margin-bottom: 10px;
}

.flex li {
    margin-bottom: 10px;
    text-decoration: none;
    list-style: none;
}

.social img {
    margin-right: 10px;
}

@media only screen and (max-width: 700px) {
    .top-flex {
        display: flex;
        flex-direction: column-reverse;
        text-align: center;
        gap: 20px;
    }

    .middle-flex {
        display: flex;
        flex-direction: column;
    }

    /* email input & button - mobile */
    .email-form-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .email {
        padding: 15px;

        width: 90%;
    }

    .email-form-button {
        padding: 15px;

        width: 90%;
    }

    /* middle section mobile */
    .middle-flex {
        display: flex;
        flex-direction: column-reverse;
        text-align: center;
    }

    .testimonial-box {
        text-align: start;
        margin: auto;
        margin-top: 20px;
        width: 80%;
    }

    .bottom-flex {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .bottom-section_form {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .bottom-section_form button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin-bottom: 50px;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: left;
        text-align: left;
    }

    .flex {
        margin: 20px;
        display: flex;
        flex-direction: column;
    }

    .social {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 50px;
    }

    
}


This post has been edited by JUI43555: Apr 9 2023, 07:39 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
JUI43555   Need help to align items left in footer   Apr 9 2023, 07:38 AM
Jason Knight   See the justify-content on .social? Switch that to...   Apr 9 2023, 11:14 AM
JUI43555   See the justify-content on .social? Switch that t...   Apr 9 2023, 01:49 PM

« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 13th June 2024 - 08:24 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC