Project van de cursus

Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS

  • 193
  • 0
  • 0
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 4
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 5
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 6
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 7
Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 8

Código 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" />
<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:ital,wght@0,400;0,800;1,400;1,800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Café Oslo</title>
</head>

<body>
<a href="#menu" class="lanzador-menu" id="enlace-menu"
><img src="src/img/icons/icon5_menu.png" alt=""
/></a>
<div class="intro">
<img src="src/img/logos/logo1.png" alt="logo1" />
<h1>
TE ACOMPAÑAMOS TODAS TUS MAÑANAS <br />
_________
</h1>
<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 id="info-espacio" class="grupo-bloques">
<div class="bloque1">
<h1>VEN AL BRUNCH DE LOS AMIGOS</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus soluta
facere adipisci dolorem praesentium nisi consequatur earum velit,
officiis enim aperiam illo porro voluptate mollitia veritatis nostrum
optio, repellendus rem.
</p>
</div>
<div class="bloque1 bloque2">
<h1>CELEBRA TUS FIESTAS CON NOSOTROS</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam,
minus! Iusto quae beatae enim modi dicta a, porro recusandae
voluptatem aspernatur provident omnis ipsam consequatur sunt incidunt
magnam? Culpa, consectetur!
</p>
</div>
</div>
<div id="info-ofertas" class="header-producto">
<h1>VEN A DESAYUNAR <br />______</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum iste
numquam voluptatibus doloribus eius, culpa atque rerum nulla iusto
tempore illum? Laborum dolore quo rerum, et deserunt amet exercitationem
laudantium.
</p>
<p><a href="#productos-contenido">DESCUBRE NUESTROS PRODUCTOS</a></p>
</div>
<div id="productos-contenido">
<div class="grupo-bloques">
<div class="producto">
<img src="src/img/icons/icon1.png" alt="icon1-pan-recien-hecho" />
<h1>PAN RECIÉN HECHO</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
soluta unde neque tempora quidem reiciendis vel veniam harum velit
ipsum! Reprehenderit dicta nemo iusto fugiat id, amet animi delectus
Lorem ipsum dolor
</p>
</div>
<div class="producto">
<img src="src/img/icons/icon2.png" alt="icon2-tartas-cada-dia" />
<h1>TARTAS PARA CADA DIA</h1>
<p>
Cookie caje Jelly beans chocolate cake carrot cake croissan icing.
Caramels liquorice sesame snaps sugar plum I love bonbon. I love I
love halvah.
</p>
</div>
</div>
<div class="grupo-bloques">
<div class="producto">
<img
src="src/img/icons/icon3.png"
alt="icon3-prueba-nuestros-dulces"
/>
<h1>PRUEBA NUESTROS DULCES</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo, in
fuga. Unde laudantium iusto ipsam dicta sed accusantium blanditiis
ipsa
</div>
<div class="producto">
<img
src="src/img/icons/icon4.png "
alt="icon4-ingredientes-ecologicos"
/>
<h1>INGREDIENTES ECOLÓGICOS</h1>
<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>
<div id="info-contacto" class="grupo-bloques">
<div class="bloque1 bloque2">
<h1>CONTACTANOS</h1>
<p>
Si quieres hacer una reserva, tienes alguna sugerencia, quieres
saludar o trabajar con nosotros, escríbenos a:
<br /><a class="contacto-cafeoslo" href="mailto:cafeoslo@cafeoslo.es "
>cafeoslo@cafeoslo.es</a
><br>
o al:
<br>
<a href="tel:+50242358270" class="contacto-cafeoslo">+502 4235-8270</a>
</p>
</div>
<div class="bloque1">
<h1>¿SABES DONDE NOS ENCONTRAMOS?</h1>
<p>
Ciudad,21 <br />
000 Guatemala <br />
<a
class="contacto-cafeoslo"
href="https://www.google.com/maps"
target="_blank"
>(Google Maps)</a
>
</p>
</div>
</div>
<div class="footer">
<p>Todos los derechos reservados 2021®</p>
</div>
<div id="menu" class="navegacion">
<ul>
<li>
<a href="#info-espacio">INFORMACIÓN</a>
</li>
<li>
<a href="#productos-contenido">PRODUCTOS</a>
</li>
<li>
<a href="#info-ofertas">OFERTAS</a>
</li>
<li>
<a href="#info-contacto">RESERVAS</a>
</li>
<li>
<a href="#info-contacto">CONTACTO</a>
</li>
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>

Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 9

