Pede po ba patulong sa code ko? diko alam sang part ang kailangan baguhin eh, ganito kasi kapag ni ra run ko yung code ko through online server gumagana ang jquery pero kapag local server tulad ng wamp hindi mag run eh, kailangan ko lang po ma pa run yung animation nito para maka usad na ako, hehe Salamat po ng marami, sana matulungan niyo ako.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Spartan Chatbot</title>
<link rel = "stylesheet" href = "css.css" type = "text/css">
<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.2.min.js"></script>
<script type='text/javascript'>//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src = 'C:\Wamp Server\www\Chatbot\jquery-1.12.2.min.js' type='text/javascript' %3E%3C/script%3E"));
}
</script>
<script>
$(document).ready(function(){
$("#button").click(function(){
$("#login ").fadeOut("slow");
});
});
</script>
</head>
<body>
<div id = "bar1"></div>
<center> <div id = "text1">Welcome.</div> </center>
<center>
<div id = "login">
<form name="frmlogin" action="index.php" method="post">
<p class="user">
<input type="text" placeholder="Username" class="username"/>
<li type="none" class = "ulogo"> <img src="Pictures/Icons/user.png"></li>
</p>
<p class="pass">
<input type="password" placeholder="Password" class="password"/>
<li type = "none" class="upass"> <img src="Pictures/Icons/lock.png"></li>
</p>
<br>
<button id = "button">Login</button>
</form>
</div>
</center>
</body>
<?php
/*serch*/
?>
</html>
CSS:
@charset "utf-8";
/* CSS Home */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
background-image:url(Pictures/Backgrounds/Background.png);
font-family: "Roboto Slab", serif;
color: white;
}
#bar1 {
height:35px;
width:1366px;
background-color:#f15a5c;
/*box-shadow: 10px 10px 5px;*/
}
#text1 {
width:500px;
height:70px;
color:#FFFFFF;
font-size:55px;
margin-top:10px;
padding:5px;
text-align:center;
}
#login {
margin-top:50px;
width:450px;
height:280px;
background-color: rgba(235,223,223,0.30);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 10px;
position:absolute;
}
/*Place holders*/
::-webkit-input-placeholder { /* Chrome/Opera/Safari p*/
font-size:15px;
color:#FFFFFF;
}
.username {
margin-left:50px;
margin-top:40px;
margin-bottom:20px;
padding:10px;
background-color:transparent;
width:300px;
height:50px;
border-style:solid;
border-color:#FFFFFF;
color:#FFFFFF;
font-size:18px;
}
.ulogo {
position:absolute;
height:50px;
width:50px;
margin-top:-59px;
margin-left:40px;
}
.password {
margin-left:50px;
margin-top:5px;
margin-bottom:20px;
padding:10px;
background-color:transparent;
width:300px;
height:50px;
border-style:solid;
border-color:#FFFFFF;
font-size:18px;
color:#FFFFFF;
}
.upass {
position:absolute;
height:50px;
width:50px;
margin-top:-59px;
margin-left:40px;
}
#button {
padding: 10px 25px;
font-size: 22px;
text-decoration: none;
margin-top:-10px;
height:50px;
width:150px;
background-color:#f04b4e;
border-style:solid;
border-color:transparent;
color:#E3DEDE;
}
#button:active {
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);
-webkit-transform: translate(0px, 5px);
transform: translate(0px, 5px);
}