Pagina Web de "Café Oslo" - Trabajo Final con HTML y CSS
por Gastón Ariel Fauret Caceres @gastonfauret
- 218
- 4
- 0
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Café Oslo - Una experiencia de sabor</title>
<link rel="stylesheet" href="proyecto.css">
</head>
<body>
<div class="portada">
<div class="logo"></div>
<a href="#" class="contacto">CONTACTO</a>
<a href="#" class="reservas">RESERVAS</a>
<a href="#" class="ofertas">OFERTAS</a>
<a href="#" class="productos">PRODUCTOS</a>
<a href="#" class="espacio">EL ESPACIO</a>
<p>RECIEN HECHO,<br>
TODOS LOS DIAS</p>
<div class="linea" id="lineaDiv"></div>
<p1>Chocolate cake chocolate cake pie candy canes chocolate cake<br>
bonbon. I love marzipan liquorrice I love cake chupa chups. pie danish<br>
macaroon ice cream. Bombon sweet bonbon jelly beans<br>
jelly-o I love Lollipop</p1>
</div>
<div class="CuadroIzquierdo">
<p2>VEN AL BRUNCH DE<br>
LOS DOMINGOS</p2>
<p3>Sesame icing chocolate bar. I love donut powder<br>
sesame snaps. Jolly-o toppings caramel. Sugar plum I<br>
love gummy bears</p3>
</div>
<div class="CuadroDerecho">
<p4>CELEBRA TUS FIESTAS<br>
CON NOSOTROS</p4>
<p5>Bonbon sweet bonbon jelly beans jelly-o i love lollipop<br>
cookie sesame snaps bear claw. Cake dragee danish<br>
powder I love Macaroon.</p5>
</div>
<div class="segundaportada">
<p6>VEN A DESAYUNAR</p6>
<div class="LineaDivisoria"></div>
<p7>Bonbon topping I love sweet roll I love candy icing chocolate jelly. Pie<br>
souffle sweet. Apple pie bonbon caramels powder.</p7>
<div class="Boton">
<a href="#" class="link">DESCUBRE NUESTROS PRODUCTOS</a></div>
</div>
<div class="ContPan">
<div class="IconoPan"></div>
<p8>PAN RECIEN HECHO</p8>
<p9>Nuestros panes son elaborados de manera artesanal<br>
por nuestros experimentados panaderos, para traerte<br>
la mejor calidad de panificados cada dia. Podes<br>
entre pan tradicional, integral, de salvado o gluten<br>
free.</p9>
</div>
<div class="ContCupcake">
<div class="IconoCupcake"></div>
<p10>PRUEBA NUESTROS DULCES</p10>
<p11>Tambien puedes disfrutar de nuestros productos<br>
dulces. Tenemos gran variedad de delicios para tu<br>
disfute. Puedes deleitar de Cupcakes de fresa, banana<br>
y pera. Proximamemte pasteleria vegana y sin gluten<br>
apto celiacos</p11>
</div>
<div class="ContTarta">
<div class="IconoTarta"></div>
<p12>TARTAS PARA CADA DIA</p12>
<p13>En Café Oslo preparamos las tartas mas artesanales<br>
para que pruebes. Tenemos la receta del pie americano<br>
de la abuela traida desde Winsconsin, donde nacio el<br>
tipico pie Estadoundense. Tenemos de muchos sabores.<br>
Todos los miercoles, 2x1 de Pie a eleccion.</p13>
</div>
<div class="ContTrigo">
<div class="IconoTrigo"></div>
<p14>INGREDIENTES ECOLOGICOS</p14>
<p15>Toda nuestra materia prima proviene del Huerta<br>
organica denominada "La Granja Feliz", unicada en el<br>
en el cuartel Quinto de nuestra localidad a solo 3Km.<br>
Todos los ingredientes son cosechados de manera<br>
organica y sin sufrimiento animal.</p15>
</div>
<div class="CuadroIzquierdo2">
<p16>CONTACTA CON<br>
NOSOTROS</p16>
<p17>Si quieres hacer una reserva, tienes alguna sugerencia<br>
o simplemente quieres saludarnos, escribenos a:</p17>
<a href="mailto:cafeoslo@cafeoslo.com" class="emailoslo">Cafeoslo@cafeoslo.com</a>
</div>
<div class="CuadroDerecho2">
<p18>¿SABES DONDE<br>
ESTAMOS?</p18>
<a href="https://goo.gl/maps/R8SVH6QPy8tqW2Ec9" class="ubicacion">Calle Tucuman 314<br>
Benito Júarez, Buenos Aires<br>
Argentina</a>
</div>
<div class="final">
<p19>Noviembre 2021 - Todos los derechos reservados</p19>
</div>
</body>
</html>
Archivo CSS:
*{
box-sizing: border-box;
background-color: black;
}
/* Portada */
div.portada{
width: 1240px;
height: 663px;
border-color: white;
background-image: url(Fondo1.jpg);
margin-left: auto;
margin-right: auto;
}
/* Logo Oslo */
div.logo{
display: inline-block;
position: relative;
background-image: url(Logo.png);
margin-left: 25px;
width: 160px;
height: 42px;
background-color: transparent;
margin-top: 25px;
}
/* Asignacion de Tipografia */
@font-face{
font-family: OpenSans;
src:url(Tipografia/OpenSans-Bold.ttf)
format("truetype");
font-weight: bold;
font-style:normal;
src:url(Tipografia/OpenSans-Regular.ttf)
format("truetype");
font-weight:lighter;
font-style:normal;
}
/* Enlaces en Linea */
a{
display: inline-block;
position: relative;
font-family: OpenSans;
font-weight: bold;
color: white;
text-decoration: none;
font-size: 15px;
padding: 7px;
padding-right: 20px;
background-color: transparent;
margin-right: 25px;
margin-top: 20px;
}
a.productos{float:right}
a.ofertas{float:right}
a.reservas{float:right}
a.espacio{float: right}
a.contacto{float:right}
/* Titulo Principal */
p{
font-family: OpenSans;
color: white;
font-weight: bold;
text-align: center;
font-size: 40px;
margin-top: 180px;
background-color: transparent;
}
/* Linea Divisoria */
.linea {
display: inline-block;
width: 80px;
height: 3px;
background: red;
color: white;
margin-top: 15px;
margin-bottom: 15px;
}
#lineaDiv {
position: absolute;
left: 634px;
top: 370px;
background: white;
}
/* Titulo Secundario */
p1{
display: inline-block;
font-family: OpenSans;
font-size: 15px;
color: white;
background-color: transparent;
font-weight: lighter;
text-align: center;
margin-left: 30%;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
div.portada{
width: 410px;
height: 500px;
}
div.logo{
margin-left: 140px;
margin-top: 10px;
display: block;
}
a.contacto,
a.reservas,
a.ofertas,
a.productos,
a.espacio{
font-size: 11px;
margin-top: 35px;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
margin-left: 0px;
}
p{
font-size: 30px;
margin-top: 100px;
}
div#lineaDiv{
display: inline-block;
margin-left: -350px;
margin-top: -112px;
}
p1{
font-size: 15px;
margin-left: 15px;
margin-right: 15px;
margin-top: 25px;
}
}
/* Cuadro Izquierdo */
.CuadroIzquierdo{
width: 619px;
height: 400px;
background-color: tomato;
margin-left: 45px;
float: left;
}
p2{
display: inline-block;
font-family: OpenSans;
text-align: center;
color:bisque;
font-weight: bold;
background-color: transparent;
margin-left: 35%;
font-size: 20px;
margin-top: 22%;
}
p3{
display: inline-block;
font-family: OpenSans;
text-align: center;
color: bisque;
background-color: transparent;
font-weight: lighter;
margin-left: 120px;
margin-top: 20px;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.CuadroIzquierdo{
width: 410px;
height: 200px;
margin-left: 77px;
}
p2{
font-size: 20px;
margin-left: 115px;
margin-top: 35px;
}
p3{
font-size: 13px;
margin-left: 50px;
margin-right: 15px;
}
}
/* Cuadro Derecho */
.CuadroDerecho{
width: 618px;
height: 400px;
background-color: bisque;
float: right;
margin-right: 45px;
}
p4{
display: inline-block;
font-family: OpenSans;
text-align: center;
color:tomato;
font-weight: bold;
background-color: transparent;
margin-left: 35%;
font-size: 20px;
margin-top: 22%;
}
p5{
display: inline-block;
font-family: OpenSans;
text-align: center;
color: tomato;
background-color: transparent;
font-weight: lighter;
margin-left: 120px;
margin-top: 20px;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.CuadroDerecho{
width: 410px;
height: 200px;
float:left;
margin-left: 77px;
}
p4{
font-size: 20px;
margin-left: 100px;
margin-top: 35px;
}
p5{
font-size: 13px;
margin-left: 50px;
margin-right: 15px;
}
}
/* Segunda Portada */
div.segundaportada{
width: 1240px;
height: 549px;
border-color: white;
background-image: url(Fondo2.jpg);
margin-top: 400px;
margin-left: auto;
margin-right: auto;
}
/* Primer Titulo */
p6{
display: inline-block;
font-family: OpenSans;
color: white;
font-weight: bold;
text-align: center;
font-size: 40px;
margin-top: 14%;
background-color: transparent;
margin-left: 36%;
}
/* Linea Divisoria */
.LineaDivisoria{
width: 80px;
height: 3px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
background-color: white;
}
/* Segundo Titulo */
p7{
display: inline-block;
font-family: OpenSans;
font-size: 15px;
color: white;
background-color: transparent;
text-align: center;
margin-left: 390px;
font-weight: lighter;
}
/* Boton */
.Boton{
width: 250px;
height: 50px;
background-color: transparent;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
border: 2px solid white;
}
a.link{
position: absolute;
font-family: OpenSans;
font-size: 11px;
color: white;
background-color: transparent;
margin-top: 8px;
margin-left: 24px;
}
@media screen and (max-width: 700px){
div.segundaportada{
width: 410px;
height: 500px;
}
p6{
font-size: 30px;
margin-top: 100px;
margin-left: 70px;
}
.LineaDivisoria{
margin-top: 50px;
margin-bottom: 50px;
}
p7{
font-size: 15px;
margin-left: 15px;
margin-right: 15px;
margin-top: 0px;
}
.Boton{
margin-top: 55px;
}
}
/* Contenedor Pan */
.ContPan{
display: inline-block;
width: 410px;
height: 100px;
background-color: white;
margin-left: 45px;
margin-right: 0px;
}
/* Producto: Pan */
/* Tipografia */
/* Titulo */
p8{
position: absolute;
font-family: OpenSans;
font-weight: bold;
font-size: 20px;
color: black;
background-color: transparent;
margin-left: 30px;
margin-top: 50px;
}
/* Desarrollo */
p9{
position: absolute;
font-family: OpenSans;
font-size: 14px;
color: black;
background-color: transparent;
margin-top: 100px;
margin-left: 30px;
}
/* Icono Pan */
.IconoPan{
display: inline-block;
width: 173px;
height: 173px;
background-image: url(Icono1.png);
background-color: transparent;
margin-top: 35px;
margin-left: 25px;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.ContPan{
width: 410px;
height: 250px;
background-color: white;
margin-left: 77px;
float: left;
}
.IconoPan{
width: 60px;
height: 60px;
background-size: contain;
margin-top: 27px;
margin-left: 180px;
}
p8{
font-size: 16px;
margin-left: -100px;
margin-top: 110px;
}
p9{
font-size: 11px;
text-align: center;
margin-left: -170px;
margin-top: 145px;
}
}
/* Contenedor Cupcake */
.ContCupcake{
position: absolute;
display: block;
width: 619px;
height: 250px;
background-color: white;
margin-left: 45px;
float: left;
margin-top: 38px;
}
/* Producto: Cupcake */
/* Tipografia */
/* Titulo */
p10{
position: absolute;
font-family: OpenSans;
font-weight: bold;
font-size: 20px;
color: black;
background-color: transparent;
margin-left: 30px;
margin-top: 50px;
}
/* Desarrollo */
p11{
position: absolute;
font-family: OpenSans;
font-size: 14px;
color: black;
background-color: transparent;
margin-left: 30px;
margin-top: 100px;
}
/* Icono Cupcake */
.IconoCupcake{
display: inline-block;
width: 173px;
height: 173px;
background-image: url(Icono3.png);
background-color: transparent;
margin-top: 35px;
margin-left: 25px;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.ContCupcake{
width: 410px;
height: 250px;
background-color: white;
margin-left: 77px;
margin-top: 250px;
}
.IconoCupcake{
width: 60px;
height: 60px;
background-size: contain;
margin-top: 27px;
margin-left: 180px;
}
p10{
font-size: 16px;
margin-left: -132px;
margin-top: 110px;
}
p11{
font-size: 11px;
text-align: center;
margin-left: -170px;
margin-top: 145px;
}
}
/* Contenedor tarta */
.ContTarta{
display: inline;
width: 619px;
height: 250px;
background-color: white;
margin-right: 44px;
float: right;
}
/* Producto: Tarta */
/* Tipografia */
/* Titulo */
p12{
position: absolute;
font-family: OpenSans;
font-weight: bold;
font-size: 20px;
color: black;
background-color: transparent;
margin-left: 25px;
margin-top: 50px;
}
/* Desarrollo */
p13{
position: absolute;
font-family: OpenSans;
font-size: 14px;
color: black;
background-color: transparent;
margin-left: 25px;
margin-top: 100px;
}
/*Icono Tarta */
.IconoTarta{
display: inline-block;
width: 173px;
height: 173px;
background-image: url(Icono2.png);
background-color: transparent;
margin-top: 35px;
margin-left: 25px;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.ContTarta{
display: inline-block;
width: 410px;
height: 250px;
background-color: white;
margin-top: 250px;
margin-left: 20px;
}
.IconoTarta{
width: 60px;
height: 60px;
background-size: contain;
margin-top: 27px;
margin-left: 180px;
}
p12{
font-size: 16px;
margin-left: -100px;
margin-top: 110px;
}
p13{
font-size: 11px;
text-align: center;
margin-left: -170px;
margin-top: 145px;
}
}
/* Contenedor Trigo */
.ContTrigo{
display: inline-block;
width: 619px;
height: 250px;
background-color: white;
margin-right: 44px;
margin-left: 1000px;
float: right;
}
/* Producto: Trigo */
/* Tipografia */
/* Titulo */
p14{
position: absolute;
font-family: OpenSans;
font-weight: bold;
font-size: 20px;
color: black;
background-color: transparent;
margin-left: 25px;
margin-top: 50px;
}
/* Desarrollo */
p15{
position: absolute;
font-family: OpenSans;
font-size: 14px;
color: black;
background-color: transparent;
margin-left: 25px;
margin-top: 100px;
}
/* Icono Trigo */
.IconoTrigo{
display: inline-block;
width: 173px;
height: 173px;
background-image: url(Icono4.png);
background-color: transparent;
margin-top: 35px;
margin-left: 25px;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.ContTrigo{
width: 410px;
height: 250px;
background-color: white;
margin-left: 77px;
margin-top: 0px;
}
.IconoTrigo{
width: 60px;
height: 60px;
background-size: contain;
margin-top: 27px;
margin-left: 180px;
}
p14{
font-size: 16px;
margin-left: -140px;
margin-top: 110px;
}
p15{
font-size: 11px;
text-align: center;
margin-left: -170px;
margin-top: 145px;
}
}
/* Quinta Fila */
/* Cuadro Izquierdo */
.CuadroIzquierdo2{
display: block;
position: absolute;
width: 619px;
height: 400px;
background-color: bisque;
margin-left: 45px;
margin-top: 288px;
float: left;
border: 1px solid bisque;
}
/* Titulo Principal */
p16{
display: inline-block;
font-family: OpenSans;
text-align: center;
color:tomato;
font-weight: bold;
background-color: transparent;
margin-left: 36%;
font-size: 20px;
margin-top: 18%;
}
/* Desarrollo */
p17{
display: inline-block;
font-family: OpenSans;
text-align: center;
color: tomato;
background-color: transparent;
font-weight: lighter;
margin-left: 90px;
margin-top: 20px;
}
/* Email */
.emailoslo{
display: inline-block;
position: relative;
font-family: OpenSans;
color: blue;
font-size: 20px;
margin-left: 180px;
margin-top: 15px;
text-decoration: underline;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.CuadroIzquierdo2{
width: 410px;
height: 250px;
margin-left: 77px;
margin-top: 1250px;
}
p16{
font-size: 15px;
margin-left: -150;
margin-top: 50px;
}
p17{
font-size: 13px;
margin-left: 40px;
}
.emailoslo{
font-size: 15px;
margin-left: 115px;
}
}
/* Quinta Fila */
/* Cuadro Derecho */
.CuadroDerecho2{
position: absolute;
display: inline-block;
width: 618px;
height: 400px;
background-color: tomato;
margin-left: 209px;
margin-top: 500px;
float: right;
}
p18{
display: inline-block;
font-family: OpenSans;
text-align: center;
color:bisque;
font-weight: bold;
background-color: transparent;
margin-left: 40%;
font-size: 20px;
margin-top: 22%;
}
.ubicacion{
display: inline-block;
position: relative;
font-family: OpenSans;
color: blue;
font-size: 15px;
margin-left: 35%;
margin-top: 15px;
text-align: center;
text-decoration: underline;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.CuadroDerecho2{
display: block;
width: 410px;
height: 250px;
margin-left: 77px;
margin-top: 1000px;
}
p18{
font-size: 15px;
margin-top: 60px;
margin-left: 150px;
}
.ubicacion{
font-size: 13px;
margin-left: 115px;
margin-top: 20px;
}
}
/* Rectangulo Final */
.final{
display: inline;
position: relative;
width: 1237px;
height: 30px;
background-color:darkolivegreen;
margin-top: 400px;
float: left;
margin-left: 45px;
}
/* Derechos reservados */
p19{
display: inline-block;
font-size: 15px;
background-color:transparent;
font-family: Arial;
color:white;
margin-top: 9px;
margin-left: 15px;
}
/* Propiedades Responsive */
@media screen and (max-width: 700px){
.final{
width: 410px;
margin-top: 500px;
margin-left: 77px;
}
p19{
margin-left: 40px;
}
}
0 comentarios
Entra o únete Gratis para comentar