Laporan Grafika Komputer Teori

LAPORAN GRAFIKA KOMPUTER TEORI
Untuk memenuhi tugas matakuliah Praktikum Pemrograman Visual

yang dibimbing oleh Bapak Didik Dwi Prasetya
Oleh :
 Choirul Hidayat (130533608191)
 Aprilian Dwi Saputro (130533608278)
 Gilang lovianindra cipta (130533608285)
FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
UNIVERSITAS NEGERI MALANG
FEBRUARI 2015
Scrpt css
 Acc_style.css
.acc_panel
{
float: left;
padding: 2px;
margin: 20px 0;
width: 296px;
min-height: 280px;
border: 1px solid #ccc;
}
h4.acc_trigger
{
float: left;
display: block;
padding: 6px 0 5px 0;
width: 296px;
border-bottom: 1px solid #013d6c;
border-top: 1px solid #4695d3;
background: #00388A url(blue.jpg) no-repeat ;
background-position: 95% 50%;
}
h4.acc_trigger a
{
display: block;
padding: 0 0 0 10px;
color: #fff;
text-decoration: none;
}
h4.acc_trigger a:hover
{
color: #ccc;
}
h4.active
{
background: #002C6C url(red.jpg) no-repeat ;
background-position: 95% 70%;
}
.acc_container
{
clear: both;
overflow: hidden;
padding: 0px 5px 5px 5px;
margin: 0 0 3px;
width: 284px;
background: #f0f0f0;
border: 1px solid #d6d6d6;
border: 1px solid #999;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
 Menu.css
#mmenu {
list-style:none;
margin:0px auto;
height:40px;
padding:0px;
z-index: 0;
border: 0px solid blue;
}
#mmenu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 2px;
padding: 3px 4px 3px 4px;
margin-right:10px;
margin-top:1px;
z-index: 1000;
}
#mmenu li:hover {
/* Background color and gradients */
background: #F4F4F4;
}
#mmenu li a {
font-size: 90%;
color: #eee;
display:block;
outline:0;
text-decoration:none;
}
#mmenu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
/*-- Tablet --*/

@media screen and (max-width: 768px){
#m_bar_wrapper { clear: both;
text-align: center;
height: 32px;
background: #091F5D;
background: #0C2778;
background: #00468C;
}
#m_bar {
margin: auto;
width: 100%;
font-size: 10pt;
border: 0px solid blue;
transition: width 2s;
-moz-transition: width 2s;
}
}
/*-- Smartphone --*/

#m_bar_wrapper { clear: both; text-align: center; height: 32px;
background: #091F5D; background: #0C2778; background: #00468C;}
#m_bar { margin: auto; width: 100%; font-size: 10pt; border: 0px
solid blue; }
#mmenu {
float: left;
width : 100%;
}
#mmenu li{
float :left;
width : 100%;
background: #00468C;
margin-top : 0;
border-bottom : 1px solid #036;
padding : 7px 0;
color: #fff;
}
}
 Style.css
