Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS
di Jesús Alexander Martinez Muñoz @billyvvm
- 106
- 2
- 1
<!DOCTYPE html>
<html lang="es">
<head>
<title>Proyecto Final HTML and CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="proyectofinal.css">
<meta name="viewport" content="width=divice-width, initial-scale=1,0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;800&display=swap');
</style>
</head>
<body>
<header>
<div class="contenido">
<div class="logo">
<img class="img" src="Imágenes/Logo.png">
<a href="#menu" class="lanzador-menu" id="enlace-menu"><img src="Imágenes/menu.png" id="hamburguesa"></a>
</div>
<div id="menu" class="navegacion">
<ul class="lista">
<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="cont">
<h1>RECIÉN HECHO, TODOS LOS DÍAS</h1>
<div class="line">
<hr>
</div>
<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 . Bombon sweet bonbon jelly beans
jelly-o I love lollipoop.
</p>
</div>
</div>
</header>
<div class="contenidos">
<div class="uno">
<h3>VEN AL BRUNCH DE LOS DOMINGOS</h3>
<P>Sasame snaps icing chocolate bar. I love donut powder sesame snaps. Jelly-o topping caramels. Sugar plum love gummi bears .
</P>
</div>
<div class="dos">
<h3>CELEBRA TUS FIESTAS CON NOSOTROS</h3>
<P>Bonbon sweet bonbon jelly beans jel-ly-o I love lollipop. Cookie sesame snaps bear claw. Cake dragée danish. Powder I love liquorice macaroon .
</P>
</div>
</div>
<div class="contenido-enlace">
<div class="contenido-enlace-letras">
<h2>VEN A DESAYUNAR</h2>
<div class="line2">
<hr>
</div>
<P>Bonbon topping I love sweet roll I love candy icing chocolate jelly. Pie soufflé sweet. Apple pie bonbon caramels powder.</P>
<a href="#">DESCUBRE NUESTROS PRODUCTOS</a>
</div>
</div>
<section id="sección">
<div class="section">
<div class="sect-one">
<div class="sect-one-inside">
<div class="imgg">
<img src="Imágenes/Icono1.png" alt="ico.1">
</div>
<h3>PAN RECIÉN HECHO</h3>
<p>Cupcake danish I love halvah bonbon icing donut. Sweet caramels gingerbread bear claw jujubes chocolate cake pudding seasame spanps bonbon. Chocloate cake wafer pudding wafer sweet roll I love chupa chups. Apple pie jujubes ice cream sugar plum topping.</p>
</div>
<div class="sect-two">
<div class="sect-two-inside">
<div class="imgg">
<img src="Imágenes/Icono2.png" alt="ico.2">
</div>
<h3>TARTAS PARA CADA DÍA</h3>
<p>Cooie cake jelly beans chocolate cake carrot cake croissant icing. Caramels liquirice sesame snaps sugar plum I love bonbon. I love I love halvah.</p>
</div>
<div class="sect-tree">
<div class="sect-tree-inside">
<div class="imgg">
<img src="Imágenes/Icono3.png" alt="ico.3">
</div>
<h3>PRUEBA NUESTROS DLCES</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 class="sect-four">
<div class="sect-four-inside">
<div class="imgg">
<img src="Imágenes/Icono4.png" alt="ico.4">
</div>
<h3>INGREDIENTES ECOLÓGICOS</h3>
<p>Carrot cake fruitcake cheesecake muffin lollipop croissant dessert halvah. Cake pie bear claw marsh-
mallow marzipan cake. Carrot cake I love cotton candy ice cream chupa chups donut. Lemon</p>
</div>
</div>
</section>
<div class="section-tres">
<div class="section-tres-uno">
<div class="title">
<h3>CONTACTA CON NOSOTROS<h3>
</div>
<p>
Si quieres hacer una reserva, tienes alguna sugerencia o<br> simplemente saludar, escribe a:<br>
<strong><a href="#">cafeoslo@cafeoslo.es</a></strong>
</p>
</div>
<div class="section-tres-dos">
<div class="title">
<h3>¿SABES DÓNDE ESTAMOS?<h3>
</div>
<p>
C/ Mayor, 15 <br>
00000 Barcelona <br>
(Google Maps)
</p>
</div>
</div>
<footer>
<div class="footer">
<p>Marzo 2022</p>
<span>Todos los derechos reservados</span>
</div>
</footer>
<script src="javascript.js"></script>
</body>
</html>
layout--------- ----------------------CSS-------------
/* medidas universales*/
*{
box-sizing: border-box;
padding: 0px auto;
margin: 0px auto;
}
/* estilos generales del documento*/
body{
font-size: 16px;
background-color: #f5f0ed;
color: white;
position: relative;
font-family: 'Open Sans', sans-serif;
margin-top: 0px;
}
/* header-contenido-principal/////////////////////////////////////////////////////*/
.contenido{
padding: 16px;
width: 100% auto;
height: 30em;
background-size: cover;
background-image: url("Imágenes/Fondo1.jpg");
background-attachment: contain;
background-repeat: no-repeat;
background-position: center;
}
header img{
width: 100% auto;
margin: 5px 0px 0px 10px;
}
.lanzador-menu{
float: right;
text-decoration: none;
background-color: #d03b40;
margin-top: 10px;
margin-right:20px;
border-radius: 5px;
text-align: center;
}
#hamburguesa{
width: 40px;
margin: 3px 5px -3px 5px;
}
.navegacion a{
display: block;
color: white;
border-bottom: 1px solid white;
text-decoration: none;
}
.navegacion li{
list-style: none;
}
header h1{
font-size: 28px;
text-align: center;
margin-top: 60px;
margin-bottom: 20px;
width: 100% auto;
font-weight: 800;
}
header p{
text-align: center;
margin-top: 17px;
margin-bottom: 50px;
padding: 20px;
line-height: initial;
font-size: 17px;
color: #f5f0ed;
font-weight: 500;
}
hr{
width: 20%;
height: 2px;
color: white;
}
.line{
max-width: 600px;
}
.cont h1{
width: 100% auto;
max-width: 500px;
}
.cont p{
width: 100% auto;
max-width: 800px;
}
/* seccion-uno///////////////////////////////////////////////////////*/
.contenidos{
width: 100% auto;
text-align: center;
}
.contenidos h3{
font-size: 24px;
margin-top: 80px;
max-width: 400px;
padding: 10px;
}
.contenidos p{
max-width: 600px;
margin-top: 10px;
padding: 10px;
}
.uno{
color: #ded6c0;
background-color: #d03b40;
height: 20em;
overflow: hidden;
}
.dos{
background-color: #ded6c0;
height: 20em;
overflow: hidden;
color: #d03b40;
}
/* contenido-segundario-enlace//////////////////////////////////////////////*/
.contenido-enlace{
width: 100% auto;
height: 30em;
background-image: url("Imágenes/Fondo2.jpg");
background-size: cover;
background-attachment: contain;
background-position: center;
text-align: center;
padding: 10px;
overflow: hidden;
}
.contenido-enlace h2{
margin-top: 150px;
font-size: 28px;
}
.contenido-enlace hr{
width: 20%;
margin-top: 15px;
}
.line2{
max-width: 500px;
}
.contenido-enlace p{
margin-top: 20px;
margin-bottom: 55px;
color: #f5f0ed;
}
.contenido-enlace a{
text-decoration: none;
color: #f5f0ed;
border: 2px #f5f0ed solid;
padding: 16px;
font-size: 14px;
}
.contenido-enlace a:hover{
background-color: #d03b40;
}
/*section-dos//////////////////////////////////////////////////////////*/
.section{
width: 100% auto;
padding: 10px;
color: #3c3c3b;
text-align: center;
}
.section img{
width: 120px;
height: 120px;
position: center;
padding: 5px;
margin-right: 6px;
}
.section p{
text-align: left;
font-size: 16px;
margin-bottom: 20px;
padding: 10px;
}
.section h3{
text-align: left;
font-size: 24px;
margin-top: 0px;
margin-left: 10px;
}
.sect-tree-inside,
.sect-four-inside,
.sect-one-inside,
.sect-two-inside{
overflow: hidden;
}
.sect-one-inside{
margin-top: 20px;
}
/*Section-tres/////////////////*/
.section-tres{
width: 100% auto;
text-align: center;
}
.section-tres-uno a{
color: #d03b40;
text-decoration: none;
}
.section-tres h3{
font-size: 24px;
margin-top: 100px;
}
.section-tres p{
margin-top: -80px;
margin-right: 20px;
margin-left: 20px;
font-size: 16px;
margin-bottom: 5px;
}
.section-tres-uno{
height: 20em;
overflow: hidden;
background-color: #ded6c0;
color: #d03b40;
}
.section-tres-dos{
height: 20em;
overflow: hidden;
background-color: #d03b40;
color: #ded6c0;
}
.title h3{
max-width: 300px;
}
/* footer*/
.footer{
width: 100% auto;
background-color: #241d1b;
padding: 10px;
overflow: hidden;
height: 6em;
}
.footer p{
font-size: 16px;
margin: 20px 0px 0px 10px;
}
.footer span{
margin-left:10px;
padding-bottom: 20px;
}
/*media///////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 803px){
.js .navegacion{
max-height: 0;
overflow: hidden;
transition: max-height .5s;
position: absolute;
top: 70px;
left: 140px;
right: 35px;
background-color: #d03b40;
}
.js .navegacion a{
padding: 5px 10px;
color: white;
border-top: 1px solid rgba(255, 255, 255, .4);
margin-left: -40px;
font-size: 16px;
}
.js .navegacion.menu-desplegado{
max-height: 400px;
}
}
@media screen and (min-width: 801px){
.section-tres-uno,
.section-tres-dos{
float: left;
width: 50%;
}
.footer p, span {
display: inline-block;
margin-top: 30px;
}
}
@media screen and (min-width: 500px){
.imgg img{
width: 120px;
height: 120px;
float: left;
}
.imgg{
float: left;
width: 120px;
height: 10em;
margin-right: 10px;
}
.sect-one-inside{
margin-top: 40px;
}
}
@media screen and (min-width: 802px){
.sect-one-inside,
.sect-two-inside,
.sect-tree-inside,
.sect-four-inside{
float: left;
width: 50%;
height: 16em;
}
.sect-one-inside,
.sect-two-inside{
margin-top: 40px;
}
.imgg{
height: 15em;
}
}
@media screen and (min-width: 800px ){
.uno, .dos{
float: left;
width: 50%;
}
}
@media screen and (min-width: 798px){
.lanzador-menu{
display: none;
}
.navegacion ul{
float: right;
margin-top: -30px;
}
.navegacion ul li{
display: inline-block;
}
.navegacion a{
display: block;
color: white;
font-size: 12px;
font-weight: 400px;
border: none;
padding-left: 10px;
}
}
@media screen and (min-width: 360px){
header h1{
font-size: 33px;
}
}
@media screen and (min-width: 416px){
header h1{
font-size: 38px;
}
}
@media screen and (min-width: 478px){
header h1{
font-size: 44px;
}
}
/* alturas texto*/
1 commento
htmlboy
Insegnante PlusBel lavoro! Congratulazioni e grazie mille per aver seguito il corso! :-)
Vedi originale
Nascondi originale
Accedi o iscriviti gratuitamente per commentare