Answer to Question #309334 in HTML/JavaScript Web Application for king

Question

Answer to Question #309334 in HTML/JavaScript Web Application for king

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #309334

Responsive Layout

Refer to the below image

Extra Small (Size < 576px), Small (Size >= 576px):

https://assets.ccbp.in/frontend/content/intermediate-rwd/responsive-layout-op-mobile.png

Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px):

https://assets.ccbp.in/frontend/content/intermediate-rwd/responsive-layout-op-desktop.png

The given pre-filled code is of extra small and small devices.
Apply media query to the medium and above screen devices such that
The CSS class selector with the name menu-and-body-container should have desired flexbox property and value such that output should be the same as shown in the reference image.
The font-sizes for the heading text of the navbar, menu, body and footer sections should be 24px.
The heading text of the navbar, menu, body, and footer should align to the left of the respective container.

Expert's answer

<!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">
</head>
<body>
    <div class="wrapper">
        <header>
            <div class="title">Navbar</div>
        </header>
        <div class="menu-and-body-container">
            <nav>
                <div class="title">Menu</div>
            </nav>
            <main>
                <div class="title">
                    Body
                </div>
                <div class="content">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia earum tempore corporis explicabo, aliquid quas, maxime recusandae et autem natus exercitationem laboriosam fugit ad fuga. Dolorum distinctio eos consectetur illum?
                </div>
            </main>
        </div>
        <footer>
            <div class="title">Footer</div>
        </footer>
    </div>


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrapper {
            width: 100%;    
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            text-align: center;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        .title {
            font-size: 24px;
            font-weight: 500;
            padding: 24px;
        }
        header, footer {
            width: 100%;
            background-color: #082435;
            color: #ffffff;
        }
        nav {
            background-color: #E7EDF8;
        }
        .content {
            padding: 0 24px 24px;
        }
        .menu-and-body-container {
            width: 100%;
            display: flex;
            flex-grow: 1;
        }


        @media screen and (min-width: 768px) {
            .menu-and-body-container {
                flex-direction: row;
            }
            .title {
                text-align: left;
            }
            nav {
                min-height: 400px;
            }
        }
        @media screen and (max-width: 767px) {
            .menu-and-body-container {
                flex-direction: column;
            }
        }
    </style>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #309334 in HTML/JavaScript Web Application for king

Comments

Leave a comment

Related Questions