HTML

Template

by Andrea Spera

Template Zibaldone Box
Questo template è progettato per offrire una base semplice ma elegante per lo sviluppo di pagine web. Con un layout flessibile, box con effetti hover e un footer con un gradiente sfumato, questo modello può essere facilmente adattato a diverse esigenze di progettazione. Include anche un esempio di immagine di sfondo e un'area per i contenuti, con il supporto per il design responsive (decommentare il codice).
Codice 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lo Zibaldone Informatico - Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--<link rel="stylesheet" href="css/style.css">-->
<style>
html,body{
	height:100%;
	margin:0;
	padding:0;
	font-family:sans-serif;
	font-size:16px;}
a {color:inherit;}
a:hover{
	opacity:0.7;
	transition: opacity 0.3s}
div#container{
	position:relative;
	display:block;
	min-height:100%;
	margin-bottom:-80px;}
div#title{
	position:relative;
	display:block;
	width:100%;
	line-height:90px;
	color:white;
	font-size:1.8rem;
	font-weight:700;
	font-variant: small-caps;/* maiuscoletto */
	text-align:center;
	background-image:url("img/template_bg.webp");
	background-position:0% 0%;
	background-size:100% 100%;
	background-repeat: no-repeat;}
.box{
	position: relative;
	display:inline-block;
	padding: 10px;
	box-sizing:border-box;
	background-color:#eee;
	border-radius:10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;}
.box:hover {
	transform: translateY(-3px);}
.box1{
	margin: 20px 2%;
	width:47%;}
.box2{
	margin: 20px 0;
	width:47%;}
H1{
	font-size:1.2rem;
	font-weight:inherit;
	line-height:1.5;
	margin:0;}
H2{
	font-size:1.1rem;
	font-weight:inherit;
	line-height:1.5;
	margin:0;}
H3{
	font-size:1rem;
	font-weight:inherit;
	line-height:1.5;
	margin:0;}
div#filler{
	position:relative;
	display:block;
	z-index:-1;
	height:100px;
		/* solo per finalità di demo */
		background: repeating-linear-gradient(
			45deg,
			#fff,
			#fff 10px,
			#eee 10px,
			#eee 15px);
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #666;}
div#footer{
	position:relative;
	display:block;
	min-height:80px;
	line-height:80px;
	color:white;
	background-color: #555; /* Fallback for older browsers */
	background-image: linear-gradient(to right, #555, #999);
	font-size:0.9rem;
	text-align:center;}

/* Decommentare per il responsiveness
@media (max-width: 766px) {
	html,body{
		font-size:14px;}
	.box{
		text-align:center;}
	.box1, .box2 {
		display:block;
		width:98%;
		margin:20px 1%;}
	} */
</style>
</head>
<body>
	<div id="container">
		<div id="title">Title...</div>
		<div class="box box1">
			<H1>Some content here...</H1>
			<H2>Some content here...</H2>
			<H3>Some content here...</H3>
		</div>
		<div class="box box2">
			<H1>Some content here...</H1>
			<H2>Some content here...</H2>
			<H3>Some content here...</H3>
		</div>
		<div id="filler"></div>
		</div>
	</div>
	<div id="footer">
		© Lo Zibaldone Informatico 2024 | <a href="#">Contacts</a> | <a href="#">Some link...</a>
	</div>
</body>
</html>
Output