Skip to main content

PWEB C- Tugas membuat CSS

Berikut saya sertakan source code html yang telah saya buat
 <html>  
 <head>  
      <title>Belajar Membuat Layout dengan HTML dan CSS</title>  
      <link rel="stylesheet" href="custom.css"/>  
 </head>  
 <body>  
      <div class="header">  
           <div class="jarak">  
                <h2>Belajar Membuat Layout dengan HTML dan CSS</h2>  
           </div>  
      </div>  
      <div class="menu">  
           <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Blog</a></li>  
                <li><a href="#">Contact</a></li>  
           </ul>  
      </div>  
      <div class="content">  
           <div class="jarak">  
                <!-- kiri -->  
                <div class="kiri">  
                <!-- blog -->  
                <div class="border">  
                     <div class="jarak">  
                          <h3>Lorem Ipsum</h3>  
                          <p>Lorep Ipsum is a simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,[.]</p>  
                          <button class="btn">Read More..</button>  
                     </div>  
                </div>  
                <!-- end blog-->  
                <!-- blog -->  
                <div class="border">  
                     <div class="jarak">  
                          <h3>Lorem Ipsum</h3>  
                          <p>Lorep Ipsum is a simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,[.]</p>  
                          <button class="btn">Read More..</button>  
                     </div>  
                </div>  
                <!-- end blog-->  
                </div>  
                <!-- kiri-->  
                <!-- kanan -->  
                <div class="kanan">  
                     <div class="jarak">  
                          <h3>CATEGORY</h3>  
                          <hr/>  
                          <p><a href="#" class="undecor">HTML</a></p>  
                          <p><a href="#" class="undecor">CSS</a></p>  
                          <p><a href="#" class="undecor">BOOTSTRAP</a></p>  
                          <p><a href="#" class="undecor">PHP</a></p>  
                          <p><a href="#" class="undecor">MYSQL</a></p>  
                          <p><a href="#" class="undecor">Jquerry</a></p>  
                          <p><a href="#" class="undecor">Ajax</a></p>  
                     </div>  
                </div>  
                <!-- kanan -->  
           </div>  
      </div>  
      <div class="footer">  
           <div class="jarak">  
                <p>copyright 2017 codebareng all reserved</p>  
           </div>  
      </div>  
 </body>  
 </html>

Selain source code HTML, saya juga membuat code CSSnya, berikut saya sertakan source code CSSnya

 body{  
      background: #f3f3f3;  
      color: #333;  
      width: 100% ;  
      font-family: "Comic Sans MS", cursive, sans-serif;  
      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;  
 }  
 .undecor{  
      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;  
 }

Dari code html yang disediakan saya mencoba untuk mengubah jenis font yang awalnya sans-seriff, saya ubah menjadi comic sans ms. Hasilnya menjadi seperti ini.
Link tersebut juga bisa di akses di
Link Tugas CSS

Nama : Bobbi Aditya
Kelas : Pemrograman Web C
NRP : 05111740000099
Labels:

Comments

Post a Comment

Popular posts from this blog

APSI-TUGAS 1 Sistem Informasi IndoPremier

NAMA: Bobbi Aditya NRP: 05111740000099 KELAS: APSI C Sistem informasi yang saya gunakan adalah IndoPremier. IndoPremier adalah perusahaan penyedia jasa keuangan terintegrasi di bidang pasar modal yang melayani klien individu maupun korporasi. Melalui anak perusahaannya (PT Indo Premier Investment Management), IndoPremier mengembangkan bisnis aset manajemennya. Dan menyadari bahwa salah satu kompetensi utama IndoPremier adalah pengembangan teknologi, maka pada tahun 2007, diluncurkan Exchange Traded Fund saham pertama di Indonesia. Secara singkat, IndoPremier adalah salah satu sekuritas yang bisa dipakai oleh masyarakt Indonesia untuk melakukan trading saham. Fasilitas dari IndoPremier adalah: IPOTGO (Web Investasi) IPOTKU(Cara Modern Menabung) IPOTFUND(Investasi Reksadana) IPOTSTOCK(Investasi Saham) IPOTNEWS(Web Berita Investasi) Sistem Informasi pada umumnya memiliki bagan seperti di bawah ini Pada IndoPremier, sistem informasi ini juga berlaku, penjelasanny...
Post a Comment
Read more

PBO - EAS 2018

Nama : Bobbi Aditya Kelas : PBO A NRP : 05111740000099 Berikut adalah dokumentasi dari hasil pekerjaan EAS PBO saya, soal pertama adalah saya diberi tugas untuk merancang tampilan interface dari image viewer saya. Tampilan image viewer saya yang dulu adalah seperti ini Dari tampilan awal yang seperti itu, saya ingin membuat menu-menu pada bagian kiri (bagian smaller,larger). Sehingga fitur-fitur image viewer saya akan terdapat pada bagian tersebut. Rancangan class diagram saya berubah menjadi seperti dibawah ini: Terdapat 7 class dalam imageviewer saya ini. 1. Image Viewer Image Viewer adalah kelas utama dalam program ini, didalam kelas ini terdapat segala proses image viewer. Mulai dari open file,save file,close file, apply filter, membuat interfaces dll. 2.Image File Manager Image File manager adalah kelas untuk open file dan save file ke disk komputer. Segala proses yang berhubungan dengan disk akan berada di dalam class ini. 3.Image Panel Image Panel adalah kel...
Post a Comment
Read more

PBO-A Tugas Membuat Rumah

Berikut saya sertakan codingan saya dalam membuat rumah dalam BlueJ. Saya menggunakan 5 kelas dalam mengerjakannya. Class yang pertama adalah canvas. Di dalam class canvas ini berisi fungsi fungsi untuk membuat tempat agar bisa ditempati objek-objek. Berikut codingannya: import javax.swing.*; import java.awt.*; import java.util.List; import java.util.*; public class Canvas { private static Canvas canvasSingleton; public static final Color hijau_pekat = new Color(0,153,0); public static final Color coklat = new Color(102,51,0); public static final Color abuabu = new Color(153,153,153); public static final Color abuabu_gelap = new Color(51,51,51); public static Canvas getCanvas() { if(canvasSingleton == null) { canvasSingleton = new Canvas("BlueJ Shapes Demo", 600, 400, Color.white); } canvasSingleton.setVisible(true); return canvasSingleton; } pr...
1 comment
Read more