* { margin: 0; padding: 0; }
body { margin:0px auto; padding:0; font:11pt/140% verdana, sans-serif;
color: #1B1B50; color: #114F6C; background: #eee; }
li, form { margin:0; padding:0; }
ul, ol { clear:both; margin: 0px; }
* html ul ul li a { height: 100%; }
* html ul li a { height: 100%; }
* html ul ul li { margin-bottom: -1px; }
p { margin:5px 0 15px; border: 0px solid red; }
a img { border:0; }
a { text-decoration: none; color: #155F83; }
a:hover { color: #222; }
h1 { font-size: 1.3em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; } .netral { margin-bottom: 3px; } .subtitle {
font-size: 1.2em; }
#wrapper { margin: 0px auto 5px auto; width: 980px; border-left: 7px
solid #ccc; border-right: 7px solid #ccc; border: 0px solid red; }
#header { clear: both; text-align: center; height: 110px; background:
#036; border-top: 5px solid #FEE775; }
#header_in { margin: auto; width: 980px; height: 115px; border: 0px
solid blue; } /* .img_bg { z-index: 12; } */
.um_brand { float: left; padding: 0px; margin: 15px 0 0 15px; }
#wrap_teks { float: left; padding: 0px 0px 3px 0; margin: 15px 0 0
10px; height: 51px; border-left: 1px solid #fff; } .hteks { float:
left; padding: 0; margin: 4px 0 4px 10px; font-size: 1.3em; font-
family: cambria; letter-spacing: 0px; color: #FEE775; border: 0px
solid red; } .hteks h1 { margin: 0px; } .mteks { clear: left; float:
center; margin: 0px 0 0 10px; font-size: 10.5pt; color: #FEE775;
letter-spacing: 1px; }
#top_right { clear: right; float: right; padding: 0 10px; margin: -
3px 0px 0 0; width: 230px; font-size: 8pt; text-align: center;
background: #FEE775; -webkit-border-bottom-right-radius: 5px; -webkit-
border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -
moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; }
#bottom_right { clear: right; float: right; margin: 50px 0px 0 0;
width: 284px; text-align: right; font-size: 8pt; border: 0px solid
green; }
#search_box { padding:3px; border-radius:6px; -moz-border-radius:6px;
-webkit-border-radius:6px; background: #A6B7C9; width: 280px; }
#search_box .wrapper { padding-left:5px; position:relative;
background:#fff; border:1px solid #d28703; -moz-border-radius:4px; -
webkit-border-radius:4px; height:24px; border: 0px solid #fff; }
#search_box input, #search_box input:focus { float: left; border:none;
color:#333; outline:none; margin:1px 0; padding: 2px 0; width: 220px;
border: 0px solid red; }
#search_box button { position:absolute; right:0px; top:0px; width:34px;
height:24px; cursor:pointer; background:-moz-linear-gradient(top,
#453e26, #000); background:-webkit-gradient(linear, 0 0, 0 100%,
from(#453e26), to(#000)); -moz-border-radius:2px; -webkit-border-
radius:2px; border:0px solid #000; }
#m_bar_wrapper { clear: both; text-align: center; height: 32px;
background: #091F5D; background: #0C2778; background: #00468C;}
#m_bar { margin: auto; width: 980px; font-size: 10pt; border: 0px
solid blue; }
#main_content { clear: both; float: left; width: 980px; min-height:
520px; background: #fff; border: 0px solid aqua; padding-top : 10px; }
#running_text { float: left; padding: 0; margin: 0 0 15px 220px;
width: 500px; height: 18px; font-size: 75%; border: 0px solid red; }
.marq { } .flag { float: right; display: block; margin: 2px 15px 0px
15px; border: 0px solid red; }
#front_menu { clear: left; float: left; margin: 0px 0 0 15px; padding:
0px; width: 186px; font-size: 75%; background: #f0f0f0; border: 1px
solid #d6d6d6; -webkit-border-bottom-right-radius: 7px; -webkit-
border-bottom-left-radius: 7px; border: 1px solid #4883E9; }
.front_head { padding: 2px 5px; margin: 0 0 5px 0; background:
#00468C; background: -webkit-gradient(linear, left top, right top,
from(#4883E9), to(#00468C), color-stop(0.7, #00468C)); background: -
moz-linear-gradient(left top, #4883E9, #00468C 70%); font-size: 120%;
color: #fff; }
.pic_menu img { float:left; margin:0px 5px 0 0; border: 0px solid red;
}
.pic_menu li { display: block; margin: 7px; padding: 6px 2px; list-
style-type:none; line-height: 14px; line-spacing: 6px; background:
#DAE6FC; border-radius:5px; -moz-border-radius:5px; -webkit-border-
radius:5px; border: 1px solid #ccc; }
.pic_menu a { display: block; color: #555; }
.pic_menu li:hover { background: #C0D5FA; border: 1px solid #3E71CC;
border: 1px solid #999; }
.pic_menu .judul { padding-top: 2px; display: block; font-weight:bold;
color:#036; text-transform: uppercase; }
/*** Icon ***/

a.icon {display:block;filter:alpha(opacity=80);opacity:.8;}
a.icon:hover {filter:alpha(opacity=100);opacity:1;border:none;}
#front_slide { clear: both; float: left; margin: 20px 0 20px 15px;
width: 630px; height: 240px; border: 2px solid #d6d6d6; }
.slide_cap { position: absolute; margin-top: -32px; margin-left: -
473px; padding: 6px 10px; width: 400px; left: 50%; background: #000;
color: #fff; z-index: 0; filter:alpha(opacity=70);opacity:.7; font:
normal 12px Arial, sans-serif; }
#front_news { float: left; margin: 0px 0 0 15px; padding: 0px; width:
.b_lain h5 { padding: 15px 0 0px 0; }
.b_lain { float: left; font-size: 90%; line-height: 14px; border: 0px
solid blue; }
.tl_img { float: left; margin: 4px 10px 8px 0; width: 240px; border:
0px solid red; } #front_middle { clear: left; float: left; margin:
20px 0px 20px 15px; padding: 0px; width: 634px; border: 0px solid red;
}
.mid_box_head { display: block; float: left; padding: 0px 5px; margin:
0 0 5px 0; width: 190px; font-size: 80%; font-weight: bold; letter-
spacing: 2px; background: #BDDC79X; border-top: 6px solid #003C93;
border-top: 6px solid #266178; }
.mid_box { float: left; margin: 0 17px 0 0; padding: 0 3px 2px 0;
width: 197px; min-height: 270px; background: #eee; border: 0px solid
red; }
.mid_box2 { float: right; margin: 0 0px 0 0; padding: 0 3px 2px 0;
width: 197px; min-height: 270px; background: #eee; border: 0px solid
red; }
#front_spot { float: left; margin: 20px 0 10px 15px; padding: 0px;
width: 634px; font-size: 75%; line-height: 18px; border: 0px solid
black; }
#fb_content { float: left; padding: 0; width: 100%; list-style: none;
border:0px solid red; }
#fb_content ul { float: left; margin: 0; padding: 0;}
#fb_content li { float: left; margin: 0 17px 0 0; width: 200px;
#fb_content li.last {margin-right: 0;}
#fb_content img { float: left; margin: -5px 0; padding: 10px 5px 0 0;
width: 48px; height: 46px; }
/** #fb_content li img { float: left; } #fb_content #fb_content

div.spot { float: left; margin: 5px 0 0 0; padding: 0; width: 158px; }
**/
#fb_content p { line-height: 14px; }
#front_right{ clear: right; float: right; margin: 0px 15px; width:
300px; font-size: 80%; line-height: 1.3em; border: 0px solid red; }
.flash_news { float: left; width: 300px; text-align: center; border:
0px solid red; }
.round { margin: 0 0 3px 0; padding: 8px; width: 280px; background:
#DAE6FC; background: #dbffd1; -moz-border-radius: 5px; -webkit-border-
radius: 5px; border: 1px solid #bbb; border: 1px solid #a1d97e; }
.head_right { float: left; padding: 4px 10px 0px 10px; width: 280px;
height: 20px; font-size: 10pt; font-weight: bold; letter-spacing: 2px;
background: -webkit-gradient(linear, left top, right top, from(#777),
to(#444), color-stop(0.8, #444)); background: -moz-linear-
gradient(left top, #777, #444 80%); color: #fff; border: 1px solid
#d6d6d6; border: 1px solid #666; }
.box_right { clear: both; overflow: hidden; float: left; padding: 5px;
margin: 0 0 20px 0; width: 290px; background: #f0f0f0; border: 1px
solid #d6d6d6; -webkit-border-bottom-right-radius: 7px; -webkit-
.readmore { clear: both; float: right; font-size: 7pt; border: 0px
solid red; }
/** list unordered **/

.ulist { float: left; margin: 0 0 0px 5px; list-style-type: none;
color: #aaa; border: 0px solid red; }
.ulist li { font-size: 8pt; line-height: 15px; margin: 0 0 7px 0;
letter-spacing: normal; border: 0px solid blue; }
.ulist li a:hover { border-bottom:1px dotted #666; text-
decoration:none; }
.ulist small { display: block; border: 0px solid red; }
/** list event **/

.list_event { float: left; margin: 10px 0 3px 5px; list-style-type:
none; color: #555; border: 0px solid red; }
.list_event li { display: block; float: left; margin: 0 0 8px 0;
font-size: 8pt; line-height: 16px; letter-spacing: normal; border: 0px
solid blue; }
.list_event li a:hover { border-bottom:1px dotted #666; text-
decoration:none; }
.ev1 { float: left; margin: 0 10px 0 0; padding: 4px 2px 2px 0px;
width: 35px; text-align: right; font-family: Georgia,"Times New
Roman",Times,serif; font-size: 90%; border: 0px solid red; }
.list_event .tgl { font-size: 24px; display: block; color: #A52A2A;
.list_event .bln { display: block; margin: 6px 0 0 0; font-size:
16px; color: #555; border: 0px solid red; }
.ev2 { float: left; padding: 2px 2px 4px 10px; width: 200px; line-
height: 15px; border-left: 1px solid #ccc; }
.keg_list { float: left; padding: 6px 2px 4px 10px; margin: 0 0 10px
0; width: 500px; line-height: 15px; border-left: 1px solid #ccc; }
.k_judul { font-size: 12px; margin: 0 0 5px 0; border: 0px solid
red; }
.k_isi { font-size: 11px; border: 0px solid red; }
.k_ket { margin: 8px 0 5px 0; }
/** list kotak **/

.olist { float: left; margin: 0 0 3px 20px; list-style-type: square;
color: #999; border: 0px solid red; }
.olist li { font-size: 8pt; line-height: 16px; margin: 0 0 7px 0;
letter-spacing: normal; border: 0px solid blue; }
.olist li a:hover { border-bottom:1px dotted #666; text-
decoration:none; }
.count { color: red; } #suara { clear: left; float: left; margin: 0px
20px 20px 15px; width: 320px; background: #eee; border: 0px solid red;
} #suara li { line-height: 12px; }
.suara_head { display: block; float: left; padding: 0px 5px; margin: 0
0 0px 0; width: 310px; font-size: 80%; font-weight: bold; letter-
border-top: 6px solid #266178; } #suara h6 { color: #555; }
.suara_box { float: left; margin: 0 20px 0px 0; padding: 0 3px 2px 0;
padding: 4px; width: 310px; border-bottom: 1px solid #ccc; }
.suara_ket { float: left; padding: 5px; font-size: 70%; line-height:
14px; color: #555; border: 0px solid red; } #gallery { float: left;
margin: 0 0px 20px 0px; width: 260px; width: 290px; background: #eee;
.galeri_head { display: block; float: left; padding: 0px 5px; margin:
0 0 5px 0; width: 280px; font-size: 80%; font-weight: bold; letter-
.ket_mini { color: #999; font-size: 80%; }
.ket_mini a { color: red; }
.ket_mini a:hover { text-decoration: none; color: red; } #inner {
clear: both; float: left; margin: 1px 0 30px 0; padding: 15px; width:
950px; color: #444; font-size: 90%; min-height: 460px; border: 0px
solid red; } #inner ul, ol { clear:both; margin-left: 30px; } #inner
h4 { font-size: 110%; }
.left_inner { clear: both; float: left; width: 620px; border: 0px
solid red; }
.right_inner { float: right; width: 300px; border: 0px solid red; }
/** #inner_frame { float: left; width: 938px; padding: 10px 20px 60px
20px; background: url(../imgs/circle.png); border: 0px solid red;
border-left: 1px solid #ccc; border-right: 1px solid #ccc; border: 2px
solid blue; } **/
.inner_box_right { clear: both; overflow: hidden; float: left; margin:
0 0 20px 0; width: 300px; background: #f0f0f0; border: 1px solid
#d6d6d6; -webkit-border-bottom-right-radius: 7px; -webkit-border-
bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -moz-
border-radius-bottomleft: 7px; border-bottom-right-radius: 7px;
.right_box_head { float: left; padding: 0px 5px; margin: 0 0 5px 0;
width: 190px; width: 100%; font-size: 80%; font-weight: bold; letter-
.heading { margin: 0 0 15px; font-size: 140%; }
.news_bar { float: left; margin-bottom: 5px; padding: 0; width: 100%;
font-size: 75%; color: #8b7729; background: #ffffcc; border-top: 1px
solid #dab315; }
.news_bar a:hover { text-decoration: underline; }
.news_bar .nb_left { float: left; }
.news_bar .nb_right { float: right; }
.isi { clear: both; margin: 0px 0 0 0; padding: 10px 0 10px 0; border:
0px solid red; }
.author { display: block; margin: 15px 0 0 0; }
.bottom_info { text-align: right; font-size: 75%; color: #8b7729;
background: #ffffcc; border-bottom: 1px solid #dab315; }
.lbl { clear: left; float: left; width: 100px; border: 0px solid red;
}
.lblb { clear: left; float: left; font-weight: bold; width: 100px;
margin: 15px 0 5px 0; border: 0px solid red; }
.val { float: left; border: 0px solid red; }
.valb { float: left; border: 1px solid red; font-weight: bold; }
.img_left { float: left; padding: 0px; margin: 0px; border: 0px solid
red; }
.gb_ket { float: left; padding: 140px 0 0 0; width: 90px; line-height:
14px; font-size: 80%; color: #666; border: 0px solid red; }
#teum_map { width: 290px; height: 200px; border: 0px solid red; }
#breadcrumb { float: left; width: 948px; padding: 0px; margin: 10px 0
15px 0px; font-size:90%; border-bottom: 1px solid #eee; }
#back-top { float: right; bottom: 20px; position: fixed; margin-left:
1000px; }
#back-top a { width: 90px; display: block; text-align: center; font-
size: 11px; color: #bbb; -webkit-transition: 1s; -moz-transition: 1s;
transition: 1s; }
#back-top a:hover { color: #000; }
/* arrow icon (span tag) */

#back-top span { width: 90px; height: 90px; display: block; margin-
bottom: 7px; background: #ddd url(../imgs/up-arrow.png) no-repeat
center center; -webkit-border-radius: 10px; -moz-border-radius: 10px;
border-radius: 10px; -webkit-transition: 1s; -moz-transition: 1s;
transition: 1s; }
#back-top a:hover span { background-color: #777; }
/** calendar **/

.kal { margin: 0 0 0 30px; text-align: center; }
.cal_main { width: 220px; border:1px solid #ccc; }
.month { background-color:#4883E7; font:bold 12px verdana;
color:white; }
.daysofweek { background-color:gray; font:bold 12px verdana;
color:white; }
.days { font-size: 12px; font-family:verdana; color:black; background-
color: lightyellow; padding: 2px; }
.days #today{ font-weight: bold; color: blue; }
.pager { clear: both; padding: 36px 12px 12px 12px; font-size:11px;
text-align: center; border: 0px solid red; }
.pager a { padding: 5px 8px; margin: 3px; background-color: #F5FAFA;
border: 1px solid #C1DAD7; text-decoration: none; }
.pager a:hover, div.pager a:active { border: 1px solid #849ABD;}
.pager span.off { padding: 5px 8px; margin: 3px; border: 1px solid
#eee; color: #eee; }
.pager span.on { padding: 5px 8px; margin: 3px; border: 1px solid
#666; font-weight: bold; background-color: #feee99; color: #666; }
/** nav abjad **/

.abjad { float: left; display: block; font-size: 10px; border: 0px
solid red; }
.abjad .label { float: left; margin-right:2px; border: 0px solid red;
}
.abjad .aktif { padding: 1px 3px; background: #ccc; border: 1px solid
#666; }
.huruf { float: left; padding: 1px; }
.huruf a { padding: 1px 3px; border: 1px solid #A7C1ED; }
.huruf a:hover { background: #6699CC; color: #fff; } /** Footer **/
#footerwrapper { clear:both; width:100%; height:80px;
background:#4c6c80 url(../imgs/outside.gif) 0 0 repeat-x; border: 0px
solid red; } #footer { margin:0 auto; padding-top: 5px; width:980px;
font-size: 75%; height:75px; line-height: 14px; background:#0054A8
url(../imgs/inside.gif) 0 0 repeat-x; } #footer p,#footer ul {
display:block; float:left; font-size:1em; margin:10px 0 0 16px; }
#footer p, #footer li { color:#bebeb6; } #footer a { color:#bebeb6; }
#left_foot { float: left; width: 500px; border: 0px solid red; }
#right_foot { float: right; padding: 10px; text-align: right; width:
.clear { clear: both; }
.margin20 { margin-bottom: 20px; }
#newsslider li{
list-style : none;
}
.spot{
background : #ECEFF5;
}

html{
margin : 0;
padding : 0;
}
#m_bar_wrapper, #m_bar{
float : left;
width : 100%;
background : none;
}
#header {
float: left;
width : 100%;
}
#header_in{
float :left;
width : 100%;
}
#bottom_right {
float :left;
width : auto;
}
#wrapper{
float :left;
width : 100%;
}
#main_content{
float : left;
width : 100%;
margin-top : 0px;
}
#front_right{
float: left;
position: relative;
margin: 0px 20px auto;
width: 92%;
}
.flash_news{
margin: 10px auto;
float: left;
width: 100%;
}
.acc_panel{
width : 100%;
}
#front_menu{
margin: 15px;
float : left ;
width : 25%;
}
#front_head {
float : left ;
width : 90%;
}
.pic_menu li {
float : left;
width : 90%;
}
.round{
width : 100%;
}
#front_news {
padding: 4px;
float : left;
height: 450px;
width : 65%;
border: 1px solid #eee;
transition: float 4s;
-moz-transition: float 4s;
}
.description {
font-size: 13px;
text-align: justify;
}
.title{
font-size: 17px;
}
#newsslider li{
float :left;
width : 100%;
}
#newsslider li a img {
width :100%;
}
#front_middle , #front_spot{
float : left;
width : 46%;
padding : 0;
}
.head_right {
margin : 0px auto ;
width: 98.6%;
}
.box_right{
margin : 0px auto ;
width: 100%;
}
.mid_box, .mid_box_head, .readmore{
width :100%;
margin : 0;
padding : 0;
min-height : 0;
}
.mid_box2{
float : left;
margin : 0;
padding : 0;
width : 100%;
min-height : 0;
}
.mid_box ul li, .mid_box2 ul li{
float : left;
width : 100%;
padding : 0;
margin : 0;
}
#fb_content li {
float : left ;
width : 100%;
}
#footerwrapper, #footer, #left_foot, #right_foot{

float : left;
width : 100%;
height : auto;
text-align : left;
}
.um_brand {
margin: 30px 0 0 10px;
}
}

html{
margin : 0;
padding : 0;
}
#m_bar_wrapper, #m_bar{
float : left;
width : 100%;
background : none;
}
#header {
float: left;
width : 100%;
}
#header_in{
float :left;
width : 100%;
}
#bottom_right {
float :left;
width : auto;
}
#wrapper{
float :left;
width : 100%;
}
#main_content{
float : left;
width : 100%;
margin-top : 180px;
}
#front_right{
float : left;
width: 90%;
}
.flash_news{
margin: 10px auto;
float: left;
width: 94%;
}
.acc_panel{
position: relative;
margin-left: 50px;
float : left ;
width : 100%;
}
#front_menu{
margin: 15px;
float : left ;
width : 90%;
}
#front_head {
float : left ;
width : 90%;
}
.pic_menu li {
float : left;
width : 90%;
}
.round{
width : 100%;
}
#front_news {
padding: 4px;
float : left;
height: auto;
width : 90%;
border: 1px solid #eee;
}
.description {
font-size: 11px;
text-align: justify;
}
.title h3{
font-size: 12px;
font-weight: 2px;
}
#newsslider li{
float :left;
width : 100%;
}
#newsslider li a img {
width :100%;
}
#front_middle , #front_spot{
float : left;
width : 90%;
padding : 0;
}
.head_right {
margin : 0px auto ;
width: 94%;
}
.box_right{
margin : 0px auto ;
width: 97.6%;
}
.mid_box, .mid_box_head, .readmore{
width :100%;
margin : 0;
padding : 0;
min-height : 0;
}
.mid_box2{
float : left;
margin : 0;
padding : 0;
width : 100%;
min-height : 0;
}
.mid_box ul li, .mid_box2 ul li{
float : left;
width : 100%;
padding : 0;
margin : 0;
}
#fb_content li {
float : left ;
width : 100%;
}
#footerwrapper, #footer, #left_foot, #right_foot{

