Projeto do curso

Mi Proyecto Web Responsive con HTML y CSS
Mi Proyecto Web Responsive con HTML y CSS

  • 232
  • 1
  • 0

¡Hola Javier!
Me gustaría agradecerte este curso tan didáctico, claro y práctico que nos has dado. Me ha ayudado mucho para poder entender los principios del método responsive. Reconozco que me ha costado un poco y he tenido la necesidad de revisar muchas veces tus videos, pero finalmente ya lo he terminado y estoy muy contenta de ello.

Muchas gracias,

Saludos,

Merce A.

Mi Proyecto Web Responsive con HTML y CSS 2
Mi Proyecto Web Responsive con HTML y CSS 3
Mi Proyecto Web Responsive con HTML y CSS 4
Mi Proyecto Web Responsive con HTML y CSS 5
Mi Proyecto Web Responsive con HTML y CSS 6
Mi Proyecto Web Responsive con HTML y CSS 10
Mi Proyecto Web Responsive con HTML y CSS 11

<!DOCTYPE html>
<html>

<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">
<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=Fjalla+One&family=Open+San
<link rel="stylesheet" href="style.css">
<title>Oslo Cafe</title>
<meta name="description" content="Oslo Cafe Website version 5.0">
<!-- Adaptar el viewport al movil, para evitar zoom out -->
</head>

<body>

<!--Seccion header con logo y navegacion MOBILE FIRST responsive mode-->
<div class="header" id="space">
<ul class="logo">
<img src="imagenes/logo.png" alt="logo">
</ul>
<a href="#menu" class="lanzador-menu" id="enlace-menu">
<i class="fa-solid fa-bars"></i>
</a>
<!--Seccion Hero con imagen de fondo -->
<div class="hero">
<!--<img src="imagenes/fondo1.jpg" alt="fresh bread"> -->
<h1>Fresh Bread Every day </h1>
<div class="line"></div>
<p class="bread">
Chocolate cake, chocolate cake pie, candy pie, chocolate cake bombon
</p>
</div>
</div>

<!--Seccion de dos columnas Brunch and Party -->
<div class="two-col">
<div class="col-a">
<h2>Come to Brunch
<br>on Sundays
</h2>
<p>
Sesame snaps. icing chocolate bar. I love donuts. powder sesame snap
</p>
</div>
<!--Seccion Celebrar fiestas con nosotros -->
<div class="col-b">
<h2>Come to celebrate
<br>your parties
</h2>
<p>
Bombon sweet bombon. Jelly beans surprise. Special Party lolipops. I
</p>
</div>
<div>

<!--Seccion Come to Breakfast -->
<div class="hero2">
<!--<img src="imagenes/fondo2.jpg" alt=""> -->

<h1>What about having breakfast at Oslo Cafe?</h1>
<div class="line"></div>
<p class="breakfast">
Bombon topping I love sweet roll, I love candy icing jelly. Pie
<br>
</p>
<br>
<p><a href="#prod" class="btn">Getting to know our products</a>
</p>
</div>

<!--Icons Section -->
<div class="icons" id="products">
<div class="row-a">
<!--1st row Bread + cakes-->
<div class="i-products-a" id="i-bread">
<img src="imagenes/icono1.png" alt="Freshly made bread">
<h3>Bread freshly made</h3>
<p>
Ginger bread . Poppins bread . Sweet bread . Banana brea
</p>
</div>

<!--Celda Cakes -->
<div class="i-products-b" id="i-cakes">
<img src="imagenes/icono2.png" alt="Cakes for every day">
<h3>Our daily cakes</h3>
<p>
Red velvet . Cheese cake . Brownies Dulce de Leche cake
</p>
</div>
</div>
<!--2nd row Sweets + Eco -->
<div class="row-b">
<div class="i-products-a" id="i-sweets">
<img src="imagenes/icono3.png" alt="Taste our Sweets">
<h3>Taste our sweets</h3>
<p>
Jelly beans. chocolate frogs . mashmellows .surprise jel
</p>
</div>
<!--Organic -->
<div class="i-products-b" id="i-organics">
<img src="imagenes/icono4.png" alt="Organic Ingredients">
<h3>Organic Ingredients</h3>
<p>
Gluten free. Brownies. Pavlova . Apple pie White . Carro
</p>
</div>
</div>
</div>

<!-- Contact section-->
<div class="two-col" id="reservations">
<div class="col-a">
<h2>Contact us</h2>
<p>
Do you have any questions? <br> We're here to help you. <br>
<a class="email" href="mailto:cafeoslo@cafeoslo.com">cafeosl

