Site name

title here

Bold text. Italic text. Link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dolor ante, convallis quis commodo vel, gravida sit amet magna. Mauris bibendum leo nec erat euismod aliquet. Maecenas pellentesque fringilla nisi eget commodo. Ut ultricies justo vitae ligula vehicula tristique.

The Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {
    box-sizing: border-box;}

body {
margin: 0px;
padding: 40px 20px;
background: #eee url(https://itinerae.neocities.org/bgs/wall-mokume01.gif);
font-family: 'Crimson text', georgia, serif;
font-size: 13px;
line-height:1.3;
letter-spacing:1px;
color: #555;}

b {color:#555;}
i {color:#999;}
a {color:#555;text-decoration:none;}
a:hover {color:#999;}

.container {
margin: auto;
background:#fff;
padding:8px;
max-width: 800px;}

.banner {
background: #fff;
border: 1px solid #cccccc;
height: 120px;
padding-top:40px;
text-align:center;}

.site-name {
font:23px  georgia, serif;
margin-bottom:8px;
letter-spacing:3px;}

.slogan {
font:italic 12px georgia, serif;
letter-spacing:1px;}

.navi {
margin-top: 8px;
padding: 5px 10px 4px 10px;
letter-spacing:1px;
font:italic 12px georgia, serif;
background: #fff;
border: 1px solid #ccc;
text-transform:lowercase;
text-align:center;}

.navi a {
display:inline-block;
padding-right:20px;
color: #555;
text-decoration: none;}

.navi a:last-child {
    padding-right: 0;}

.navi a:hover {
text-decoration: underline;}

.lay {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px;
margin-top: 8px;}

.aside {
display: flex;
flex-direction: column;
gap: 8px;}

.main {
display: flex;
flex-direction: column;
gap: 8px;}

.box {
padding: 8px;
background: #fff;
border: 1px solid #ccc;}

.title {
margin-bottom: 7px;
padding-bottom: 4px;
border-bottom: 1px solid #ddd;
text-transform:uppercase;}

.side-link {display:block;
border-left:5px solid #999;
padding-left:5px;
margin-bottom:3px;}

.footer {
margin-top: 8px;
padding: 8px;
text-align: center;
background: #fff;
border: 1px solid #ccc;}

@media (max-width: 670px) {

body { padding: 30px; 20px;}

.lay {grid-template-columns: 1fr;}

.main {order: 1;}

.aside {order: 2;}

}
</style>

</head>

<body>

<div class="slogan">- welcome to my website -</div>
    </div>

<div class="box">
                <div class="title">title here</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dolor ante, convallis quis commodo vel, gravida sit amet magna. Mauris bibendum leo nec erat euismod aliquet.
            </div>

</div>

<div class="box">
                <div class="title">title here</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dolor ante, convallis quis commodo vel, gravida sit amet magna. Mauris bibendum leo nec erat euismod aliquet
            </div>

</div>

<div class="box">
                <div class="title">title here</div>

<b>Bold text</b>. <i>Italic text.</i> <a href="#">Link.</a>
                <br>
                <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dolor ante, convallis quis commodo vel, gravida sit amet magna. Mauris bibendum leo nec erat euismod aliquet. Maecenas pellentesque fringilla nisi eget commodo. Ut ultricies justo vitae ligula vehicula tristique.
                <br>
                <br> Etiam eu eleifend velit. Nunc iaculis hendrerit velit, non mollis arcu aliquam et. Nulla lobortis dui eget lorem tincidunt, eu semper justo malesuada. Etiam efficitur id massa sed lobortis.
                <br>
                <br> Duis eget laoreet mi, quis venenatis est. Curabitur pellentesque, justo a blandit eleifend, quam nulla gravida lectus, at blandit dui elit quis mi. Morbi molestie odio nec sem fermentum, a commodo est venenatis. In hac habitasse platea dictumst. In nisl orci, viverra in dolor vitae, pulvinar blandit lectus.
              
            </div>

<div class="box">
                <div class="title">updates</div>

<b>19/09/2026</b> Updates go here Updates go here Updates go here . . .
            </div>
            
            
            
  <div class="box">
                <div class="title">about this layout</div>
    This layout is responsive and valid html / css.<br><br>
                <img src="https://itinerae.shop/img/validhtml.png" alt=""> 
                <img src="https://itinerae.shop/img/validcss.png" alt="">
            </div>

</div>

<div class="footer">
        <i>This site was created by</i> <b>Your name.</b> / Base code : <a href="https://itinerae.org">itinerae.</a>
    </div>

</div>

</body>
</html>

Duis eget laoreet mi, quis venenatis est. Curabitur pellentesque, justo a blandit eleifend, quam nulla gravida lectus, at blandit dui elit quis mi. Morbi molestie odio nec sem fermentum, a commodo est venenatis. In hac habitasse platea dictumst. In nisl orci, viverra in dolor vitae, pulvinar blandit lectus.

updates

19/09/2026 Published first version of this layout base . . .

about this layout

This layout is responsive and valid html / css.