float : left;
width : 100%;
height : auto;
text-align : left;
}
.um_brand {
margin: 30px 0 0 10px;
}
}
 Script index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Teknik Elektro - UM</title>
<meta name="viewport" content ="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/menu.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/acc_style.css" />
<link type="text/css" rel="stylesheet"

href="includes/ajax/yoxview.css" />
href="includes/ajax/facebox.css" />
href="includes/ajax/acc_style.css" />
href="includes/ajax/news_slider_base.css" />
href="includes/ajax/news_slider.css" />
href="includes/ajax/jquery.toastmessage-min.css" />
<link rel="stylesheet" href="templates/default/css/tab.html"
type="text/css" />
<script type="text/javascript" src="includes/ajax/jquery-

latest.min.js"></script>
<script type="text/javascript"
src="includes/ajax/common.js"></script>
<script type='text/javascript' src='includes/ajax/jquery.cookie-
min.js'></script>
<script type='text/javascript'
src='includes/ajax/jquery.dcjqaccordion.2.1.js'></script>
src="http://maps.googleapis.com/maps/api/js?sensor=false">
<script type="text/javascript" src="includes/ajax/jquery.cross-

slide.min.js"></script>
src="includes/ajax/jquery.toastmessage-min.js"></script>
<script type="text/javascript" src="includes/ajax/jquery.yoxview-
2.21.min.js"></script>
src="includes/ajax/facebox.js"></script>
<script type="text/javascript" src="includes/ajax/jquery.accessible-
news-slider.js"></script>
</head>
<body id="top">
<div id="header">
<div id="header_in">
<div id="top_right" class="">
<a href="#">Sitemap</a> |
<a href="#">RSS</a> |
<a href="#contact" rel="facebox">Contact</a> |
<a href="#about" rel="facebox">About Us</a>
</div>
<div id="contact" style="display:none;">
<div style="font-size: 80%;">
<h3>Humas Jurusan Teknik Elektro Universitas Negeri Malang</h3>
<p>
Gedung G4 lantai 2 <br />
Jurusan Teknik Elektro <br />
Fakultas Teknik <br />
Universitas Negeri Malang <br />
Jl. Semarang No 5 Malang, Jawa Timur, Indonesia <br />
Telp: <br />
</p>
</div>
</div>
<div id="about" style="display:none;">
<div style="font-size: 80%;">
<h3> Jurusan Teknik Elektro Universitas Negeri Malang</h3>
<p>
Jurusan Teknik Elektro Universitas Negeri Malang merupakan Jurusan
termuda di Fakultas Teknik yang berdiri sejak tahun 1998.
</p>
</div>
</div>
<div class="um_brand">
<a href="./"><img src="um.png" border=0 /></a>
</div>
<div id="wrap_teks">
<div class="hteks">
<h1>TEKNIK ELEKTRO</h1>
</div>
<div class="mteks">
Universitas Negeri Malang
</div>
</div>
</div>
</div> 


