Conectar-se

Esqueci minha senha

Top dos mais postadores
Sheik
 
Dead
 
Mikéé
 
L.Danttas
 
Mex
 
Higor
 
Wesley
 
Smuck
 
RocK ♕
 
-Rєis-
 

Últimos assuntos
» Brasil Virtual Life - PRG SA-MP
Qua Jul 15, 2015 9:22 pm por Bruno_Walker

» [PACK] NEW-CRYPTO PACK / DUCKETS / CORES NAS FALAS / GRUPOS [PACK]
Seg Ago 11, 2014 3:08 pm por Marco Antoniio

» CraftLandia - O melhor servidor de minecraft
Qua Dez 04, 2013 6:00 am por joaozip08

» AJUDA Com utilitario
Dom Out 27, 2013 6:11 am por mcbolado

» [Skin] Hilux 2011
Qua Out 09, 2013 3:12 pm por pudimmais

» Bate-papo.
Seg Set 02, 2013 1:29 pm por SouthPark

» Loja especial.
Qua Ago 28, 2013 9:48 pm por L.Danttas

» Cabral garante Maracanã seguro, mas 600 operários trabalham no interior.
Qui Ago 08, 2013 10:19 pm por Netinho

» Dólar fecha acima de R$ 2,07; Banco Central fica fora de negócios
Qui Ago 08, 2013 10:16 pm por Netinho

Os membros mais ativos do mês


Teste HTML

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Teste HTML

Mensagem por L.Danttas em Ter Maio 28, 2013 6:55 pm

Olá,

Código e página todas criadas pelo meu amigo, do 0!
Código:


Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery - Teste HTML By TrY!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <style>
        body{
      background-image: url(http://img651.imageshack.us/img651/5821/aaawdq.png);
font-family: Arial;
height: 2000px;
background-color: #8FE0F9;
        }
        .header
        {
            width:600px;
            height:56px;
            position:absolute;
            top:0px;
            left:25%;
            background:#fff url() no-repeat top left;
        }
        a.back{
            width:256px;
            height:73px;
            position:fixed;
            bottom:15px;
            right:15px;
            background:#fff url() no-repeat top left;
            boder::1;
            cursor:pointer;
        }
        a.activator{
            width:153px;
            height:150px;
            position:absolute;
            top:0px;
            left:0px;
            background:#fff url() no-repeat top left;
            boder::1;
            cursor:pointer;
        }
        /* Style for overlay and box */
        .overlay{
            background: #666;
        opacity: 0.8;
            position:fixed;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            boder::100;
        }
        .box{
            position:fixed;
            top:-900px;
            left:22%;
            right:90%;
            background-color:#fff;
            color:#7F7F7F;
            padding:20px;
            border:2px solid #ccc;
            -moz-border-radius: 20px;
            -webkit-border-radius:20px;
            -khtml-border-radius:20px;
            -moz-box-shadow: 0 1px 5px #333;
            -webkit-box-shadow: 0 1px 5px #333;
            boder::101;
        width: 693px;
        height: 490px;
        }
        .box h1{
            border-bottom: 1px dashed #7F7F7F;
            margin:-20px -20px 0px -20px;
            padding:10px;
            background-color:#bfe0ef;
            color:#6ec5ea;
            -moz-border-radius:20px 20px 0px 0px;
            -webkit-border-top-left-radius: 20px;
            -webkit-border-top-right-radius: 20px;
            -khtml-border-top-left-radius: 20px;
            -khtml-border-top-right-radius: 20px;
        }
        a.boxclose{
            float:right;
            width:26px;
            height:26px;
            background:transparent url(http://img16.imageshack.us/img16/9558/cancelv.png) repeat top left;
            margin-top:-30px;
            margin-right:-30px;
            cursor:pointer;
        }
      textarea {
      border: 2px solid #6ec5ea;
      border-radius: 6px;
      }
        button.bu {
      font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;
float: left;
margin-top: 10px;
margin-right: 5px;
padding: 6px 10px;
border: 1px solid #2177A5;
background-color: #227BAD;
color: white;
font-size: 13px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
width: 117px;
height: 35px;
left: 600px;
position: absolute;
      }
      button.bu:hover {
      border: 1px solid #B32D00;
background-color: #C30;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;
      }
      button.bu:active {
      box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.6), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255,255,255,.5);
      }
    </style>
    <body>
        <div class="overlay" id="overlay" style="display:none;"></div>
        <div class="box" id="box">
            <a class="boxclose" id="boxclose"></a>
            <h1>Demo</h1>
            <p>
               
            </p>
        </div>
      <center><h1 style="top: 30px; color:#6ec5ea;">Teste HTML</h1><div style="top: 60px; position: relative;"><textarea id="hg" style="width: 551px; height: 365px;"></textarea><br><button class="bu">Pré-Visualizar.</button></div></center>

       
        <script type="text/javascript">
            $('button').click(function () {
        $('#overlay').fadeIn('fast');
        $('#box').animate({'top':'50px'}, 500)
        });
        $('#boxclose').click(function () {
        $('#box').animate({'top':'-900px'}, 500, function(){;
        $('#overlay').fadeOut('fast');
        });
        });
        $('button').click(function () {
            var hg = $('#hg').val();
            $('#box p').html(hg);
            });
        </script>
    </body>
</html>

Demo:
[Você precisa estar registrado e conectado para ver este link.]


» Até Mais !
avatar
L.Danttas
Administrador
Administrador

Mensagens Mensagens : 310
Pontos Pontos : 777821
Data de inscrição Data de inscrição : 23/04/2013

Ver perfil do usuário http://wonder.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Teste HTML

Mensagem por Civilization em Qua Maio 29, 2013 2:17 pm

Obrigado por compartilhar!

Civilization
Membro
Membro

Mensagens Mensagens : 0
Pontos Pontos : 0
Data de inscrição Data de inscrição : 24/04/2013

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum