Answer to Question #173343 in HTML/JavaScript Web Application for sandeep

Question #173343

Design Section

In this assignment, let's build a Design Section 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:

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.

Note

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

Resources

Use the image 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

CSS Colors used:

Background color Hex Code values:

#12022f

#ffffff

Text color Hex Code values:

#12022f

#7b8794

CSS Font families used:

Roboto

Expert's answer

<!DOCTYPE html>
<html>
<title>PIZZA IS LIFE</title>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
<style>
body, html {height: 100%}
body,h1,h2,h3,h4,h5,h6 {font-family: "Amatic SC", sans-serif}
.menu {display: none}
.bgimg {
    min-height: 90%;
}
</style>
<body background="pizza.jpeg">

<div class="w3-display-middle w3-center">
    <span class="w3-text-white w3-hide-small" style="font-size:100px">thin<br>CRUST PIZZA</span>
    <span class="w3-text-white w3-hide-large w3-hide-medium" style="font-size:60px"><b>thin<br>CRUST PIZZA</b></span>
    <p><a href="https://www.pizzahut.com/" class="w3-button w3-xxlarge w3-black">Let me see the menu</a></p>
</div>

<h2 class="w3-tag w3-xlarge">Open from 10am to 12pm</h2>
<h1 class="w3-tag w3-xlarge">MY NAME</h1>
<h1 <a href="https://www.google.com" class="w3-button w3-xlarge w3-black"> MY EMAIL</a></h1>

<h2 style="color:Red;">WHY PIZZA IS BEST</h2>
<ul style="color:Tomato;">
<li>Deliciousness</li>
<li>Never judges </li>
<li>You can eat pizza for any meal of the day</li>
</ul>
</body>
</html>