Answer in Web Development for balu #265651
October 24th, 2022
Popular Blog
In this assignment, let’s build a Popular Blog by applying the CSS concepts we learned till now.
Instructions:
- The page should have two different background images for Marketing Strategies and Laptop cards in devices below 768px and devices equal and above 768px.
Note
- Achieve the design using the CSS Flexbox layout and Media querie
Resources
- https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-marketing-strategies-lg-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-marketing-strategies-sm-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-coffee-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-fruits-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-nature-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-interior-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-laptop-lg-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-laptop-sm-bg.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<!-- styles -->
</head>
<body>
<div id="container">
<header role="banner">
<h1>
<a href="/">joel sutherland</a>
</h1>
</header>
<nav>
<ul>
<!-- nav items -->
</ul>
</nav>
<div id="blog" class="hidden"><-- blog dropdown -->
</div>
<!-- blog -->
<article>
<header>
<h1>
<a href="">Post Title</a>
</h1>
<div class="postmeta">
<time datetime="">December 31st, 1969</time>
<a href="y#comments" class="comments">0 Comments</a>
</div>
</header>
<!-- content -->
<aside class="comments" id="comments">
<!-- comments -->
</aside>
<!-- comments -->
</article>
</div>
<!-- container -->
<!-- scripts -->
</body>
</html>
html
{
background: #d0cec9;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedcd9', endColorstr='#f7f7f6');
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dedcd9),
color-stop(0.1, #f7f7f6), color-stop(1.0, #f7f7f6));
background: -moz-linear-gradient(top, #dedcd9 0px, #f7f7f6 400px, #f7f7f6 100%);
}
body
{
background: url(../images/noise.png);
} 
