<head>

<title>mac inspired layout by C E P H E U S</title>


<link rel="icon" type="image/gif" href="FAVICON IMAGE URL.png" />
</head>


<style>
html, body, a, a:hover, textarea{
  cursor:url('http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), crosshair;}
  
  
img{max-width:100%;
max-height: 100%;}

#bar{
  width:100%;
  box-shadow: 0px 0px 20px #acacac;
  background: white;
  border-bottom: 1px solid black;
  position:fixed;
    top:0;
    padding: 0;
    left: 0;
    margin: 0;
    width:100%;
    z-index:100;
    height: 20px;
    padding-left: 3px;
    line-height:20px;
    font-size:13px;}
  
.boxtop{
 background: white;
  margin: auto;
  height:30px;
  line-height:30px;
  border-bottom: 1px solid #000;
  box-shadow: 0px 0px 20px #acacac;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  font-family: HelveticaNeue, 'Helvetica Neue', 'Lucida Grande', Arial, sans-serif;
}

.blogtop{
 background: black;
  margin: auto;
  height:30px;
  line-height:30px;
  border-bottom: 0px solid #000;
  box-shadow: 0px 0px 20px #acacac;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  font-family: HelveticaNeue, 'Helvetica Neue', 'Lucida Grande', Arial, sans-serif;
}
  
body{
background-color:#fff;
  font-size: 13px;
  color: black;
  font-family: courier new, monotype;}
  
#main{
  margin: 0 auto;
margin-top: 4%;
  width: 700px;
}

#bg{
  margin-bottom:5%;}
  
#sidebar{
  float:right;
  margin-bottom: 20px;
  width:180px;
  margin-top: 0;
}
  
 #content{
  float:left;
   margin-top: 0;
   width:500px;
   margin-bottom: 20px;
  }

#header{
  margin: 0 auto;
  width: 700px;
  height: 300px;
  background: url(https://dummyimage.com/700x300/fff/000.png);
  border: 1px solid black;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  position:relative;}

.box1{
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid black;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
  margin-top: 0px;}
  
.sidebox{
  padding:12px;}

.box2{
   border: 1px solid black;
  margin-top: 0px;
  background: #fff;
  margin-bottom: 20px;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
  }
  
th{
  text-align:left;
  font-weight: normal;
  color: white;
  background:black;}
  
  table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding:2px;
}

a{
  text-decoration: none;
  color: #666;
  -moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;}
  
  a:hover{
  color: #ebbca9;
  -moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;
  }
  
#navboi{
width:100%;
text-align:center;
background:black;
height: 30px;
position: absolute;
bottom:0;
}

#navboi a{
  font-family: courier new, monotype;
  margin: 0;
  padding: 0px;
  color: white;
  float:left;
  width:25%;
  font-size: 13px;
}

#navboi a:hover{
 -moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;
letter-spacing: 2px;
text-shadow: 0px 0px 3px #fff; 
}
  
#mobbox{
  display:contents;}
  
