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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #300124

Product Launch Section, Devices (Size < 900px):Devices (Size >= 900px):

Instructions:

For the devices less than 900px, the width of image should be 180px and for the rest of devices it should be 300px.
The page should have the image on the right in devices equals to and above 900px.
The page should have the image on the top in devices below 900px.
For the devices less than 900px, use align self property to align the image horizontally in the center.
Achieve the design using the CSS Flexbox layout and Media queries.
Try to achieve the design as close as possible.

Use the image URL's given below.

https://assets.ccbp.in/frontend/intermediate-rwd/fairpods-darkpink-bg.png
https://assets.ccbp.in/frontend/intermediate-rwd/fairpods-blue-bg.png
https://assets.ccbp.in/frontend/intermediate-rwd/apple-fairpods-img.png

CSS Colors used:

Background color Hex Code values:

#ffdda9

Text color Hex Code values:

#8e62d9

#ffffff

#334155

CSS Font families used:

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;
            color: white;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: flex-end;
            background: url('https://assets.ccbp.in/frontend/intermediate-rwd/fairpods-blue-bg.png');
            background-position: 0 0;
            background-size: cover;
        }

        .text {
            font-size: 70px;
            margin-right: 50px;
            text-align: center;
        }

        .wrapper {
            display: flex;
            align-items: center;
        }

        .airpods {
            width: 300px;
        }

        @media screen and (max-width: 900px){
            img {
                width: 300px;
                align-self: center;
            }
            body {
                flex-direction: column;
                background: url('https://assets.ccbp.in/frontend/intermediate-rwd/fairpods-darkpink-bg.png');
                background-position: 0 0;
                background-size: cover;
            }
            .airpods {
                width: 180px;
            }
            .text {
                margin-top: 15px;
                font-size: 50px;
                margin-right: 0;
            }
            .wrapper {
                flex-direction: column;
                align-items: center;
            }      
        }

    </style>
    <div class="wrapper">
        <div class="text">TEXT</div>
        <img src="https://assets.ccbp.in/frontend/intermediate-rwd/apple-fairpods-img.png" alt="" class="airpods">
    </div>
</body>
</html>