Proyecto de curso

Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS

  • 145
  • 2
  • 1

Buenas noches @Javier Usobiaga Ferrer adjunto imágenes del proyecto realizado, el cual realice en la medida normal de pantalla, también pequeña 360 px y a partir de 600 px, las hice en esas medidas ya que realmente no se cuales son las medidas practicas en las cuales se deben hacer las paginas, adjunto también el código no se si de pronto soy demasiado redundante con el si hago demás, el Javascript si es el mismo que usted compartió.

HMTL:

-------------------------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" data-auto-replace-svg="nest"></script>

<title>Proyecto</title>
</head>
<body>

<div class="menu">

<span class="btn_menu" id="boton_menu">
<i class="fas fa-bars"></i>
</span>

<div class="header">

<div class="logo">
<img src="./Imágenes/Logo.png" alt="">
</div>

<div class="grupo_menu" id="menu_desplejable">
<ul>
<li><a href="#">EL ESPACIO</a></li>
<li><a href="#">PRODUCTOS</a></li>
<li><a href="#">OFERTAS</a></li>
<li><a href="#">RESERVAS</a></li>
<li><a href="#">CONTACTO</a></li>
</ul>

</div>

<div class="h1">
<h1>RECIÉN HECHO,<br>TODOS LOS DÍAS</h1>

</div>

<div class="barra_blanca">
<img src="./Imágenes/barra.png" alt="">
</div>

<div class="parrafo1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>

<div class="cuerpo1">

<div class="div1">
<h3 class="titulos">VEN AL BRUNCH DE <br>LOS DOMINGOS</h3>
<p class="texto1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="div2">
<h3 class="titulos">VEN AL BRUNCH DE <br>LOS DOMINGOS</h3>
<p class="texto1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>

<div class="background2">
<div class="texto_desayuno">
<h2>VEN A DESAYUNAR</h2>
</div>
<div class="barra_blanca2">
<img src="./Imágenes/barra.png" alt="">
</div>
<div class="parrafo2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="boton">
<a href="#">DESCUBRE NUESTROS PRODUCTOS</a>
</div>

</div>

<div class="pie">

<div class="contenedor1">
<div class="img1">
<img src="./Imágenes/Icono1.png" alt="">
</div>
<div class="titulos2">
<h4>PAN RECIÉN HECHO</h4>
<p class="parrafo3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<div class="contenedor2">

<div class="img1">
<img src="./Imágenes/Icono2.png" alt="">
</div>
<div class="titulos2">
<h4>TARTAS PARA CADA DÍA</h4>
<p class="parrafo3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<div class="contenedor3">
<div class="img1">
<img src="./Imágenes/Icono3.png" alt="">
</div>
<div class="titulos2">
<h4>PRUEBA NUESTROS DULCES</h4>
<p class="parrafo3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<div class="contenedor4">

<div class="img1">
<img src="./Imágenes/Icono4.png" alt="">
</div>
<div class="titulos2">
<h4>INGREDIENTES ECOLÓGICOS</h4>
<p class="parrafo3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

</div>

<div class="cuerpo2">

<div class="div3">
<h3 class="titulos">CONTACTA CON <br>NOSOTROS</h3>
<p class="texto1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="div4">
<h3 class="titulos">¿SABES DÓNDE?<br>ESTAMOS</h3>
<p class="texto1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>

<div class="fin">
<h6>Junio 06 del 2021</h6>
</div>

</div>

<script src="javascript.js"></script>

</body>
</html>

CSS:
-------------------------------

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

*{
box-sizing: border-box;
}

body{
font-family: 'Open Sans', sans-serif;
width: 100%;
height: 100vh;
}

.menu{
width: 100%;
height: 100px;
position: absolute;
}

.header{
background-image: url("./Imágenes/Fondo1.jpg");
background-size: cover;
height: 100vh;
}

.logo{
width: 300px;
padding: 30px;
display:inline;

}
.logo img{
margin-top: 20px;
}

.grupo_menu ul li a{
list-style: none;
text-decoration: none;
display: inline-block;
float: right;
color: white;
margin-right: 20px;
}

