bien para continuar , como siempre , bueno no siempre , lo hago , yo siempre te recomendare el editor de código sublime text ,descargar aqui .
Bien continuemos , para crear este sitio no tendríamos que escribir mucho código html , sin embargo css,si y un poco más de lo que podríamos imaginar .
ok ahora si continuemos:
primero que nada escribimos el html : el cual el siguiente codigo seria asi :
<html>
<head>
<title>Bienvenidos</title>
<!--<link href="css/fonts.css" rel="stylesheet" type="text/css">--> estilos
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png"
</div>
<!--
<ul class="main-nav">
<li class="active"><a href=""> Inicio </a></li>
<li><a href="#"> MENU </a></li>
<li><a href="#"> SERVICIOS </a></li>
<li><a href="#"> SOBRE </a></li>
<li><a href="#"> CONTACTO </a></li>
<li><a href="#"> NOTICIAS </a></li>
<li><a href="#"> FAQ </a></li>
</ul> --> esta parte es el menu
</div>
<div class="hero">
<h1>Estas listo?</h1>
<div class="button">
<a href="#" class="btn btn-one"> Mira nuestro video</a>
<a href="https://www.pcsystemsolutions.net/" target="_blank" class="btn btn-two"> Explora en nuestro sitio web</a>
</div>
</div>
</header>
</body>
</html>
Como pueden observar , solo con el código html , nos quedaría de esta forma ahora vamos con css.
/*
* @Author: Thepirateby
* @Date: 2018-08-29 11:55:09
* @Last Modified by: Thepirateby
* @Last Modified time: 2018-08-29 12:33:51
*/
*
{
margin: 0;
padding: 0;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.hero
{
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(img/son-goku.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.button
{
margin-top: 30px;
margin-left: 440px;
}
.btn
{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one
{
background-color: darkorange;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif;
}
.btn-two:hover
{
background-color: darkorange;
transition: all 0.5s ease-in;
}
.logo img
{
width: 150px;
height: auto;
}
ya con el código css, nos quedaria asi :
 |
| Nos quedaria asi , esta pagina la puedes usar como pagina principal , es decir sería tu index.html |
Para poder ver el DEMO ,ve aquí ➤➤➤➥➥
DESCARGA NO DISPONIBLE................................................................
Hola mi nombre es Agustin ,soy informático desde los 15 años, soy apasionado ala informatica. 
No hay comentarios.:
Publicar un comentario