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.

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

textarea {font:11px tahoma;border:1px solid #ccc;color:#333;}

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: 850px;}

.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: 180px 1fr 180px;
gap: 8px;
margin-top: 8px;}

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

.aside-right {
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: 760px) {

body {
padding: 30px 20px;
}

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

.main {
order: 1;
}

.aside {
order: 2;
}

.aside-right {
order: 3;
}

.navi {
flex-direction: column;
}
    
}

</style>

</head>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nulla dolor ante, convallis quis commodo vel.
            </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.
                <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.

</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>

</div>

<div class="box">
                <div class="side-title">
                    <span>R</span>esources
                </div>

<a href="#" class="side-link">fonts</a>
                <a href="#" class="side-link">graphics</a>
                <a href="#" class="side-link">backgrounds</a>
                <a href="#" class="side-link">tutorials</a>
            </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>O</span>ffsite
                </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="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.

Duis eget laoreet mi, quis venenatis est. Curabitur pellentesque, justo a blandit eleifend, quam nulla gravida lectus, at blandit dui elit quis mi.

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.