PWEB C CSS

pada hari ini saya mendapat tugas membuat layout dengan bahasa css. berikut saya lampirkan source codenya :
1. HTML

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>&lt;!DOCTYPE html&gt; 
 &lt;html&gt; 
 &lt;head&gt; 
      &lt;title&gt;Belajar Membuat Layout dengan HTML dan CSS&lt;/title&gt; 
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;custom.css&quot;&gt; 
 &lt;/head&gt; 
 &lt;body&gt; 
      &lt;div class=&quot;header&quot;&gt; 
           &lt;div class=&quot;jarak&quot;&gt; 
                &lt;h2&gt;Belajar Membuat Layout dengan HTML dan CSS&lt;/h2&gt; 
           &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;div class=&quot;menu&quot;&gt; 
           &lt;ul&gt; 
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;a&gt;&lt;/li&gt; 
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt; 
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt; 
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt; 
           &lt;/ul&gt; 
      &lt;/div&gt; 
      &lt;div class=&quot;content&quot;&gt; 
           &lt;div class=&quot;jarak&quot;&gt; 
                &lt;!-- kiri --&gt; 
                &lt;div class=&quot;kiri&quot;&gt; 
                     &lt;!-- blog --&gt; 
                     &lt;div class=&quot;border&quot;&gt; 
                          &lt;div class=&quot;jarak&quot;&gt; 
                               &lt;h3&gt;Loren Ipsum&lt;/h3&gt; 
                               &lt;p&gt;Loren Ipsum is simply dummy text if the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever since the 1500s [...]&lt;/p&gt; 
                               &lt;button class=&quot;btn&quot;&gt;Read More&lt;/button&gt; 
                          &lt;/div&gt; 
                     &lt;/div&gt; 
                &lt;!-- end blog --&gt; 
                &lt;!-- blog --&gt; 
                &lt;div class=&quot;border&quot;&gt; 
                     &lt;div class=&quot;jarak&quot;&gt; 
                          &lt;h3&gt;Lorem Ipsum&lt;/h3&gt; 
                          &lt;p&gt;Loren Ipsum is simply dummy text if the printing and typesetting industry. Lorem Ipsum has been the industry's dummy text ever since the 1500s [...]&lt;/p&gt; 
                          &lt;button class=&quot;btn&quot;&gt;Read More&lt;/button&gt; 
                     &lt;/div&gt; 
                &lt;/div&gt; 
                &lt;!-- end blog --&gt; 
                &lt;/div&gt; 
           &lt;!-- kiri --&gt; 
           &lt;!-- kanan --&gt; 
           &lt;div class=&quot;kanan&quot;&gt; 
                &lt;div class=&quot;jarak&quot;&gt; 
                     &lt;h3&gt;CATEGORY&lt;/h3&gt; 
                     &lt;hr/&gt; 
                     &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;undercor&quot;&gt;HTML&lt;/a&gt;&lt;/p&gt; 
                     &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;undercor&quot;&gt;CSS&lt;/a&gt;&lt;/p&gt; 
                     &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;undercor&quot;&gt;BOOTSTRAP&lt;/a&gt;&lt;/p&gt; 
                     &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;undercor&quot;&gt;PHP&lt;/a&gt;&lt;/p&gt; 
                     &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;undercor&quot;&gt;MYSQL&lt;/a&gt;&lt;/p&gt; 
                     &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;undercor&quot;&gt;Jquery&lt;/a&gt;&lt;/p&gt; 
                     &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;undercor&quot;&gt;Ajax&lt;/a&gt;&lt;/p&gt; 
                &lt;/div&gt; 
           &lt;/div&gt; 
           &lt;!-- kanan --&gt; 
           &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;div class=&quot;footer&quot;&gt; 
           &lt;div class=&quot;jarak&quot;&gt; 
                &lt;p&gt;Copyright 2017 codebareng all reserved&lt;/p&gt; 
           &lt;/div&gt; 
      &lt;/div&gt; 
 &lt;/body&gt; 
 &lt;/html&gt; 
</code></pre>

2. CSS
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code> body{ 
      background: #f3f3f3; 
      color: #333; 
      width: 100%; 
      font-family: sans-sherif; 
      margin: 0 auto; 
 } 
 .header{ 
      width: 90%; 
      margin: auto; 
      height: 120px; 
      line-height: 120px; 
      background: #41A85F; 
      color: #fff; 
 } 
 .content{ 
      width: 90%; 
      margin: auto; 
      height: 420px; 
      padding: 0.1px; 
      background: #fff; 
      color: #333; 
 } 
 .kiri{ 
      width: 70%; 
      float: left; 
      margin: auto; 
      background: #fff; 
      height: 420px; 
 } 
 .kanan{ 
      width: 30%; 
      float: left; 
      margin: auto; 
      background: #fff; 
      height: 420px; 
 } 
 .border{ 
      border: 2px solid #74C599; 
      margin-top: 1pc; 
      padding-bottom: 1pc; 
      padding-left: 2pc; 
      padding-right: 2pc; 
 } 
 .undercor{ 
      text-decoration: none; 
 } 
 .footer{ 
      width: 90%; 
      margin: auto; 
      height: 40px; 
      line-height: 40px; 
      background: #41A85F; 
      color: #fff; 
 } 
 .menu{ 
      background-color: #53BD84; 
      height: 50px; 
      line-height: 50px; 
      position: relative; 
      width: 90%; 
      margin: 0 auto; 
      padding: 0 auto; 
 } 
 .jarak{ 
      padding: 0 2pc; 
 } 
 .menu ul{ 
      list-style: none; 
 } 
 .menu ul li a{ 
      float: left; 
      width: 70px; 
      display: block; 
      text-align: center; 
      color: #fff; 
      text-decoration: none; 
 } 
 .menu ul li a:hover{ 
      background-color: #74C599; 
      display: block; 
 } 
</code></pre>

berikut saya lampirkan pula hasil compilenya: