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

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


1
Expert's answer
2022-02-20T09:22:37-0500
<!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>

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS