Answer to Question #299729 in HTML/JavaScript Web Application for taufiq umarWeather 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 <!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>
| 
