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

ID: 3843410 • 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 if not all with css to get it to look like the image below.

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>

   </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) {

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

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


    </style>


    </head>

    <body>
    <div id="wrapper">

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

       <div class="resp">
           <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 shrink this website as it looks in the pictures listed below. If

I am trying to simplify the amount of loops inside of my pseudocode. Any feedbac

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