Proiect de curs

Meu projeto do curso: Introdução ao desenvolvimento de Web Responsive com HTML e CSS

Meu projeto do curso: Introdução ao desenvolvimento de Web Responsive com HTML e CSS

de rodriguest @rodriguest

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</title>
<link rel="stylesheet" href="styles.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;800&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="first-section">
<div class="header">
<img src="images/Logo.png" alt="Logo" />
<ul class="menu">
<li>EL ESPACIO</li>
<li>PRODUCTOS</li>
<li>OFERTAS</li>
<li>RESERVAS</li>
<li>CONTACTO</li>
</ul>
<div class="menu-mobile">
<hr />
<hr />
<hr />
</div>
</div>
<div class="first-section-text">
<h1>RECIÉN HECHO, TODOS LOS DÍAS</h1>
<hr />
<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>
<div class="second-section">
<div class="second-section-text">
<h2>
VEN AL BRUNCH DE<br />
LOS DOMINGOS
</h2>
<p>
Sesame snaps icing chocolate bar. I love donut powder sesame snaps.
Jelly-o topping caramels. Sugar plum I love gummi bears.
</p>
</div>
</div>
<div class="third-section">
<div class="third-section-text">
<h2>
CELEBRA TUS FIESTAS<br />
CON NOSOTROS
</h2>
<p>
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="fourth-section">
<div class="fourth-section-text">
<h1>VEN A DESAYUNAR</h1>
<hr />
<p>
Bonbon topping I love sweet roll I love candy icing chocolate jelly.
Pie soufflé sweet. Apple pie bonbon caramels powder.
</p>
<div class="button">
<p>DESCUBRE NUESTROS PRODUCTOS</p>
</div>
</div>
</div>
<div class="fifth-section">
<div class="fifth-section-text">
<div class="icon-1">
<img src="images/Icono1.png" alt="icon" />
<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="icon-2">
<img src="images/Icono2.png" alt="icon" />
<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="icon-3">
<img src="images/Icono3.png" alt="icon" />
<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
dragée jelly-o.
</p>
</div>
<div class="icon-4">
<img src="images/Icono4.png" alt="icon" />
<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 drops sweet
marshmallow gummies I
</p>
</div>
</div>
</div>
<div class="sixth-section">
<div class="sixth-section-text">
<h2>
CONTACTA CON<br />
NOSOTROS
</h2>
<p>
Si quieres hacer una reserva, tienes alguna sugerencia o tsimplemente
quieres saludar, escríbenos a:
<span style="font-weight: bold">cafeoslo@cafeoslo.es</span>
</p>
</div>
</div>
<div class="seventh-section">
<div class="seventh-section-text">
<h2>
¿SABES DÓNDE <br />
ESTAMOS?
</h2>
<p>
C/ Mayor, 15 <br />
00000 Barcelona <br />
<span style="font-weight: bold">(Google Maps)</span>
</p>
</div>
</div>
<div class="footer">
<p>Septiembre 2015</p>
<p>·</p>
<p>Todos los derechos reservados</p>
</div>
</body>
</html>

CSS

*reset css*

/*---------------- styles ----------------*/

h1 {
font-size: 28px;
color: #f5f0ed;
font-family: "Open Sans", sans-serif;
font-weight: bold;
text-align: center;
}

h2 {
font-size: 24px;
color: #ded6c0;
font-family: "Open Sans", sans-serif;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}

h3 {
font-size: 24px;
color: #241d1b;
font-family: "Open Sans", sans-serif;
font-weight: bold;
text-align: left;
}

p {
font-size: 16px;
color: #f5f0ed;
font-family: "Open Sans", sans-serif;
text-align: center;
min-width: 272px;
line-height: 120%;
}

/* -------------------------------------------------- */

.first-section {
padding: 20px 15px 0 15px;
min-height: 465px;
background-image: url(images/Fondo1.jpg);
background-size: cover;
background-position: center;
position: relative;
}

.header {
min-height: 50px;
}

.header img {
float: left;
}

.menu-mobile {
width: 45px;
height: 45px;
padding: 10px 5px;
background-color: #d03b40;
float: right;
margin-top: 5px;
}

.menu-mobile hr {
width: 35px;
height: 5px;
background-color: #ded6c0;
margin: 0;
margin-bottom: 5px;
border-radius: 5px;
}

