pCopyright by copy Chris Noel 2016p div
div -- footer --
body html
2. Koneksi.php
?php server = localhost;
user = root; pass = ;
database = sepatu; dbconn = mysql_connectserver,user,pass;
if dbconn die Gagal Melakukan Koneksi; mysql_select_dbdatabase,dbconn or die Database Tidak
Diketemukan di Server; ?
3. Style.css
{ margin: 0px;
padding: 0px; box-sizing: border-box;
} html, body{
width: 100; height: 100;
} html{
font-family: Open Sans; font-size: 12px;
} a{
text-decoration: none; color: 333333;
} .header-line{
width: 100; height: 13px;
background-color: rgb249, 139, 42; display: inline-block;
vertical-align: top; }
.header-logo{ width: 100;
height: 340px; background-size: cover;
background-repeat: no-repeat; background-position: center center;
display: inline-block; vertical-align: top;
position: relative; }
.header{ width: 100;
height: 10; background-size: cover;
background-repeat: no-repeat; background-position: center center;
display: inline-block; vertical-align: top;
position: relative; }
.cover{
width: 100; height: 100;
background-color: rgba2, 2, 2, 0.25; }
.main-logo{ position: absolute;
top: 50; left: 50;
transform: translate-50, -50; width: 150px;
height: 170px; background-size: 150px 170px;
background-repeat: no-repeat; background-position: center center;
opacity: 0.85; cursor: pointer;
transition: opacity 0.1s linear; }
.main-logo:hover{ opacity: 0.95;
} .price{
font-size: 14px;
} .menu{
width: 100; display: inline-block;
vertical-align: top; text-align: center;
border-bottom: 1px solid DADADA; }
.menu li{
display: inline-block; margin-right: 100px;
line-height: 70px; }
.menu li:last-child{ margin-right: 0px;
} .menu a{
text-transform: uppercase; font-size: 14px;
} .content{
width: 100; display: inline-block;
vertical-align: top; padding: 25px 0px;
} .welcon{
width: 100; display: inline-block;
margin-bottom: 100px; text-align: center;
} .sub-title{
font-size: 50px; font-family: Dancing Script;
font-weight: 400; margin: 50px 0px 100px 0px;
} .sub-title span{
color: rgb249, 139, 42; }
.welcon a{ font-family: Dancing Script;
font-weight: 400; font-size: 30px;
margin-bottom: 10px; }
.welcon ul{ text-align: center;
} .welcon li{
display: inline-block; margin-right: 70px;
margin-bottom: 70px; }
.welcon li:hover a{ color: rgb249, 139, 42;
transition: color .1s linear; }
.welcon li:nth-child4n{ margin-right: 0px;
} media max-width: 1024px{
.welcon li:nth-child4n{ margin-right: 70px;
} }
media max-width: 991px{ .welcon li:nth-child3n{
margin-right: 0px; }
.welcon li:nth-child4n{ margin-right: 70px;
} }
.welcon li:last-child{ margin-right: 0px;
} .welcon img{
margin-top: 10px; width: 250px;
height: 250px; }
.welcon h2{ font-family: Dancing Script;
font-weight: 400;
font-size: 30px; margin-bottom: 10px;
} media max-width: 991px{
.welcon img{ margin-top: 10px;
width: 200px; height: 200px;
border-radius: 50; }
} .about{
width: 100; height: 450px;
position: relative; }
.aboutcov{
width: 100; height: 450px;
background: rgba0 ,0, 0, .4; top: 0px;
left: 0px; position: absolute;
text-align: center; padding: 100px 0px 0px 0px
} .aboutcov .sub-title{
font-size: 40px; color: FFFFFF;
margin: 10px 0px; }
.aboutcov p{ margin: 0 auto;
margin-top: 50px; margin-bottom: 70px;
width: 55; color: FFFFFF;
font-size: 14px; }
.aboutcov a{ color: FFFFFF;
padding: 10px 50px; border: 1px solid rgb249, 139, 42;
transition: background .3s linear;
} .aboutcov a:active,
.aboutcov a:hover{ background: rgb249, 139, 42;
color: FFFFFF; }
.xabout{ background: url..imgbtn1.jpg no-repeat center
center; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover;
background-size: cover; height: 100;
position: relative; }
.top-menu{ text-align: center;
} .top-menu .sub-title{
margin: 100px 0px 50px 0px; }
.top-menu li{ list-style-type: none;
} .maindescription{
font-size: 13px; width: 60;
margin: 0 auto; }
.subcontent{ display: inline-block;
vertical-align: top; width: 100;
margin-top: 30px; position: relative;
} .menulist{
display: inline-block; }
.menulist ul{
}
.menulist li{ border-top: 1px solid rgb249, 162, 85;
border-bottom: 1px solid rgb249, 162, 85; float: left;
width: 200px; cursor: pointer;
} .menulist li:first-child{
border-left: 1px solid rgb249, 162, 85; border-right: 1px solid rgb249, 162, 85;
border-radius: 3px 0px 0px 3px; }
.menulist li:last-child{ border-left: 1px solid rgb249, 162, 85;
border-right: 1px solid rgb249, 162, 85; border-radius: 0px 3px 3px 0px;
} .menulist a{
padding: 2px 0px; display: block;
font-size: 12px; }
.menulist a:active, .menulist a:hover{
color: FFFFFF; background: rgb249, 162, 85;
} .recent-menu{
color: FFFFFF; background: rgb249, 162, 85;
} .submenulist{
margin: 0 auto; width: 570px;
min-height: 300px; margin-top: 20px;
font-size: 14px; text-align: left;
} .submenulist table{
width: 100; font-size: 12px;
border-collapse: collapse; }
.submenulist th{ text-align: left;
width: 80; padding: 20px 0px 5px 0px;
border-bottom: 1px dotted rgb249, 162, 85; float: left;
} .submenulist td{
float: left; margin-left: 40px;
padding: 20px 0px 5px 0px; }
.menulistb, .menulistc{
display: none; }
.footer{ width: 100;
display: inline-block; vertical-align: top;
background: rgb249, 162, 85; text-align: center;
} .footer p{
text-transform: uppercase; font-size: 12px;
color: FFFFFF; line-height: 50px;
} .social{
display: inline-block; vertical-align: top;
} .social li{
display: inline-block; margin-right: 100px;
margin-top: 50px; margin-bottom: 15px;
} .social li:last-child{
margin-right: 0px; }
.social-link{ width: 30px;
height: 30px; display: block;
opacity: 0.7; transition: opacity 0.1s linear;
} .social-link:hover{
opacity: 0.9; }
.social-a{ background-image: url..imgfb.png;
background-position: center center; background-repeat: no-repeat;
background-size: cover; }
.social-b{ background-image: url..imgig.png;
background-position: center center; background-repeat: no-repeat;
background-size: cover; }
.social-c{ background-image: url..imgtw.png;
background-position: center center; background-repeat: no-repeat;
background-size: cover; }
.reservation{ display: none;
position: fixed; width: 100;
height: 100; top: 0px;
left: 0px; background: rgba0, 0, 0, 0.45;
z-index: 999; }
.reservationlink{
cursor: pointer; }
.closereservation{
width: 100; height: 100;
position: fixed; }
.reservationform{ position: absolute;
left: 50; top: 50;
margin-left: -250px; margin-top: -220px;
width: 500px; height: 420px;
background: fff; border-radius: 2px;
} .reservationform h1{
font-family: Dancing Script; font-size: 30px;
font-weight: 400; color: 555;
line-height: 80px; text-align: center;
border-bottom: 1px solid rgb249, 139, 42; margin-bottom: 40px;
} .reservationform h2{
font-size: 28px; color: 777;
text-align: center; line-height: 38px;
font-weight: 400; }
.reservationform h3{
font-size: 34px; color: 777;
text-align: center; font-weight: 400;
margin-top: 70px; }
.reservationform p{ font-size: 20px;
color: 777; text-align: center;
padding: 10px 0px; }
.reservationform span{ color: rgb249, 139, 42;
} .reservationform table{
margin: 0 auto; margin-top: 50px;
} .reservationform input[type=text]{
height: 40px; width: 350px;
padding: 0px 5px; font-size: 16px;
margin-bottom: 10px; border: 1px solid ddd;
border-radius: 2px; }
.reservationform input[type=text]:focus{ outline: none;
border: 1px solid rgb249, 139, 42;
} .reservationform input[type=email]{
height: 40px; width: 350px;
padding: 0px 5px; font-size: 16px;
margin-bottom: 10px; border: 1px solid ddd;
border-radius: 2px; }
.reservationform input[type=email]:focus{ outline: none;
border: 1px solid rgb249, 139, 42;
} .reservationform input[type=submit]{
height: 40px; width: 350px;
padding: 0px 5px; font-size: 16px;
border: 1px solid transparent; border-radius: 2px;
cursor: pointer; background: rgba249, 139, 42, 0.72;
color: rgba255, 255, 255, 1; transition: background .1s linear;
margin-top: 20px; }
.reservationform input[type=submit]:active,
.reservationform input[type=submit]:hover{
background: rgba249, 139, 42, 1; color: FFFFFF;
} .selecta{
width: 85px; height: 40px;
border: 1px solid ddd; margin-bottom: 10px;
border-radius: 2px; font-size: 14px;
} .selecta:focus{
outline: none; border: 1px solid rgb249, 139,
42; }
4. Mens.php
Kategori