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: #fafafa url(https://shye.nekoweb.org/graphics_bg/simple6.png);
font-family: Arial, Tahoma, Verdana;
font-size: 11px;
line-height: 1.3;
color: #555;
letter-spacing:0px;}

b {color:#e4c44f;}
i {color:#999;}

a {color: #74aec2;text-decoration: none;}
a:hover {color: #d4b342;}

.container {
margin: auto;
background:#fff;
border: 1px solid #e4e4e4;
padding:8px;
max-width: 700px;}

.banner {
background: #fbfbfb;
border: 1px solid #dedede;
padding: 17px 12px 14px;}

.site-name {
font-size: 25px;
line-height: 1;
letter-spacing: -1px;
color: #73afc3;
font-weight: bold;}

.site-name span {
color: #e4c44f;}

.slogan {
color:#999;
font-style:italic;}

.navi {
display: flex;
gap: 3px;
padding: 4px;
border-bottom: 1px solid #dedede;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
background: #f5f5f5;}

.navi a {
flex: 1;
padding: 5px 4px;
text-align: center;
color: #ffffff;
font-size: 10px;
font-weight: bold;
text-transform: lowercase;}

.navi a:nth-child(odd) {
background: #78b5c9;}

.navi a:nth-child(even) {
background: #e3c356;}

.navi a:hover {
background: #999;
color: #fff;
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 {
color: #70aec4;
margin-bottom: 7px;
padding-bottom: 4px;
border-bottom: 1px solid #ddd;
font-size:17px;}

.side-title {
padding: 2px 5px 2px 5px;
background: #eeeeee;
border-bottom: 1px solid #dddddd;
font-size: 15px;
line-height: 1;
text-transform:lowercase;
color: #73afc3;
margin-bottom:3px;}

.side-title span {
color: #e4c44f;}

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

.side-link:hover {
border-left-color: #e4c44f;
color:#999;}

.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;}

.navi {
        flex-direction: column;
    }
    
}

</style>

</head>

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

<div class="box">
                <div class="side-title">
                    <span>T</span>itle 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 class="box">
                <div class="side-title">
                    <span>S</span>ide links
                </div>

<div class="box">
                <div class="side-title">
                    <span>C</span>urrently
                </div>
                <b>Date</b> 23/09/2026<br>
                <b>Mood</b> Hopeful<br>
                <b>Listening</b> Nu-metal<br>
                <b>Reading</b> Old blogs<br>
                <b>Coding</b> A layout
            </div>

<div class="box">
                <div class="side-title">
                    <span>T</span>itle 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.

</div>

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

<b>19/09/2026</b> Updates go here Updates go here Updates go here.
                <br>
                <b>19/09/2026</b> Updates go here Updates go here Updates go here.
                <br>
                <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">
        This site was created by Your name. Base code by <a href="https://itinerae.org" target="_blank">Itinerae.</a>
    </div>

</div>

</body>
</html>

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.

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.

updates

19/09/2026 Updates go here Updates go here Updates go here.
19/09/2026 Updates go here Updates go here Updates go here.
19/09/2026 Updates go here Updates go here Updates go here.

about this layout

This layout is responsive and valid html / css.