Remake Tutorial Menjadi Tema Prodi di Polibest
Sumber: https://www.mysatria.com/2021/11/cara-membuat-website-dengan-html-dan-css.html
File Asli
1. Html (Sebelum Dirubah)
<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Web saya
</div>
</header>
<nav>
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="kontak-saya.html">Kontak Saya</a></li>
<li><a href="tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="konten">
<a href="nasi-goreng.html"><img src="gambar/Nasi-goreng.jpg" ></a>
<div class="judul">
<a href="Nasi-goreng.html">Nasi goreng</a>
</div>
<p>Nasi goreng merupakan sajian nasi yang digoreng dalam sebuah wajan atau penggorengan menghasilkan cita rasa berbeda</p>
</div>
<div class="konten">
<a href="Rendang.html"><img src="gambar/Rendang.jpg" ></a>
<div class="judul">
<a href="Rendang.html">Rendang</a>
</div>
<p>Rendang merupakan masakan yang terbuat dari olahan daging, dimasak dengan bumbu rempah yang berasal dari Minangkabau. </p>
</div>
<div class="konten">
<a href="Sate.html"><img src="gambar/sate.jpg" ></a>
<div class="judul">
<a href="Sate.html">Sate</a>
</div>
<p>Sate adalah makanan yang terbuat dari daging yang dipotong kecil dan ditusuk dengan lidi, lalu dipanggang menggunakan bara arang kayu</p>
</div>
<div class="konten">
<a href="soto.html"><img src="gambar/Soto.jpg" ></a>
<div class="judul">
<a href="Soto.html">Soto</a>
</div>
<p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan yang kaya akan rempah.</p>
</div>
</article>
<footer>
Copyright 2020 web saya
</footer>
</div>
</body>
</html>
2. CSS (Sebelum Dirubah)
body{
font-family: Arial, Helvetica, sans-serif;
background: #e6e6e6;
padding: 0;
margin:0;
}
.container{
width: 65%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
padding-bottom: 5px;
}
.logo {
font-size: xx-large;
padding: 30px 0 30px 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1a75ff;
border: 1px solid gainsboro;
}
nav li {
float: left;
}
nav li a{
display: inline-block;
color:#ffffff;
text-align: center;
padding: 14px 15px;
text-decoration: none;
}
nav li a:hover {
opacity:0.9;
background-color: #3385ff;
}
article {
width: 98.8%;
height: auto;
border-radius: 3px;
margin: 5px 5px 5px 5px;
border: 1px solid gainsboro;
clear: both;
}
article p {
padding: 5px 6px 5px 5px;
line-height: 1.5;
}
article .konten {
width: 23.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
}
article .isi {
width: 98.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
}
article .isi .judul {
font-size: xx-large;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}
article .isi p {
margin-top: 0;
}
article .isi img {
float: left;
margin: 5px 5px 5px 5px;
}
article .konten img {
width: 95.8%;
height: 150px;
margin: 5px 5px 5px 5px;
}
article .konten:hover {
opacity:0.9;
}
article .konten .judul a {
margin-left: 5px;
text-decoration: none;
font-size:x-large;
color:#020101;
}
article .konten a:hover {
opacity:0.9;
}
footer {
clear: both;
width: 98.8%;
height: auto;
text-align: center;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border-bottom: 1px solid gainsboro;
padding-top: 15px;
padding-bottom: 15px;
}
3. Hasil
Setelah Remake
<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Politeknik Bhakti Semesta (Demo)
</div>
</header>
<nav>
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="PY.html">Profil Yayasan</a></li>
<li><a href="PP.html">Profil Politeknik</a></li>
<li><a href="F.html">Fasilitas</a></li>
<li><a href="HK.html">Hubungi Kami</a></li>
</ul>
</nav>
<article>
<div class="konten">
<a href="BD.html"><img src="gambar/bd1.png" ></a>
<div class="judul">
<a href="BD.html">Bisnis Digital</a>
</div>
<p>Program studi Sarjana Terapan (D-IV) Bisnis Digital Politeknik Bhakti Semesta berfokus pada pembelajaran project base learning dan mengacu pada pembelajaran bisnis dengan menggunakan teknologi digital.</p>
</div>
<div class="konten">
<a href="RKS.html"><img src="gambar/rks.jpg" ></a>
<div class="judul">
<a href="RKS.html">Rekayasa Keamanan Siber</a>
</div>
<p>Program Studi Sarjana Terapan Rekayasa Keamanan Siber Politeknik Bhakti Semesta merupakan program studi yang mengkhususkan diri pada pengembangan keamanan siber untuk melindungi informasi atau sumber daya teknologi informasi demi mencegah terjadinya serangan siber. </p>
</div>
<div class="konten">
<a href="TRM.html"><img src="gambar/trm.webp" ></a>
<div class="judul">
<a href="TRM.html">Teknologi Rekayasa Multimedia</a>
</div>
<p>Program studi Sarjana Terapan (D-IV) Teknologi Rekayasa Multimedia Politeknik Bhakti Semesta memiliki kekuatan pada pembelajaran multimedia dengan menggunakan teknologi digital dalam setiap mata kuliah yang diajarkan.</p>
</div>
</article>
<footer>
Copyright 2020 web saya
</footer>
</div>
</body>
</html>
2. CSS
body{
font-family: Arial, Helvetica, sans-serif;
background: #e6e6e6;
padding: 0;
margin:0;
}
.container{
width: 100%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
padding-bottom: 5px;
}
.logo {
font-size: xx-large;
padding: 30px 10px 30px 10px;
text-align: center;
color: #ffffff;
background-color: #1e4683;
margin-bottom: 1px;
}
.logo {
background-image: url('gambar/logo.png');
background-size: 80px;
background-position: 620px;
background-repeat: no-repeat;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1a75ff;
border: 1px solid gainsboro;
}
nav li {
float: left;
}
nav li a{
display: inline-block;
color:#ffffff;
text-align: center;
padding: 14px 140px;
text-decoration: none;
}
nav li a:hover {
opacity:0.9;
background-color: #3385ff;
}
article {
width: 98.8%;
height: 400px;
border-radius: 3px;
margin: 5px 5px 5px 5px;
border: 1px solid gainsboro;
clear: both;
padding-left: 100px;
}
article p {
padding: 5px 6px 5px 5px;
line-height: 1.5;
}
article .konten {
width: 23.5%;
height: auto;
margin: 50px 50px 50px 50px;
border-radius: 3px;
border: 1px solid black;
float: left;
}
article .isi {
width: 98.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
}
article .isi .judul {
font-size: xx-large;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}
article .isi p {
margin-top: 0;
}
article .isi img {
float: left;
margin: 5px 5px 5px 5px;
}
article .konten img {
width: 95.8%;
height: 150px;
margin: 5px 5px 5px 5px;
}
article .konten:hover {
opacity:0.9;
}
article .konten .judul a {
margin-left: 10px;
text-decoration: none;
font-size:x-large;
color:#020101;
}
article .konten a:hover {
opacity:0.9;
}
footer {
clear: both;
width: 98.8%;
height: auto;
text-align: center;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border-bottom: 1px solid gainsboro;
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(141, 137, 137, 0.699);
}
3. Hasil
Komentar
Posting Komentar