Tugas 8 Web Technology
Nama ; Hanif
Nim ; 3420200002
Prodi ; Teknik Informatika (Reguler)
Tugas 8 - Web Technology
Style.php / design
@charset "utf-8";
/*
<!-- Nama : Hanif -->
<!-- Nim : 3420200002 -->
#wrapper {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-image: linear-gradient(to right, #4682b4, #00ffff, #00fa9a);
text-align: center;
padding: 10px;
margin: 0px;
}
#header p {
font-family: lucida console", Monaco, monospace;
/* font-style: italic; */
font-weight: bold;
color: #000000;
/* text-decoration: underline; */
}
#footer {
background-image: linear-gradient(to left, #4582b4, #00ffff, #00fa9a);
margin: 0px;
padding: 5px;
text-align: center;
}
#footer p {
font-family: "Trebuchet MS", Arial, helvetica, sans-serif;
font-sive: 12px;
color; #ffffff;
}
h1 {
font-family: Tahoma,
color: rgb(255, 255, 255);
}
h2 {
font-family: "comic sans MS", cursive;
color: #666;
text-align: center;
width: 100%;
}
h3 {
font-family: "comic sans MS", cursive;
color: #666;
text-align: center;
width: 100%;
}
body {
background-color: #ececec;
margin: 0px;
padding: 0px;
}
#page {
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
background-color: #fff;
}
1i {
list-style-type: none;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
font-family: impact;
font-size; 16px;
}
ul {
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20p;
padding-left: 0px;
}
#content {
width: 700px;
margin: 0px;
padding: 0px;
float: left;
}
.clear {
padding: 0px;
margin: 0px;
clear: both;
}
#side-left-menu {
width: 200px;
display: block;
float; left;
}
.sridenav {
background-color: #16a9d2;
padding-top: 20px;
padding-bottom: 2-px;
}
.sridenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
color: #fff;
display: block;
}
.sridenav a:hover {
color: #20d8eg;
background-color: #666;
}
.galeri {
margin: 10px 22px;
padding: 2px;
border: 1px solid #18b0ec;
color: #fff;
background-color: #18b0ec;
float: left;
width: 180px;
box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0p 0px (0, 0, 0,0, 0.13);
}
.galeri:hover {
border: 1px solid #666;
}
.galeri img {
width: 100px;
height: 120px;
}
.desk {
padding: 10px;
text-align: center;
}
.clear {
padding: 0px;
margin: 0px;
clear: both;
{
.section {
width: 35%;
text-align: center;
color: rgb(0, 0, 0);
padding: 4px;
margin: 10px auto;
background-image: linear-gradient(to left, #4682b4, #00ffff, #00fa9a);
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
-mox-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.13);
}
Table.php
/*
<!-- Nama : Hanif -->
<!-- Nim : 3420200002 -->
@charset "utf-8";
td {
border: 1px solid #000000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 5px;
}
table {
border-collapse: collapse;
padding: 0px;
width: 100%;
margin-left: 25px;
background-color: #alc4fd;
}
th {
font-family: impact;
font-size: 12px;
font-weight: normal;
border: 1px solid #000000;
color: #fff;
background-color: #666;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 5px;
padding-botto: 20px;
padding-left: 5px;
}
input[type="submit"],
input[type"reset"] {
color:#000;
background-image: linear-gradient(
to right,
#alc4fd 0%,
#c2e9fb 51%,
#alc4fd 100%
);
font-weight: bold;
width: 15%;
border: 2px solid #6124e3;
border-radius: 10px;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
padding: 5px 5px;
cursor: pointer;
}
input[type ="text"] {
width: 92%;
padding: 5px;
font-family: "courier new", courier, monospace;
font-size: 16px;
background=color: #ffffff;
cursor: pointer;
}
input[type="date"] {
padding: 5px;
font-family: "courier New", courier, monospace
font:size: 16px;
background-color: #ffffff;
cursor: pointer;
}
.table_footer {
background-color: #ccc;
text-allign: center;
margin: 0px;
padding: 10px;
}
.isi {
margin: 0px;
padding-top: 10px;
psdding-right: 5px;
padding-bottom: 50px;
padding-left: 50px;
}
#kategori {
width: 95%;
background-color: #ffffff;
color: #000;
font-weight: bold;
padding: 5px;
cursor: pointer;
}
index css
/*Nama : Hanif
Nim : 3420200002
@charset "utf-8";
@import "table.css";
@import "style.css";
index php
<!DOCTYPE html>
<html>
<!-- Nama : Hanif -->
<!-- Nim : 3420200002 -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /
> <title>Toko Kumputer Hanif</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<?php require("include.php"); ?>
<body>
<div id="wrapper">
<div id ="header">
<!-- requerie untuk memanggil file .php -->
<?php requerie ("header.php"); ?>
</div>
<div id="page">
<div id="side-left-menu" class="sidenav">
<?php requerie("menu.php"); ?>
</div>
<div id="contect">
<?php requerie("page.php"); ?>
</div>
<div class="clear">
</div>
<div id="footer">
<?php requerie("footer.php"); ?>
</div>
</div>
</div>
</body>
</html>
header php
<!-- Nama : Hanif -->
<!-- Nim : 3420200002 -->
<h1> hanif komputer</h1>
<p>
Menjual berbagai jenis komputer dan aksesoris komputer.<br>
Dijamin paling murah, ada yang lebih murah kami samakan harganya.
</p.
page php
<!-- Nama : Hanif -->
<!-- Nim : 3420200002 -->
<?php
if (isseet($_GET['page'])) {
// Master Barang
Menu php
Comments
Post a Comment