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

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

En este link podéis ver mi proyecto en una página web real:
https://martaquintana.github.io/web/curso%20domestika/proyecto/proyecto.html

Aquí se puede ver todo el código fuente: https://github.com/martaquintana/web/tree/master/curso%20domestika/proyecto

Este proyecto me ha ayudado a organizarme mejor a la hora de escribir el css y entender las mediaquerys.

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;
}
/* anchura total = width */

/*Eliminar el subrayado de enlaces*/
a:link, a:visited, a:active {
text-decoration:none;
}

/*WEBFONTS*/
@font-face {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-style: normal;
}

/* Stylesheet */
body{
margin-left: auto;
margin-right: auto;
font-size: 16px;
font-family:'Open Sans';
color:#f5f0ed;
}
img{
height: 110px;
}

h1{
color:#f5f0ed;
font-size: 44px;
font-weight: bold;
text-align: center;
padding-top: 150px;
padding-bottom:40px;
}

h2{
font-size: 28px;
font-weight: bold;
line-height : 30px;
}

h3{
font-size: 24px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
margin-top: 40px;
line-height : 30px;
}

a{
color:#d03b40;
font-weight: bold;
font-size: 24px;
}

button{
font-size: 14px;
}

footer{
background-color: black;
padding: 40px;
}

p{
margin-top: 10px;
}

li{
margin-left: 15px;
}

.date{
display: inline-block;
width: 100%;

}

.div-0{
height: 650px;
background-image: url("../images/Fondo1.jpg");
background-size: cover;
background-position: center;
}
.div-4{
background-image: url("../images/Fondo2.jpg");
background-size: cover;
background-position: center;
}

.div-2,.div-3, .div-9, .div-10{
height: 350px;
padding: 40px;
text-align: center;
}

.line{
margin: 0px;
margin-left: auto;
margin-right: auto;
width: 120px;
border-bottom: 3px solid white;
}

.div-2, .div-10{
background-color:#d03b40;
color:#ded6c0;
}

.div-3, .div-9{
background-color: #ded6c0;
color: #d03b40;
}

.h3-info{
width: 90%;
}

.div-4{
height: 650px;
}

.icon{
text-align: center;
height: auto;
padding-top: 50px;
padding-bottom: 25px;

}

.center{
text-align: center;
}

.boton{
background: none;
border: 3px solid #f5f0ed;;
text-align:center;
color:#f5f0ed;
padding: 15px;
margin-top: 100px;
}

.boton:hover{
box-shadow: 0px 0px 10px #999;
}
.boton:active{
box-shadow: 0px 0px 10px #000;
}

.div-5, .div-6, .div-7,.div-8{
color:#241d1b;
height: 425px;
background-color: #f5f0ed;
}

.more-info{
width: 70%;
margin-left: auto;
margin-right: auto;
line-height : 25px;
}

.div-9,.div-10{
padding: 45px;}

.opt{
font-size: 16px;
color:#f5f0ed;
}

.opt:hover{
border-bottom: 3px solid white;
}
.opt:active{
border-bottom: 3px solid white;
}

.lanzador-menu{
position: absolute;
top: 40px;
right: 20px;
background-color: #d03b40;
width: 50px;
height: 50px;
}

#desayunar{
padding-top: 150px;
}

#maps{
color:#ded6c0;
font-weight: bold;
}
#punto{
display: none;
}

#menu{
float: right;
min-height:0px;
color:#f5f0ed;
position: absolute;
top:90px;
right: 20px;
}

#menu-img{
margin: 5px;
width: 40px;
height: 40px;
}

#logo{
padding-top: 30px;
padding-left: 15px;
width: 250px;
float: left;
height: 100px;
}

/* media for menu and when isn't movile size*/

@media screen and (min-width: 800px) {

.date{
display: inline-block;
width: 130px;
padding-top: 40px;
}
#punto{
display: inline-block;
}
.div-2,
.div-9,.div-5,.div-7{
width: 50%;
float: left;
}
.div-3,
.div-10,.div-6,.div-8{
width: 50%;
float: right;
}
.div-5,.div-6, .div-7, .div-8{
height: 330px;

}
.div-4{
margin-top: 450px;
}
.productos{
width: 70%;
float: left;
margin-top: 50px;
padding: 10px;

}
.icon{
width: 30%;
float: left;
}
h3{
width: 50%;
}
#intro{
padding-top: 250px;
}
.div-2,.div-3,.div-9,.div-10{
padding: 50px;
padding-left:55px;
padding-right:55px;
}
.div-2,.div-3{
height: 450px;
padding-top:70px;
}
}

@media screen and (min-width: 801px){
.lanzador-menu{
display: none;
}
.navegacion {
}
li{
display: inline;
width: 50%;
margin-bottom: 10px;
}
}

@media screen and (max-width: 800px) {
.js .navegacion{
max-height: 0;
overflow: hidden;
position: absolute;
top: 100px;
right:10px;
background-color: #d03b40;

}
.js li {
padding: 10px;
}

.js .navegacion.menu-desplegado{
max-height: 200px;
}
}

