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

Question

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

Question #309339

Nature View

The goal of this coding exam is to quickly get you off the ground with the media feature orientation with different values

Refer to the below images

In portrait mode

https://assets.ccbp.in/frontend/content/intermediate-rwd/nature-view-op-portrait.png

In landscape mode

https://assets.ccbp.in/frontend/content/intermediate-rwd/nature-view-op-landscape.png

The given pre-filled code is of in portrait mode.
Apply media query to the screen devices such that when the width of the viewport is greater than the height then
The background image for the CSS class selector with the name nature-view-container should be the same as shown in the reference image.
The background color for the HTML button should be changed.
The font-size for the HTML heading element should be of 48px.

Resources

Use the image URL given below.

https://assets.ccbp.in/frontend/content/intermediate-rwd/nature-view-landscape.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="nature-view-container">
        <h1 class="title">Nature</h1>
        <p class="desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, praesentium eum.</p>
        <button type="button">View More</button>
    </div>


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .nature-view-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            min-height: 100vh;
        }
        .title {
            font-size: 48px;
        }
        button {
            border: none;
            outline: none;
            color: #fff;
            background-color: #00C3E8;
            padding: 8px 15px;
            border-radius: 4px;
        }
        .desc {
            padding: 24px 0;
            max-width: 40%;
            margin: 0 auto;
            text-align: center;
        }   
        .title, .desc {
            color: #fff;
        }


        @media screen and (orientation: landscape) {
            .nature-view-container {    
                background: url('https://assets.ccbp.in/frontend/content/intermediate-rwd/nature-view-landscape.png');
            }
        }
        @media screen and (orientation: portrait) {
            .nature-view-container {
                background: url('https://assets.ccbp.in/frontend/content/intermediate-rwd/nature-view-op-portrait.png');
            }
        }
    </style>
</body>
</html>

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

Comments

No comments. Be the first!

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

Resources

Comments

Leave a comment

Related Questions