Postingan
body{
margin:0px;
height:900px;
font-family: sans-serif;
}
.chat_box{
position:fixed;
right:20px;
bottom:0px;
width:250px;
}
.chat_body{
background:#808080;
height:300px;
padding:4px 0px;
}
.chat_head,.msg_head{
background:#66CDAA;
color: white;
padding:15px;
font-weight:bold;
cursor:pointer;
border-radius:5px 5px 0px 0px;
}
.msg_box{
position:fixed;
bottom:-5px;
width:250px;
background:white;
border-radius:5px 5px 0px 0px;
}
.msg_head{
background:#48D1CC ;
}
.msg_body{
background:#808080;
height:200px;
font-size:12px;
padding:15px;
overflow:auto;
overflow-x: hidden;
}
.msg_input{
background:#708090;
width:100%;
border: 1px solid white;
border-top:1px solid #DDDDDD;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.close{
float:right;
cursor:pointer;
}
.minimize{
float:right;
cursor:pointer;
padding-right:5px;
}
.user{
position:relative;
padding:10px 30px;
}
.user:hover{
background:#f8f8f8;
cursor:pointer;
}
.user:before{
content:'';
position:absolute;
background:#2ecc71;
height:10px;
width:10px;
left:10px;
top:15px;
border-radius:6px;
}
.msg_a{
position:relative;
background:#FDE4CE;
padding:10px;
min-height:10px;
margin-bottom:5px;
margin-right:10px;
border-radius:5px;
}
.msg_a:before{
content:"";
position:absolute;
width:0px;
height:0px;
border: 10px solid;
border-color: transparent #FDE4CE transparent transparent;
left:-20px;
top:7px;
}
.msg_b{
background:#EEF2E7;
padding:10px;
min-height:15px;
margin-bottom:5px;
position:relative;
margin-left:10px;
border-radius:5px;
word-wrap: break-word;
}
.msg_b:after{
content:"";
position:absolute;
width:0px;
height:0px;
border: 10px solid;
border-color: transparent transparent transparent #EEF2E7;
right:-20px;
top:7px;
}
FILE HTML
<html>
<head>
<title>FAKULTAS | TEKNIK KOMPUTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/fwslider.css" media="all">
<script src="js/jquery-ui.min.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<script src="js/fwslider.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker,#datepicker1" ).datepicker();
});
</script>
<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css" />
<script type="text/javascript" src="js/JFCore.js"></script>
<script type="text/javascript" src="js/JFForms.js"></script>
<script type="text/javascript">
(function() {
JC.init({
domainKey: ''
});
})();
</script>
<!--nav-->
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<!-- start header -->
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div class="h_right">
<!--start menu -->
<ul class="menu">
<li class="active"><a href="index.html">HOME</a></li> |
<li><a href="rooms.html">PROFIL</a></li> |
<li><a href="reservation.html">INFORMASI</a></li> |
<li><a href="activities.html">AKTIVITAS</a></li> |
<li><a href="chat.php">KONTAK</a></li>
<div class="clear"></div>
</ul>
<!-- start profile_details -->
<form class="style-1 drp_dwn">
<div class="row">
<div class="grid_3 columns">
<select class="custom-select" id="select-1">
<option selected="selected">EN</option>
<option>USA</option>
<option>AUS</option>
<option>UK</option>
<option>IND</option>
</select>
</div>
</div>
</form>
</div>
<div class="clear"></div>
<div class="top-nav">
<nav class="clearfix">
<ul>
<li class="active"><a href="index.html"></a></li>
<li><a href="rooms.html">PROFIL</a></li>
<li><a href="reservation.html">INFORMASI</a></li>
<li><a href="activities.html">AKTIVITAS</a></li>
<li><a href="contact.html">KONTAK</a></li>
</ul>
<a href="#" id="pull">MENU</a>
</nav>
</div>
</div>
</div>
</div>
<div class="images-slider">
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<!-- Slide image -->
<img src="images/slider-bg.jpg" alt=""/>
<!-- /Slide image -->
<!-- Texts container -->
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h4 class="title"><i class="bg"></i><span class="hide">UNIVERSITAS COKROMINOTO</span></h4>
<h5 class="title1"><i class="bg"></i><span class="hide" >FAKULTAS TEKNIK KOMPUTER</span></h5>
<!-- /Text title -->
</div>
</div>
<!-- /Texts container -->
</div>
<!-- /Duplicate to create more slides -->
<div class="slide">
<img src="images/slider-bg.jpg" alt=""/>
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h4 class="title"><i class="bg"></i>FAKULTAS TEKNIK KOMPUTER <span class="hide"></span></h4>
<h5 class="title1"><i class="bg"></i><span class="hide">MULTIMEDIA</span> </h5>
<!-- /Text title -->
</div>
</div>
</div>
<!--/slide -->
</div>
<div class="timers"> </div>
<div class="slidePrev"><span> </span></div>
<div class="slideNext"><span> </span></div>
</div>
<!--/slider -->
</div>
<!--start main -->
<div class="grids_of_3">
<div class="grid1_of_3">
<div class="grid1_of_3_img">
<a href="details.html">
<img src="images/pic2.jpg" alt="" />
<span class="next"> </span>
</a>
</div>
<h4><a href="#">Kegiatan<span>multimedia</span></a></h4>
<p>seperti pada gambar di atas adalah salah satu contoh bentuk kegiatan yang di lakukan oleh mahasiswa fakultas teknik kompputer dalam pengenalan software multimedia yang mengasah imajinasi dan menghasilkan karya melalui tekhnologi.</p>
</div>
<div class="grid1_of_3">
<div class="grid1_of_3_img">
<a href="details.html">
<img src="images/pic1.jpg" alt="" />
<span class="next"> </span>
</a>
</div>
<h4><a href="#">pasca sarjana<span>angkatan 2</span></a></h4>
<p>seperti pada gambar di atas adalah salah satu contoh bentuk kegiatan yang di lakukan oleh mahasiswa fakultas teknik kompputer dalam pengenalan software multimedia yang mengasah imajinasi dan menghasilkan karya melalui tekhnologi</p>
</div>
<div class="grid1_of_3">
<div class="grid1_of_3_img">
<a href="details.html">
<img src="images/pic3.jpg" alt="" />
<span class="next"> </span>
</a>
</div>
<h4><a href="#">kegiatan<span>outdoor</span></a></h4>
<p>seperti pada gambar di atas adalah salah satu contoh bentuk kegiatan yang di lakukan oleh mahasiswa fakultas teknik kompputer dalam pengenalan software multimedia yang mengasah imajinasi dan menghasilkan karya melalui tekhnologi</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!--start main -->
<div class="footer_bg">
<div class="wrap">
<div class="footer">
<div class="copy">
<p class="link"><span>©UNIVERSITAS | COKROMINOTO<a href="http://w3layouts.com/"></a></span></p>
</div>
<div class="f_nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="rooms.html">PROFIL</a></li>
<li><a href="reservation.html">INFORMASI</a></li>
<li><a href="indexphp">KONTAK</a></li>
</ul>
</div>
</script>
</body>
</html>
<ul>
<li><a class="icon1" href="#"></a></li>
<li><a class="icon2" href="#"></a></li>
<li><a class="icon3" href="#"></a></li>
<li><a class="icon4" href="#"></a></li>
<li><a class="icon5" href="#"></a></li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>
</html>
<head>
<link rel="shortcut icon" href="facivon.ico">
<link href="css/chat.css" rel="stylesheet">
<script src="js/script.js"></script>
</head>
<body>
<div class="chat_box">
<div class="chat_head"> CHAT BOX </div>
<div class="chat_body">
<div class="user"> IMAM TAUFIK </div>
</div>
</div>
<div class="msg_box" style="right:290px">
<div class="msg_head"> imam taufik
<div class="close">x</div>
</div>
<div class="msg_wrap">
<div class="msg_body">
<div class="msg_a">hy </div>
<div class="msg_b">hy to</div>
<div class="msg_a">my name imam</div>
<div class="msg_push"></div>
</div>
<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>
</div>
</div>
</body>
</html>