.button{
                font-family:courier new, monotype;
                font-size: 11px;
                color:#000000;
                
  cursor:url('http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), crosshair;
  
                 max-width:100%;
                padding: 1px;
               
                   -moz-border-radius: 0px;
                   -webkit-border-radius: 0px;
                   border-radius: 0px;
               
                border: 1px solid #000000;
                background-color: #f7e4e9;
                margin-bottom:0px;
                -webkit-appearance: none;
                text-align:center;
                margin-top:5px;   }
                
                
.ctrls{
  margin:0;
  width:100%;
 padding-top: 8px;
 padding-left: 8px;
 padding-bottom: 8px;
 margin-bottom: -16px;
 float:left;
}

.ctrl1 a{
 width: 11px;
 margin-right:4px;
 height: 11px;
 display:inline-block;
 text-decoration: none;
 border-radius: 50%;
 border: 1px solid #801511;
 background:#c2332d;
}

.ctrl2 a{
 width: 11px;
 margin-right:4px;
 height: 11px;
 display:inline-block;
 text-decoration: none;
 border-radius: 50%;
 border: 1px solid #b8860b;
 background:#f2b10f;
}

.ctrl3 a{
 width: 11px;
 height: 11px;
 display:inline-block;
 text-decoration: none;
 border-radius: 50%;
 margin-left:0px;
 border: 1px solid #387348;
 background:#32a852;
}

.ctrl1 a:hover{
  background: #912420;}

.ctrl2 a:hover{
  background: #c2921b;}
  
.ctrl3 a:Hover{
  background: #428053;}

         
                
h1{
  border-bottom: 1px solid black;
  color: black;
  text-align:center;
  padding: 0;
  margin:0px;
  width: 100%;
  font-size: 12px;
  line-height: 12px;
  font-style: none;
  font-weight:normal;}
  
h2{
 text-align:center;
 font-size: 20px;
 color: #ff5c5c;
 font-weight:normal;
 margin: 0;
 padding: 0;
}
  
blockquote{
  padding: 5px;
  border: 1px solid black;}
  

::-webkit-scrollbar {
    width: 5px;
    background:white;
    
    border: 1px solid #000;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,255,1); 
    border-radius: 0px;
    
}

::-webkit-scrollbar-thumb {
  
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.5); 
    background:black;
    
    border: 0px solid #fff;
} 
                
</style>


<body>
<div id="bar">
TEXT GOES HERE</div>

<div id="bg">

<div id="main"><div id="bigbox">

<div id="header"><div class="boxtop">

 
       
            <div class="ctrls">
            <span class="ctrl1"><a href="#" >&nbsp;</a></span>
            <span class="ctrl2"><a href="#" >&nbsp;</a></span>
            <span class="ctrl3"><a href="#" >&nbsp;</a></span>
          
          </div>
          
          
<div id="navboi">
<a href="">i. LINK</a>
<a href="">ii. LINK</a>
<a href="">iii. LINK</a>
<a href="">iv. LINK</a>
    </div>


</div></div>



<div id="content">

<div class="box2">
<div class="blogtop">

 
       
            <div class="ctrls">
            <span class="ctrl1"><a href="#" >&nbsp;</a></span>
            <span class="ctrl2"><a href="#" >&nbsp;</a></span>
            <span class="ctrl3"><a href="#" >&nbsp;</a></span>
          
          </div>


</div>
  <h1>CODED LAYOUT</h1>
<div class="sidebox">



	<h2>Information</h2>

   <p>This layout uses HTML/CSS and is suitable for most HTML hosts like <a href="http://neocities.org" target="_blank">neocities</a> and can be adapted for other platforms (like blogger classic templates html mode). Feel free to use it and edit it at will but <u>please</u> give credit unless the code is completely unrecognisable from the original. The mac-style button code is also credited - please leave this unless you decide to remove the buttons.</p>
   
   
   </div></div>
   
   
   <div class="box2">
<div class="blogtop">

 
    
       
            <div class="ctrls">
            <span class="ctrl1"><a href="#" >&nbsp;</a></span>
            <span class="ctrl2"><a href="#" >&nbsp;</a></span>
            <span class="ctrl3"><a href="#" >&nbsp;</a></span>
          
          </div>


</div>
  <h1>HEADER/DATE THING</h1>
<div class="sidebox">

	<h2>Post Title</h2>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   
   </div></div>
   
      <div class="box2">
<div class="blogtop">

 
   
       
            <div class="ctrls">
            <span class="ctrl1"><a href="#" >&nbsp;</a></span>
            <span class="ctrl2"><a href="#" >&nbsp;</a></span>
            <span class="ctrl3"><a href="#" >&nbsp;</a></span>
          
          </div>


</div>
  <h1>HEADER/DATE THING</h1>
<div class="sidebox">

	<h2>Post Title</h2>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   
   </div></div>

          
      </div>

   </div>


<div id="sidebar">
  
  <div class="box1">
<div class="blogtop">

 
    
            <div class="ctrls">
            <span class="ctrl1"><a href="#" >&nbsp;</a></span>
            <span class="ctrl2"><a href="#" >&nbsp;</a></span>
            <span class="ctrl3"><a href="#" >&nbsp;</a></span>
          
          </div>


</div>
<h1>Info</h1>
<div class="sidebox">Welcome to my blog!
</div>
  
  

</div>



<div class="box1">
<div class="blogtop">

 
     
            <div class="ctrls">
            <span class="ctrl1"><a href="#" >&nbsp;</a></span>
            <span class="ctrl2"><a href="#" >&nbsp;</a></span>
            <span class="ctrl3"><a href="#" >&nbsp;</a></span>
          
          </div>


</div>
<h1>Site Map</h1>
<div class="sidebox"><a href="http://cepheus.neocities.org/home.html">LINK</a><br>
<a href="http://cepheus.neocities.org/home.html">LINK</a><br>
<a href="http://cepheus.neocities.org/home.html">LINK</a><br>
<a href="http://cepheus.neocities.org/home.html">LINK</a><br>
<a href="http://cepheus.neocities.org/home.html">LINK</a><br>
<a href="http://cepheus.neocities.org/home.html">LINK</a><br>
</div>

</div>


<div class="box1">
<div class="blogtop">

 
       
            <div class="ctrls">
            <span class="ctrl1"><a href="#" >&nbsp;</a></span>
            <span class="ctrl2"><a href="#" >&nbsp;</a></span>
            <span class="ctrl3"><a href="#" >&nbsp;</a></span>
          
          </div>


</div>
<h1>Link</h1>
<p style="text-align:center;"><img src="https://dummyimage.com/88x31/000/fff.png"><br>
<textarea style="width:88px; font-family: times new roman; margin-top:3px;"><a href="http://yoursite.htmlsite.host" target="_blank"><img src="http://your.button/image.png" alt="text goes here"></a></textarea></p>


</div>

<div class="box1">
<div class="blogtop">

 
       <div class="ctrls">
            <span class="ctrl1"><a href="#" >&nbsp;</a></span>
            <span class="ctrl2"><a href="#" >&nbsp;</a></span>
            <span class="ctrl3"><a href="#" >&nbsp;</a></span>
          
          </div>


</div>
<h1>Disclaimer</h1>
<div class="sidebox"><b>&copy; YOUR NAME 2020</b>. Layout by <a href="http://cepheus.neocities.org/" target="_blank">cepheus</a>.
</div>

</div>

</div>



</div>

</div></div></body>

</html>