</p>
</div>
<!--Address -->
<div class="col-b" id="contact">
<h2>Where are we?</h2>
<p>
Carrer Major, 15 <br> 08040 Barcelona <br>
<a class="map" href="https://www.google.com/maps/place/Carre
</p>
</div>
</div>
<!--Footer Section -->
<div class="legal">
<p>Merce Alvarez - May 2022 - Copyright © FL, CatchingTime</p>
</div>
<!-- end footer -->
<!--Navegador -->
<ul id="menu" class="navegacion">
<li>
<a href="#space">Space</a>
</li>
<li>
<a href="#products">Products</a>
</li>
<li>
<a href="#offers">Offers</a>
</li>
<li>
<a href="#reservations">Reservations</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<!-- end Navegador -->
<script src="https://kit.fontawesome.com/6027545e49.js" crossorigin="ano
<script src="javascript.js"></script> -->
<!-- end page -->
</body>

</html>

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
/

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

a:link,
a:visited,
a:active {
text-decoration: none;
}
/* ESTILOS TIPOGRAFICOS ....... @Fonts*/

@font-face {
font-family: 'Open Sans', sans-serif;
src: url(tipografia/OpenSans-Regular.ttf), format(ttf), url(tipografia/Open
font-weight: normal;
font-style: normal;
}
/* ESTILOS GENERALES ..........*/

html {
scroll-behavior: smooth;
}

* {
box-sizing: border-box;
}

body {
background-color: #f5f0ed;
font-family: 'Open Sans';
font-weight: regular;
font-size: 1.3em;
margin-right: auto;
margin-left: auto;
}

h1 {
font-family: 'Open Sans';
font-weight: 800;
font-size: 2em;
text-transform: uppercase;
text-align: center;
color: #f5f0ed;
padding-top: 3.7em;
padding-bottom: 1.2em;
}

h2 {
font-family: 'Open Sans';
font-weight: 800;
font-size: 1.7em;
text-transform: uppercase;
text-align: center;
padding-top: 2em;
padding-bottom: 1.2em;
}

h3 {
font-family: 'Open Sans';
font-weight: 800;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
padding-top: 1em;
padding-bottom: 1.2em;
}

li {
background-color: #d03b40;
color: #f5f0ed;
transition: .5s background-color;
}

a {
font-family: 'Open Sans';
font-weight: bold;
font-size: .7em;
padding: .3em;
text-transform: uppercase;
transition: 0.5s color;
}

img {
max-width: 100%;
opacity: 1;
transition: 0.5s opacity;
}

.line {
width: 9.2em;
height: 0.23em;
border-bottom: 4px solid white;
align-items: center;
margin-left: auto;
margin-right: auto;
}

p {
padding-bottom: .3em;
}
/*
.js .navegacion.menu-desplegado {
background-color: #d03b40;
color: #f5f0ed;
}*/

.bread,
.breakfast {
color: #f5f0ed;
}

#menu {
color: #f5f0ed;
}

.two-col .col-a {
background-color: #d03b40;
}

.two-col .col-b {
background-color: #ded6c0;
}

.two-col .col-a p,
.two-col .col-a h2 {
color: #ded6c0;
text-align: center;
}

.two-col .col-b p,
.two-col .col-b h2 {
color: #d03b40;
text-align: center;
}

.two-col .col-a a {
color: #ded6c0;
font-weight: bold;
}

.two-col .col-b a {
color: #d03b40;
font-weight: bold;
}

.icons {
background-color: #f5f0ed;
color: #241d1b;
}

.legal {
background-color: black;
color: #ded6c0;
}
/* HEADER ................*/

.header {
width: 100%;
min-height: 100vh;
background-image: url("imagenes/fondo1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.logo {
display: inline-block;
background-color: transparent;
width: 30%;
background-size: contain;
justify-content: left;
padding-top: 0.5em;
padding-left: 1em;
}

.lanzador-menu {
position: absolute;
color: #ded6c0;
/* width: 50px;
height: 50px; */
background-color: #d03b40;
top: .5em;
right: 1.2em;
border-radius: .3em;
/* padding: .3em;*/
margin-right: .5em;
margin-top: .5em;
}

#menu {
position: absolute;
min-height: 0em;
float: right;
top: 3em;
right: 3em;
/* right: 5em;*/
}

i {
font-size: xx-large;
z-index: 200;
float: right;
}

.navegacion a {
display: block;
color: #f5f0ed;
transition: 0.5s color;
}

.js .navegacion.menu-desplegado a {
transition: 0.5s color;
}
/* HERO SECTIONS...............*/

.hero {
text-align: center;
justify-content: center;
align-items: center;
margin-right: 10%;
margin-left: 10%;
}

