1 <p>HTML</p>

2 <p>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Instructor Muffin&lt;/title&gt; &lt;link rel="stylesheet" href="style.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;header class="site-header"&gt; &lt;h1&gt;Instructor Muffin&lt;/h1&gt; &lt;p&gt;Training for beginner kittens&lt;/p&gt; &lt;img src="img/muffin.png" width="359" height="159" alt="Muffin photo"&gt; &lt;/header&gt; &lt;section class="features"&gt; &lt;h2&gt;Why choose me?&lt;/h2&gt; &lt;p class="feature-kitten"&gt;I myself was once a kitten. But look at me now.&lt;/p&gt; &lt;p class="feature-train"&gt;I have got the master fully trained.&lt;/p&gt; &lt;p class="feature-cat"&gt;I have been a full-time professional cat for more than 5 years now.&lt;/p&gt; &lt;/section&gt; &lt;section class="skills"&gt; &lt;h2&gt;What will you learn, you may ask?&lt;/h2&gt; &lt;ul class="skills-list"&gt; &lt;li class="skills-item"&gt;How to snatch food from the master’s plate;&lt;/li&gt; &lt;li class="skills-item standard"&gt;How to give furniture a vintage look;&lt;/li&gt; &lt;li class="skills-item standard"&gt;How to open the door and not go in;&lt;/li&gt; &lt;li class="skills-item vip"&gt;How to wake the master up at night;&lt;/li&gt; &lt;li class="skills-item vip"&gt;How to scatter fur around the apartment.&lt;/li&gt; &lt;/ul&gt; &lt;/section&gt; &lt;footer class="site-footer"&gt; &lt;p&gt;© Muffin, 2019&lt;/p&gt; &lt;p&gt;I don’t have any contact information, but I can find you myself.&lt;/p&gt; &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</p>

3 <p>CSS</p>

4 <p>body { padding: 0; font-family: "Arial", sans-serif; font-size: 14px; line-height: 18px; color: #000000; background: #ffffff url("img/muffin-background.jpg") no-repeat 50% 0; } h1 { width: 260px; font-family: "Georgia", serif; font-size: 36px; line-height: 36px; } h2 { padding-bottom: 12px; border-bottom: 1px solid #cccccc; } .site-header { margin-bottom: 30px; } .skills-item { margin-bottom: 15px; padding-left: 20px; border-left: 10px solid #c4c4c4; color: #999999; } .standard { border-color: #ffc5b3; color: #666666; } /* Add a rule for the vip class here */ .container { width: 480px; margin: 0 auto; } .site-header img { display: block; margin: 0 auto; } .features { margin-bottom: 30px; } .features p { display: inline-block; vertical-align: top; width: 30%; margin: 0 5px; text-align: center; background-repeat: no-repeat; background-position: center top; } .feature-kitten { padding-top: 60px; background-image: url("img/bottle.svg"); } .feature-cat { padding-top: 60px; background-image: url("img/cat.svg"); } .feature-train { padding-top: 60px; background-image: url("img/whistle.svg"); } .skills-list { padding: 0; list-style: none; } .site-footer { display: flex; justify-content: space-between; color: #999999; }</p>