.grupo_menu ul li a:hover{
text-decoration:underline;
color: #ded6c0;
}

.h1 h1{
width: 100%
margin: auto;
margin-top: 150px;
font-size: 44px;
text-align: center;
font-weight: bold;
color: white;
}

.barra_blanca{
width: 100%;
height: 50px;
padding: 20px;

}
.barra_blanca img{
display: block;
margin: auto;

}

.parrafo1{
margin-top: 300px;
margin: 0 250px;
font-size: 16px;
text-align: center;
color: white;
}

.cuerpo1{
width: 100%;
height: auto;
}

.div1{
width: 50%;
height: 300px;
background-color: #d03b40;
padding: 50px;
color: #ded6c0;
display: inline-block;
}

.div2{
width: 50%;
height: 300px;
background-color: #ded6c0;
color: #d03b40;
padding: 50px;
float: right;
}

.titulos{
font-size: 24px;
font-weight: bold;
text-align: center;
}
.texto1{
font-size: 16px;
text-align: center;
margin-top: 20px;
}

.background2{
background-image: url("./Imágenes/Fondo2.jpg");
background-size: cover;
height: 100vh;

}

.texto_desayuno{
width: 100%;
position: absolute;

}

.texto_desayuno h2{
text-align: center;
color: white;
font-size: 44px;
font-weight: bold;
margin-top: 160px;
}

.barra_blanca2{
width: 100%;
padding: 20px;
position: absolute;

}
.barra_blanca2 img{
display: block;
margin: auto;
margin-top: 200px;
}

.parrafo2{
width: 100%;
position: absolute;
text-align: center;
color: white;
font-size: 16px;
margin-top: 250px;
}
.parrafo2 p{

margin: 0 250px;

font-size: 16px;
text-align: center;
color: white;
}

.boton{
width: 100%;
position: absolute;
text-align: center;
margin-top: 400px;
}

.boton a{
color: white;
font-size: 14px;
padding: 10px;
border: 2px solid;
text-decoration: none;
}

.pie{
width: 100%;
height: auto;
padding: 20px;
display: inline-block;
margin-top: 50px;
}

.contenedor1{
width: 50%;
display: inline-block;
}

.contenedor2{
width: 50%;
float: right;
}

.contenedor3{
width: 50%;
display: inline-block;
}

.contenedor4{
width: 50%;
float: right;
}

.titulos2 h4{
font-weight: bold;
font-size: 18px;
margin-top: 30px;
}
.titulos2 p{
font-size: 14px;
}

.img1{
display: inline-block;
float: left;
margin: auto;
padding: 30px;
}

.cuerpo2{
width: 100%;
height: auto;
}

.div3{

width: 50%;
height: 300px;
background-color: #ded6c0;
color: #d03b40;
padding: 50px;
Display: inline-block;

}

.div4{
width: 50%;
height: 300px;
background-color: #d03b40;
padding: 50px;
color: #ded6c0;
float: right;

}

.titulos{
font-size: 24px;
font-weight: bold;
text-align: center;
}
.texto1{
font-size: 16px;
text-align: center;
margin-top: 20px;
}

.fin{
width: 100%;
height: 100px;
background-color: #18151a;
padding: 30px;
}
.fin h6{
color: white;
font-size: 10px;
line-height: 40px;
}

.btn_menu {
color: white;
background-color: #d03b40;
width: 50px;
height: 50px;
text-align: center;
padding: 15px 0;
border-radius: 3px;
position: absolute;
float: right;
/*top: 30px;*/
right: 30px;
margin-top: 30px;
display: none;
}

/*medida 600px*/

