<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Nova+Mono" rel="stylesheet">
<style type="text/css">
.back {
width: 400px;
height: 100px;
padding-top: 7px;
background-color: #B2C27B;
padding-bottom: 463px;
}
.tabs {
position: relative;
width: 400px;
height: 400px;
}
.tab {
float: left;
margin-top: 2.5px;
}
.tab label {
background: #B2C27B;
padding: 10px;
border: 0px solid #ccc;
margin-left: -1px;
bottom: -1px;
position: relative;
left: 1px;
font-family: Arial;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #f4f4f4;
padding-top: 20px;
padding-bottom: 80px;
border: 0px solid #ccc;
width: 400px;
height: 400px;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
.info-table {
margin-top: -5px;
width: 200px;
max-height: 200px;
overflow: auto;
line-spacing: 105%;
text-align: justify;
background-color: #ffffff;
}
.info-table::-webkit-scrollbar {
width:10px;
background:none!important;
}
.info-table::-webkit-scrollbar-thumb {
background-color: #B2C27B;
}
</style>
<center><div class="back">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">NAME1</label>
<div class="content"><img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1488384717_45.jpg" style="border-radius: 100%;"><br>
<span style="padding: 5px; font-family: Shadows Into Light Two;"><center><b>Virg Design </b></center></span><br>
<div class="info-table">1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id diam viverra, rhoncus felis id, vestibulum libero. Morbi ultrices dolor at nibh laoreet, at blandit nulla ornare. Duis elit sem, tempor eu accumsan vitae, accumsan at lorem. Donec nec turpis varius, semper arcu quis, efficitur eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae enim lectus.<p>
Suspendisse dignissim hendrerit ultrices. Praesent in leo neque. Curabitur convallis, erat ac pretium elementum, nunc sapien interdum sapien, vitae maximus ligula urna eu est. Donec dapibus mauris lectus, in lacinia ante mollis ac. Vestibulum augue ipsum, aliquet rutrum tortor in, tempus ultrices sem.<p>
Cras egestas mauris est, luctus vehicula nulla pharetra vitae. Integer sit amet tincidunt odio. Ut fermentum convallis erat, nec mollis velit blandit quis. In tincidunt, velit nec bibendum hendrerit, mauris ligula accumsan velit, eu varius mauris dolor et risus. Aliquam cursus ligula erat, vel pulvinar erat suscipit eu. In condimentum ullamcorper enim, ac imperdiet nulla fringilla vitae. Fusce nec placerat nunc, ut dictum diam.</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">NAME2</label>
<div class="content"><img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1144401198.gif" style="border-radius: 100%;"><br>
<span style="padding: 5px; font-family: Shadows Into Light Two;"><center><b>Virg Design 2</b></center></span><br>
<div class="info-table">2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id diam viverra, rhoncus felis id, vestibulum libero. Morbi ultrices dolor at nibh laoreet, at blandit nulla ornare. Duis elit sem, tempor eu accumsan vitae, accumsan at lorem. Donec nec turpis varius, semper arcu quis, efficitur eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae enim lectus.<p>
Suspendisse dignissim hendrerit ultrices. Praesent in leo neque. Curabitur convallis, erat ac pretium elementum, nunc sapien interdum sapien, vitae maximus ligula urna eu est. Donec dapibus mauris lectus, in lacinia ante mollis ac. Vestibulum augue ipsum, aliquet rutrum tortor in, tempus ultrices sem.<p>
Cras egestas mauris est, luctus vehicula nulla pharetra vitae. Integer sit amet tincidunt odio. Ut fermentum convallis erat, nec mollis velit blandit quis. In tincidunt, velit nec bibendum hendrerit, mauris ligula accumsan velit, eu varius mauris dolor et risus. Aliquam cursus ligula erat, vel pulvinar erat suscipit eu. In condimentum ullamcorper enim, ac imperdiet nulla fringilla vitae. Fusce nec placerat nunc, ut dictum diam.</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">NAME3</label>
<div class="content"><img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1454861087_76.gif" style="border-radius: 100%;"><br>
<span style="padding: 5px; font-family: Shadows Into Light Two;"><center><b>Virg Design 3</b></center></span><br>
<div class="info-table">3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id diam viverra, rhoncus felis id, vestibulum libero. Morbi ultrices dolor at nibh laoreet, at blandit nulla ornare. Duis elit sem, tempor eu accumsan vitae, accumsan at lorem. Donec nec turpis varius, semper arcu quis, efficitur eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae enim lectus.<p>
Suspendisse dignissim hendrerit ultrices. Praesent in leo neque. Curabitur convallis, erat ac pretium elementum, nunc sapien interdum sapien, vitae maximus ligula urna eu est. Donec dapibus mauris lectus, in lacinia ante mollis ac. Vestibulum augue ipsum, aliquet rutrum tortor in, tempus ultrices sem.<p>
Cras egestas mauris est, luctus vehicula nulla pharetra vitae. Integer sit amet tincidunt odio. Ut fermentum convallis erat, nec mollis velit blandit quis. In tincidunt, velit nec bibendum hendrerit, mauris ligula accumsan velit, eu varius mauris dolor et risus. Aliquam cursus ligula erat, vel pulvinar erat suscipit eu. In condimentum ullamcorper enim, ac imperdiet nulla fringilla vitae. Fusce nec placerat nunc, ut dictum diam.</div>
</div>
</div>
</div>
</center>
AJÁNLOM AZ OLDALT
Sg
Archvum
ARCHVUM
