Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje18-08-2015, 03:25 (UTC)    
Título del mensaje: [CSS] Intro "Sitio web en construcción" (Dark them

[CSS] Intro "Sitio web en construcción" (Dark theme)

¡Hola amigos! En este post les voy a enseñar a cómo agregar un moderno intro indicándole al visitante que el sitio permanece en construcción. Es muy simple y rápido así que espero que les sirva y puedan entender. Ya saben que en caso de problemas, no duden en preguntarme.

VISTA PREVIA




CÓDIGO HTML

Primero debe activar el extra "Intro" y luego copiar y pegar el siguiente código html en "Mostrar el texto antes de la tecla de entrada". Lo que está de color verde es el texto que usted debe editar.

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<title>Nombre de su web</title>

</head>
<body>
<div id="wrapper">
<div class="main_content">
<div class="logo"><h1>N3</h1><span>diseños · tutoriales · recursos</span></div>
<div class="uppersection">
<h2><strong>PRÓXIMAMENTE</strong> <br/>15.08.2015</h2>
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores.</p>
</div>
<ul class="social">
<li><a href="#" class="fb">Facebook</a></li>
<li><a href="#" class="tw">Twitter</a></li>
<li><a href="#" class="google">Google+</a></li>
<li><a href="#" class="insta">Instagram</a></li>
<li><a href="#" class="skype">Skype</a></li>
<li><a href="#" class="vimeo">Vimeo</a></li>
</ul>
</div>
</div>
</body>
</html>


CÓDIGO CSS

Copie y pegue el siguiente código en "Introduzca el texto a mostrar despues del botón de entrada".
Recordar: es necesario dejar el campo de texto "Introduzca el texto del botón entrada" vacío.

Cita:
<style type="text/css">

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

body{
margin:0;
padding:0;
background: #383838 url(http://img.webme.com/pic/d/design-adri/congruent_pentagon.png);
font-family: Lato, Helvetica Neue, Helvetica, Arial;
color: #fff;
}

#wrapper{
margin: 0 auto;
width: 940px;
}

.main_content, .uppersection{
width: 940px;
background-color:transparent;
padding-top:60px;
}

.uppersection{
padding-bottom:60px;
background-color:#232323;
}

.logo {
width: 100%;
text-align: center;
margin: 0px auto 60px;
background:transparent;
height:100px;
}

.logo h1 {
font-weight: 700;
background-color: rgb(35, 35, 35);
border-radius: 50%;
letter-spacing: -0.4rem;
text-align: center;
color: rgb(255, 255, 255);
font-size: 70px;
padding: 20px;
float: left;
margin:10px 0px;
}

.logo span {
font-size: 25px;
color: #232323;
float: right;
letter-spacing: -0.1rem;
font-weight: 700;
margin: 60px 0px;
}

h2{
font-weight: normal;
text-align: center;
display: block;
font-size: 30px;
}

h2 strong{
text-transform: uppercase;
font-size: 64px;
}


h2 span{
font-style: italic;
font-size: 30px;
}

p{
font-size: 19px;
text-align: center;
line-height: 26px;
font-weight: 300;
padding: 10px 40px;
}

ul.social{
float: left;
text-align:center;
width:100%;
background:transparent;
}

ul.social li{
display:inline-block;
margin-right: 40px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
padding:20px 10px;
}

ul.social li a{
color: #393939;
text-decoration: none;
padding-right: 30px;
padding-bottom: 9px;
padding-top: 4px;
}

ul.social li a:hover{
text-decoration: underline;
}

ul.social li a.fb{
background: url(http://img.webme.com/pic/d/design-adri/social4.png) right -30px no-repeat;
}

ul.social li a.tw{
background: url(http://img.webme.com/pic/d/design-adri/social4.png) right -90px no-repeat;
}

ul.social li a.google{
background: url(http://img.webme.com/pic/d/design-adri/social4.png) right -150px no-repeat;
}

ul.social li a.insta{
background: url(http://img.webme.com/pic/d/design-adri/social4.png) right -60px no-repeat;
}

ul.social li a.skype{
background: url(http://img.webme.com/pic/d/design-adri/social4.png) right -90px no-repeat;
}

ul.social li a.vimeo{
background: url(http://img.webme.com/pic/d/design-adri/social4.png) right -120px no-repeat;
}

</style>



===================================================================================================

Eso fué todo amigos, espero que les haya gustado.
Saludos!
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group