He sudado mucho para conseguir finalizar el proyecto tal y como aparecía en los PSD.

Empecé con la pantalla de móvil, luego la del ordenador y finalmente hice la pantalla intermedia (para tablets) para que el código fuera responsive.

Aquí dejo un link con toda la carpeta del proyecto: https://www.mediafire.com/folder/nmmzl8t6vvwpn/Proyecto

Les dejo el HTML y CSS por si alguien tiene problemas con el proyecto y quiere mirar el mío :)

-------------------HTML----------------
<!DOCTYPE html>
<html>

<head>
<title> Curso Domestika</title>
<meta charset="utf-8">
<link rel="stylesheet" href="estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap');
</style>
</head>

<body>
<header>
<div class="caixa1" id="fotofons">
<div class="logo">
<img src="Imgs/Logo.png" alt="Cafe Oslo">
<a href="#menu" class="lanzador-menu" id="enlace-menu"><img src="Imgs/noun-menu-933312.svg"
id="hamburger"></a>
<div id="menu" class="navegacion">
<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="textos">
<h1>
RECIÉN HECHO, TODOS LOS DÍAS
</h1>
<hr id="barrota">
<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>
</header>
<div class="contenido">
<div class="intro">
<div class="caixa2">
<h2>VEN AL BRUNCH DE LOS DOMINGOS</h2>
<p id="sangria">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="caixa3">
<h2>CELEBRA TUS FIESTAS CON NOSOTROS</h2>
<p id="sangria">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="header">
<div class="paquet">
<h1>VEN A DESAYUNAR</h1>
<hr id="barrota">
<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="boto2">DESCUBRE NUESTROS PRODUCTOS</a>
</div>
</div>
<div class="productes">
<div class="producto" id="productoInicial">
<img src="Imgs/Icono1.png" class="rodona">
<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 class="producto" id="productoInicial">
<img src="Imgs/Icono2.png" class="rodona">
<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 class="producto" id="productoFinal">
<img src="Imgs/Icono3.png" class="rodona">
<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 class="producto" id="productoFinal">
<img src="Imgs/Icono4.png" class="rodona">
<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 class="contacte">
<div class="bloc1">
<h2>CONTACTA CON NOSOTROS</h2>
<p id="sangria">Si quieres hacer una reserva, tienes alguna sugerencia o tsimplemente quieres saludar,
escríbenos a:</p>
<p id="negreta">cafeoslo@cafeoslo.es</p>
</div>
<div class="bloc2">
<h2>¿SABES DÓNDE ESTAMOS?</h2>
<p id="sangria">C/ Mayor, 15</p>
<p>00000 Barcelona</p>
<p id="negreta">(Google Maps)</p>
</div>
</div>
</div>
<footer>
<p id="frase1">Septiembre 2015</p>
<p id="frase2">Todos los derechos reservados</p>
</footer>
<script src="javascript.js"></script>
</body>

</html>

------------------CSS----------------------
/* CSS RESET*/
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;
}

/*styles*/
body{
position: relative;
color: #3c3c3b;
font-family: 'Open Sans', sans-serif;
}

div{
text-align: center;
}

h1{
font-weight: 900;
font-size: 28px;
margin-top: 15px; /*Mirar què ficar-hi*/
margin-bottom: 10px;
}

h2{
font-weight: 900;
font-size: 24px;
margin-top: 15px;
margin-bottom: 10px;
line-height: 30px;
}

h3{
font-weight: 900;
font-size: 28px;
margin-top: 15px; /*Mirar què ficar-hi*/
margin-bottom: 10px;
}

p{
width: 100%;
font-size: 16px;
hyphens: auto;
line-height: initial;

}

ul{
padding: 0;
margin: 10px;
list-style: none;
}

li{
margin-top: 10px;
padding-bottom: 3px;
padding-top: 3px;
}

a{
color: #3c3c3b;
text-decoration: none;
font-weight: 400;
transition: 0.5s color;
}

a:hover{
color: #fff;
}

footer{
padding: 30px 16px 30px 16px;
background-color: #3c3c3b;
color: #f5f0ed;
}