@media screen and (max-width: 600px) {

.header{
width: 100%;
height: 320px;
background-image: url("./Imágenes/fondo600px.jpg");
background-size:cover;

}

.btn_menu{
display: block;
}

.js .grupo_menu{
max-height: 0;
overflow:hidden;
transition: max-height .5s;
position: absolute;
top: 67px;
right: 30px;
background-color: #d03b40;
}

.js .grupo_menu ul li a{
padding: 20px 10px;
color: #ded6c0;
text-align: right;
}

.js .grupo_menu.menu-desplegado{
max-height: 300px;
}

.h1 h1{
font-size: 30px;
margin-top: 40px;
}

.parrafo1{
margin: 0px 30px;
margin-top: 1px;
text-align: center;
font-size: 12px;
}

.cuerpo1{
width: 100%;
height: auto;

}

.div1{
width: 50%;
height: auto;
background-color: #d03b40;
padding: 50px;
color: #ded6c0;
display: inline-block;

}

.div2{
width: 50%;
height: auto;
background-color: #ded6c0;
color: #d03b40;
padding: 50px;
float: right;

}

.titulos{
font-size: 24px;
font-weight: bold;
text-align: center;
}

.div1 h3{
font-size: 18px;
}

.div2 h3{
font-size: 18px;
}
.texto1{
font-size: 12px;
text-align: center;
margin-top: 20px;
}

.div1 p{
font-size: 12px;
}

.div2 p{
font-size: 12px;
}

.background2{
width: 100%;
height: 420px;
background-image: url("./Imágenes/fondo600px_2.jpg");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;

}

.texto_desayuno{
width: 100%;

}

.texto_desayuno h2{
text-align: center;
color: white;
font-size: 34px;
font-weight: bold;
margin-top: 80px;
}

.barra_blanca2{
width: 100%;

}
.barra_blanca2 img{
display: block;
margin: auto;
margin-top: 120px;
}

.parrafo2{
width: 100%;
text-align: center;
color: white;
font-size: 16px;
margin-top: 140px;
padding: 30px;
}
.parrafo2 p{
margin: 0 25px;
font-size: 16px;
text-align: center;
color: white;
}

.boton{
width: 100%;
position: absolute;
text-align: center;
margin-top: 340px;
}

.boton a{
color: white;
font-size: 14px;
padding: 10px;
border: 2px solid;
text-decoration: none;
}

.pie{
width: 100%;
height: auto;
padding: 20px;
margin-top: 10px;
}

.contenedor1{
width: 100%;
}

.contenedor2{
width: 100%;
margin-top: 20px;
}

.contenedor3{
width: 100%;
margin-top: 20px;
}

.contenedor4{
width: 100%;
margin-top: 20px;
}

.img1{
width: 30%;
display: inline-block;
float: left;
margin: auto;
padding: 30px;
position: relative;
}
.img1 img{
margin: auto;
display: block;
width: 100px;
height: auto;
}

.titulos2 h4{
display: block;
font-weight: bold;
font-size: 18px;
margin-top: 10px;
text-align: center;
}
.titulos2 p{
display: block;
font-size: 12px;
text-align: center;
margin-top: 10px;
}

.cuerpo2{
width: 100%;
height: auto;

}

.div3{

width: 50%;
height: auto;
background-color: #ded6c0;
color: #d03b40;
padding: 40px;
display: inline-block;

}

.div4{
width: 50%;
height: auto;
background-color: #d03b40;
padding: 40px;
color: #ded6c0;

float: right;

}

.titulos{
font-size: 18px;
font-weight: bold;
text-align: center;
}
.texto1{
font-size: 12px;
text-align: center;
margin-top: 20px;
}

.fin{
width: 100%;
height: auto;
background-color: #18151a;
padding: 10px;

}

.fin h6{
color: white;
font-size: 16px;
line-height: 40px;
text-align: center;
}

/*resolucion de 360 */

@media screen and (max-width: 360px) {

.header{
width: 100%;
height: 400px;
background-image: url("./Imágenes/Fondo3.png");
background-size:cover;

}

.btn_menu{
display: block;
}

.js .grupo_menu{
max-height: 0;
overflow:hidden;
transition: max-height .5s;
position: absolute;
top: 67px;
right: 30px;
background-color: #d03b40;
}

.js .grupo_menu ul li a{
padding: 20px 10px;
color: #ded6c0;
text-align: right;
}

.js .grupo_menu.menu-desplegado{
max-height: 300px;
}

.h1 h1{
font-size: 36px;
margin-top: 50px;
}
.barra_blanca{
margin-top: 10px;
}

.parrafo1{
margin: 0px 10px;
margin-top: 10px;
text-align: center;
font-size: 12px;
}

.cuerpo1{
width: 100%;
height: auto;

}

.div1{
width: 100%;
height: auto;
background-color: #d03b40;
padding: 50px;
color: #ded6c0;
display: block;
}

.div2{
width: 100%;
height: auto;
background-color: #ded6c0;
color: #d03b40;
padding: 50px;

}

.titulos{
font-size: 24px;
font-weight: bold;
text-align: center;
}
.texto1{
font-size: 16px;
text-align: center;
margin-top: 20px;
}

.background2{
width: 100%;
height: 100vh;
background-image: url("./Imágenes/fondo3.jpg");
background-repeat: no-repeat;
display: inline-block;
}

.texto_desayuno{
width: 100%;

}

.texto_desayuno h2{
text-align: center;
color: white;
font-size: 34px;
font-weight: bold;
margin-top: 80px;
}

.barra_blanca2{
width: 100%;
padding: 20px;

}
.barra_blanca2 img{
display: block;
margin: auto;
margin-top: 120px;
}

.parrafo2{
width: 100%;
text-align: center;
color: white;
font-size: 16px;
margin-top: 160px;
}
.parrafo2 p{
margin: 0 25px;
font-size: 16px;
text-align: center;
color: white;
}

.boton{
width: 100%;
position: absolute;
text-align: center;
margin-top: 470px;
}

.boton a{
color: white;
font-size: 14px;
padding: 10px;
border: 2px solid;
text-decoration: none;
}

.pie{
width: 100%;
height: auto;
padding: 20px;
margin-top: 10px;
}

.contenedor1{
width: 100%;
}

.contenedor2{
width: 100%;
}

.contenedor3{
width: 100%;
}

.contenedor4{
width: 100%;
}

.img1{
width: 100%;
display: block;
margin: auto;
padding: 30px;
position: relative;
}
.img1 img{
margin: auto;
display: block;
}

.titulos2 h4{
display: block;
font-weight: bold;
font-size: 20px;
margin-top: 10px;
text-align: center;
}
.titulos2 p{
display: block;
font-size: 14px;
text-align: center;
margin-top: 10px;
}

.cuerpo2{
width: 100%;
height: auto;
}

.div3{

width: 100%;
height: 400px;
background-color: #ded6c0;
color: #d03b40;
padding: 40px;
display: block;
margin-top: 60px;

}

.div4{
width: 100%;
height: 400px;
background-color: #d03b40;
padding: 40px;
color: #ded6c0;
display: block;

}

.titulos{
font-size: 24px;
font-weight: bold;
text-align: center;
}
.texto1{
font-size: 16px;
text-align: center;
margin-top: 20px;
}

.fin{
width: 100%;
height: auto;
background-color: #18151a;
padding: 10px;

}

.fin h6{
color: white;
font-size: 16px;
line-height: 40px;
text-align: center;
}

JAVASCRIPT:

---------------------------------

/* Variables: cámbialas por los id y clase correspondiente */

/* id del enlace que despliega el menú */
var lanzador = "#boton_menu";

/* id del menú que será desplegado */
var desplegable = "#menu_desplejable";

/* clase (sin el punto) que muestra el menú */
var despliegaClase = "menu-desplegado";

/* A partir de aquí, puedes dejar el código tal cual */

/* declaramos las funciones */
function nav(){
var lanz = document.querySelector(lanzador);
lanz.addEventListener("click", despliegaMenu, false);
}

function despliegaMenu(e){
e.preventDefault();
var despl = document.querySelector(desplegable);
despl.classList.toggle(despliegaClase);
}

/* Agregamos la clase js a la etiqueta html para saber que JS está funcionando */
document.querySelector("html").classList.add("js");

/* ejecutamos la función principal */
nav();

Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 5
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 6
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 7
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 8
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 9
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 10
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 11
Me gusta
Pinterest
Guardar en favoritos

Otros proyectos de jegarcia810

1 comentario

Entra o únete Gratis para comentar

Entra Únete Gratis