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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #309336

Responsive Header

Refer to the below images

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

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

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

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

Add the necessary HTML elements to the HTML container element with the class mobile-nav-items-container
Apply media query to extra small and small screen devices such that the CSS class selector with the name header should have desired flexbox property and value.
Apply media query to medium and above screen devices such that the output should be the same as shown in the respective reference image.

Resources

Use the image URLs given below.

https://assets.ccbp.in/frontend/content/intermediate-rwd/home-v3.png
https://assets.ccbp.in/frontend/content/intermediate-rwd/bookmark-v3.png
https://assets.ccbp.in/frontend/content/intermediate-rwd/upload-v3.png

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="mobile-nav-items-container">
        <div class="logo">
            <img src="" alt="Code">
        </div>
        <div class="nav">
            <div class="item">
                <img src="https://assets.ccbp.in/frontend/content/intermediate-rwd/home-v3.png" alt="home" class="nav-img">
                <div class="nav-item">Home</div>
            </div>
            <div class="item">
                <img src="https://assets.ccbp.in/frontend/content/intermediate-rwd/bookmark-v3.png" alt="bookmark" class="nav-img">
                <div class="nav-item">Save</div>
            </div>
            <div class="item">
                <img src="https://assets.ccbp.in/frontend/content/intermediate-rwd/upload-v3.png" alt="upload" class="nav-img">
                <div class="nav-item">Upload</div>
            </div>
        </div>
    </div>


    <style>
        .mobile-nav-items-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f5f5f5;
            min-height: 100px;
            padding: 24px;
            box-sizing: border-box;
        }


        @media screen and (min-width: 768px) {
            .nav .nav-img {
                display: none;
            }
            .nav {
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
            .nav-item {
                font-size: 20px;
                font-weight: 500;
                padding: 0 24px;
            }
        }
        @media screen and (max-width: 767px) {
            .mobile-nav-items-container {
                flex-direction: column;
            }
            .nav {
                margin-top: 24px;
                display: flex;
            }
            .nav .nav-item {
                display: none;
            }
            .nav .nav-img {
                max-width: 36px;
                object-fit: cover;
                margin: 0 12px;
            }
        }
    </style>
</body>
</html>

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

Comments

No comments. Be the first!

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

Resources

Comments

Leave a comment

Related Questions