Questo è il file index.html
codice HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prima pajina Diçionario</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="innertube">
<p>Header...</p>
</div>
</header>
<div>
<nav>
<div class="circlemenu">
<ul>
<li><a href="index.html"><span>Caxa</span></a></li>
<li><a href="entra.php"><span>Vien rento</span></a></li>
<li><a href="chisemo.html"><span>Chi semo</span></a></li>
<li><a href="galepin.php"><span>Diçionario</span></a></li>
<li><a href="contati.html"><span>Çercane</span></a></li>
<li><a href="altrisiti.html"><span>Gançi utiłi</span></a></li>
</ul>
</div>
</nav>
<section class="content">
<h1>Home page</h1>
<p>
Benvegnuda, benvegnudo
, o come che se dixe da Nialtri, CIAO! </p><p>
Cuesta paroła xe un esenpio de come ła Nostra Cultura, ła Nostra Łengua łe sipia stade "internaçionałi", come el nome deła Serenisima e de Venexia sipia stade so łe boche de molti.
Ma xe vero che el Veneto xe soło che parlà, e che a cauxa dełe so variançe no se połe scrivarlo?
Gnine de pi sbajà!
Ła Łengua Veneta, come tute staltre Łengue del Mondo, ga sinonimi, variaçion de pronunçia e, a olte, anca de uxo dei tenpi dei verbi, ma dal ponto de vista łenguistego, xe na Łengua!, riconosuda anca da l'ONU.
Ma parché ghemo pensà a sto sito chive? Parchè on Diçionario? E come funćioneło?
Ała prima domanda rispondemo che, ghemo pensà ad on punto de inconro, ndoe che i Veneti posa catarse, pa metare in forma scrita, ła Sò, ła Nostra, Cultura comune, doparando na grafia che, co on fià de studio, poco no vołemo stravołxare çerte abitudini, posa vixinare el conçeto che se vołe esprimere, ała comunicaçion non verbałe che sipia conprexa da TUTIi Veneti.
El bisogno de on Diçionario nase parchè in rede o in carta se cata opere meritorie, che perô ga tegnesto pi daconto ła forma scrita che segue cuesta o cuea variança, pitosto che çercare on interlegibiità trans-variança.
Infine pa doparare sto Diçionario xe façiłe! Te vien chiedesto de iscrivarte, cuesto soło pa conosarTe, e se te vorarè tegnerte ajornà sora Nostre nove iniçiarive. Te gavarè tre livełi de iscriçion, el primo cueo da "consultadore", e liveło baxe, che de darà posibiłità de çercare parołe.
Ghe sarà, al momento xe in via de sviłupo, on secondo gradin, cueło del "consułente", stô liveło serverà pa darne na man sora on projeto che vegnarà in futuro.
In fine ghe xela terçae ultima posibiłità, cueła del "cołaboradore", cueta xe riservà a chi che ne voe jutare ad anpliare el Diçionario, dedicandoghe tenpo ed enerje pa zontare lemmi.
</p>
</section>
</div>
<footer id="footer">
<div class="innertube">
<p>Footer...</p>
</div>
</footer>
</body>
</html>
e questo il file CSS
codice HTML:
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family:Sans-serif;
line-height: 1.5em;
}
main {
position: absolute;
top: 170px; /* Set this to the height of the header */
bottom: 50px; /* Set this to the height of the footer */
left: 26% ;
right: 0;
height: 80%;
overflow: auto;
background: #fff;
box-shadow: 0 20px 32px -6px #777;
border: 10px solid;
-webkit-border-radius: 12px; /* Firefox 1-3.6 */
-moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5 Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
overflow: hidden; /* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
background: #BCCE98;
box-shadow: 0 20px 32px -6px #777;
border: 10px solid;
-webkit-border-radius: 12px; /* Firefox 1-3.6 */
-moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
nav {
position: absolute;
top: 170px; /* Set this to the height of the header */
bottom: 50px; /* Set this to the height of the footer */
left: 0;
width: 25%;
height:80%;
overflow: auto; /* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
background: #DAE9BC;
box-shadow: 0 20px 32px -6px #777;
border: 10px solid;
-webkit-border-radius: 12px; /* Firefox 1-3.6 */
-moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
section.content {
position: absolute;
top: 170px; /* Set this to the height of the header */
bottom: 50px; /* Set this to the height of the footer */
left: 265px;
width: 73%;
height:80%;
overflow: auto; /* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
box-shadow: 0 20px 32px -6px #777;
border: 10px solid;
-webkit-border-radius: 12px; /* Firefox 1-3.6 */
-moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
overflow: hidden; /* Disables scrollbars on the footer frame. To enable scrollbars, change "hidden" to "scroll" */
background: #BCCE98;
box-shadow: 0 20px 32px -6px #777;
border: 10px solid;
-webkit-border-radius: 12px; /* Firefox 1-3.6 */
-moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
.innertube {
margin: 15px; /* Provides padding for the content */
}
p {
color: #555;
width: 110%;
padding: 5% 5% 5% 5%;
word-wrap: break-word;
}
h1 {
text-allign: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
}
/*IE6 fix*/
* html body{
padding: 50px 0 50px 230px; /* Set the first value to the height of the header, the third value to the height of the footer, and last value to the width of the nav */
}
* html main{
height: 100%;
width: 100%;
}
.circlemenu{
position:absolute;
float:left;
left: 0;
height : 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 10px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.circlemenu li{
display: inline;
margin: 10px;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#728eaa; /* #b72d23*/
margin: 25px;
margin-right:35px; /*right spacing between each link */
width:80px;
height:80px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #c9d0de;
}