Answer to Question #299729 in HTML/JavaScript Web Application for taufiq umar

Question

Answer to Question #299729 in HTML/JavaScript Web Application for taufiq umar

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #299729

Weather Report Section.

Devices (Size < 900px):

Devices (Size >= 900px):

The weather conditions in the section should be horizontal for the devices equals to and above 900px.
The weather conditions in the section should be vertical for the devices below 900px.
For the weather conditions, use justify-content property with value space-around to occupy equal space for the devices less than 900px.
The HTML Superscript element sup specifies inline text which is to be displayed as superscript. Refer to the prefilled HTML code.

Use the image URL's given below.

https://assets.ccbp.in/frontend/intermediate-rwd/partly-sunny-img.png
https://assets.ccbp.in/frontend/intermediate-rwd/partly-cloudy-img.png
https://assets.ccbp.in/frontend/intermediate-rwd/rain-with-sun-img.png
https://assets.ccbp.in/frontend/intermediate-rwd/sunny-img.png

#ffffff20

#b96fa1

#5a3f8c

Border color Hex Code values:

#e9e9e930

Text color Hex Code values:

#ffffff

Roboto

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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&display=swap" rel="stylesheet"> 
    <title>Site</title>
</head>
<body>
    <style>
        * {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: white;
        }

        body {
            height: 100vh;
            background: #5a3f8c
        }

        .block {
            height: 100px;
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #e9e9e930;
            padding: 5px 10px;
        }

        .wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 20px;
            margin: 0 20px;
        }

        img {
            width: 80px;
            margin-right: 5px;
        }

        @media screen and (max-width: 900px){
            body {
                background: #b96fa1;
            }
            .wrapper {
                height: 100vh;
                flex-direction: column;
                align-items: center;
            }
            .block {
                margin-bottom: 20px;
            }
        }

    </style>
    <div class="wrapper">
        <div class="block">
            <img src="https://assets.ccbp.in/frontend/intermediate-rwd/partly-sunny-img.png" alt="" >
            <sup>Partly sunny</sup>
        </div>
        
        <div class="block">
            <img src="https://assets.ccbp.in/frontend/intermediate-rwd/partly-cloudy-img.png" alt="" >
            <sup>Partly cloudy</sup>
        </div>
        <div class="block">
            <img src="https://assets.ccbp.in/frontend/intermediate-rwd/rain-with-sun-img.png" alt="" >
            <sup>Rain with sun</sup>
        </div>
        <div class="block">
            <img src="https://assets.ccbp.in/frontend/intermediate-rwd/sunny-img.png" alt="">
            <sup>Sunny</sup>
        </div>
    </div>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #299729 in HTML/JavaScript Web Application for taufiq umar

Comments

Leave a comment

Related Questions