Answer to Question #265651 in Web Development for balu

Question

Answer to Question #265651 in Web Development for balu

Answers>

Programming & Computer Science>

Web Development

Question #265651

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

Expert's answer

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

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

Comments

No comments. Be the first!

Answer to Question #265651 in Web Development for balu

Resources

Comments

Leave a comment

Related Questions