My project for course: Introduction to Responsive Web Development with HTML and CSS
van Pau Juncà @paujnk
- 146
- 2
- 1
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;
}
}
1 opmerking
htmlboy
Docent PlusGoed werk! Heel erg bedankt voor het volgen van de cursus! :-)
Origineel weergeven
Origineel verbergen
Log in of doe gratis mee om te reageren