Projeto do curso

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

  • 124
  • 2
  • 0
My project for course: Introduction to Responsive Web Development with HTML and CSS 2

Hello!

Hello!

this is the final project, here are the html and css codes:
<!DOCTYPE html>
<html>
<head>
<title>Cafeteria Oslo</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,
width=device-width">
<link rel="stylesheet" href="estilos.css">
<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@400;700&display=swap" rel="stylesheet">

</head>
<body>

<div class="Principal">

<a href="#menu" class="lanzador-menu" id="enlace-menu">Menú</a>

<span>
<img src="Logo.png"
alt="Logo Cafeteria Oslo" >
</span>
<h1> RECIÉN HECHO,<br>TODOS LOS DÍAS</h1>

<h2>_________</h2>

<p>Cupcake ipsum dolor sit amet. Lemon drops croissant sesame snaps cookie jelly beans tootsie roll muffin. Liquorice liquorice fruitcake tiramisu sesame snaps sugar plum lollipop gummi bears cookie.</p>

</div>

<div class="Secundario">

<h2>VEN AL BRUNCH DE <br>LOS DOMINGOS</h2>

<p>Sugar plum sugar plum pie I love gummi bears sweet roll bear claw. Jelly-o dessert cookie powder I love dessert wafer jelly-o candy. Danish ice cream dragée wafer topping topping icing chocolate chupa chups</p>

</div>

<div class="Secundario2">

<h2>CELEBRA TUS FIESTAS <br>CON NOSOTROS</h2>

<p>Soufflé shortbread chupa chups lollipop carrot cake lollipop gingerbread. Chocolate cake topping caramels cupcake chocolate bar apple pie. Cotton candy pastry fruitcake shortbread jelly-o gummi bears. </p>

</div>

<div class="Secundario3">

<h1>VEN A DESAYUNAR</h1>

<h2>_________</h2>

<p>Apple pie apple pie candy canes cookie I love tart. Candy canes muffin sweet roll jujubes tootsie roll. I love pudding jujubes bear claw pastry cupcake. Danish soufflé marshmallow chupa chups I love cookie apple pie.</p>

<h3>DESCUBRE NUESTROS PRODUCTOS</h3>
</div>

<div class="Pan">
<img src="Icono1.png" width="100" height="100">

<h2>PAN RECIÉN HECHO</h2>

<p>Soufflé marshmallow I love cheesecake bonbon. Toffee macaroon croissant macaroon sweet roll. Jelly brownie ice cream wafer sugar plum macaroon. Marzipan cake I love shortbread lollipop.</p>

</div>

<div class="Tarta">

<img src="Icono2.png" width="100" height="100">

<h2>TARTAS PARA CADA DÍA</h2>

<p>Icing cheesecake candy canes pastry pudding brownie. Icing chocolate bar I love sugar plum candy apple pie jelly-o topping I love. Chocolate lollipop cake wafer oat cake pie chocolate bar.</p>

</div>

<div class="Dulces">

<img src="Icono3.png" width="100" height="100">

<h2>PRUEBA NUESTROS DULCES</h2>

<p>Cake I love I love tart sweet tiramisu. Chocolate cake brownie chupa chups jelly beans caramels. Ice cream sugar plum tootsie roll topping halvah gummi bears candy cupcake biscuit. Dragée chocolate cake toffee lollipop cookie sesame.</p>

</div>

<div class="Eco">

<img src="Icono4.png" width="100" height="100">

<h2>INGREDIENTES ECOLÓGICOS</h2>

<p>Cotton candy jelly beans bear claw jelly candy powder marshmallow brownie. Jelly I love pudding liquorice brownie lollipop gummies cake liquorice. Gummi bears jujubes gingerbread sesame snaps jujubes icing tiramisu danish sugar plum.</p>

</div>

<div class="Contacto">

<h2>CONTACTA CON NOSOTROS</h2>

<p>Si quieres hacer una reserva, tienes alguna sugerencia o simplemente quieres saludar, escríbenos a:</p>
<a href="mailto:cafe.oslo@cafeoslo.es">
cafeoslo@cafeoslo.es</a>

</div>

<div class="Ubicacion">

<h2>¿SABES DONDE ESTAMOS?</h2>

<p>C/ Barceloma, España (Google Maps)</p>

</div>

<div class="Footer">

<p>Diciembre 2023. Todos los derechos reservados
</p>
</div>

<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>
<script src="javascript.js"></script>
</body>
</html>

---------
css

/*Reset CSS */

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;
}

/* General --------------*/
*{
box-sizing:border-box;
}
body{
font-family: 'Open Sans', sans-serif;
line-height: normal;

}

/*Estilos Tipográficos */

h1{
font-size: 44px;
font-weight: bold;
padding-bottom: 30px;

}

h2{
font-size: 28px;
font-weight: bold;
padding-bottom: 30px;
}

h3{
font-size: 14px;
font-weight: normal;
border-color: #f5f0ed;
border: 3px solid;
padding: 10px;
}

