html-esempio 12

<!DOCTYPE html>

<head>

<title>Galleria Fotografica</title>

<style>

header {

text-align: center;

padding: 20px;

background-color: #333;

color: white;

}

.photo-1 {

top: 500px;

left: 600px;

z-index: 4;

transform: rotate(7deg);

border: 8px solid;

border-color: #FF5733;

border-radius: 15px;

overflow: hidden; /* immagine e bordo rispettino l'arrotondamento */

}

.photo-2 {

top: 300px;

left: 450px;

z-index: 5;

transform: rotate(3deg);

border: 8px solid;

border-color: #33FF57;

border-radius: 15px;

overflow: hidden;

}

.photo-3 {

top: 500px;

left: 300px;

z-index: 1;

transform: rotate(-3deg);

border: 8px solid;

border-color: #5733FF;

border-radius: 15px;

overflow: hidden;

}

.photo-4 {

top: 200px;

left: 150px;

z-index: 2;

transform: rotate(30deg);

border: 8px solid;

border-color: #FF5733;

border-radius: 15px;

overflow: hidden;

}

.photo-5 {

top: 300px;

left: 750px;

z-index: 3;

transform: rotate(-10deg);

border: 8px solid;

border-color: #5733FF;

border-radius: 15px;

overflow: hidden;

}

.photo{

position: absolute;

width: 300px;

height: auto;

display: block;

}

</style>

</head>

<body>

<h1>Aerei in volo</h1>

</header>

</body>

</html>

aereo1.jpg

aereo2.jpg

aereo3.jpg

aereo4.jpg

aereo5.jpg

Ritorna agli Esempi