Pagina Web HTML5 y CSS3

<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Web Solita</title> TITULO
<link rel="stylesheet" href="estilos.css"> LLAMAR UN ESTILO CON LINK
</head>
<body>
<header> ES LA CABECERA
<div class="ancho">
<div class="logo">

<img src="descarga.jpg" alt="">
 P ES PARRAFO
</div>
<nav>
<ul> LISTA ORDENADA
<li><a href="index.html">Inicio</a></li> LI LISTA Y A ENLACE
<li><a href="">Nosotros</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Contactos</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
CSS.
*{ PARA ELIMINAR MARGENES A 0
margin: 0;
padding: 0;
}
header{
width: 100%; ANCHO
height: 70px; ALTO
background: #1abc9c; FONDO
}
.ancho{ . CUANDO ES UNA CLASE
width: 80%; ANCHO
height: 70px; ALTO
/*background: #1abc9c;*/ FONDO
margin: auto; CENTRAR ANCHO EN HEADER
}
.logo{ . ES OTRA CLASE
width: 30%; ANCHO
height: 70px; ALTO
background: #1abc9c; FONDO
float: left; CORRER A LA IZQUIERDA LA CAJA
padding-top: 10px; PONER UN ESPACIO ARRIBA PARA QUE BAJE Y CENTRE
box-sizing: border-box; QUE NO SE AGRANDE LA CAJA
}
.logo p a{ LLAMA A LOGO-P-A CORRIGE LA LETRA
color: #fff; COLOR
font-size: 40px; TAMAÑO
text-decoration: none; SIN RAYA EL TEXTO
font-weight: bold; LETRA EN NEGRITA
font-family: rale; PONE FUENTE RALE
}
nav{ ES EL MENU
width: 70%;
height: 70px;
background: #1abc9c;
float: left; CORRER CAJA A LA IZQUIERDA
text-align: right; QUE EL TEXTO DE MENU SE VALLA A LA DERECHA
padding-top: 24px; QUE DE BORDE A RRIBA Y BAJE EL MENU
box-sizing: border-box; QUE LACAJA NO PASE PA ABAJO
}
nav ul li{
display: inline; QUE EL MENU LI SEA HORIZONTAL
}
nav ul li a{
color: #fff; COLOR
font-size: 13px; TAMAÑO LETRA
text-decoration: none; QUE LA LETRA NO TENGA RAYA
text-transform: uppercase; CAMBIAR LETRA A MAYUSCULAS
padding-left: 15px; ESPACIO A LA IZQUIERDA DE CADA PALABRA
font-weight: bold; LETRA NEGRITA
letter-spacing: 1px; ESPACIO ENTRE CADA LETRA SILABA
font-family: rale; PONIENDO FUENTE RALE
}
nav ul li a:hover{ HOVER CUANDO PASA EL MOUSE CAMBIA COLOR
color: #444;
}
@font-face{ LLAMAR UNA FUENTE
font-family: rale; RALE CUALQUIER NOMBRE
src:url(fuentes/Raleway-Regular.ttf); RUTA CARPETA
}
CSS
*{ PARA ELIMINAR MARGENES A 0
margin: 0;
padding: 0;
box-sizing: border-box; QUE NO SE AGRANDE LA CAJA
}
nav ul li a:hover{ HOVER CUANDO PASA EL MOUSE CAMBIA COLOR
color: #444;
}
@font-face{ LLAMAR UNA FUENTE
font-family: rale; RALE CUALQUIER NOMBRE
src:url(fuentes/Raleway-Regular.ttf); RUTA CARPETA
}
<div id="particles-js"></div> PARA USAR PARTICLES
<script src="particles.js"></script> LLAMAR UN JS ANTES DE BODY CIERRE
#particles-js{ LLAMAR UN ID
background: url(imagenes/f-1.jpg); PONER IMAGEN
background-position: center; CENTRAR
background-attachment: contain; ADAPTE AL CONTENIDO
background-size: cover; UN TAMAÑO DEFINIDO
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> LLAMAR JQUERY
../IMG/DIBUJO.JPG RETROCEDER UNA CARPETA
PARA li
display: inline; QUE EL MENU LI SEA HORIZONTAL
PARA CAJAS DIV
margin: auto; CENTRAR UN DIV ANCHO EN HEADER
float: left; ORDENAR CAJA A LA IZQUIERDA
padding-top: 24px; PONER UN ESPACIO ARRIBA PARA QUE BAJE Y CENTRE
top: 200px; ESPACIO ARRIBA PERO TRANSPARENTE
text-align: right; QUE EL TEXTO DE MENU SE VALLA A LA DERECHA
text-align: center; QUE EL TEXTO DE MENU SE VALLA A L CENTRO
position: fixed; LA CAJA QUEDA FIJA
background: rgba(0,0,0,.8); COLOR CON TRANSPARENCIA
position: absolute; QUE EL TEXTO ESTE DELANTE DE LA IMAGEN
z-index: 10; QUE NO SE OCULTE LA CAJA
clear: both; LIMPIAR FLOTACION
transition: .4s; ANIMACION A HOVER
class="animated zoomIn"> PONER ANIMACION
PARA LETRAS CSS
color: #fff; COLOR
font-size: 40px; TAMAÑO DE LETRA
line-height: 1.5; ALTURA DE LETRA
font-weight: bold; LETRA EN NEGRITA
font-weight: normal; LETRA SIN NEGRITA
text-decoration: none; QUE LA LETRA NO TENGA RAYA
text-transform: uppercase; CAMBIAR LETRA A MAYUSCULAS
padding-left: 15px; ESPACIO A LA IZQUIERDA DE CADA PALABRA
letter-spacing: 1px; ESPACIO ENTRE CADA LETRA SILABA
font-family: rale; PONIENDO FUENTE RALE
border-bottom: 2px solid #fff; raya al enlace
2d4059
a ENLACE target="none" ENLACE ABRA EN OTRA PESTAÑA
p PARRAFO
ul>li*4 SACAR LISTA LI 4
br *50 saltos de linea
http://html-color-codes.info/codigos-de-colores-hexadecimales/
https://fonts.google.com/
http://vincentgarreau.com/particles.js/
https://developers.google.com/speed/libraries/
https://daneden.github.io/animate.css/
http://fontawesome.io/
https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
http://supersimpleslider.com/
https://moz.com/learn/seo/meta-description
http://rhythm.nikadevs.com/content/icons-et-line
http://fontawesome.io/
FLEXBOX
display : flex;
Flex-direction: row | row-reverse | column | column-reverse; izquiera-derecha-columna
flex-wrap: wrap; RESPETA ANCHO DE CAJA
flex-wrap: nowrap; Ajusta las cajas las achica