<div id="m_bar_wrapper">
<div id="m_bar">
<ul id="mmenu">
<li><a href="./" class="drop">Home</a></li>
<li><a href="#" class="drop">Jurusan</a></li>
<li><a href="#" class="drop">Program Studi</a></li>
<li><a href="#" class="drop">Akademik</a></li>
<li><a href="#" class="drop">Fitur</a></li>
<li><a href="#" class="drop">Layanan</a></li>
</ul>
</div> 
</div>
<div id="wrapper">
<div id="main_content">
<div id="front_right">
<div class="flash_news">
<div class="round">
<a
href="http://elektro.um.ac.id/?m=download&id=81"><b>Panduan PI 2015
(Revisi)</b></a>
</div>
<div class="round">
<a href="http://ceie.um.ac.id"><b>Seminar
Internasional CEIE 2015</b></a>
</div>
<div class="round">
<a
href="http://elektro.um.ac.id/?m=download&id=80">Rekrutmen Asisten
TE/PTE Semester Genap 2014/2015</a>
</div>
</div>
<div class="acc_panel">
<script type="text/javascript">
$(document).ready(function(){
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show();
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) {
$('.acc_trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false;
});
});
</script>
<h4 class="acc_trigger"><a href="#">KEGIATAN</a></h4>

