<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<style type="text/css">
/* image from unsplash.com/license -- free for use stock photos */
.jgumdropcontainer1 {
width:900px;
height: auto;
background-color: #8780B4;
margin: 10px auto 2px;
font: normal normal normal 10px/110% Calibri;
border: 10px solid #fff;
box-shadow: 0px 3px 2px #999, 0px 0px 2px #999;;
overflow: hidden;
position: relative;
text-align: justify;
}
.jgumdropcontainer1 ::-webkit-scrollbar { background: #e8e8ea; width: 5px; border: 2px solid #fff; }
.jgumdropcontainer1 ::-webkit-scrollbar-thumb { background: #736093; }
.jgumdropcontainer1 ::-webkit-scrollbar-corner { background: #fff; }
.jgumdropcontainer1 h1 {
margin: 40px auto 0px;
color: #243a52;
text-align: center;
font: normal normal normal 55px/100% 'Open Sans Condensed';
text-transform: uppercase;
letter-spacing: -2px;
}
.jgumdropcontainer1 h2 {
margin: 5px auto 0px;
text-align: center;
font: normal normal 700 10px/100% 'Open Sans Condensed';
text-transform: uppercase;
color: #617c87;
letter-spacing: 1px;
}
.jgumdropcontainer1 h3 {
margin: 0px auto;
text-align: center;
font: normal normal 700 8px/100% 'Open Sans Condensed';
text-transform: uppercase;
color: #243a52;
letter-spacing: 1px;
}
.jgumdropcontainer2 {
background-color: #b8b6c1;
width: 900px;
height: 450px;
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
}
.jgumdropcontainer {
margin: 10px auto; /* centers it */
height: auto;
width: auto;
}
.jgumdroptabs {
margin: 0px auto;
position: relative;
right: 0px;
width: 880px;
height: 220px;
}
.jgumdroptab {
float: left;
}
.jgumdroptab label {
display: block;
width: 25px;
height: 25px;
background: #b8b6c1;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
position: relative;
left: 350px;
top: 210px;
z-index: 2;
}
.jgumdroptab input[type=radio]:checked ~ label {
background: #818094;
z-index: 2;
}
.jgumdroptab input[type=radio] {
display: none; /* DON'T EDIT */
}
.jgumdropcontent {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: white;
padding: 0px 3px;
border: 20px solid #fff;
outline: 1px solid #ccc;
overflow: auto;
}
.jgumdroptab input[type=radio]:checked ~ label ~ .jgumdropcontent {
z-index: 1;
}
.jgumdropcontent img { float:left; }
</style>
<div class="jgumdropcontainer1">
<div class="jgumdropcontainer">
<div class="jgumdroptabs">
<div class="jgumdroptab">
<input type="radio" id="jgumdroptab-1" name="jgumdroptab-group-1" checked>
<label for="jgumdroptab-1"> <! Tab One !> </label>
<div class="jgumdropcontent">
<h1>JégVirág Design</h1>
<h2>www.jegvirag.gportal.hu </h2>
</div>
</div>
<div class="jgumdroptab">
<input type="radio" id="jgumdroptab-2" name="jgumdroptab-group-1">
<label for="jgumdroptab-2"> <! Tab Two !> </label>
<div class="jgumdropcontent">
<img src="//virgoncdesign.gportal.hu/portal/virgoncdesign/image/gallery/1424788371_99.jpg">
<h2>dob</h2> <h3>> month day</h3>
<h2>occupation</h2> <h3>> position > company</h3>
<h2>hometown</h2> <h3>> city > state > country</h3>
<h2>other</h2> <h3>> other fields may be added</h3>
</div>
</div>
<div class="jgumdroptab">
<input type="radio" id="jgumdroptab-3" name="jgumdroptab-group-1">
<label for="jgumdroptab-3"> <! Tab Three !> </label>
<div class="jgumdropcontent">
Freestyle app
</div>
</div>
<div class="jgumdroptab">
<input type="radio" id="jgumdroptab-4" name="jgumdroptab-group-1">
<label for="jgumdroptab-4"> <! Tab Four !> </label>
<div class="jgumdropcontent">
<h1>alias</h1>
<h2>age. timezone. contact. character #.</h2>
</div>
</div>
</div>
</div>
<! REPLACE THIS IMG SRC URL IF YOU DON'T WANT THE MOUNTAINS IMAGE- IMAGE MUST BE 1000PX WIDE, AS TALL AS YOU WANT - MOUNTAINS ARE 200 PX TALL - PLEASE REHOST MOUNTAINS IMAGE IF YOU USE !>
<img src="//virgoncdesign.gportal.hu/portal/virgoncdesign/image/gallery/1424788003_87.jpg">
</div>