Listing Program

Halaman Home(index.php) <meta charset="utf-8" /> <script src="jquery/shadowbox/shadowbox.js"> <script src="jquery/jqueryflexider.min.js"> <script src="jquery/jquery.flexslider.js"> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); Shadowbox.init(); });

Universitas Sumatera Utara

32

Config PHP

Halaman Product (Coffee) <meta charset="utf-8" /> Detail Coffee <meta charset="utf-8" />

Detail Snack
Universitas Sumatera Utara

32

$result = mysql_query($q); $row = mysql_fetch_object($result); ?> <meta charset="utf-8" /> Halaman News <meta charset="utf-8" /> Detail News

Universitas Sumatera Utara

32

<meta charset="utf-8" />

Halaman About <meta charset="utf-8" /> <script src="../jquery/jquery.js"> <script src="../jquery/jqFancyTransitions.1.7.min.js"> <script> $(document).ready(function(){ $('#photoabout').jqFancyTransitions({ width:'960', height:'235', time:'1000', effect:'slide', stripes:'24' }); });

Style CSS body { background:#fff url(img/bg.png) no-repeat; background-color:#fff; background-position:bottom; font-family:Helvetica Neue, Helvetica, Arial; font-size:10px; } #content { margin:0 auto; width:960px; } .clear

Universitas Sumatera Utara

32

{ clear:both; } #coffee { width:60px; height:30px; float:right; margin:-15px 230px 30px 0; }

#snack { width:60px; height:30px; float:right; margin:-15px -190px 0 0; }

#contact { width:480px; margin:0 0 0 15px; list-style:none; float:right; font-size:13px; font-family:AstuteSSi; letter-spacing:2px; } #contentabout { width:960px; height:175px; margin:0 0 0 10px; float:left; }

Universitas Sumatera Utara

32

#contentabout h1 { font-family:AvantGardEF-ExtraLight; font-size:40px; margin:0 0 10px 0; } #contentabout p { height:175px; font-family:Aliquam; font-size:16px; letter-spacing:2px; text-align:justify; } .detailnews { width:960px; height:300px; } .detailnews img { width:400px; height:300px; float:left; margin:0 30px 0 0; } .detailnews h1 { width:530px; height:35px; margin:0 0 15px 0; float:left; font-size:28px; } .detailnews h3

Universitas Sumatera Utara

32

{ width:530px; height:10px; float:left; margin:0 0 15px 0; font-size:14px; } .detailnews p { width:530px; height:225px; float:left; font-size:11px; font-family:Helvetica; text-align:justify; word-spacing:2px; } .detailproduct { wiidth:960px; height:300px; } .detailproduct img { width:400px; height:300px; float:left; margin:0 30px 0 0; } .detailproduct h1 { width:530px; height:60px; margin:0 0 30px 0; font-size:55px; float:left; }

Universitas Sumatera Utara

32

.detailproduct h3 { width:530px; height:50px; margin:0 0 15px 0; float:left; font-size:18px; color:#999; word-spacing:8px; } .detailproduct p { width:530px; height:145px; float:left; font-family:AstuteSSi; font-size:16px; text-align:justify; word-spacing:2px; color:#716f6f; } .footer { width:960px; height:25px; margin:15px 0 0 0; background:url(img/footerline.png) no-repeat; } #highlight { width:960px; height:250px; margin:30px 0 30px 0; } .linespacing { background:url(img/line.png) no-repeat; width:960px;

Universitas Sumatera Utara

32

height:5px; margin:0 0 15px 0; } #logo { background:url(img/logo.jpg) no-repeat; width:300px; height:80px; float:left; margin:30px 0 30px 0; } .map { width:465px; height:255px; background:url(img/map.png) no-repeat; float:left; } #maphover { background:url(img/maphover.png) no-repeat; width:268px; height:94px; float:left; margin:70px 0 0 126px; opacity:0.1; } #maphover:hover { opacity:1; } #mapicon { width:45px; height:50px; margin:171px 0 0 124px; }

Universitas Sumatera Utara

32

#navfooter { list-style:none; margin:20px 0 0 0; } #navfooter a, #navfooter li { float:left; font-family:AstuteSSi; font-size:14px; color:#7d7d7d; margin:0 15px 30px 25px; } #navfooter a:hover { color:#3d3c3c; }

#navigasi { margin:25px 0 30px 0; list-style:none; float:right; } #navigasi li { margin:30px 0 0 60px; float:right; font-size:23px; font-family:"Abrazo Script SSi"; } #navigasi li a { color:#EF8B45;

Universitas Sumatera Utara

32

} #navigasi li a:hover, #navigasi li a.active { color:#703B30; font-weight:1000; } #newscontent { width:465px; height:150px; margin:15px 15px 15px 0; float:left; } #newscontent h1 { width:250px; font-family:Helvetica; font-size:18px; float:right; margin:15px 0 0 0; } #newscontent p { width:240px; height:150px; font-family:helvetica; font-size:12px; margin:-115px 0 0 215px; word-spacing:5px; float:left; word-spacing:normal; } .newstb { width:225px; height:180px; float:left;

Universitas Sumatera Utara

32

margin:0 15px 30px 0; } .newstb p { font-family:AvantGardEF-ExtraLight; font-size:14px; margin:-15px 0 30px 0; } #photoabout { width:960px; height:235px; margin:0 0 15px 0; float:left; } #tbproduct { width:465px; height:200px; float:left; margin:0 15px 30px 0; } #tbproduct img { width:200px; height:200px; float:left; margin:0 10px; } #tbproduct h1 { margin:0 0 15px; font-family:AstuteSSi; font-size:30px; word-spacing:5px; }

Universitas Sumatera Utara

32

#tbproduct h3 { margin:0 0 10px; font-family:AvantGardEF-ExtraLight; font-size:18px; word-spacing:5px; color:#a1a1a1; } #tbproduct p { heigt:90px; font-family:Helvetica; font-size:14px; color:#a1a1a1; word-spacing:1px; text-align:justify; } #titlepage { font-family:AvantGardEF-ExtraLight; font-size:24px; color:#CCC; }

Universitas Sumatera Utara