Sanitis
<!DOCTYPE html>
<html lang=”it”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Sanitis – Mappa Mentale</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.5;
}
.container {
position: relative;
width: 600px;
margin: 50px auto;
border: 1px solid #ccc;
padding: 20px;
height: 600px;
}
.central {
position: absolute;
top: 250px;
left: 200px;
font-size: 24px;
font-weight: bold;
}
.branch {
position: absolute;
font-size: 16px;
}
.branch-1 {
top: 150px;
left: 220px;
}
.branch-2 {
top: 350px;
left: 220px;
}
.branch-3 {
top: 50px;
left: 350px;
}
.branch-4 {
top: 350px;
left: 50px;
}
.branch-5 {
top: 150px;
left: 400px;
}
.line {
position: absolute;
border-left: 2px solid #000;
}
.line-1 {
top: 150px;
left: 250px;
height: 100px;
}
.line-2 {
top: 350px;
left: 250px;
height: -100px;
}
.line-3 {
top: 70px;
left: 320px;
height: 180px;
}
.line-4 {
top: 370px;
left: 120px;
height: -120px;
}
.line-5 {
top: 170px;
left: 420px;
height: 70px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”central”>SANITIS</div>
<div class=”branch branch-1″>
di Simone Balbone
</div>
<div class=”branch branch-2″>
Contatti
</div>
<div class=”branch branch-3″>
Format per Feedback
</div>
<div class=”branch branch-4″>
Servizi
</div>
<div class=”branch branch-5″>
Contatori Risparmio CO2
</div>
<!– Linee di collegamento –>
<div class=”line line-1″></div>
<div class=”line line-2″></div>
<div class=”line line-3″></div>
<div class=”line line-4″></div>
<div class=”line line-5″></div>
</div>
</body>
</html>