<div class="acc_container">
<ul class="list_event" style="margin-top:6px">
<li>
<div class="ev1">
<span class="tgl">24</span>
<span class="bln">Apr</span>
</div>
<div class="ev2">
<a
href="index6aa3.html?m=kegiatan&id=24">Visitasi Akreditasi D3
Teknik Elektro</a>
<div class="ket">
Sudah lewat </div>
</div>
</li>
<li>
<div class="ev1">
<span class="bln">May</span>
</div>
<div class="ev2">
<a
href="index418f.html?m=kegiatan&id=23">Koreksi Bersama Hasil
UAS</a>
<div class="ket">
Sudah lewat </div>
</div>
</li>
<li>
<div class="ev1">
<span class="bln">May</span>
</div>
<div class="ev2">
<a href="index8c4c.html?m=kegiatan&id=22">UAS
Teori Semester Genap 2013/2014</a>
<div class="ket">
Sudah lewat </div>
</div>
</li>
</ul>
<div>
<a href="index0f82.html?m=kegiatan" class="readmore">Semua
Kegiatan »</a>
</div>
</div>
<h4 class="acc_trigger"><a href="#">PENGUMUMAN</a></h4>

<ul class="ulist" style="margin-top:6px">
<li><small>22/06/2011</small>
<a href="index205f.html?m=pengumuman&id=11">UAS
Semester Pendek 2011</a>
</li>
<a
href="index5be3.html?m=pengumuman&id=10">Ujian Skripsi dan TA SP
2011 Gel. 2</a>
</li>
<a href="index1df9.html?m=pengumuman&id=9">Ujian
Skripsi dan TA SP 2011</a>
</li>
</ul>
<div>
<a href="index290e.html?m=pengumuman" class="readmore">Semua
Pengumuman »</a>
</div>
</div>
<h4 class="acc_trigger"><a href="#">KALENDER</a></h4>