p{
font-size: 16px;
font-weight: normal;
padding-bottom: 20px;
}

.Principal{
color:#f5f0ed;
padding: 100px 5px;
min-width: 350px;
min-height: 500px;
text-align: center;
background-image: url(Fondo1.jpg);
background-position: center;
position: relative;
background-size: cover;
}

span{
position: absolute;
left: 10px;
top:10px;
}

.Secundario{
color: #ded6c0;
background-color: #d03b40;
min-height: 300px;
padding: 50px 20px;
min-width: 350px;
text-align: center;
}

.Secundario2{
color: #d03b40;
background-color: #ded6c0;
min-height: 300px;
padding: 50px 20px;
min-width: 350px;
text-align: center;
}
.Secundario3{
color:#f5f0ed;
min-height: 400px;
background-image: url(Fondo2.jpg);
padding: 60px 20px;
min-width: 350px;
text-align: center;
background-size: cover;
display: flex;
flex-direction: column;
}

.Pan,.Tarta,.Dulces,.Eco{
color: #241d1b;
padding: 50px 20px;
min-height: 300px;
min-width: 350px;
background-color:#f5f0ed;
text-align: center;
}

.Ubicacion{
color: #ded6c0;
background-color: #d03b40;
min-height: 300px;
padding: 50px 20px;
min-width: 350px;
text-align: center;
}

.Contacto{
color: #d03b40;
background-color: #ded6c0;
min-height: 300px;
padding: 50px 20px;
min-width: 350px;
text-align: center;
}
.Footer{
background-color:#241d1b;
color:#f5f0ed;
padding: 10px;
display: flex;
flex-direction: column;
}

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

.navegacion a{
display:block;
text-decoration: none;
color:#f5f0ed;
border-bottom: 1px solid #241d1b;
}

.lanzador-menu{
text-decoration: none;
color: #f5f0ed;
padding: 6px 10px;
background-color: #d03b40;
border-radius: 3px;
position: absolute;
right: 10px;
top:10px;
}

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

.js .navegacion a{
padding: 5px 10px;
color: #f5f0ed;
border-top: 1px solid rgba(255,255,255, .4)
}

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

/*Responsive*/

@media screen and (min-width:600px) and (max-width:900px){

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

.js .navegacion a{
padding: 5px 10px;
color: #f5f0ed;
border-top: 1px solid rgba(255,255,255, .4)
}

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

.Principal{
padding-left: 150px;
padding-right: 150px;
}
.Secundario{
width: 50%;
float: left;
min-height: 350px;
min-width: 300px;
}
.Secundario2{
width: 50%;
float: right;
min-height: 350px;
min-width: 300px;
}
.Secundario3{
width: 100%;
float:left;
padding-left: 100px;
padding-right: 100px;
}

.Pan{
padding-left: 100px;
padding-right: 100px;
display:flow-root;
}

.Tarta{
padding-left: 100px;
padding-right: 100px;
}
.Dulces{
padding-left: 100px;
padding-right: 100px;
}
.Eco{
padding-left: 100px;
padding-right: 100px;
}
.Contacto{
width: 50%;
float: left;
max-height: 150px;
min-width: 300px;
}

.Ubicacion{
width: 50%;
float: right;
max-height: 150px;
min-width: 300px;
}
.Footer{
width: 100%;
float: left;
}
}

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

.lanzador-menu{
display: none;
}
.navegacion{
position: absolute;
top: -30px;
}

.navegacion li{
display:inline-block;
margin-right: 15px;
}
.Principal{
padding-left: 200px;
padding-right: 200px;
}

.Secundario{
width: 50%;
float: left;
max-height: 300px;
}
.Secundario2{
width: 50%;
float: right;
max-height: 300px;
}
.Secundario3{
padding-left: 200px;
padding-right: 200px;
}

.Pan{
width: 50%;
float: left;
padding-left: 70px;
padding-right: 70px;
min-height: 450px;
}
.Tarta{
width: 50%;
float: left;
padding-left: 70px;
padding-right: 70px;
min-height: 450px;
}
.Dulces{
width: 50%;
float: left;
padding-left: 70px;
padding-right: 70px;
min-height: 450px;
}
.Eco{
width: 50%;
float: left;
padding-left: 70px;
padding-right: 70px;
min-height: 450px;
}

.Contacto{
width: 50%;
float: right;
min-width: 450px;
max-height: 250px;
}

.Ubicacion{
width: 50%;
float: left;
min-width: 450px;
max-height: 250px;
}
.Footer{
width: 100%;
float: left;
}

}

address link: https://drive.google.com/drive/folders/11FyNZFjxeFOnWhv2bDdUcXo2WtCD6kRV?usp=share_link
THANK YOU SO MUCH

Curtir
Pinterest
Salvar nos favoritos
0 comentários

Faça login ou cadastre-se Gratuitamente para comentar

Entrar Entre de Graça