TUGAS PWEB C Belajar HTML dan CSS

Nama = Arini Indah N F
NRP = 05111740007003
Kelas = PWEB C

1. langkah awal

  • HTML
<!DOCTYPE html>
<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>Loren Ipsum</h3>
<p>Loren Ipsum is simply dummy text of the printing and typesetting industry. Loren Ipsum has been........................</p>
<button class="btn">Read More..</button>
</div>
</div>
<!--end blog-->
<!--blog-->
<div class="border">
<div class="jarak">
<h3>Loren Ipsum</h3>
<p>Loren Ipsum is simply dummy text of the printing and typesetting industry. Loren Ipsum has been........................</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">JQuery</a></p>
<p><a href="#" class="undecor">Ajax</a></p>
</div>
</div>
<!--kanan-->
</div>
</div>
<div class="footer">
<div class="jarak">
<p>Copyright 2018 codebareng all reserved</p>
</div>
</div>
</body>
</html>


  • CSS 
body{
background: #f3f3f3;
color: #333;
width: 100%;
font-family: 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: right;
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;
}


2. Hasil nya seperti ini :




Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 APSI - Analisis Sistem Informasi KASKUS

Gambar
Arini Indah Nur Fuadah  05111740007003 Analisis Sistem Informasi KASKUS  1. Didirikan nya Kaskus Kaskus didirikan pada tanggal 6 November 1999 oleh tiga pemuda asal Indonesia yang sedang melanjutkan studi di Seattle, Amerika Serikat. Mulanya Andrew Darwis, Ronald, dan Budi membuat KASKUS untuk memenuhi tugas kuliah mereka. KASKUS sendiri bertujuan untuk mengobati kerinduan mahasiswa Indonesia di luar negeri akan Indonesia melalui berita-berita Indonesia yang diterjemahkan.  2. Analisis Sistem Informasi KASKUS 1.Transaction Processing System (TPS)    PHP proggrammer Membuat database, Memelihara web, Memperbaiki masalah teknis, Pengembangan proyek berbasis PHP.     Web Designer Memperbaiki kesalahan website, Menentukan bagaimana gambar dan materi digital lainnya akan dioptimalkan dan disajikan untuk web, Menghasilkan desain yang akan menarik bagi pengguna target, memiliki sistem navigasi lo...
Baca selengkapnya

Analisa Use Case

Gambar
Kelompok APSI C Shintya Rezky Rahmayanti (05111740000017) Arini Indah Nur Fuadah (05111740007003) Ihdiannaja (05111740007005) Pengertian Analisa Use Case adalah teknik yang digunakan untuk mengidentifikasi kebutuhan sistem perangkat lunak dengan menggambarkan aktor atau user yang akan menggunakan perangkat lunak dan ruang lingkup fitur kegunaan perangkat lunak. Diagram Analisa Use Case pada Penerbitan Kanisius Use Case Description Use Case Mencatat data pegawai Actor Personalia Description Personalia memasukkan data pegawai baru atau mengupdate data pegawai kemudian disimpan oleh sistem. Trigger Personalia mengupdate data pegawai. Pre - Condition Personalia terotentikasi Personalia memiliki hak akses untuk mengupdate data pegawai Normal Course Personalia memasukkan data pegawai. Personalia menyimpan data pegawai yang dimasukkan. Sistem informasi mengecek kelengkapan data dan kevalidan data. Sistem informasi...
Baca selengkapnya

EAS_PWEB

Gambar
Arini Indah Nur Fuadah 05111740007003 PWEB C 1. Login aplikasi dengan user dan password 2. Mengisi formulir pendaftaran 3. Edit profil dan biodata calon pendaftar 4. Memilih sekolah tujuan yang dipilih 5. View formulir pendaftaran yang sudah permanen 6. Download formulir pendaftaran 1. .env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=rpl_blog DB_USERNAME=root DB_PASSWORD= DB_DATABASE adalah nama database masing-masing APP_NAME=Laravel APP_ENV=local APP_KEY=base64:TNuy/ndNpNl8gtJE0CBEmiK+Vmxq7r09Rff683O3bu0= APP_DEBUG=true APP_URL=http://localhost LOG_CHANNEL=stack DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=rpl_blog DB_USERNAME=root DB_PASSWORD= BROADCAST_DRIVER=log CACHE_DRIVER=file QUEUE_CONNECTION=sync SESSION_DRIVER=file SESSION_LIFETIME=120 REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379 MAIL_DRIVER=smtp MAIL_HOST=smtp.mailtrap.io MAIL_PORT=2525 MAIL_USERNAME=null MAIL_PASSWORD=...
Baca selengkapnya