<div class="kal">
<script type="text/javascript">
function buildCal(m, y, cM, cH, cDW, cD, brdr){

var
mn1=['January','February','March','April','May','June','July','August'
,'September','October','November','December'];
var
mn=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus'
,'September','Oktober','November','Desember'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug
when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when
current day is 31st
var todaydate=new Date() //DD added

var scanfortoday=(y==todaydate.getFullYear() &&
m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getF
ullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7"
cellpadding="0" border="'+brdr+'" cellspacing="0"><tr
align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' -
'+y+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td
class="'+cDW+'">'+"MSSRKJS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : ' ';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}
var todaydate=new Date()

var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "cal_main", "month",

"daysofweek", "days", 1));
</script>
</div>
</div>
</div> 
<div class="head_right">
LINK
</div>
<div class="box_right">
<ul class="olist">
<li><a href="http://um.ac.id/">Universitas Negeri
Malang</a></li>
<li><a href="#">Sistem Informasi Akademik</a></li>
<li><a href="#">Pembelajaran Online</a></li>
<li><a href="#">Sistem Informasi Inventarisasi</a></li>
<li><a href="http://elektro.um.ac.id/seie2011">Seminar on
Electronics, Informatics, and its Education (SEIE)</a></li>
</ul>
</div>
<div class="head_right">
PETA TeUM
</div>
<div class="box_right">
<div id="teum_map">loading...</div>
</div>
</div> 
<div id="front_menu">
<div class="front_head">AKSES CEPAT</div>
<ul class="pic_menu">
<li><a href="#" class="icon" >
<img src="profil.png" />
<span class="judul">Profil</span>Profil Jurusan TEUM</a>
</li>
<img src="visi.png" />
<span class="judul">Visi dan Misi</span>Visi dan Misi</a>
</li>
<img src="fasilitas.png" />
<span class="judul">Fasilitas</span>Gedung dan Fasilitas</a>
</li>
<li><a href="" class="icon" >
<img src="down.png" />
<span class="judul">Download</span>Direktori Download</a>
</li>
<img src="galeri.png" />
<span class="judul">Galeri</span>Galeri TeUM</a>
</li>
<img src="forum.png" />
<span class="judul">Forum</span>Forum Diskusi Online</a>
</li>
<img src="mail.png" />
<span class="judul">Web Mail</span>Web Mail TeUM</a>
</li>
</ul>
</div>
<div id="front_news">
<ul id="newsslider">
<li>
<a href="?m=berita&id=41">
<img src="prodi_baru.png" width="430" alt="Prodi Baru
S1 Teknik Elektro dan Teknik Informatika" /></a>
<p class="title"><a
href="?m=berita&id=41"><h3>Prodi Baru S1 Teknik Elektro dan Teknik
Informatika</h3></a></p>
<p class="description">
Sejalan dengan identitas Universitas Negeri Malang
(UM) sebagai “The Learning University” dan dalam upaya mengakomodasi
animo masyarakat, Jurusan Teknik Elektro membuka program studi baru
strata satu (S1) Teknik Elektro dan Teknik Informatika. Dua program
studi ini melengkapi empat program studi yang sudah ada di Jurusan
Teknik Elektro, yaitu S1 Pendidikan Teknik Informatika, S1 Pendidikan
Teknik Elektro, D3 Teknik Elektro, dan D3 Teknik Elektronika.
<br/><br/>
<a href="#"> » [Read more..]</a>
</p>
</li>
</ul>
</div>
<div id="front_middle">
<div class="mid_box">
<div class="mid_box_head">
BEASISWA
</div>
<ul class="olist">
<li>
<a href="?m=beasiswa&id=13">Penerima Beasiswa Toyota
Astra 2010</a>
</li>
<li>
<a href="?m=beasiswa&id=12">Penerimaan Beasiswa Bank
Indonesia</a>
</li>
<li>
<a href="?m=beasiswa&id=11">Beasiswa PT Gudang Garam
Tahun 2011</a>
</li>
<li>
<a href="?m=beasiswa&id=10">Beasiswa Supersemar
tahun 2011</a>
</li>
<li>
<a href="?m=beasiswa&id=9">Beasiswa Prestasi Polygon
ke-8</a>
</li>
</ul>
<div>
<a href="?m=beasiswa" class="readmore">Semua Beasiswa
»</a>
</div>
</div>
<div class="mid_box">
KARIR
</div>
<ul class="olist">
<li>
<a href="?m=karir&id=10">Lowongan sebagai Skill
Processing</a>
</li>
<li>
<a href="?m=karir&id=9">Lowongan Management Trainee
PT. Sadhana</a>
</li>
<li>
<a href="?m=karir&id=8">Lowongan Kerja PT.
Globalnine Indonesia</a>
</li>
<li>
<a href="?m=karir&id=7">Lowongan BNI Syariah
Malang</a>
</li>
<li>
<a href="?m=karir&id=6">Penerimaan Calon Officer
Development Program (ODP) PLN</a>
</li>
</ul>
<div>
<a href="?m=karir" class="readmore">Semua Karir »</a>
</div>
</div>
<div class="mid_box2">
DOWNLOAD
</div>
<ul class="olist">
<li>
<a href="?m=download&id=81">Panduan PI 2015
(Revisi)</a>
(489)
</li>
<li>
<a href="?m=download&id=80">Rekrutmen Asisten TE/PTE
Semester Genap 2014/2015</a>
(248)
</li>
<li>
<a href="?m=download&id=79">Jadwal Kuliah Semester
Genap 2014/2015</a>
(1902)
</li>
<li>
<a href="?m=download&id=78">Jadwal UAS Praktikum
Semester Gasal 2014/2015</a>
(334)
</li>
<li>
<a href="?m=download&id=77">Jadwal UAS Semester
Gasal 2014/2015</a>
(1350)
</li>
</ul>
<div>
<a href="?m=download" class="readmore">Semua Download
»</a>
</div>
</div>
</div>
<div id="front_spot">
<ul id="fb_content">
<li>
<img src="./images/s1.jpg" alt="" />
<div class="spot">
<b><a href="#">TeUM Developers Network (TDN)</a></b>
<p>Developers Community</p>
</div>
</li>
<li>
<div class="spot">
<b><a href="#">TeUM I-Labs</a></b>
<p>Integrated R&D Laboratory</p>
</div>
</li>
<li class="last">
<div class="spot">
<b><a href="#">TeUM-Forge</a></b>
<p>Free Online Project Repository</p>
</div>
</li>
</ul>
</div>
</div> 
<div class="clear"> </div>
<p id="back-top" style="display: none; ">