Código css:

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

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
position: relative;
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 1.1;
max-width: 850px;
margin: 0;
}

h1 {
color: #f5f0ed;
text-align: center;
font-size: 28px;
font-weight: bold;
}

p {
margin: 50px 0px 0px 0px;
color: #f5f0ed;
line-height: 1.4;
font-size: 16px;
font-weight: normal;
text-align: center;
}

.intro {
background-image: url(../src/img/backgrounds/background1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin: auto;
min-height: 28em;
padding: 100px 20px 0px 20px;
}

.intro img {
position: absolute;
top: 20px;
left: 20px;
}

.bloque1 {
background-color: #d03b40;
min-height: 10em;
padding: 30px 20px 30px 20px;
}

.bloque1 h1,
.bloque1 p,
.bloque1 a {
color: #ded6c0;
margin: 20px 0px 0px 0px;
}

.bloque2 {
background-color: #ded6c0;
}

.bloque2 h1,
.bloque2 p,
.bloque2 a {
color: #d03b40;
}

.contacto-cafeoslo {
text-decoration: none;
font-weight: bold;
}

.header-producto {
background-image: url(../src/img/backgrounds/background2.jpg);
background-repeat: no-repeat;
background-position: left;
background-size: cover;
margin: auto;
min-height: 20em;
padding: 50px 20px 50px 20px;
}

.header-producto a {
display: block;
text-decoration: none;
color: #f5f0ed;
border: 3px solid #fff;
margin: 0;
padding: 10px 0px;
}

.producto {
background-color: #f5f0ed;
padding: 15px 20px 30px 20px;
}

.producto h1,
.producto p {
color: #3c3c3b;
margin: 0;
text-align: left;
line-height: 1.4;
}

.producto img {
width: 100px;
height: 100px;
margin: 15px auto;
display: block;
}

.footer {
background-color: #241d1b;
padding: 30px 20px 30px 20px;
}

.footer p {
margin: 0;
text-align: left;
}

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

.lanzador-menu img {
max-width: 30px;
max-height: 30px;
}

@media screen and (min-width: 850px) {
body {
max-width: 1200px;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}
.intro {
min-height: 35em;
}
.intro h1 {
width: 40%;
margin: 0 auto;
}
.bloque1 {
float: left;
width: 50%;
min-height: 30em;
padding-top: 7em;
}
.header-producto {
min-height: 35em;
padding-top: 7em;
}
.intro p,
.header-producto p {
width: 40%;
margin: 50px auto;
}
.producto {
float: left;
width: 50%;
padding-top: 4.5em;
padding-bottom: 4.5em;
}
.producto h1,
.producto p {
padding: 0 0 0 40%;
}
.producto img {
position: absolute;
min-width: 150px;
min-height: 150px;
margin-bottom: 5%;
}
.grupo-bloques {
overflow: hidden;
position: relative;
background-color: #f5f0ed;
}
.footer {
min-height: 4em;
}
.footer p {
padding-top: 1.5em;
}
}

@media screen and (min-width: 1200px) {
body {
max-width: 100%;
}
h1 {
font-size: 44px;
}
p {
font-size: 24px;
}
.intro {
min-height: 40em;
}
}

@media screen and (max-width: 850px) {
.js .navegacion {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
position: absolute;
top: 5em;
left: 2em;
right: 1.5em;
background-color: #d03b40;
}
.js .navegacion li:hover{
background: #f85157;
}

.js .navegacion a:hover{
color: #dabfb0;
}

.js .navegacion a {
padding: 5px 10px;
color: #f5f0ed;
text-decoration: none;
text-align: left;
line-height: 4;
}
.js .navegacion li {
border-bottom: 1px solid #f5f0ed;
text-align: center;
}
.js .navegacion.menu-desplegado {
min-height: 20em;
}
}

@media screen and (min-width: 851px) {
a {
font-weight: bold;
text-decoration: none;
color: #f5f0ed;
}
a:hover{
color: #dabfb0;
}
.lanzador-menu {
display: none;
}
.navegacion {
position: absolute;
top: 3em;
right: 2em;
}
.navegacion li {
display: inline-block;
margin-right: 15px;
}
}

Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS 10
Vind ik leuk
Pinterest
Opslaan in Favorieten
0 opmerkingen

Log in of doe gratis mee om te reageren

Log in Doe gratis mee