.hero2 {
width: 100%;
min-height: 100vh;
background-image: url("imagenes/fondo2.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
justify-content: center;
align-items: center;
}

.hero2 h1,
.hero h1 {
padding-top: 35%;
padding-left: 5%;
padding-right: 5%;
}

.btn {
width: 15em;
font-size: 0.8em;
font-family: OpenSansR;
font-weight: bold;
text-transform: uppercase;
text-align: center;
border: .25em solid #d03b40;
border-radius: 2.5em;
box-shadow: .5em .5em .6em .65em black;
background-color: transparent;
color: #f5f0ed;
padding: 1%;
margin-left: auto;
margin-right: auto;
display: flex;
transition: background 500ms ease;
}

.bread {
padding: 3% 15% 20% 15%;
text-align: center;
}

.breakfast {
padding: 3% 15% 5% 15%;
text-align: center;
}
/* ONE/TWO COLUMN SECTION ............................. */

.two-col .col-a,
.two-col .col-b {
width: 100%;
height: 20em;
padding: 7% 5% 2% 5%;
text-align: center;
justify-content: center;
align-items: center;
}
/* ICONS SECTION ...................................... */

.icons {
justify-content: center;
align-items: center;
}

.row-a,
.row-b {
min-height: 70vh;
}

.i-products-a,
.i-products-b {
width: 100%;
text-align: center;
justify-content: center;
align-items: center;
}

.i-products-a p,
.i-products-b p,
.i-products-a h3,
.i-products-b h3 {
padding: 2% 5% 2% 5%;
}

.icons img {
width: 6em;
height: 6em;
margin: 0.5em auto;
display: block;
}
/* PSEUDO-CLASSES SECTION ............................. */

img:hover {
opacity: .5;
}

.btn:hover {
background-color: #d03b40;
color: #f5f0ed;
}

a:hover {
color: #d03b40;
padding: .5em;
background-color: #ded6c0;
transition: 0.5s opacity;
}
/*
:active {
color: #d03b40;
transition: 0.5s opacity;
}
i:hover {
background-color: #f5f0ed;
transition: 0.5s opacity;
*/

i:hover {
padding: .2em;
transition: padding 0.5s linear;
}

.navegacion li:hover {
background-color: #f5f0ed;
color: #d03b40;
}

.js .navegacion.menu-desplegado a:hover {
background-color: #f5f0ed;
color: #d03b40;
}
/* FOOTER SECTION ............................. */

.legal {
width: 100%;
height: 5em;
background-color: #241d1b;
z-index: 300;
}

.legal p {
padding: 0;
color: #ded6c0;
font-family: 'Open Sans';
font-weight: 400;
font-size: .7em;
padding: 2% 1% 2% 1%;
text-align: left;
top: 3em;
}
/* RESPONSIVE MEDIA QUERY */

@media screen and (max-width: 800px) {
.js .navegacion {
position: absolute;
max-height: 0;
overflow: hidden;
transition: max-height .5s;
top: 2.9em;
background-color: #d03b40;
}
.js .navegacion a {
padding: .5em;
color: #fff;
border-top: 1px solid rgba(255 255 255 4);
}
.js .navegacion.menu-desplegado {
min-width: 100vw;
max-height: 18.8em;
right: 0;
left: 0;
text-align: center;
justify-content: center;
align-items: center;
}
}

@media screen and (min-width: 801px) and (max-width: 1281px) {
.lanzador-menu {
display: none;
}
#logo {
display: inline-block;
}
.navegation {
float: right;
width: 80%;
}
.navegacion li {
display: inline-block;
margin-right: 2em;
margin-left: 5em;
margin-top: .2em;
}
.navegacion a {
position: absolute;
top: .2em;
z-index: 400;
}
body {
margin-top: 0px;
}
.hero2 {
height: 45em;
margin-top: 20%;
}
.two-col {
width: 100%;
display: inline-block;
}
.two-col .col-a {
width: 50%;
float: right;
}
.two-col .col-b {
width: 50%;
float: left;
}
.icons {
display: inline-block;
min-width: 70vw;
min-height: 60vh;
margin-left: 15%;
margin-right: 15%;
}
.i-products-a p,
.i-products-b p,
.i-products-a h3,
.i-products-b h3 {
padding: 1% 5% 2% 5%;
}
.icons img {
margin: 0.8em auto;
}
.row-a,
.row-b {
min-height: 60vh;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
.i-products-a {
width: 35%;
float: left;
}
.i-products-b {
width: 35%;
float: right;
}
.legal {
background-color: #241d1b;
color: #ded6c0;
}
}

Curtir
Pinterest
Salvar nos favoritos
0 comentários

Faça login ou cadastre-se Gratuitamente para comentar

Entrar Entre de Graça