kód:
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
<style type="text/css">
.analeightemplate #code {
margin: 0px auto;
border: none;
padding: 5px;
font-size: 10px;
background-color: F7F7F7;
text-align: justify;
font-family: courier new;
}
.analeightemplate ::-webkit-scrollbar { width: 5px; }.analeightemplate ::-webkit-scrollbar-corner { background-color: white; }.analeightemplate ::-webkit-scrollbar-thumb { background-color: #CFBEB9; }.analeightemplate{
width: 300px;
margin: 10px auto 30px auto;
text-align: justify;
background-color: f7f7f7;
padding: 30px 30px 45px 30px;
}.analeightemplate label{
font-family: 'Grand Hotel', cursive, 'Arial Narrow', Arial, sans-serif;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: black;
text-shadow: 0px 0 white, 0 1px white, 1px 0 white, 0 0px white;
line-height: 33px;
font-size: 30px;
background: #C8C8A9;
margin: 10px;
text-align: center; !important
}.analeightemplate label:hover{
background: #C8C8A9;
}.analeightemplate input:checked + label,.analeightemplate input:checked + label:hover{
background: #C8C8A9;}.analeightemplate label:hover:after,.analeightemplate input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
}.analeightemplate input:checked + label:hover:after{
}.analeightemplate input{
display: none;
}.analeightemplate article{
background: white;
margin: 10px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}.analeightemplate article p{
font-family: courier new;
color: black;
font-size: 14px;
padding: 20px;
}.analeightemplate input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
overflow: auto;
}.analeightemplate input:checked ~ article.ac-small{
height: 240px;
}.analeightemplate input:checked ~ article.ac-medium{
height: 280px;
}.analeightemplate input:checked ~ article.ac-large{
height: 120px;
}.faceclaim {
background-color: #CFBEB9;padding: 10px;
-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT;
}.girls {
background-color: #E7C0B1;padding: 10px;
-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT;
}.boys {
background-color: #B2B4B7;padding: 10px;
-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT;
}.faceclaim:hover, .boys:hover, .girls:hover {
background-color: #C8C8A9;
-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT;
}.analeightemplate li {
list-style-position:inside;
text-transform: lowercase;
font-family: tahoma;
font-size: 10px;
}.analeightemplate a:link, .analeightemplate a:active, .analeightemplate a:visited {
font-weight: bold;
font-size: 10px;
color: #CFBEB9;
}.analeightemplate a:hover {
font-weight: bold;
font-size: 10px;
color: #CA6F98;
}
</style>
<center>
<section class="analeightemplate">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" checked />
<label for="ac-1"><div class="faceclaim">JégVirág Design</div></label>
<article class="ac-medium">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id eros felis. Fusce ac vehicula justo, a tristique magna. Cras pulvinar commodo neque nec porta. Proin feugiat vitae elit quis imperdiet. Nullam ac sapien vitae leo auctor rutrum at ut eros. Proin ac eros dapibus, cursus elit ac, fermentum felis. Maecenas placerat, diam eget pretium pulvinar, purus lorem volutpat metus, ut laoreet augue odio a lorem. Duis ac ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sollicitudin lacinia pretium. Ut sagittis euismod dui id auctor. Aenean varius nibh sapien, at scelerisque enim placerat ac. Cras pretium vehicula risus ut viverra. Aliquam erat volutpat. Fusce tincidunt, elit vitae ullamcorper varius, lorem enim lacinia lorem, quis facilisis eros felis tincidunt risus.
</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2"><div class="girls">JégVirág Design</div></label>
<article class="ac-medium">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id eros felis. Fusce ac vehicula justo, a tristique magna. Cras pulvinar commodo neque nec porta. Proin feugiat vitae elit quis imperdiet. Nullam ac sapien vitae leo auctor rutrum at ut eros. Proin ac eros dapibus, cursus elit ac, fermentum felis. Maecenas placerat, diam eget pretium pulvinar, purus lorem volutpat metus, ut laoreet augue odio a lorem. Duis ac ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sollicitudin lacinia pretium. Ut sagittis euismod dui id auctor. Aenean varius nibh sapien, at scelerisque enim placerat ac. Cras pretium vehicula risus ut viverra. Aliquam erat volutpat. Fusce tincidunt, elit vitae ullamcorper varius, lorem enim lacinia lorem, quis facilisis eros felis tincidunt risus.
</p><BR><BR>
<BR>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3"><div class="boys">JégVirág Design</div></label>
<article class="ac-medium">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id eros felis. Fusce ac vehicula justo, a tristique magna. Cras pulvinar commodo neque nec porta. Proin feugiat vitae elit quis imperdiet. Nullam ac sapien vitae leo auctor rutrum at ut eros. Proin ac eros dapibus, cursus elit ac, fermentum felis. Maecenas placerat, diam eget pretium pulvinar, purus lorem volutpat metus, ut laoreet augue odio a lorem. Duis ac ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sollicitudin lacinia pretium. Ut sagittis euismod dui id auctor. Aenean varius nibh sapien, at scelerisque enim placerat ac. Cras pretium vehicula risus ut viverra. Aliquam erat volutpat. Fusce tincidunt, elit vitae ullamcorper varius, lorem enim lacinia lorem, quis facilisis eros felis tincidunt risus.
</p>
<BR><BR>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" checked />
<label for="ac-4"><div class="faceclaim">JégVirág Design</div></label>
<article class="ac-large"><BR><BR><BR>
<center>JégVirág Design
</center>
<CENTER><a href="//jegvirag.gportal.hu" target="_blank">MENÜ</a></td>-<a href="//jegvirag.gportal.hu" target="_blank">MENÜ</a></td>-<a href="//jegvirag.gportal.hu" target="_blank">MENÜ</a></td>-<a href="//jegvirag.gportal.hu" target="_blank">MENÜ</a></td></CENTER>
</article>
</div>
</section>
</center>
AJÁNLOM AZ OLDALT
Archívum