.textos{
margin-top: 40%;
}

.logo img{
float: left;
}

.caixa1{
min-height: 465px;
padding: 16px;
background-size: cover;
background-image: url(Imgs/Fondo1.jpg);
object-fit: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
z-index: -1;
color: #f5f0ed;
}

.caixa2{
background-color: #d03b40;
box-sizing: border-box;
color: #f5f0ed;
padding: 50px 16px 50px 16px;
max-height: 280px;
}

.caixa3{
background-color: #ded6c0;
color: #d03b40;
padding: 50px 16px 50px 16px;
max-height: 280px;
}

.header{
max-height: 405px;
padding: 16px;
background-image: url(Imgs/Fondo2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: #f5f0ed;
position: relative;
}

.paquet{
margin-top: 22%;
margin-bottom: 22%;
margin-left: auto;
margin-right: auto;
}

.contentillo{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lanzador-menu{
text-decoration: none;
color: #fff;
padding: 8px;
background-color: #d03b40;
border-radius: 5px;
float: right;
margin-top: 10px;
}

.navegacion a{
display: block;
text-decoration: none;
}

.boto2{
display: block;
text-decoration: none;
font-size: 14px;
border: 3px solid #f5f0ed;
margin-top: 30px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
color: #f5f0ed;
}

.rodona{
width: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}

.producto{
padding: 40px 16px 0px 16px;
text-align: left;
}

#productoFinal{
padding: 40px 16px 40px 16px;
text-align: left;
}

.bloc1{
padding: 65px 16px 65px 16px;
background-color: #ded6c0;
color: #d03b40;
max-height: 280px;
}

.bloc2{
padding: 65px 16px 65px 16px;
background-color: #d03b40;
color: #f5f0ed;
max-height: 280px;
}

#barrota{
width: 90px;
margin-top: 20px;
margin-bottom: 30px;
border-top: 1px solid;
}

#sangria{
margin-top: 20px;
}

#negreta{
font-weight: 700;
}

