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

Comments

Popular posts from this blog

MPPL - Pengalaman proyek

Nama : Bobbi Aditya Kelas : MPPL-C NRP : 05111740000099 Berikut ini adalah proyek yang saya ketahui Nama Proyek :   Pembangunan Aplikasi MSO (Maintenance System Online) Berbasis Web Deskripsi : Aplikasi ini berguna untuk pemantauan alat-alat yang ada pada PT. Semen Indonesia - Gresik apabila terjadi kerusakan yang harus segera dilaporkan, atau terdapat jadwal pemeliharaan rutin. Lokasi : PT. Semen Indonesia (Persero) Tbk. - Gresik Jl. Veteran, Gresik Jawa Timur, 61122 Waktu Proyek: 02 - 31 Januari 2019 Tim yang terlibat: Almas Aqmarina 05111640000171 Daniel Kurniawan 0511164000081 Produk yang dihasilkan: Sebuah aplikasi yang berada di dalam server Semen Indonesia yang berguna untuk melakukan pemantuan terhadap alat-alat yang ada pada PT. Semen Indonesia. Untuk addressnya tidak bisa diakses dari luar jaringan PT. Semen Indonesia. Fitur: • Tabel Laporan Harian • Pengelolaan Laporan Harian (tambah, ubah, hapus) • Unduh ...

PWEB-FRAMEWORK

Nama : Bobbi Aditya Kelas : PWEB C NRP : 05111740000099 Dalam kesempatan kali ini, saya melanjutkan tutorial dari petanikode dari tutorial 4 sampai tutorial 6 Dalam tutorial 4, saya belajar untuk melakukan partisi-partisi dalam tampilan index website. Saya melakukan partisi halaman menjadi 7 partisi. Berikut adalah source code dari masing-masing partisi: -head.php <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title><?php echo SITE_NAME .": ". ucfirst($this->uri->segment(1)) ." - ". ucfirst($this->uri->segment(2)) ?></title> <!-- Bootstrap core CSS--> <link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>" rel="stylesheet"> <!-- Custom fonts for this te...

PBO-FOX and RABBIT

Nama : Bobbi Aditya NRP : 05111740000099 Kelas : PBO A Pada tugas kali ini , saya membuat simulasi fox and rabbit. Berikut saya sertakan design class yang telah saya buat: Berikut saya sertakan kodingan tiap kelas yang saya buat: - Kelas Fox import java.util.List; import java.util.Iterator; import java.util.Random; /** * A simple model of a fox. * Foxes age, move, eat rabbits, and die. * * @author Bobbi Aditya * @version 1.00 */ public class Fox { // Characteristics shared by all foxes (static fields). // The age at which a fox can start to breed. private static final int BREEDING_AGE = 10; // The age to which a fox can live. private static final int MAX_AGE = 150; // The likelihood of a fox breeding. private static final double BREEDING_PROBABILITY = 0.35; // The maximum number of births. private static final int MAX_LITTER_SIZE = 5; // The food value of a single rabbit. In effect, this...