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