<a href="#top"><span></span>BACK TO TOP</a>
</p>
</div> 


<div id="footerwrapper">
<div id="footer">
<div id="left_foot">
<p>
© 2009-2011 Teknik Elektro UM. Malang, Indonesia. <br
/>
Jl. Semarang No 5 Malang, Indonesia. Tlp. 0341-7044470 <br
/>
email: info@elektro.um.ac.id <br />
[0 seconds] [9 queries]
</div>
<div id="right_foot" style="color: #aaa">
Can't find it? | Accessibility | Privacy
</div>
</div>
</div>
</body>
</html>
Output untuk smartphone dengan ukuran 320 x 480 :
Output untuk tablet mulai dari 760 x 1024 :
Output untuk PC menggunakan ukuran normal maka akan tampil .:

Laporan Grafika Komputer Teori

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Laporan Grafika Komputer Teori

Uploaded by

Copyright:

Available Formats

LAPORAN GRAFIKA KOMPUTER TEORI

Untuk memenuhi tugas matakuliah Praktikum Pemrograman Visual

/*-- Tablet --*/

/*-- Smartphone --*/

/*** Icon ***/

/** #fb_content li img { float: left; } #fb_content #fb_content

/** list unordered **/

/** list event **/

/** list kotak **/

/* arrow icon (span tag) */

/** calendar **/

/** nav abjad **/

@media screen and (max-width: 768px){

#footerwrapper, #footer, #left_foot, #right_foot{

@media screen and (max-width: 320px){

#footerwrapper, #footer, #left_foot, #right_foot{

<link type="text/css" rel="stylesheet"

<script type="text/javascript" src="includes/ajax/jquery-

<script type="text/javascript" src="includes/ajax/jquery.cross-

<h4 class="acc_trigger"><a href="#">KEGIATAN</a></h4>

<h4 class="acc_trigger"><a href="#">PENGUMUMAN</a></h4>

<h4 class="acc_trigger"><a href="#">KALENDER</a></h4>

function buildCal(m, y, cM, cH, cDW, cD, brdr){

var todaydate=new Date() //DD added

var todaydate=new Date()

document.write(buildCal(curmonth ,curyear, "cal_main", "month",

</div>

</div>

<div class="clear"> </div>

<p id="back-top" style="display: none; ">

</div>

You might also like

/-- Tablet --/

/-- Smartphone --/

/* Icon */

/ list unordered /

/ list event /

/ list kotak /

/ calendar /

/ nav abjad /