I am trying to shrink this website as it looks in the pictures listed below. If

ID: 3843395 • Letter: I

Question

I am trying to shrink this website as it looks in the pictures listed below. If you can, do as much as possible with css, but if not html coding if fine.

I am new to this and having problems getting this to work.

this is what the webpage looks like

html code is at bottom and i dont have css yet because i couldnt get anything right...

Here is what it should look like when the screen is reduced to 450 pixels or less

I tried doing this in css but was getting no where

<!DOCTYPE html> <html> <head> <title>Task 4</title> <meta charset="utf-8"> <style> header, nav, main, footer, figure, figcaption { display: block; } * { box-sizing: border-box; } body { font-family: Verdana, Arial, sans-serif; background-color:#CF9; } #wrapper { background-color: #FFC; width: 80%; margin: auto; } header { background-color: #869dc7; color: #00005D; font-size: 150%; padding: 5px 20px 20px; } h1 { margin-bottom: 0; } h2 { color: #869dc7; font-family: arial, sans-serif; font-size: 200%; } nav { float: left; width: 150px; font-weight: bold; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav li { padding: 10px; } nav a { text-decoration: none; } main { margin-left: 155px; padding: 20px; background-color: #ffffff; color: #000000; } figure { margin: 10px; float: right; } figcaption { font-size: 80%; font-style: italic; text-align: center; } footer { font-size:70%; text-align: center; clear: right; padding: 20px; background-color: #869dc7; } </style> </head> <body> <div id="wrapper"> <header role="banner"> <h1>Feeling Ducky</h1> </header> <nav> <br> <ul> <li><a href="#">Home</a></li> <li><a href="#">More Jokes</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <main role="main"> <figure> <img src="baby_duck.jpg" width="250" height="205" alt="Some Really Cool Image"> <figcaption>What's Up Duck?</figcaption> </figure> <h2>Duck Joke #1</h2> <p>Q: What time does a duck wake up? <br>A: At the quack of dawn!</p> <h2>Duck Joke #2</h2> <p>Q: What time does a duck wake up? <br>A: At the quack of dawn!</p> <h2>Duck Joke #2</h2> <p>Q: What do you call two ducks and a cow? <br>A: Quackers and Milk</p> </main> <footer role="contentinfo">Copyright © 2016 </footer> </div>  </body> </html> a Feeling Ducky Home Duck Joke #1 More Jokes Contact Us Q: What time does a duck wake up? A: At the quack of dawn Duck Joke #2 Q: What time does a duck wake up? A: At the quack of dawn! Duck Joke #2 Q: What do you call two ducks and a cow A: Quackers and Milk Capyright 2016 What's Up Duck? 649 PM 5/23/2017

Explanation / Answer

<!DOCTYPE html>
    <html>

    <head>
    <title>Task 4</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />


    <style>
    header, nav, main, footer, figure, figcaption { display: block; }

    * { box-sizing: border-box; }

    body { font-family: Verdana, Arial, sans-serif;
    background-color:#CF9;
    }

    #wrapper { background-color: #FFC;
    width: 80%;
    margin: auto;
    }

    header { background-color: #869dc7;
    color: #00005D;
    font-size: 150%;
    padding: 5px 20px 20px;
    }

    h1 { margin-bottom: 0; }


    h2 { color: #869dc7;
    font-family: arial, sans-serif;
    font-size: 200%;
    }

    nav {
       display: inline-block;
    width: 150px;
    font-weight: bold;
    float: left;
    }

    nav ul { list-style-type: none;
    margin: 0;
    padding: 0;
    }

    nav li { padding: 10px;
    }

    nav a { text-decoration: none;
    }


    main {
   margin-left: 170px;
    padding: 20px;
    background-color: #ffffff;
    color: #000000;
    }

    figure { margin: 10px;
    float: right;
    }

    figcaption { font-size: 80%;
    font-style: italic;
    text-align: center;
    }

    footer {
       font-size:70%;
       text-align: center;
       clear: right;
       padding: 20px;
       background-color: #869dc7;
    }

   @media only screen and (max-width: 700px) {

       .responsive > nav{
           display: block;
           float: none;
       }
       .responsive > main {
           margin: 0px;

           padding: 10px;
           display: block;
       }
       .responsive > main figure{
           display: none;
       }
   }


    </style>


    </head>

    <body>
    <div id="wrapper">

       <header role="banner">
       <h1>Feeling Ducky</h1>
       </header>

       <div class="responsive">
           <nav>
               <br>
               <ul>
                   <li><a href="#">Home</a></li>
                   <li><a href="#">More Jokes</a></li>
                   <li><a href="#">Contact Us</a></li>
               </ul>
           </nav>

           <main role="main">

               <figure>
                   <img src="baby_duck.jpg" width="250" height="205" alt="Some Really Cool Image">
                   <figcaption>What's Up Duck?</figcaption>
               </figure>

<h2>Duck Joke #1</h2>

               <p>Q: What time does a duck wake up?
               <br>A: At the quack of dawn!</p>


               <h2>Duck Joke #2</h2>

               <p>Q: What time does a duck wake up?
               <br>A: At the quack of dawn!</p>


               <h2>Duck Joke #2</h2>

               <p>Q: What do you call two ducks and a cow?
               <br>A: Quackers and Milk</p>
           </main>
       </div>
       <footer role="contentinfo">Copyright © 2016
       </footer>


    </div> 
    </body>

    </html>

Navigate

I am trying to show the propogation of this wave using matlab but i cannot get i

I am trying to shrink this website as it looks in the pictures listed below. If

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

I am trying to shrink this website as it looks in the pictures listed below. If

Question

Explanation / Answer

Related Questions

Navigate