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

Question #283235

Design Section

In this assignment, let's build a Design Section by applying the CSS concepts we learned till now.

Instructions:

The page should have two different background images in devices below 768px and devices equal and above 768px.
The HTML main heading element should have different font-sizes in devices below 768px and devices equal and above 768px.
Add the given images as background images to the HTML container element.

URL's given below.

https://assets.ccbp.in/frontend/intermediate-rwd/design-section-sm-bg.png
https://assets.ccbp.in/frontend/intermediate-rwd/design-section-lg-bg.png
https://assets.ccbp.in/frontend/intermediate-rwd/design-section-bulb-img.png
https://assets.ccbp.in/frontend/intermediate-rwd/design-section-1-img.png
https://assets.ccbp.in/frontend/intermediate-rwd/design-section-2-img.png
https://assets.ccbp.in/frontend/intermediate-rwd/design-section-3-img.png

CSS Colors used:

Background color Hex Code values:

#12022f

#ffffff

Text color Hex Code values:

#12022f

#7b8794

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);
         }
      }


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


</head>


<body>




</body>


</html>

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

Comments

No comments. Be the first!

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

CSS Colors used:

Comments

Leave a comment

Related Questions