<CENTER>
<div class="theoutside">
<div class="picborder"><div class="picturebox"></div></div>
<div class="lyrics">
look, lady. this is where you write your lyrics. i hope you don't expect this to scroll.
if you do, well, find a shorter song. <3
</div>
<div class="borderoutside">
<div class="gallerycontainer">
<div class="gallerytabs">
<div class="gallerytab">
<input type="radio" id="gallerytab-1" name="gallerytab-group-1" checked>
<label for="gallerytab-1"> Applications </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-2" name="gallerytab-group-1">
<label for="gallerytab-2"> Roleplay Posts </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-3" name="gallerytab-group-1">
<label for="gallerytab-3"> Poetry </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-4" name="gallerytab-group-1">
<label for="gallerytab-4"> Fanfiction </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-5" name="gallerytab-group-1">
<label for="gallerytab-5"> Short Stories </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-6" name="gallerytab-group-1">
<label for="gallerytab-6"> Challenges </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-7" name="gallerytab-group-1">
<label for="gallerytab-7"> Critiques </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-8" name="gallerytab-group-1">
<label for="gallerytab-8"> Chapters </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-9" name="gallerytab-group-1">
<label for="gallerytab-9"> Tutorials </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-10" name="gallerytab-group-1">
<label for="gallerytab-10"> Codes </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-11" name="gallerytab-group-1">
<label for="gallerytab-11"> Miscellaneous </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
<div class="gallerytab">
<input type="radio" id="gallerytab-12" name="gallerytab-group-1">
<label for="gallerytab-12"> Archives </label>
<div class="gallerycontent">
<a href="linkiegallery">Title Here</a> --- 0/00/00<br>
<a href="linkiegallery">Title Here</a> --- 0/00/00
</div>
</div>
</div>
</div>
</div>
</div>
</CENTER>
<style type="text/css">
.theoutside {
width: 400px;
height: 550px;
background: #2D2C27;
position: relative;
}
.borderoutside {
border: #C6B69C 5px solid;
width: 320px;
position: absolute;
bottom: 35px;
left: 35px;
height: 270px;
background: #A2D1C9;
}
.picturebox {
background: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1477470933_20.jpg);
height: 100px;
width: 300px;
border: 10px #A2D1C9 solid;
}
.picborder {
border: #C6B69C 5px solid;
width: 320px;
position: absolute;
top: 35px;
left: 35px;
height: 120px;
background: #A2D1C9;
}
.lyrics {
background: #E6AAC3;
width: 320px;
position: absolute;
left: 35px;
top: 170px;
height: 50px;
text-align: justify;
padding: 5px;
font-family: calibri;
font-size: 10px;
color: #2D2C27;
line-height: 10px;
text-transform: lowercase;
overflow: hidden;
font-style: italic;
}
.gallerycontainer {
height: 208px;
width: 300px;
border: 10px #A2D1C9 solid;
background: #A2D1C9;
margin-top: 2px;
}
.gallerytabs {
margin: 0px auto;
position: relative;
width: 300px;
height: 200px;
}
.gallerytab {
float: left; /* CHANGE TO DISPLAY:BLOCK FOR VERTICAL TABS */
}
/* position your tab labels in gallery - also use margins to space your labels - you kind of have to eye until it's centered bc the math with tabs gets confusing */
.gallerytab label {
display: block; /* this lets you fix the label dimensions */
width: 73px;
height: 20px;
background: #EDEBEC;
border: 1px solid #A2D1C9;
margin: 0px;
position: relative;
left: 0px;
top: -2px;
z-index: 2;
transition: .8s ease;
font-size: 9px;
line-height: 20px;
font-family: calibri;
text-transform: uppercase;
color: #2D2C27;
cursor: crosshair;
}
.gallerytab label:hover {
background: #C6B69C;
cursor: crosshair;
}
.gallerytab input[type=radio]:checked ~ label {
background: #E6AAC3;
z-index: 2;
transition: .8s ease;
cursor: crosshair;
}
.gallerytab input[type=radio] {
display: none; /* DON'T EDIT */
}
/* if you want tab transitions they go gallery */
.gallerycontent {
position: absolute;
top: 65px;
bottom: 0px;
left: 1px;
right: 0px;
width: 288px;
height: 170px;
padding: 5px;
background-color: #EDEBEC;
opacity: 0;
-webkit-transition-duration: .8s;
-moz-transition-duration: .8s;
-o-transition-duration: .8s;
overflow: auto;
text-align: left;
font-size: 12px;
font-family: calibri;
color: #2D2C27;
}
.gallerycontent a {
text-shadow: #E6AAC3 1px 1px;
text-decoration: none;
color: #2D2C27;
transition: .3s ease;
cursor: crosshair;
font-weight: bold;
font-size: 14px;
}
.gallerycontent a:hover {
text-shadow: #A2D1C9 1px 1px;
text-decoration: none;
color: #2D2C27;
transition: .3s ease;
}
/* if you want tab transitions they also go gallery */
.gallerytab input[type=radio]:checked ~ label ~ .gallerycontent {
z-index: 1;
}
[type=radio]:checked ~ label ~ .gallerycontent { z-index: 1; opacity: 1; }
</style>
AJÁNLOM AZ OLDALT
Sg
Archvum
ARCHVUM
