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

Question #283237

Freemium Business Model

In this assignment, let's build a Freemium Business Model by applying the CSS concepts we learned till now.

Refer to the below images.

The following images illustrate all device sizes, from extra small to extra large.

Instructions:

For the devices less than 768px, the width of image should be 120px and for the rest of devices it should be 150px.
For the devices less than 768px, the size of heading should be 24px and for the rest of devices it should be 36px.

Note

Achieve the design using the CSS Flexbox layout and Media queries.

Use the image URL's given below.

https://assets.ccbp.in/frontend/intermediate-rwd/freemium-business-model-1-img.png
https://assets.ccbp.in/frontend/intermediate-rwd/freemium-business-model-2-img.png

CSS Colors used:

Background color Hex Code values:

#eff7ff

#0b4870

Text color Hex Code values:

#f0f0f0

#f4f3f3

Expert's answer

<!DOCTYPE html>
<html>


<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">


   <style>
      


      html,
      body {
         min-height: 100%;
      }


      body {
         background-position: center center;
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-size: cover;
      }
     
      @media (max-width: 768px) {
         body {
            background-image: url(images/background-mobile.jpg);
            width: 120px;
         }
      }


      @media (min-width: 768px) and (max-width: 1024px) {
         body {
            background-image: url(images/background-tablet.jpg);
            width: 24px;
         }
      }
   </style>


</head>


<body>


</body>


</html>

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

Comments

No comments. Be the first!

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

CSS Colors used:

Comments

Leave a comment

Related Questions