Transparent Website
This is my website. Yep, I made it in jsFiddle. Lol. Except for the php of course.
by transparent
HTML
<h2 id="header">TRANSPARENT</h2>
<div class="box">
Hello, there! Welcome to the site of a 14 year old web designer. I like websites that have great functionality and stunning visual appeal. I hope that you find that in my many projects that I have. Farewell.
<div class="gallery">
<span class="label bottom">
<p><a href="http://codersshed.webuda.com">Coder's Shed</a></p>
<img src="http://fe.gd/1DL">
</span>
<span class="label bottom">
<p><a href="http://jsfiddle.net/transparent/PFXyz/">jsBake</a></p>
<img src="http://fe.gd/1Ey">
</span>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Doppio+One);
h2#header{
font-family: 'Doppio One', sans-serif;
color: #999;
text-shadow: 2px 2px 10px #555;
font-size: 89px;
text-align: center;
letter-spacing: -5px;
cursor:pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* For the "inset" look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
background-color: #3E3E3E;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #999;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #666;
}
.box {
width:67%;
height:500px;
background:#999;
margin:40px auto;
padding:8px;
box-shadow: 10px 10px;
box-shadow: 5px 5px 20px #333;
padding-left: 20px;
padding-right: 20px;
font-family: trebuchet-ms, sans-serif;
max-width:500px;
}
/*
//////////////////
///TESTSSSSS/////
////////////////
*/
/*LABELS*/
.label {
/*Position*/
overflow: hidden;
position: relative;
margin: 20px;
display: inline-block;
vertical-align: top;
/*Skin*/
border: 7px solid #fff;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
.label img {
display: block;
}
.label p {
/*Position*/
position: absolute;
...