Assalamualaikum teman-teman, kali ini saya akan membagikan tutorial cara membuat template website sederhana dengan CSS.
Aplikasi yang dipakai :
1. Notepad ++
2. XAMPP
3. Browser
Cekidot
Pertama kita membuat tampilan halaman utamanya yang akan kita beri nama
index.php
<html>
<head>
<title>dashboard</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class ="container">
<header>
<h2><span style="color:#333;">Template</span> Simple</h2>
<h3>Selamat Datang</h3>
<ul>
<p>Main Navigation</p>
<li><a href ="index.php">Dashboard</a></li>
<li><a href ="#">User</a></li>
<li><a href ="#">About</a></li>
</ul>
</header>
<content>
<div class ="garis"></div>
<h2><center>Selamat Datang</center></h2>
</content>
</div>
</body>
</html>
<head>
<title>dashboard</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class ="container">
<header>
<h2><span style="color:#333;">Template</span> Simple</h2>
<h3>Selamat Datang</h3>
<ul>
<p>Main Navigation</p>
<li><a href ="index.php">Dashboard</a></li>
<li><a href ="#">User</a></li>
<li><a href ="#">About</a></li>
</ul>
</header>
<content>
<div class ="garis"></div>
<h2><center>Selamat Datang</center></h2>
</content>
</div>
</body>
</html>
Jika sudah di simpan dengan nama index.php. Disimpan di C:xampp/localhost/htdocs/pwpb/index.php
Kemudian kita harus membuat file CSS nya
style.css
Kemudian kita harus membuat file CSS nya
style.css
* {margin:0; padding:0;box-sizing:border-box;list-style-type:none;text-decoration:none;color:#111;}
body {background-color:#f1f1f1;font-family:trebuchet MS;height:100%; }
header {background-color:#333;width:190px;position:fixed;height:100%;bottom:0;left:0;}
header h2 {background-color:gold;color:#fff;font-family:segoe script;padding:15px 30px;width:100%;}
header h3 {color:gold;font-size:14px;text-align:center;padding:10px;}
ul p {color:#4b646f;font-size:11.5px;background-color:#222;padding:15px;}
ul li:hover a {background-color:#222;border-left:4px solid gold;}
ul li a {display:block;padding:13px;color:#eee;font-size:14px;}
content {position:absolute;width:calc(100% - 190px); right:0;top:0px;padding:10px;font-size:14px;}
content .garis {background-color:#999;height:3px;width:100%;margin:10px 0;}
.content {background-color:white;padding:15px;width:100%;overflow-x:auto;}
body {background-color:#f1f1f1;font-family:trebuchet MS;height:100%; }
header {background-color:#333;width:190px;position:fixed;height:100%;bottom:0;left:0;}
header h2 {background-color:gold;color:#fff;font-family:segoe script;padding:15px 30px;width:100%;}
header h3 {color:gold;font-size:14px;text-align:center;padding:10px;}
ul p {color:#4b646f;font-size:11.5px;background-color:#222;padding:15px;}
ul li:hover a {background-color:#222;border-left:4px solid gold;}
ul li a {display:block;padding:13px;color:#eee;font-size:14px;}
content {position:absolute;width:calc(100% - 190px); right:0;top:0px;padding:10px;font-size:14px;}
content .garis {background-color:#999;height:3px;width:100%;margin:10px 0;}
.content {background-color:white;padding:15px;width:100%;overflow-x:auto;}
Jika sudah di simpan dengan nama style.css. File disimpan di C:xampp/localhost/htdocs/pwpb/css/style.css
Kemudian kita jalan XAMPP nya dan dirun Apache nya saja untuk jalankan server localnya
Selamat mencoba dan semoga berhasil
Kemudian kita jalan XAMPP nya dan dirun Apache nya saja untuk jalankan server localnya
Selamat mencoba dan semoga berhasil