Paso 2: Crear las carpetas del contenido de tu pagina
Despues de instalar Visual Studio Code el siguiente paso es crear una carpeta en tu escritorio (opcional... la carpeta puede ser creada donde se vea conveniente y el nombre de la carpeta seria el nombre de tu sitio web) luego, dentro de la carpeta, crear dos carpetas mas una con el nombre de img donde seran guardadas las imagenes y la otra llamada css donde seran creados los style
Paso 3: Instalar las extensiones
En la parte izquierda se encontraran algunas opciones se debe seleccionar la ultima y buscar las extensiones necesarias para el desarrollo de tu proyecto.
Las extensiones basicamente recomendadas son las siguientes:
- Auto Rename Tag
- Color Manager
- CSS Peek
- htmltagwrap
- IntelliSense for CSS class names in HTML
- open in browser
Ir a FILE >>> NEW FILE
Se abre una nueva pestaña donde te pide seleccionar el lenguaje a utilizar >>> seleccionar HTML .. luego guardar en la carpeta principal del proyecto!
Paso 5: crear CSS
Ir a FILE >>> NEW FILE
Se abre una nueva pesa donde te pide seleccionar el lenguaje a utilizar >>> seleccionar CSS .. luego guardar dentro de la carpeta creada anteriormente con el nombre de css!
Recuerda señalar los estilos en el HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Persol</title>
<!--ingresar el estilo -->
<link href="css/style.css" rel ="stylesheet">
Al finalizar estos pasos ya te encuentras en un ambiente listo para iniciar tu proyecto!
Pagina Principal:
Ejemplo CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- inserir el metadato de busqueda de google -->
<meta name="robots" content="width=device-width,nofollow">
<!--descripcion del sitio (no mas de 180 caracteres)-->
<meta name="description" content="">
<!------------------------------------------------>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Persol</title>
<!--ingresar el estilo -->
<link href="css/style.css" rel ="stylesheet">
</head>
<body>
<!--encabezado contenedor padre-->
<header class="header-top">
<!--contenedor hermano-->
<div class="brand">
<!--<img src="img/persol_logo.svg">-->
<!--agregar imagen sin enlace-->
<!--agregar la imagen con enlace-->
<!-- se escribe: <a href="#"> si aun no se tiene el enlace-->
<a href="https://lvsistemas.blogspot.com/" target="_blank">
<!--se elimina: target="_blank si no se desea abrir en
otra pestaÑa-->
<img src="img/persol_logo.svg">
</a>
</div>
<!--contenedor hermano-->
<nav class="header-nav">
<!--lista para el menu principal-->
<ul>
<li><a href="sole.html">occhiali da sole</a></li>
<li><a href="vista.html">occhiali da vista</a></li>
<li><a href="#">collezioni</a></li>
<li><a href="#">il monso persol</a></li>
</ul>
</nav>
<!--contenedor hermano-->
<div class="shop">
<!--lista para el menu derecho de imagenes-->
<ul>
<li><a href="#"><img src="img/search.png"></a></li>
<li><a href="#"><img src="img/user.png"></a></li>
<li><a href="#"><img src="img/bag-shop.png"></a></li>
</ul>
</div>
</header>
<!--menu segundario central-->
<nav class="nav-shop">
<div class="nav-shop-center">
<!--lista para el menu segundario central-->
<ul>
<li>
<img src="img/shipping.svg">
<a href="#">consegna sicura e gratuita</a>
</li>
<li>
<img src="img/secure.svg">
<a href="#">pagamento online sicuri</a>
</li>
<li>
<img src="img/call.svg">
<a href="#">servizio clienti dedicato</a>
</li>
</ul>
</div>
</nav>
<!--seccion de la imagen-->
<section class="slider">
<!--atl texto de busqueda (solo lo lee google)-->
<!-- <img src="img/sun.jpg" alt="occhiali dal solo
persol donna">-->
<img src="img/new-design.jpg">
<div class="slider-testo">
<p class="slider-titolo">Nuovi arrivi. L'ultima evoluzione dello stile essenziale.</p>
<!--clave de busquedas google-->
<p class="slider-descrizione"><strong>Nuova collezione Persol</strong>, ispirata al design minimal.</p>
<div class="slider-btn">
<a href="#">acquista i Nuovi occhialli da sole</a>
<a href="#">acquista i Nuovi occhialli da vista</a>
</div>
</div>
</section>
<!--seccion de productos (con animacion)-->
<section class="prodotto">
<div class="box bordo">
<a href="#" class="box1">
<p>PO3281S</p>
<p>acquista ora</p>
</a>
</div>
<div class="box bordo">
<a href="#" class="box2">
<p>PO3281S</p>
<p>acquista ora</p>
</a>
</div>
<div class="box bordo">
<a href="#" class="box3">
<p>PO3281S</p>
<p>acquista ora</p>
</a>
</div>
<div class="box">
<a href="#" class="box4">
<p>PO3281S</p>
<p>acquista ora</p>
</a>
</div>
</section>
<!--seccion de producto nuevos (dos imagenes grandes)-->
<section class="prodotto-new">
<div class="box-new bordo">
<a href="#" class="sun">
<p class="new-titolo">Handmade in Itlay</p>
<p class="new-descrizione">Occhiali da sole</p>
<p class="new-btn">acquista occhiali da sole</p>
</a>
</div>
<div class="box-new">
<a href="#" class="eye">
<p class="new-titolo">Handmade in Itlay</p>
<p class="new-descrizione">Occhiali da vista</p>
<p class="new-btn">acquista occhiali da vista</p>
</a>
</div>
</section>
<!--seccion de la imagen (1 imagen)-->
<section class="slider">
<!--atl texto de busqueda (solo lo lee google)-->
<!-- <img src="img/sun.jpg" alt="occhiali dal solo persol donna">-->
<img src="img/new.jpg">
<div class="slider-testo">
<p class="slider-titolo">Un significato celato in ogni
dettaglio. Il monogramma di Persol.</p>
<p class="slider-descrizione">Stile senza tempo, con il
tuo tocco personale. Aggiungi un monogramma personalizzato ai
tuoi nuovi Persol.</p>
<div class="slider-btn">
<a href="#">scopri di piu</a>
<a href="#">acquista ora</a>
</div>
</div>
</section>
<section class="newsletter">
<p>Vivi l’esperienza Persol</p>
<p>Un mondo di collezioni uniche, novità esclusive e vere
icone di stile ti sta aspettando.</p>
<a href="#">ISCRIVITI</a>
</section>
</body>
</html>
Segunda Pagina: Sole:
body{
margin: 0; /*margen del body... 0 para eliminar el espacio
restante en el margen*/
padding: 0; /*espacio interno*/
font-family: Verdana, Geneva, Tahoma, sans-serif;/*fuente para
todos los textos*/
font-size: 13px; /*tamaÑo del texto*/
color: #000; /*color de texto*/
}
/*listas*/
ul{
list-style-type: none; /*quitar la viÑeta de las listas*/
/* background-color: #fff; */ /* color de fondo */
padding-left: 0; /*espacio interno izquierdo*/
margin-left: 0; /*margen izquierdo*/
margin-top: 0; /*margen superior*/
margin-bottom: 0; /*margen inferior*/
}
a{
color: #000; /*color de texto*/
text-decoration: none; /*quitar el subrayado*/
/* text-decoration:overline; */ /*colocar el subrayado en la
parte superior del texto*/
/* text-decoration:line-through; *//*tachado*/
}
p{
margin-top: 0;
margin-bottom: 0;
}
/* estilo del encabezado -- contenedor padre*/
.header-top{
width: 100%;/* ancho */
height: 120px; /* alto */
/*background-color: #999; */ /* color de fondo */
display: flex; /*alinear los contenedores uno al lado del
otro -- horizontal*/
justify-content: space-between; /*alinea de manera justificada los
contenedores*/
/*justify-content:space-around;*//*alinea de manera distribuida los
contenedores*/
/*justify-content: space-evenly;*//*alinea los contenedores con
los espacios del mismo tamaño */
align-items: center;/*alinea centro*//*align-items: flex-end;*/
/*alinea al final*/
padding-left: 30px; /*espacio interno izquierdo*/
padding-right: 30px; /*espacio interno derecho*/
box-sizing: border-box; /*esta propiedad incluye el espacio del
margen al with 100% */
}
/*contenedor hermano*/
.brand{
width:150px;/* ancho */
/*height: 110px;*//* alto */
/* background-color: #ff0; */ /*color de fondo */
}
/*contenedor hermano*/
.header-nav{
width: 700px; /* ancho */
height: 0px; /* alto */
/* background-color:#ec0909; */ /*color de fondo */
}
/*contenedor hermano*/
.shop{
/* width: 90px; */ /* ancho */
/* height: 50px; */ /* alto */
/* background-color:#090dec; */ /*color de fondo */
}
/*selector descendiente*/
.brand img{
width: 100%; /* ancho */
/*height: 30px;*//* alto */
}
.header-nav ul{
display: flex; /*alinear la lista horizontal*/
justify-content: space-around; /*alinea de manera distribuida*/
}
.header-nav a{
font-size: 13px; /*tamaÑo del texto*/
color:rebeccapurple; /*color de texto*/
font-weight: bolder; /*negrita*/
text-transform: uppercase; /*todas mayusculas*/
padding:10px 5px ; /*valor top - right - left - botton */
/* background-color: #0ff; */ /*color de fondo */
}
/*movimiento del mouse*/
.header-nav a:hover{
color:grey; /*color de texto*/
text-decoration:underline; /*subrayallado al pasar el mouse*/
font-weight: normal; /*normal*/
}
.shop img{
width: 30px; /* ancho */
}
.shop ul{
display: flex; /*alinear la lista horizontal*/
}
.shop li{
margin-left: 30px;
}
.nav-shop{
width: 100%;
height: 50px;
background-color: #ccc;
/*background-color: #c9c;*//*formato de color seguro para el
web #cc99cc */
/*background-color:rgba(117, 6, 6, 0.5);*//*formato para colores
con la trasparencia*/
}
.nav-shop-center{
width: 1024px;
height: 50px;
/*background-color:#ff0;*/
/*margenes automatico funcionan cuando existe un ancho
(ejemplo width 1024;)*/
margin-left: auto;
margin-right: auto;
}
.nav-shop ul{
display: flex;
justify-content: space-between;
/*background-color: orchid;*//*color de fondo*/
align-items: center;
height: 100%;/*se utiliza el 100% porque se ha utilizado display:flex;*/
}
.nav-shop li{
display: flex;
}
.nav-shop a{
font-size: 14px;
margin-left: 10px;
padding: 10px 20px 10px 0;
text-transform: uppercase;
}
.nav-shop a:hover{
color: royalblue;
text-decoration: underline;/*subrayado*/
font-weight:bolder; /*negrita*/
}
.slider{
width: 100%;
position: relative;/*trabaja junto con position: absolute;
del .slider-testo*/
/* background-color: rebeccapurple;*/
/* margin: 0 auto;*/
}
.slider img{
width: 100%;
}
.slider .slider-testo{
width: 1200px;/*ancho*/
/*height: 200px;*//*altura*/
/*background-color: #ccc;*/
position: absolute;
bottom:50px;
left: 50%;/*inicia en la mitad*/
/*margin-left: -200px;*/ /* el 400 porque width es 800px */
transform: translateX(-50%);
}
.slider .slider-testo .slider-titolo{
font-size: 24px;
color: #fff;
text-align: center;
margin-bottom: 30px;
}
.slider .slider-testo .slider-descrizione{
margin-bottom: 20px;
font-size: 20px;
color: #fff;
text-align: center;
}
.slider .slider-testo .slider-btn{
margin: 0 auto;
width: 700px;
display: flex;/*situa los texto uno al dado del otro - horizontal*/
/*justify-content: space-between;*//*situa los texto uno
del lado derecho y el otro del lado izquierdo*/
justify-content: space-evenly;/*la distancia es la misma
entre los espacios*/
}
.slider .slider-testo .slider-btn a{
color: #fff;
font-size: 13px;
text-transform: uppercase;
padding: 15px 20px;/*top-botom lesf-rigth*/
background-color:#498dda;
border:1px #8dbef5 solid ;/*ancho de la linea, color, tipo
de linea (el orden no es un problema)*/
transition: all ease 5s; /*efecto lento al quitar el mouse
que aplica a todos los componentes (el orden no es un problema)*/
}
.slider .slider-testo .slider-btn a:hover{ /*hover >> efecto al
pasar el mouse*/
color:#14307c;
background-color:#fff;
/*transition: all ease 2s;*/ /*efecto lento que aplica a todos
los componentes (el orden no es un problema)*/
transition: background-color ease 2s; /*efecto lento que aplica
al background-color (el orden no es un problema)*/
}
.prodotto,
.prodotto-new{
width: 100%;
/* height: 400px;*/
/* background-color: #fff;*/
display: flex;
}
.prodotto .box{
width: 25%;
/* height: 400px;*/
/*background-color: aqua;*/
}
.prodotto .box a{
display: flex;
width: 100%;
height: 300px;
/*background-color:#498dda;*/
background-size: 100%;
background-repeat: no-repeat;/*no repetir la imagen*/
background-position: center center;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 50px 0;
}
.prodotto .box .box1{
background-image: url("../img/occhiale-01.jpg");/*agregar una imagen*/
}
.prodotto .box .box1:hover{
background-image: url("../img/occhiale-01-hover.jpg");/*efecto de imagen*/
}
.prodotto .box .box2{
background-image: url("../img/occhiale-02.jpg");/*agregar una imagen*/
}
.prodotto .box .box2:hover{
background-image: url("../img/occhiale-02-hover.jpg");/*efecto de imagen*/
}
.prodotto .box .box3{
background-image: url("../img/occhiale-03.jpg");/*agregar una imagen*/
}
.prodotto .box .box3:hover{
background-image: url("../img/occhiale-03-hover.jpg");/*efecto de imagen*/
}
.prodotto .box .box4{
background-image: url("../img/occhiale-04.jpg");/*agregar una imagen*/
}
.prodotto .box .box4:hover{
background-image: url("../img/occhiale-04-hover.jpg");/*efecto de imagen*/
}
.bordo{
border-right: 1px #000 solid;
}
.prodotto-new .box-new{
width: 50%;
/*height: 500px;*/
background-color: #ccc;
}
.prodotto-new a{
display: flex;
width: 100%;
height: 600px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
/*background-color:blueviolet;*/
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.prodotto-new .sun{
background-image: url("../img/sun.jpg");
}
.prodotto-new .eye{
background-image: url("../img/eye.jpg");
}
.prodotto-new .new-titolo{
font-size: 11px;
margin-bottom: 30px;
}
.prodotto-new .new-descrizione{
font-size: 16px;
margin-bottom: 30px;
}
.prodotto-new .new-btn{
font-size: 14px;
text-transform: uppercase;/*mayuscula*/
background-color: #000;
color: #fff;
border: 1px #000 solid;
padding: 10px 20px;
margin-bottom: 40px;
transition: all ease .5s;
}
.prodotto-new .new-btn:hover {
background-color: #fff;
color: #000;
}
.newsletter{
width: 100%;
height: 150px;
background-color: #ccc;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.newsletter a{
background-color:#000;
color: #fff;
padding:10px 20px;
}
No hay comentarios:
Publicar un comentario