#hamburger{
width: 20px;
}
/*MediaQueries*/
@media screen and (max-width:600px){
.js .navegacion{
max-height: 0;
overflow: hidden;
transition: max-height .5s;
position: absolute;
top: 43px;
left: 30px;
right: 30px;
background-color: #d03b40;
border-radius: 10px;
}

.js .navegacion a{
padding: 5px 10px;
color: #f5f0ed;
}

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

@media screen and (min-width:601px) and (max-width: 1100px){
h1{
font-size: 40px;
margin-top: 0px;
margin-bottom: 0px;
width: 450px;
margin-left: auto;
margin-right: auto;
}

h2{
font-size: 26px;
margin-top: 0px;
margin-bottom: 0px;
width: 350px;
margin-left: auto;
margin-right: auto;
}

h3{
font-size: 22px;
margin-left: auto;
margin-right: auto;
}

p{
margin-left: auto;
margin-right: auto;
width: 550px;
}

.js .navegacion{
max-height: 0;
overflow: hidden;
transition: max-height .5s;
position: absolute;
top: 43px;
left: 30px;
right: 30px;
background-color: #d03b40;
border-radius: 10px;
}

.js .navegacion a{
padding: 5px 10px;
color: #f5f0ed;
}

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

footer{
padding: 0px;
float: left;
min-height: 150px;
width: 100%;
position: relative;
}

footer p{
position:absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 25px;
}

.caixa1{
position: relative;
}

.textos{
margin-top: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
float: left;
}

.caixa2{
min-height: 250px;
width: 100%;
box-sizing: border-box;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.caixa3{
min-height: 250px;
width: 100%;
box-sizing: border-box;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.caixa2 p{
width: 415px;
}

.caixa3 p{
width: 415px;
}

.header{
min-height: 550px;
padding: 0px;
position: relative;
width: 100%;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.productes{
padding-left: 25px;
padding-right: 25px;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.producto{
padding: 0px;
box-sizing: border-box;
min-height: 200px;
margin-top: 10px;
margin-bottom: 30px;
position: relative;
}

.producto p{
width: 750px;
}

#productoFinal{
padding: 0px;
margin-bottom: 40px;
}

#productoInicial{
padding: 0px;
margin-top: 40px;
}

.rodona{
width: 110px;
display: block;
float: left;
margin-right: 20px;
margin-left: 40px;
margin-bottom: 40px;
}
.contacte{
float: left;
width: 100%;
}

.bloc1{
padding: 0px;
min-height: 250px;
float: left;
width: 100%;
box-sizing: border-box;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.bloc2{
padding: 0px;
min-height: 250px;
float: left;
width: 100%;
box-sizing: border-box;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.bloc1 p{
width: 450px;
}

.paquet{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 0px;
}

.paquet p{
width: 525px;
}

.header a{
width: 250px;
margin-left: auto;
margin-right: auto;
}

#barrota{
margin-bottom: 30px;
margin-top: 30px;
}

#frase1{
position: absolute;
}

#frase2{
padding-left: 180px;
}

}

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

h1{
font-size: 44px;
margin-top: 0px;
margin-bottom: 0px;
width: 500px;
margin-left: auto;
margin-right: auto;
}

h2{
font-size: 28px;
margin-top: 0px;
margin-bottom: 0px;
width: 350px;
margin-left: auto;
margin-right: auto;
}

h3{
font-size: 24px;
margin-left: auto;
margin-right: auto;
}

p{
margin-left: auto;
margin-right: auto;
}

footer{
padding: 0px;
float: left;
min-height: 170px;
width: 100%;
position: relative;
}

footer p{
position:absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 25px;
}

.lanzador-menu{
display: none;
}

.navegacion{
position: relative;
float:right;
}

.navegacion li{
display: inline-block;
margin-right: 15px;

}

.navegacion a{
color: #f5f0ed;
font-weight: bold;
font-size: 14px;
}

.caixa1{
padding: 25px 0px 25px 25px;
min-height: 663px;
}

.textos{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 0px;
}

.textos p{
width: 525px;
}

.caixa2{
min-height: 400px;
width: 50%;
float: left;
box-sizing: border-box;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.caixa2 p{
width: 415px;
}

.caixa3{
min-height: 400px;
width: 50%;
float: left;
box-sizing: border-box;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.caixa3 p{
width: 415px;
}

.header{
min-height: 550px;
padding: 0px;
position: relative;
width: 100%;
float: left;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.productes{
padding-left: 25px;
padding-right: 25px;
}

.producto{
padding: 0px;
float: left;
box-sizing: border-box;
width: 50%;
min-height: 200px;
margin-top: 10px;
margin-bottom: 30px;
position: relative;
}

.producto p{
width: 550px;
}

#productoFinal{
padding: 0px;
margin-bottom: 60px;
}

#productoInicial{
padding: 0px;
margin-top: 60px;
}

.rodona{
width: 140px;
display: block;
float: left;
margin-right: 20px;
margin-left: 40px;
margin-bottom: 40px;
}
.contacte{
float: left;
width: 100%;
}

.bloc1{
padding: 0px;
min-height: 400px;
float: left;
width: 50%;
box-sizing: border-box;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.bloc2{
padding: 0px;
min-height: 400px;
float: left;
width: 50%;
box-sizing: border-box;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
}

.bloc1 p{
width: 450px;
}
.paquet{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 0px;
}

.paquet p{
width: 525px;
}

.header a{
width: 250px;
margin-left: auto;
margin-right: auto;
}

#barrota{
margin-bottom: 30px;
margin-top: 30px;
}

#frase1{
position: absolute;
}

#frase2{
padding-left: 180px;
}
}

My project for course: Introduction to Responsive Web Development with HTML and CSS

par Pau Juncà @paujnk

Autres projets réalisés par paujnk

Cucut: App de gestión temporal

paujnk

1 commentaire

htmlboy

Connectez-vous ou inscrivez-vous gratuitement pour commenter

Catégories

Domaines

Logiciel

Listes

Dernier article du blog

Broderie Digitale sur Photoshop: Art sur Foulards