Your page title here :)

N3.


Nesbet

Intro (Dark theme)

Códigos - Pagina Web gratis

Intro "Sitio en construcción" (Dark theme)

Publicado por: nesbet
¡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. 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.

<!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. 

<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(https://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(https://img.webme.com/pic/d/design-adri/social4.png) right -30px no-repeat;
}

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

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

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

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

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

</style>  	 


© Nesbet 2008 - 2015. Todos los derechos reservados.
Contacto · Foro · FAQ

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=