H Justify-content: flex-start | flex-end | center | space-between | space-around; izquierda-derecha-centro-espacio
V Align-items: flex-start | flex-end | center | stretch | baseline arriba-abajo-centro-grande-fuente
align-content: flex-start | flex-end | center | stretch | space-between | space-around; ariba-abajo-centro-gra-espacio
meta:vp
*, *:before, *:after{
box-sizing: inherit;
}
html{
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
}
body{
background-color: #17bebb;
font-family: sans-serif;
display: flex;/*flex-direction: row;*/
justify-content: center; /*horizontal*/
align-items: center;/*vertical*/
}
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header{
width: 100%;
height: 70px;
background: #1abc9c;
INICIO HTML 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Php include
<?php include('hola.php') ?>
BOOTSTRAP
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
SCRIPS JABA
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
EMPEZAR HEAD

<meta name="keywords" content="Jr. 7 de junio 831, bicicletas, repuestos de moto, accesorios de moto, venta
bicicletas, pucallpa">

<meta name="description" content="La Casa de la Bicicleta ,Es una empresa líder en Pucallpa, dedicada a la venta de
repuestos para motocicletas, trimotos, moto cargueros, mototaxis y accesorios de motos en general. Venta de bicicletas y
repuestos">

<meta name="author" content="Percy Saulo">

<meta http-equiv="refresh" content="30">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

BOOTSTRAP
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
<script src="js/bootstrap.min.js"></script> </body>
</html>

Pagina Web HTML5 y CSS3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Pagina Web HTML5 y CSS3

Cargado por

Copyright:

Formatos disponibles

<!

flex-wrap: nowrap; Ajusta las cajas las achica

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<?php include('hola.php') ?>

<meta name="author" content="Percy Saulo">

<meta http-equiv="refresh" content="30">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

También podría gustarte