Pensavo di aver caricato i codici ma mi sono appena reso conto di non averlo fatto.
Il codice HTML: <!DOCTYPE html>
<html>
<head>
<title> caffè di Oslo </title>
<meta charset="utf-8" />
<meta name="viewport"
contenuto="larghezza=dispositivo-
larghezza,iniziale-
scala=1.0"/>
<link rel="stylesheet" href="proyecto.css">
</head>
<body>
<div class="primero">
<div class="div-0">
<img id="logo" src="Logo.png" alt="caffè di Oslo">
<a href="#menu" class="lanzador-menu" id="enlace-menu"></a>
<!--<img id="menu-img" src="menu-icon.png" alt="Menú -->
<div id="menu" class="navegacion">
<ul>
<li> <a href="#">CONTATTO</a></li>
<li> <a href="#">PRENOTAZIONI</a></li>
<li> <a href="#">OFFERTE</a></li>
<li> <a href="#">PRODOTTI</a></li>
<li> <a href="#">LO SPAZIO</a></li>
</ul>
</div>
</div>
<div class="div-1">
<h1> REALIZZATO DI RECENTE,
<br>
OGNI GIORNO</h1>
<div class="line"></div>
<p class="chocolate"> Torta al cioccolato torta al cioccolato bastoncini di zucchero torta al cioccolato bonbon. Adoro la liquirizia di marzapane. Adoro la torta di lecca-lecca. Torta gelato all'amaretto danese ghiacciata. Caramelle bonbon caramelle dolci Jelly Beans Jelly-o Adoro lecca-lecca.</p>
</div>
</div>
<div class="div-2">
<h2 class="rojo"> VIENI AL BRUNCH DELLA DOMENICA</h2>
<p class="snaps"> Barretta di cioccolato con glassa al sesamo. Adoro gli spiedini di sesamo in polvere di ciambella. Caramelle ripiene di gelatina. Sugar Plum Adoro gli orsetti gommosi.</p>
</div>
<div class="div-3">
<h2 class="beige"> FESTEGGIA LE TUE VACANZE CON NOI</h2>
<p class="sweet"> Caramelle bonbon caramelle dolci Jelly Beans Jelly-o Adoro lecca-lecca. Cracker al sesamo, spiedini di artigli d'orso. Torta di pasticceria danese. Polvere I love macaron alla liquirizia.</p>
</div>
<div class="div-4">
<h1 class="desayunar"> VIENI A COLAZIONE</h1>
<div class="line"></div>
<p class="topping"> Topping al cioccolato Adoro il panino dolce Adoro la gelatina di cioccolato con glassa al caramello. Torta soufflé dolce. Cioccolatini alla torta di mele in polvere.</p>
<div style="cursor: pointer" id="boton" class="boton" href="#"> SCOPRI I NOSTRI PRODOTTI
</div>
</div>
<div class="div-5">
<img id="icono1" src="Icono1.png" alt="icona1" href="#" style="cursor: pointer">
<div class="prueba">
<h3> PANE FRESCO</h3>
<p class="scroll"> Cupcake danese Adoro la ciambella con glassa di halvah. Caramelle dolci pan di zenzero orso artiglio giuggiole torta al cioccolato budino spiedini di sesamo bonbon. Torta al cioccolato wafer budino muffin wafer rotolo dolce Adoro i lecca-lecca. Tortino di mele, giuggiole, gelato, prugne e zucchero. </p>
</div>
</div>
<div class="div-7">
<img id="icono3" src="Icono3.png" alt="icona3" href="#" style="cursor: pointer">
<div class="prueba">
<h3> TORTE PER TUTTI I GIORNI</h3>
<p class="scroll"> Gummy Bear Cookie Cake Torta Al Cioccolato Torta Di Carote Croissant Glassa. Caramelle, liquirizia, sesamo, zucchero, prugne, adoro il cioccolato. Amo, amo Halvah. </p>
</div>
</div>
<div class="div-6">
<img id="icono2" src="Icono2.png" alt="icona2" href="#" style="cursor: pointer">
<div class="prueba">
<h3> PROVA I NOSTRI DOLCI</h3>
<p class="scroll"> Caramelle, liquirizia, sesamo, zucchero, prugne, adoro il cioccolato. Amo, amo Halvah. Adoro la torta di marzapane. Adoro la ciambella. Budino al tiramisù. Lo zucchero filato liquirizia. Caramelle gommose al cioccolato orsetti gommosi gelatine. </p>
</div>
</div>
<div class="div-8">
<img id="icono4" src="Icono4.png" alt="icona4" href="#" style="cursor: pointer">
<div class="prueba">
<h3> INGREDIENTI BIOLOGICI</h3>
<p class="scroll"> Torta di carote torta di frutta cheesecake muffin lecca-lecca croissant dessert halvah. Torta di marzapane Marshmallow con artiglio d'orso. Torta di carote Adoro il gelato alla ciambella lecca lecca zucchero filato. Caramelle gommose di marshmallow con gocce di limone Adoro la pasticceria danese di marshmallow. Torta di caramelle, rotolo di gelatina, torta di liquirizia.</p>
</div>
</div>
<div class="div-9">
<h2 class="beige2"> CONTATTO CON<br> noi</h2>
<p class="mail"> Se vuoi prenotare, avere suggerimenti o semplicemente salutarci, scrivici a:<br>
<a style="cursor: pointer" class="email" href="mailto:cafeoslo@cafeoslo .es">cafeoslo @cafeoslo .es</a></p>
</div>
*{
dimensione della scatola: scatola di confine;
}
corpo{
colore di sfondo: #f5f0ed ;
larghezza massima: 2000px;
posizione di sfondo: centro;
margine: 0px automatico;
larghezza minima: 500px;
}
.Primo{
immagine di sfondo: url(Background1.jpg);
dimensione dello sfondo: copertina;
ripetizione in background: nessuna ripetizione;
posizione di sfondo: centro;
imbottitura: 20px;
altezza minima: 500px;
}
ul{
imbottitura: 0;
stile elenco: nessuno;
margine:0;
}
.navigazione verso{
galleggia a destra;
colore: #f5f0ed;
decorazione del testo: nessuna;
dimensione del carattere: 14px;
peso del carattere: 600;
famiglia di caratteri: 'Open Sans', sans-serif;
allineamento del testo: a sinistra;
blocco schermo;
margine: 10px automatico;
riempimento: 8px 8px 0px 8px;
}
.navigazione per:passare sopra{
colore: #d03b40;
bordo inferiore: 3px solido;
}
.div-0{
posizione di sfondo: centro;
}
.div-1{
imbottitura: 100px;
famiglia di caratteri: 'Open Sans', sans-serif;
}
h1{
colore: #f5f0ed;
dimensione del carattere: 36px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 40px;
margine: 0px automatico;
}
.linea{
decorazione del testo: nessuna;
colore: #f5f0ed;
bordo inferiore: 2px solido;
larghezza: 60px;
margine: 20px automatico;
altezza: 0px;
}
.cioccolato{
colore: #f5f0ed;
decorazione del testo: nessuna;
dimensione del carattere: 14px;
larghezza: 50%;
allineamento del testo: centro;
margine: 0px automatico;
}
.div-2{
famiglia di caratteri: 'Open Sans', sans-serif;
galleggiante sinistro;
riempimento: 5%;
margine: 0px automatico;
colore di sfondo: #d03b40;
decorazione del testo: nessuna;
colore: #ded6c0;
margine: 0px automatico;
larghezza: 50%;
altezza: 350px;
}
.div-3{
famiglia di caratteri: 'Open Sans', sans-serif;
galleggia a destra;
riempimento: 5%;
margine: 0px automatico;
colore di sfondo: #ded6c0;
decorazione del testo: nessuna;
colore: #d03b40;
margine: 0px automatico;
larghezza: 50%;
altezza: 350px;
}
.Rosso{
dimensione del carattere: 24px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 24px;
margine: 30px automatico;
larghezza: 70%;
}
.beige{
dimensione del carattere: 24px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 24px;
margine: 30px automatico;
larghezza: 70%;
}
p.clic{
dimensione del carattere: 14px;
larghezza: 90%;
allineamento del testo: centro;
margine: 10px automatico;
colore: #ded6c0;
}
p.dulce{
dimensione del carattere: 14px;
larghezza: 90%;
allineamento del testo: centro;
margine: 10px automatico;
colore: #d03b40;
}
.div-4{
famiglia di caratteri: 'Open Sans', sans-serif;
Colore bianco;
immagine di sfondo: url(Background2.jpg);
dimensione dello sfondo: copertina;
ripetizione in background: nessuna ripetizione;
posizione di sfondo: centro;
altezza minima: 400px;
margine superiore: 350px;
riempimento: 8%;
}
.Aggiunta{
Colore bianco;
dimensione del carattere: 14px;
larghezza: 40%;
allineamento del testo: centro;
margine: 20px automatico;
}
.pulsante{
imbottitura: 5px;
larghezza del bordo: 1px;
stile bordo: solido;
colore bordo: bianco;
margine: 20px automatico;
larghezza: 25%;
allineamento del testo: centro;
}
.pulsante: passa il mouse {
colore: #d03b40;
colore del bordo: #d03b40;
/*box-ombra: 0px 0px 10px 2px #d03b40;*/
}
P{
famiglia di caratteri: 'Open Sans', sans-serif;
dimensione del carattere: 14px;
}
.div-8{
galleggia a destra;
margine: 0px automatico;
riempimento: 5%;
blocco schermo;
famiglia di caratteri: 'Open Sans', sans-serif;
altezza: 300px;
colore di sfondo: #f5f0ed;
larghezza: 50%;
}
h3{
famiglia di caratteri: 'Open Sans', sans-serif;
dimensione del carattere: 20px;
margine: 0px automatico;
}
.prova{
riempimento: 2%;
}
.div-9{
margine: 0px automatico;
famiglia di caratteri: 'Open Sans', sans-serif;
galleggiante sinistro;
riempimento: 5%;
colore di sfondo: #ded6c0;
decorazione del testo: nessuna;
colore: #d03b40;
larghezza: 50%;
altezza: 300px;
}
.div-10{
margine: 0px automatico;
famiglia di caratteri: 'Open Sans', sans-serif;
galleggia a destra;
riempimento: 5%;
colore di sfondo: #d03b40;
decorazione del testo: nessuna;
colore: #ded6c0;
larghezza: 50%;
altezza: 300px;
}
.beige2{
dimensione del carattere: 24px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 24px;
margine: 20px automatico;
}
.rosso2{
dimensione del carattere: 24px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 24px;
margine: 20px automatico;
}
p.mail{
colore: #d03b40;
dimensione del carattere: 14px;
larghezza: 70%;
allineamento del testo: centro;
margine: 10px automatico;
}
una.e-mail{
font-weight: grassetto;
colore: #d03b40;
dimensione del carattere: 14px;
larghezza: 70%;
allineamento del testo: centro;
margine: 0px automatico;
}
p.indirizzo{
colore: #ded6c0;
dimensione del carattere: 14px;
larghezza: 40%;
allineamento del testo: centro;
margine: 0px automatico;
}
a.googlemaps{
font-weight: grassetto;
colore: #ded6c0;
dimensione del carattere: 16px;
larghezza: 40%;
allineamento del testo: centro;
margine: 0px automatico;
}
.menu di avvio{
posizione: assoluta;
in alto: 20px;
a destra: 20px;
decorazione del testo: nessuna;
imbottitura: 20px;
raggio di confine: 5px;
bordo: 2px solido #d03b40;
immagine di sfondo: url(menu-icon.png);
dimensione dello sfondo: copertina;
ripetizione in background: nessuna ripetizione;
posizione di sfondo: centro;
}
2 commenti
virginiagarcia0702
Pensavo di aver caricato i codici ma mi sono appena reso conto di non averlo fatto.
Il codice HTML:
<!DOCTYPE html>
<html>
<head>
<title> caffè di Oslo </title>
<meta charset="utf-8" />
<meta name="viewport"
contenuto="larghezza=dispositivo-
larghezza,iniziale-
scala=1.0"/>
<link rel="stylesheet" href="proyecto.css">
</head>
<body>
<div class="primero">
<div class="div-0">
<img id="logo" src="Logo.png" alt="caffè di Oslo">
<a href="#menu" class="lanzador-menu" id="enlace-menu"></a>
<!--<img id="menu-img" src="menu-icon.png" alt="Menú -->
<div id="menu" class="navegacion">
<ul>
<li> <a href="#">CONTATTO</a></li>
<li> <a href="#">PRENOTAZIONI</a></li>
<li> <a href="#">OFFERTE</a></li>
<li> <a href="#">PRODOTTI</a></li>
<li> <a href="#">LO SPAZIO</a></li>
</ul>
</div>
</div>
<div class="div-1">
<h1> REALIZZATO DI RECENTE,
<br>
OGNI GIORNO</h1>
<div class="line"></div>
<p class="chocolate"> Torta al cioccolato torta al cioccolato bastoncini di zucchero torta al cioccolato bonbon. Adoro la liquirizia di marzapane. Adoro la torta di lecca-lecca. Torta gelato all'amaretto danese ghiacciata. Caramelle bonbon caramelle dolci Jelly Beans Jelly-o Adoro lecca-lecca.</p>
</div>
</div>
<div class="div-2">
<h2 class="rojo"> VIENI AL BRUNCH DELLA DOMENICA</h2>
<p class="snaps"> Barretta di cioccolato con glassa al sesamo. Adoro gli spiedini di sesamo in polvere di ciambella. Caramelle ripiene di gelatina. Sugar Plum Adoro gli orsetti gommosi.</p>
</div>
<div class="div-3">
<h2 class="beige"> FESTEGGIA LE TUE VACANZE CON NOI</h2>
<p class="sweet"> Caramelle bonbon caramelle dolci Jelly Beans Jelly-o Adoro lecca-lecca. Cracker al sesamo, spiedini di artigli d'orso. Torta di pasticceria danese. Polvere I love macaron alla liquirizia.</p>
</div>
<div class="div-4">
<h1 class="desayunar"> VIENI A COLAZIONE</h1>
<div class="line"></div>
<p class="topping"> Topping al cioccolato Adoro il panino dolce Adoro la gelatina di cioccolato con glassa al caramello. Torta soufflé dolce. Cioccolatini alla torta di mele in polvere.</p>
<div style="cursor: pointer" id="boton" class="boton" href="#"> SCOPRI I NOSTRI PRODOTTI
</div>
</div>
<div class="div-5">
<img id="icono1" src="Icono1.png" alt="icona1" href="#" style="cursor: pointer">
<div class="prueba">
<h3> PANE FRESCO</h3>
<p class="scroll"> Cupcake danese Adoro la ciambella con glassa di halvah. Caramelle dolci pan di zenzero orso artiglio giuggiole torta al cioccolato budino spiedini di sesamo bonbon. Torta al cioccolato wafer budino muffin wafer rotolo dolce Adoro i lecca-lecca. Tortino di mele, giuggiole, gelato, prugne e zucchero. </p>
</div>
</div>
<div class="div-7">
<img id="icono3" src="Icono3.png" alt="icona3" href="#" style="cursor: pointer">
<div class="prueba">
<h3> TORTE PER TUTTI I GIORNI</h3>
<p class="scroll"> Gummy Bear Cookie Cake Torta Al Cioccolato Torta Di Carote Croissant Glassa. Caramelle, liquirizia, sesamo, zucchero, prugne, adoro il cioccolato. Amo, amo Halvah. </p>
</div>
</div>
<div class="div-6">
<img id="icono2" src="Icono2.png" alt="icona2" href="#" style="cursor: pointer">
<div class="prueba">
<h3> PROVA I NOSTRI DOLCI</h3>
<p class="scroll"> Caramelle, liquirizia, sesamo, zucchero, prugne, adoro il cioccolato. Amo, amo Halvah. Adoro la torta di marzapane. Adoro la ciambella. Budino al tiramisù. Lo zucchero filato liquirizia. Caramelle gommose al cioccolato orsetti gommosi gelatine. </p>
</div>
</div>
<div class="div-8">
<img id="icono4" src="Icono4.png" alt="icona4" href="#" style="cursor: pointer">
<div class="prueba">
<h3> INGREDIENTI BIOLOGICI</h3>
<p class="scroll"> Torta di carote torta di frutta cheesecake muffin lecca-lecca croissant dessert halvah. Torta di marzapane Marshmallow con artiglio d'orso. Torta di carote Adoro il gelato alla ciambella lecca lecca zucchero filato. Caramelle gommose di marshmallow con gocce di limone Adoro la pasticceria danese di marshmallow. Torta di caramelle, rotolo di gelatina, torta di liquirizia.</p>
</div>
</div>
<div class="div-9">
<h2 class="beige2"> CONTATTO CON<br> noi</h2>
<p class="mail"> Se vuoi prenotare, avere suggerimenti o semplicemente salutarci, scrivici a:<br>
<a style="cursor: pointer" class="email" href="mailto:cafeoslo@cafeoslo .es">cafeoslo @cafeoslo .es</a></p>
</div>
<div class="div-10">
<h2 class="rojo2"> SAI DOVE<br> ERANO?</h2>
<p class="direccion"> C/Sindaco, 15 00000 Barcellona <a style="cursor: pointer" class="googlemaps" href="#">(Google Maps)</a></p>
</div>
<footer>
<span class="date">Settembre 2015 · <span class="derechos">Tutti i diritti riservati
</footer><span class="date"><span class="derechos">
<link rel="preconnect" href="https://fonts.googleapis.com"><span class="date"><span class="derechos">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><span class="date"><span class="derechos">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"><span class="date"><span class="derechos">
<link rel="preconnect" href="https://fonts.googleapis.com"><span class="date"><span class="derechos">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><span class="date"><span class="derechos">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght <span class="date"><span class="derechos">@400 ;800&display=scambia" rel="foglio di stile">
<script src="javascript.js"></script><span class="date">
</body>
</html>
Il codice CSS:
*{
dimensione della scatola: scatola di confine;
}
corpo{
colore di sfondo: #f5f0ed ;
larghezza massima: 2000px;
posizione di sfondo: centro;
margine: 0px automatico;
larghezza minima: 500px;
}
.Primo{
immagine di sfondo: url(Background1.jpg);
dimensione dello sfondo: copertina;
ripetizione in background: nessuna ripetizione;
posizione di sfondo: centro;
imbottitura: 20px;
altezza minima: 500px;
}
#logo{
galleggiante sinistro;
altezza: 30px;
margine sinistro: 10px;
}
ul{
imbottitura: 0;
stile elenco: nessuno;
margine:0;
}
.navigazione verso{
galleggia a destra;
colore: #f5f0ed;
decorazione del testo: nessuna;
dimensione del carattere: 14px;
peso del carattere: 600;
famiglia di caratteri: 'Open Sans', sans-serif;
allineamento del testo: a sinistra;
blocco schermo;
margine: 10px automatico;
riempimento: 8px 8px 0px 8px;
}
.navigazione per:passare sopra{
colore: #d03b40;
bordo inferiore: 3px solido;
}
.div-0{
posizione di sfondo: centro;
}
.div-1{
imbottitura: 100px;
famiglia di caratteri: 'Open Sans', sans-serif;
}
h1{
colore: #f5f0ed;
dimensione del carattere: 36px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 40px;
margine: 0px automatico;
}
.linea{
decorazione del testo: nessuna;
colore: #f5f0ed;
bordo inferiore: 2px solido;
larghezza: 60px;
margine: 20px automatico;
altezza: 0px;
}
.cioccolato{
colore: #f5f0ed;
decorazione del testo: nessuna;
dimensione del carattere: 14px;
larghezza: 50%;
allineamento del testo: centro;
margine: 0px automatico;
}
.div-2{
famiglia di caratteri: 'Open Sans', sans-serif;
galleggiante sinistro;
riempimento: 5%;
margine: 0px automatico;
colore di sfondo: #d03b40;
decorazione del testo: nessuna;
colore: #ded6c0;
margine: 0px automatico;
larghezza: 50%;
altezza: 350px;
}
.div-3{
famiglia di caratteri: 'Open Sans', sans-serif;
galleggia a destra;
riempimento: 5%;
margine: 0px automatico;
colore di sfondo: #ded6c0;
decorazione del testo: nessuna;
colore: #d03b40;
margine: 0px automatico;
larghezza: 50%;
altezza: 350px;
}
.Rosso{
dimensione del carattere: 24px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 24px;
margine: 30px automatico;
larghezza: 70%;
}
.beige{
dimensione del carattere: 24px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 24px;
margine: 30px automatico;
larghezza: 70%;
}
p.clic{
dimensione del carattere: 14px;
larghezza: 90%;
allineamento del testo: centro;
margine: 10px automatico;
colore: #ded6c0;
}
p.dulce{
dimensione del carattere: 14px;
larghezza: 90%;
allineamento del testo: centro;
margine: 10px automatico;
colore: #d03b40;
}
.div-4{
famiglia di caratteri: 'Open Sans', sans-serif;
Colore bianco;
immagine di sfondo: url(Background2.jpg);
dimensione dello sfondo: copertina;
ripetizione in background: nessuna ripetizione;
posizione di sfondo: centro;
altezza minima: 400px;
margine superiore: 350px;
riempimento: 8%;
}
.Aggiunta{
Colore bianco;
dimensione del carattere: 14px;
larghezza: 40%;
allineamento del testo: centro;
margine: 20px automatico;
}
.pulsante{
imbottitura: 5px;
larghezza del bordo: 1px;
stile bordo: solido;
colore bordo: bianco;
margine: 20px automatico;
larghezza: 25%;
allineamento del testo: centro;
}
.pulsante: passa il mouse {
colore: #d03b40;
colore del bordo: #d03b40;
/*box-ombra: 0px 0px 10px 2px #d03b40;*/
}
P{
famiglia di caratteri: 'Open Sans', sans-serif;
dimensione del carattere: 14px;
}
#icona1{
galleggiante sinistro;
altezza: automatico;
imbottitura destra: 10px;
imbottitura superiore: 40px;
margine inferiore: 120px;
}
.div-5{
galleggiante sinistro;
margine: 0px automatico;
riempimento: 5%;
blocco schermo;
famiglia di caratteri: 'Open Sans', sans-serif;
altezza: 300px;
colore di sfondo: #f5f0ed;
larghezza: 50%;
}
#icona2{
galleggiante sinistro;
altezza: automatico;
imbottitura destra: 10px;
imbottitura superiore: 40px;
margine inferiore: 120px;
}
.div-6{
galleggiante sinistro;
margine: 0px automatico;
riempimento: 5%;
blocco schermo;
famiglia di caratteri: 'Open Sans', sans-serif;
altezza: 300px;
colore di sfondo: #f5f0ed;
larghezza: 50%;
}
#icon3{
galleggiante sinistro;
altezza: automatico;
imbottitura destra: 10px;
imbottitura superiore: 40px;
margine inferiore: 120px;
}
.div-7{
galleggia a destra;
margine: 0px automatico;
riempimento: 5%;
blocco schermo;
famiglia di caratteri: 'Open Sans', sans-serif;
altezza: 300px;
colore di sfondo: #f5f0ed;
larghezza: 50%;
}
#icon4{
galleggiante sinistro;
altezza: automatico;
imbottitura destra: 10px;
imbottitura superiore: 40px;
margine inferiore: 120px;
}
.div-8{
galleggia a destra;
margine: 0px automatico;
riempimento: 5%;
blocco schermo;
famiglia di caratteri: 'Open Sans', sans-serif;
altezza: 300px;
colore di sfondo: #f5f0ed;
larghezza: 50%;
}
h3{
famiglia di caratteri: 'Open Sans', sans-serif;
dimensione del carattere: 20px;
margine: 0px automatico;
}
.prova{
riempimento: 2%;
}
.div-9{
margine: 0px automatico;
famiglia di caratteri: 'Open Sans', sans-serif;
galleggiante sinistro;
riempimento: 5%;
colore di sfondo: #ded6c0;
decorazione del testo: nessuna;
colore: #d03b40;
larghezza: 50%;
altezza: 300px;
}
.div-10{
margine: 0px automatico;
famiglia di caratteri: 'Open Sans', sans-serif;
galleggia a destra;
riempimento: 5%;
colore di sfondo: #d03b40;
decorazione del testo: nessuna;
colore: #ded6c0;
larghezza: 50%;
altezza: 300px;
}
.beige2{
dimensione del carattere: 24px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 24px;
margine: 20px automatico;
}
.rosso2{
dimensione del carattere: 24px;
font-weight: grassetto;
allineamento del testo: centro;
altezza della linea: 24px;
margine: 20px automatico;
}
p.mail{
colore: #d03b40;
dimensione del carattere: 14px;
larghezza: 70%;
allineamento del testo: centro;
margine: 10px automatico;
}
una.e-mail{
font-weight: grassetto;
colore: #d03b40;
dimensione del carattere: 14px;
larghezza: 70%;
allineamento del testo: centro;
margine: 0px automatico;
}
p.indirizzo{
colore: #ded6c0;
dimensione del carattere: 14px;
larghezza: 40%;
allineamento del testo: centro;
margine: 0px automatico;
}
a.googlemaps{
font-weight: grassetto;
colore: #ded6c0;
dimensione del carattere: 16px;
larghezza: 40%;
allineamento del testo: centro;
margine: 0px automatico;
}
.menu di avvio{
posizione: assoluta;
in alto: 20px;
a destra: 20px;
decorazione del testo: nessuna;
imbottitura: 20px;
raggio di confine: 5px;
bordo: 2px solido #d03b40;
immagine di sfondo: url(menu-icon.png);
dimensione dello sfondo: copertina;
ripetizione in background: nessuna ripetizione;
posizione di sfondo: centro;
}
.Data{
schermo: blocco in linea;
larghezza: 130px;
imbottitura superiore: 40px;
}
piè di pagina{
colore di sfondo: nero;
imbottitura: 40px;
colore: #f5f0ed;
}
.Diritti{
schermo: blocco in linea;
imbottitura superiore: 40px;
}
#icona1,#icona2,#icona3,#icona4{
larghezza: 120px;
}
/*A schermo intero*/
@media media y (larghezza minima: 991px){
.menu di avvio{
display: nessuno;
}
.navigazione li{
schermo: blocco in linea;
galleggia a destra;
}
}
/*Schermo intermedio*/
@media media y (larghezza minima: 700 px) y (larghezza massima: 990 px){
.js .navigazione{
posizione: assoluta;
altezza massima: 0px;
overflow: nascosto;
transizione: altezza massima .5s;
in alto: 70px;
a destra: 20px;
colore di sfondo: #d03b40;
margine: 0px automatico;
raggio di confine: 5px;
}
.js .navigazione li{
blocco schermo;
imbottitura destra: 5px;
}
.js .navigazione a{
decorazione del testo: nessuna;
allineamento del testo: a destra;
imbottitura: 5px 10px;
colore: #f5f0ed;
}
.js .navigazione.menu-visualizzazione{
altezza massima: 200px;
}
.div-5,.div-6,.div-7,.div-8{
riempimento: 5%;
larghezza: 100%;
altezza: 200px;
}
#icona1,#icona2,#icona3,#icona4{
galleggiante sinistro;
imbottitura: 10px;
}
.prova{
allineamento del testo: a sinistra;
}
}
/*Schermo mobile*/
@media media y (larghezza massima: 701px){
.js .navigazione{
posizione: assoluta;
altezza massima: 0px;
overflow: nascosto;
transizione: altezza massima .5s;
in alto: 70px;
a destra: 20px;
colore di sfondo: #d03b40;
margine: 0px automatico;
raggio di confine: 5px;
}
.js .navigazione li{
blocco schermo;
}
.js .navigazione a{
decorazione del testo: nessuna;
allineamento del testo: a destra;
imbottitura: 5px 10px;
colore: #f5f0ed;
}
.js .navigazione.menu-visualizzazione{
altezza massima: 200px;
}
.Primo{
altezza minima: 400px;
}
.div-1{
imbottitura: 80px;
}
.cioccolato{
larghezza: 70%;
}
.div-2,.div-3{
galleggiante: nessuno;
larghezza: 100%;
altezza: 300px;
}
.rosso,.beige{
larghezza: 50%;
}
p.clic,p.dolce {
larghezza: 70%;
}
.div-4{
riempimento: 8%;
margine superiore: 0px;
}
.Aggiunta{
larghezza: 60%;
}
.pulsante{
larghezza minima: 110px;
}
.div-5,.div-6,.div-7,.div-8{
galleggiante: nessuno;
riempimento: 5%;
allineamento del testo: centro;
larghezza: 100%;
altezza: 350px;
}
#icona1,#icona2,#icona3,#icona4{
galleggiante: nessuno;
imbottitura: 10px;
margine: 0px automatico;
}
.prova{
allineamento del testo: a sinistra;
}
.div-9,.div-10{
galleggiante: nessuno;
riempimento: 10%;
larghezza: 100%;
altezza: 300px;
}
p.mail{
larghezza: 80%;
}
p.indirizzo{
larghezza: 50%;
}
.Data{
schermo: blocco in linea;
larghezza: 130px;
imbottitura superiore: 20px;
}
piè di pagina{
colore di sfondo: nero;
imbottitura superiore: 20px;
colore: #f5f0ed;
}
.Diritti{
schermo: blocco in linea;
imbottitura superiore: 20px;
}
}
Il codice jscript è ciò che è stato visto nel corso.
Rallegrarsi!
Vedi originale
Nascondi originale
htmlboy
Insegnante PlusBel lavoro! Grazie mille per aver seguito il corso :-)
Vedi originale
Nascondi originale
Accedi o iscriviti gratuitamente per commentare