JAVASCRIPT:

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

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

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

/* 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();

HTML:

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Café Oslo</title>
</head>
<body>
<div class="div-0">
<div class="div-1">
<img id="logo" src="images/Logo.png" alt="Café Oslo logo">
<a href="#menu" id="enlace-menu" class="lanzador-menu"><img id="menu-img" src="images/menu.png" alt="Menú icon" height="10px" width="20px"></a>
</div>
<h1 id="intro">RECIÉN HECHO, <br> TODOS LOS DÍAS</h1>
<p class="line"></p>
<h3 class="h3">Chocolate cake chocolate cake pie candy canes chocolate cake bonbon.
I love marzipan liquorice I love cake chupa chups.
Pie danish macaroon ice cream ice cream. Bonbon sweet bonbon jelly beans jelly-o l love lollipop.
</h3>
</div>
<div class="div-2">
<h2>VEN AL BRUNCH DE LOS DOMINGOS</h2>
<h3 class="h3 h3-info">Sesame snaps icing chocolate bar.
I love donut powder sesame snaps.
Jelly-o topping caramels.
Sugar plum I love gummi bears.
</h3>
</div>
<div class="div-3">
<h2>CELEBRA TUS FIESTAS CON NOSOTROS</h2>
<h3 class="h3 h3-info">Bonboon sweet bonbon jelly beans jelly-o I love lollipop.
Cookie sesame snaps bear claw.
Cake dragée danish.
Powder I love liquorice macaroon.
</h3>
</div>
<div class="div-4">
<h1 id="desayunar">VEN A DESAYUNAR</h1>
<p class="line"></p>
<h3 class="h3">Bonbon topping I love sweet roll I love candy icing chocholate jelly.
Pie soufflé sweet. Apple pie bonbon caramels powder.
</h3>
<div class="center">
<button type="button" name="button" class="boton">DESCUBRE NUESTROS PRODUCTOS</button>
</div>
</div>
<div class="div-5">
<div class="icon">
<img src="images/Icono1.png" alt="">
</div>
<div class="more-info productos">

<h2>PAN RECIÉN HECHO</h2>
<p>Cupcake danish I love halvah bonbon icing donut. Sweet caramels ginger-bread bear claw jujubes chocolate
cake pudding sesame snaps bonbon.
Chocolate cake wafer pudding muffin wafer sweet roll I love chupa chups.
Apple pie jujubes ice cream sugar plum topping.
</p>
</div>
</div>
<div class="div-6">
<div class="icon">
<img src="images/Icono2.png" alt="">
</div>
<div class="more-info productos">

<h2>TARTAS PARA CADA DÍA</h2>
<p>Cookie cake jelly beans chocolate cake carrot cake croissant icing.
Caramels liquorice sesame snaps sugar plum I love bonbon. I love I love halvah.
</p>
</div>
</div>
<div class="div-7">
<div class="icon">
<img src="images/Icono3.png" alt="">
</div>
<div class="more-info productos">
<h2>PRUEBA NUESTROS DULCES</h2>
<p>Caramels liquorice sesame snaps sugar plum I love bonbon.
I love I love halvah. I love marzipan cake I love donut tiramisu pudding cotton candy liquorice.
Jelly beans chocolate brownie gummi bears
</p>
</div>
</div>
<div class="div-8">
<div class="icon">
<img src="images/Icono4.png" alt="">
</div>
<div class="more-info productos">
<h2>INGREDIENTES ECOLÓGICOS</h2>
<p>Carrot cake fruitcake cheesecake muffing lollipop croissant dessert halvah. Cake pie bear claw marshmallow marzipan cake.
Carrot cake I love cotton candy ice cram chupa chups donut. Lemon
</p>
</div>

</div>
<div class="div-9">
<h2>CONTACTA CON NOSOTROS</h2>
<h3 class="h3 h3-info">Si quieres hacer una reserva, tienes alguna sugerencia o
simplemente quieres saludar,escríbenos a:
</h3>
<a href="mailto:cafeoslo@cafeoslo.es">cafeoslo@cafeoslo.es</a>
</div>
<div class="div-10">
<h2>¿SABES DÓNDE ESTAMOS?</h2>
<h3>C/Mayor,15<br>00000 Barcelona</h3>
<a href="#" id="maps">(Google Maps)</a>
</div>
<footer>
<span class="date">Septiembre 2015</span><span id="punto"> · </span> <span> Todos los derechos reservados</span>
</footer>

<ul id="menu" class="navegacion">
<li>
<a class ="opt" href="#">EL ESPACIO</a>
</li>
<li>
<a class ="opt" href="#">PRODUCTOS</a>
</li>
<li>
<a class ="opt" href="#">OFERTAS</a>
</li>
<li>
<a class ="opt" href="#">RESERVAS</a>
</li>
<li>
<a class ="opt" href="#">CONTACTO</a>
</li>
</ul>
</div>
<script src="javascript.js"type="text/javascript"></script>
</body>
</html>