Abschlussprojekt

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

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

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Café Oslo - Inicio</title>
<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@300;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="cafe-oslo.css">
</head>
<body>
<div class="container">
<div class="header">
<div>
<div class="logo">
<img src="imagenes/Logo.png" alt="logo">
</div>
<div class="menu-movil">
<a href="#menu" id="enlace-menu"><img src="imagenes/navegacion.png" alt="menu"></a>
</div>
<div class="navegacion" id="menu">
<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>
<div class="centrado">
<h1>RECIÉN HECHO,<br> TODOS LOS DÍAS</h1>
<hr>
<p>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 I love lollipop. </p>
</div>
</div>
<div class="crema">
<div class="back-rojo">
<h2>VEN AL BRUNCH DE<br>LOS DOMINGOS</h2>
<p>Sesame snaps icing chocolate bar. I love donut powder sesame snaps. Jelly-o topping caramels. Sugar plum I love gummi bears.</p>
</div>
<div class="back-crema">
<h2>CELEBRA TUS FIESTAS<br>CON NOSOTROS</h2>
<p>Bonbon sweet bonbon jelly beans jelly-o I love lollipop. Cookie sesame snaps bear claw. Cake dragée danish. Powder I love liquorice macaroon.</p>
</div>
</div>
<div class="seccion centrado">
<h2>VEN A DESAYUNAR</h2>
<hr>
<p>Bonbon topping I love sweet roll I love candy icing chocolate jelly. Pie soufflé sweet. Apple pie bonbon caramels powder.</p>
<a href="#" class="btn">DESCUBRE NUESTROS PRODUCTOS</a>
</div>
<div class="micelanea">
<div class="varios">
<img src="imagenes/Icono1.png" alt="">
<div class="division">
<h3>PAN RECIÉN HECHO</h3>
<p>Cupcake danish I love halvah bonbon icing donut. Sweet caramels gingerbread 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="varios">
<img src="imagenes/Icono2.png" alt="">
<div class="division">
<h3>TARTAS PARA CADA DÍA</h3>
<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="varios">
<img src="imagenes/Icono3.png" alt="">
<div class="division">
<h3>PRUEBA NUESTROS DULCES</h3>
<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="varios">
<img src="imagenes/Icono4.png" alt="">
<div class="division">
<h3>INGREDIENTES ECOLÓGICOS</h3>
<p>Carrot cake fruitcake cheesecake muffin lollipop croissant dessert halvah. Cake pie bear claw marshmallow marzipan cake. Carrot cake I love cotton candy ice cream chupa chups donut. Lemon.</p>
</div>
</div>
</div>
<div class="crema">
<div class="back-rojo">
<h2>CONTACTA CON<br>NOSOTROS</h2>
<p>Si quieres hacer una reserva, tienes alguna sugerencia o tsimplemente quieres saludar, escríbenos a: cafeoslo@cafeoslo.es</p>
</div>
<div class="back-crema">
<h2>¿SABES DÓNDE<br>ESTAMOS</h2>
<p>C/ Mayor, 1500000<br>Barcelona<br>(Google Maps)</p>
</div>
</div>
<div class="pie">
<p>Septiembre 2015 · Todos los derechos reservados</p>
</div>
</div>

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

CSS

/* Reset */
*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {padding: 0; font-family: 'Open Sans', sans-serif; font-size: 16px; position: relative; margin: 0}
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: 300; line-height: 1.1;}
h1 {font-size: 30px;}
h2 {font-size: 24px;}
h3 {font-size: 24px}

/* Estilos moviles */
.container {max-width: 1240px; position: relative; margin: 0 auto;}
.centrado {text-align: center; padding: 2.3rem 0}
hr {width: 70px; margin-bottom: 1rem; margin-top: 1rem}
.header {background-color: black; color: white; background-image: url(imagenes/Fondo1.jpg); background-position: center; background-size: cover; padding: 1rem;}
.menu-movil {float: right; position: absolute; right:16px; top: 20px; }
.navegacion ul li{list-style: none;}
.navegacion a {
display: block;
text-decoration: none;
color: #fff;
border-bottom: 1px solid #fff;
}
.js .navegacion {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s;
transition: max-height .5s;
position: absolute;
top: 4px;
left: 90px;
right: 60px;
}
.js .navegacion a {
padding: 5px 10px;
color: #fff;
border-bottom: 1px solid rgb(255, 255, 255);
background-color: #ff4444;
-webkit-transition: .5s background-color;
transition: .5s background-color;
}
.js .navegacion a:hover {
background-color:darkred;
}
.js .navegacion.menu-desplegado{
max-height: 200px;
border-radius: 7px;
}
.back-rojo {background-color: #D1393B; color: #DED6BF; text-align: center; padding: 3rem 1.5rem}
.back-rojo p {margin-bottom: 0}
.back-crema {background-color: #DED6BF; color: #D1393B; text-align: center; padding: 2.3rem}
.back-crema p {margin-bottom: 0}
.crema {background-color: #DED6BF;}
.seccion {background-color: black; color: white; background-image: url(imagenes/Fondo2.jpg); background-position: center; background-size: cover; padding: 4rem 1rem}
.btn {padding: .6rem 1.5rem; border: 2px solid #fff}
a.btn {color: #fff;text-decoration: none; font-size: 14px;}
.micelanea {padding-bottom: 1em; background-color: #F5F0ED}
.varios {padding: 2em 1em 0; }
.varios img {width: 80px; padding-bottom: 1em; display: block; margin: 0 auto;}
.division p {color: #000; line-height: 1.5;}
.division p:hover {color: #7B7977}
.pie {background-color: #251D1B; color: #fff; margin: 0}
.pie p {margin: 0; padding: 1em;}

/* media Queris */
@media screen and (min-width: 800px) {
.header {padding: 30px;}
.menu-movil {display: none;}
.navegacion ul {padding-right: 14px}
.navegacion a {
color: #fff;
border-bottom: none;
}
.navegacion li {
display: inline-block;
padding-left: 1rem;
padding-top: 1rem;
}
.js .navegacion {
max-height: auto;
overflow:visible;
top: 0px;
right: 16px;
left: auto;
}
.js .navegacion a {
padding: 0 ;
color: #fff;
border-bottom: none;
background-color: rgba(0,0,0,0);
}
h1 {font-size: 44px;}
h2 {font-size: 28px;}
h3 {font-size: 24px}
.centrado p {width: 40%; margin: 0 auto;}
.centrado {padding: 10rem 0}
.back-rojo, .back-crema, .varios {display: inline-block; width: 49.7%;}
.back-rojo, .back-crema {padding: 55px 160px; vertical-align: top}
.varios img {width: 30%; display: inline-block; padding-right: 15px}
.division {display: inline-block; width: 69%; vertical-align: top}
.micelanea {margin: 0; padding: 30px;}
.pie {padding: 54px 30px}
.btn {display: inline-block; margin-top: 3rem;}
}
@media screen and (min-width: 1200px) {
.varios img {width: auto;}
.division {width: 65%;}
.micelanea {padding: 50px 30px}
}

Gefällt mir
Pinterest
In Favoriten speichern

Weitere Projekte von mpanduro

1 Kommentar

Melden Sie sich an oder melden Sie sich kostenlos an, um zu kommentieren

Einloggen Kostenlos beitreten