.menu-mobile hr:last-child {
margin: 0;
}

.menu {
display: none;
}

.first-section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

hr {
height: 2px;
width: 88px;
background-color: #ded6c0;
margin: 32px auto;
}

.second-section {
padding: 0 15px;
min-height: 270px;
background-color: #d03b40;
position: relative;
}

.second-section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.second-section-text p {
color: #ded6c0;
}

.third-section {
padding: 0 15px;
min-height: 270px;
background-color: #ded6c0;
position: relative;
}

.third-section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.third-section h2 {
color: #d03b40;
}

.third-section-text p {
color: #d03b40;
}

.fourth-section {
min-height: 405px;
padding: 0 15px;
background-image: url(images/Fondo2.jpg);
background-size: cover;
position: relative;
}

.fourth-section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.button {
height: 48px;
width: 282px;
margin: 30px auto 0 auto;
background-color: transparent;
border: 3px solid #f5f0ed;
}

.button p {
font-size: 14px;
color: #f5f0ed;
line-height: 42px;
}

.fifth-section {
padding: 45px 15px;
height: 1285px;
background-color: #f5f0ed;
position: relative;
}

.fifth-section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.fifth-section img {
width: 80px;
margin: 0 auto 15px auto;
display: block;
}

.fifth-section h3 {
margin-bottom: 7px;
}

.fifth-section p {
color: #241d1b;
text-align: left;
}

.icon-1,
.icon-2,
.icon-3 {
margin-bottom: 37px;
}

.sixth-section {
padding: 0 15px;
min-height: 270px;
background-color: #ded6c0;
position: relative;
}

.sixth-section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.sixth-section h2 {
color: #d03b40;
}

.sixth-section-text p {
color: #d03b40;
}

.seventh-section {
padding: 0 15px;
min-height: 270px;
background-color: #d03b40;
position: relative;
}

.seventh-section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.seventh-section-text p {
color: #ded6c0;
}

.footer {
padding: 34px 15px;
min-height: 105px;
background-color: #241d1b;
}

.footer p {
text-align: left;
}

.footer p:nth-child(2) {
display: none;
}

@media screen and (min-width: 800px) {
h1 {
font-size: 44px;
}

h2 {
font-size: 28px;
}

h3 {
font-size: 24px;
}

p {
line-height: 140%;
}

/* -------------------------------------------------- */

.first-section {
height: 692px;
padding-left: 30px;
padding-right: 30px;
}

.menu-mobile {
display: none;
}

.menu {
display: unset;
float: right;
margin-top: 29px;
color: #f5f0ed;
font-size: 16px;
font-weight: bold;
font-family: "Open Sans", sans-serif;
}

.menu li {
display: inline;
margin-right: 19px;
}

.menu li:last-child {
margin-right: 0;
}

.first-section-text {
width: 515px;
}

.second-section {
height: 402px;
width: 50%;
float: left;
}

.third-section {
height: 402px;
width: 50%;
float: right;
}

.fourth-section {
height: 550px;
display: inline-block;
width: 100%;
}

.fourth-section-text {
width: 515px;
}

.button {
margin-top: 53px;
}

.fifth-section {
height: 580px;
padding: 90px 30px;
}

.fifth-section-text {
width: 95%;
}

.icon-1,
.icon-3 {
float: left;
width: 50%;
display: inline-block;
}

.icon-2,
.icon-4 {
float: right;
width: 50%;
}

.icon-1,
.icon-2 {
margin-bottom: 57px;
}

.fifth-section img {
width: 173px;
display: inline;
margin: 0;
margin-right: 23px;
float: left;
}

.fifth-section p {
max-width: 600px;
}

.sixth-section {
height: 402px;
width: 50%;
float: left;
}

.seventh-section {
height: 402px;
width: 50%;
float: right;
}

.footer {
display: inline-block;
width: 100%;
padding: 76px 30px;
}

.footer p {
display: inline;
margin: 0;
}

.footer p:nth-child(2) {
display: inline;
margin: 0 14px;
}
}

Meu projeto do curso: Introdução ao desenvolvimento de Web Responsive com HTML e CSS

Meu projeto do curso: Introdução ao desenvolvimento de Web Responsive com HTML e CSS

de rodriguest @rodriguest

1 comentariu

Conectați-vă sau înscrieți-vă gratuit pentru a comenta

Categorii

Zone

Software

Liste