The O.C blog layout. NEW!

£0.00 0 bids

Item description:
Blog layout featuring Ryan and Seth from The O.C. Free to use but with credit :)

About the seller:
This layout is your basic HTML CSS situation so not for use on tumblr, blogger ect. Just copy the code below into your files and volia! you have a 2000s style blog layout to write all your gossip. Click preview layout to see the whole layout - try before you buy!

The code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="oc.css" rel="stylesheet" type="text/css" media="all">
    
    <div class="main">
    <div class="header"><img src="https://64.media.tumblr.com/d0d29d80341865d340787bfa3f99baca/d5da6469f8ea1281-57/s1280x1920/3508beddc70badfe4f48b3a9476d39b27eafb97a.pnj" width="650px" height="auto"></div>
    <div class="content">
        <div id="one">
            <div class="title">
                Welcome to my blog!
            </div>
            <div class="date">
                2nd January 2006
            </div>
            <div class="song">
                 Phantom Planet - California
            </div>
            <div class="post">
                This is where your post will go... write about what you want! California.. california.... here we comeee
            </div>

</div>
        <div id="two">
            <div class="righttitle">
                About Me
            </div>
            <div class="rightinfomation">
                <img src="https://64.media.tumblr.com/1549fa2e47e72456d9e549fc10a94729/8a464dff19960b12-4f/s100x200/a27825eaac15347fdd5d92cedd6728424e263615.jpg" width="70px" height="auto">
                Who are <b>you?</b> Captain Oats or Princess Sparkle? This is the place to talk about your <span style="text-decoration: underline;">favourite band</span> (death cab) or what colour you 
                <span style="text-decoration: line-through;">hate.</span>
            </div>
            <div class="righttitle">
                Archives
            </div>
             <div class="rightinfomation">
                <a href=""> January 2006</a><br>
                <a href=""> December 2005</a><br>
                <a href=""> November 2005</a><br>
                <a href=""> October 2005</a><br>
                 
             </div>
             <div class="righttitle">
                Layout
             </div>
             <div class="rightinfomation">
             This layout is by <a href="https://www.aliceinavocadoland.neocities.org" target="_blank">Alice in Avocadoland</a> on neocities and features
             Ryan and Seth from the show The O.C. Lyrics are from <span style="font-style: italic; color: #bf9593;"> The First Single (You Know Me)</span> by The Format.
             Please do not claim as your own but you are free to use it with credit :)
             </div>
             <div class="righttitle">
                Credits
             </div>
             <div class="rightinfomation">
                Brushes: <a href="https://www.deviantart.com/gamblingwithsouls/art/15-Pencil-Brushes-27551465" target="_blank">X</a> <a href="https://web.archive.org/web/20100102232332/http://ego-box.com/downloads/brushes/EGOBOX-TinyTidbits.zip" target="_blank">X</a> <a href="https://www.deviantart.com/pfefferminzchen/art/Grunge-Masking-3-PS-7-0-56589014" target="_blank">X</a> <a href="https://www.deviantart.com/in-vogue/art/Ink-Splat-Photoshop-Brush-43211175" target="_blank">X</a><br>
                Images: <a href="https://www.everythingtheoc.com/2017/01/the-oc-rare-photos-early-season-1.html" target="_blank">X</a> <a href="https://www.deviantart.com/iremakbas/art/Frame-Png-Pack-470379935" target="_blank">X</a><br>
                Fonts: <a href="https://www.dafont.com/fragile-decay.font" target="_blank">X</a> <a href="https://www.dafont.com/enhanced-dot-digital-7.font" target="_blank">X</a> <a href="https://www.dafont.com/inkburrow.font">X</a><br>
             </div>

</div>
    </div>
    <div class="footer">©2025 <a href="https://www.aliceinavocadoland.neocities.org" target="_blank">Alice in Avocadoland</a></div>
    </div>
    </body>
</html>

CSS

body{
    background-image: url(https://64.media.tumblr.com/fcb5d1a76c60381925fad19820808591/d5da6469f8ea1281-56/s75x75_c1/307c0ecc885d754e3866c944de0cc1e6cc025835.pnj);
    background-repeat: repeat;
    font-family: Arial;
    color: #292929;
    font-size: 11px;
}
a, a:visited{
    color: #7dbad8;
}
a:hover{
    font-style: italic;
    color: #d91e17;
    cursor:crosshair;
}
.header{
    height: 400px;
    width: 700px;
    overflow: hidden;
    position: relative;
    margin: 10px auto 0px auto;
    z-index: -1;
}
.content{
    width: 700px;
    margin: -124px 0px 0px 450px;
    position: relative;
    display: grid;
    grid-template-columns: 400px 160px;
    gap: 10px;
    grid-template-areas: one two;
}
#one{
    background-color: white;
    height: 500px;
}
#two{
    background-color: white;
    margin-top: 90px;
    height: fit-content;
}
.title{
    background-color: #d91e17;
    color: white;
    font-size: 17px;
    font-weight: 600;
    padding-left: 3px;
    height: fit-content;
}
.date{
    border-bottom: #a5cadd solid 2px;
    height: fit-content;
    color: #a5cadd;
    font-size: 14px;
    font-weight: 600;
    line-height: 1em;
    padding: 1px 0px 0px 3px;
}
.song{
    padding: -1px 0px 0px 3px;
    color: #bf9593;
    
}
.post{
    padding-top: 3px;
}
.righttitle{
    background-color: #d91e17;
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding-right: 3px;
    height: fit-content;
    text-align: right;
}
.rightinfomation img{
    float: right;
    margin: 3px;
    border: #292929 solid 1px;

}
.footer{
    text-align: center;
}