Create Website Layout with CSS Flexbox

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Website Layout Flexbox CSS</title>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css"
        integrity="sha384-NvKbDTEnL+A8F/AA5Tc5kmMLSJHUO868P+lDtTpJIeQdGYaUIuLr4lVGOEA1OcMy" crossorigin="anonymous">
    <link rel="stylesheet" href="css/Create_Website_Layout_Flexbox_CSS.css">
</head>

<body>
    <header>
        <nav id="menu">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
        <div id="logo">
            <a href="">Hello World</a>
        </div>
        <nav id="social-links">
            <ul>
                <li><a href=""><i class="fa-brands fa-facebook-f"></i></a></li>
                <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                <li><a href=""><i class="fa-brands fa-google-plus-g"></i></a></li>
            </ul>
        </nav>
    </header>
    <div id="main">
        <aside classs="">
            <ul>
                <li><a href="">Some Link</a></li>
                <li><a href="">Some Link</a></li>
                <li><a href="">Some Link</a></li>
                <li><a href="">Some Link</a></li>
                <li><a href="">Some Link</a></li>
            </ul>

            <img src="images/Aside.jpg" alt="">
        </aside>
        <article class="">
            <h2>Welcome to our Website</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, molestiae fugiat ipsam voluptatem
                ad nam nemo eum, itaque vero vitae cum accusantium esse cumque nostrum corporis laudantium veniam
                maiores! Eligendi ex repudiandae laborum sit expedita qui iste doloremque libero fugit quisquam
                voluptate ab voluptatem animi, rerum eius, odio delectus neque explicabo tempora. Dolore in corrupti
                veniam nisi minima possimus. Excepturi reprehenderit laboriosam nam corporis odit maxime dolore sequi
                quo debitis? Est aliquid modi ad quis illo aspernatur temporibus, vero veniam facere ut sint amet
                cupiditate dolore tempore eligendi iste cumque aperiam obcaecati voluptates? Voluptate, ipsum
                consectetur repudiandae blanditiis aliquid quae.</p>
            <h2>Our Services</h2>
            <div class="services-container">
                <div class="service-box">
                    <div class="service-img">
                        <img src="images/Web_Designing.jpg" alt="">
                    </div>
                    <div class="service-title">
                        <h3>Web Designing</h3>
                    </div>
                    <div class="service-desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt porro mollitia vitae
                            obcaecati non molestiae consequuntur, quae repudiandae fugit.</p>
                    </div>
                    <div class="call-to-action">
                        <a href="">Read more</a>
                    </div>
                </div>

                <div class="service-box">
                    <div class="service-img">
                        <img src="images/Web_App_Development.jpg" alt="">
                    </div>
                    <div class="service-title">
                        <h3>Web Development</h3>
                    </div>
                    <div class="service-desc">
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt, enim.</p>
                    </div>
                    <div class="call-to-action">
                        <a href="">Read more</a>
                    </div>
                </div>

                <div class="service-box">
                    <div class="service-img">
                        <img src="images/Mobile_App_Development.jpg" alt="">
                    </div>
                    <div class="service-title">
                        <h3>Mobile App Development</h3>
                    </div>
                    <div class="service-desc">
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt, enim.</p>
                    </div>
                    <div class="call-to-action">
                        <a href="">Read more</a>
                    </div>
                </div>
            </div>
        </article>
    </div>
    <footer>
        Made by Hello World
    </footer>
</body>

</html>




Below File is css/Create_Website_Layout_Flexbox_CSS.css File
* {
    box-sizing: border-box;
}

body {
    font-family: arial;
    display: flex;
    flex-direction: column;
    margin: 0;
}

a {
    text-decoration: none;
}

header {
    background: #566c2b;
    display: flex;
    align-items: center;
    padding: 15px 0;
}

header ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

header a {
    color: #ffffff;
}

#logo {
    margin: 0 auto;
    font-size: 30px;
}

#menu li {
    padding: 10px;
}

#social-links li {
    padding: 10px;
}

#main {
    display: flex;
}

aside {
    padding: 10px;
    /* flex: flex-grow flex-shrink flex-basis */
    flex: 0 0 20vw;
    background: #f5f5dc;
}

aside ul {
    list-style: none;
    padding: 0;
}

aside ul a {
    color: #566c2b;
    padding: 10px;
    display: block;
    border-bottom: 1px solid #808080;
}

aside img {
    width: 100%;
}

article {
    padding: 10px;
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.service-box {
    border: 1px solid #eee;
    flex-basis: 32%;
    max-width: 370px;
    padding: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.service-box img {
    width: 100%;
}

.service-box h3 {
    margin: 5px 0 10px;
}

.service-box p {
    margin: 0 0 10px;
}

.call-to-action {
    align-self: flex-start;
    margin-top: auto;
}

.call-to-action a {
    background: #808080;
    border: 2px solid transparent;
    color: #ffffff;
    padding: 8px 13px;
    display: block;
}

.call-to-action a:hover {
    color: #808080;
    background: transparent;
    border: 2px solid grey;
}

footer {
    background: #566c2b;
    color: #ffffff;
    text-align: center;
    padding: 15px 0;
}

@media screen and (max-width:850px) {
    .service-box {
        flex-basis: 48%;
    }

    aside {
        flex: 0 0 30vw;
    }
}

@media screen and (max-width:600px) {
    header {
        flex-direction: column;
    }

    #logo {
        order: -1;
    }

    #main {
        flex-direction: column;
    }

    article {
        order: -1;
    }

    .services-container {
        flex-direction: column;
        align-items: center;
    }

    h2 {
        text-align: center;
    }
}











Comments

Post a Comment