Skip to content

Instantly share code, notes, and snippets.

@Maxtermax
Last active December 18, 2015 16:19
Show Gist options
  • Save Maxtermax/5810488 to your computer and use it in GitHub Desktop.
Save Maxtermax/5810488 to your computer and use it in GitHub Desktop.
<doctype html>
<head>
<meta charset="utf-8">
<lang="es">
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<section>
<div>
<form action="javascript:console.log('enviado');">
<input id="escribe" type="text" value=" ">
<input type="submit" value="submit">
</form>
<div class="contenedor"></div>
<p> TU DICES:<span class="mensaje"> </span></p>
</div>
</section>
<script src="script.js"></script>
</body>
body
{
background:silver;
font-size:18px;
font-family:helvetica,arial;
}
section
{
border:1px solid;
border-radius:5px 5px 0px 0px;
background:rgba(2,2,2,0.25);
margin:0 auto;
position:relative;
left:250px;
overflow:hidden;
width:500px;
height:600px;
}
#escribe
{
width:100%;
height:50px;
position:relative;
top:550px;
}
p
{
color:#FFFFFF;
position:relative;
top:355px;
}
span
{
color:rgba(9,9,9,0.5);
position:relative;
}
.contenedor
{
width:350px;
height:50px;
background:green;
position:relative;
top:423px;
left:-5px;
z-index:-1;
-webkit-transform:skew(-15deg);
}
$(document).on('ready',function()
{
$("input:last").hide();
$(".contenedor").hide();
$("p").hide();
$("form").submit(function()
{
var mensaje=$("#escribe").val();
$("span").text(mensaje);
$(".contenedor").show();
$("p").show();
$("input:last").hide();
$("#escribe").val(" ");
});
$("#escribe").click(function()
{
$(this).css({
'-webkit-transition':'all 0.25s',
'font-size':'20px',
'background':'white',
});
});
});
@Maxtermax
Copy link
Author

Chat beta de cancel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment