Kód:
<center><link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<style>
#containme { position: relative; bottom: 400px; transition: all 1s ease; transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; }
#hover:hover #containme { position: relative; bottom: 0px; -webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease; }
.tags { position: relative; bottom: 50px; transition: all 1s ease; transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; }
.posttags { font-family: open sans condensed; font-size: 15px; padding: 15px; background: #f3f3f3; color: #212121; width: 100px; line-height: 10px; text-align: center; }
.hover:hover .tags { position: relative; left: 400px; -webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease; }
.gradient { background-image: linear-gradient(top, rgb(243,243,243) 22%, rgb(105,55,94) 100%, rgb(105,55,94) 100%);
background-image: -o-linear-gradient(top, rgb(243,243,243) 22%, rgb(105,55,94) 100%, rgb(105,55,94) 100%);
background-image: -moz-linear-gradient(top, rgb(243,243,243) 22%, rgb(105,55,94) 100%, rgb(105,55,94) 100%);
background-image: -webkit-linear-gradient(top, rgb(243,243,243) 22%, rgb(105,55,94) 100%, rgb(105,55,94) 100%);
background-image: -ms-linear-gradient(top, rgb(243,243,243) 22%, rgb(105,55,94) 100%, rgb(105,55,94) 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.22, rgb(243,243,243)),
color-stop(1, rgb(105,55,94)),
color-stop(1, rgb(105,55,94))
);
}
</style>
<center><div style="width: 475px; height: 475px; background: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1587029329_75.jpg); overflow: hidden; " id="hover" class="hover">
<div id="containme"><div style="width: 475px; height: 390px; background: #f3f3f3; border-bottom: 10px solid #D846B1">
<div class="gradient" style="width: 475px; height: 390px;"></div>
<center>
<div style="font-family: 'Lily Script One', cursive; font-size: 28px; color: #69375e; position: absolute; top: 72px; z-index: 99; margin-left: 10%; letter-spacing: -3px; word-spacing: 5px;">www.jegvirag.gportal.hu</div>
<div style="font-family: 'Anton', cursive; font-size: 48px; color: #DFBA69; position: absolute; top: 100px; z-index: 98; margin-left: 15%;">JégVirág Design</div></center>
<div style="width: 400px; height: 320px; background: #f3f3f3; position: relative; bottom: 360px;"> <div style="width: 360px; height: 200px; position: absolute; bottom: 20px; padding: 0px 20px 0px 20px; font-family: anaheim; font-size: 10px; text-transform: lowercase; overflow: auto; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a ligula purus. Nulla a volutpat ligula, eu malesuada tellus. Phasellus accumsan nisi non diam scelerisque, eu pellentesque lorem laoreet. Aenean consectetur consequat viverra. Quisque fringilla semper est, eget accumsan erat dapibus porttitor. Aenean feugiat magna a urna tempus, id ullamcorper odio commodo. Mauris eleifend nulla odio, fermentum elementum urna rutrum vitae. Nullam sem urna, sollicitudin in mi at, elementum rutrum eros. Cras congue massa quis commodo facilisis. In a justo a mi aliquet tincidunt. Suspendisse suscipit tempus sapien eu sagittis. Vivamus id hendrerit augue. Donec dignissim et lectus sed iaculis. Vivamus fermentum a nulla vel tincidunt. Sed feugiat faucibus ligula, ut molestie mi tincidunt in.
<p>
Suspendisse laoreet non magna a rhoncus. Proin egestas risus turpis. Aliquam ultricies euismod urna, id lobortis lacus. Etiam sit amet mi ut dui malesuada sodales in in magna. Nullam nec semper nunc. Nullam in nisl eu felis tempus euismod. Phasellus convallis urna id tortor dictum, sed commodo lacus rutrum.
<p>
Cras at dignissim diam. Nam sit amet pretium nisi, eget ornare lectus. Cras dignissim bibendum eros et sollicitudin. Etiam nec fermentum ipsum. Aenean vitae velit ornare, iaculis quam ut, sagittis nulla. Nullam tortor nunc, tincidunt non libero fringilla, laoreet euismod mi. Quisque dignissim diam ut pharetra faucibus. Phasellus eu quam at orci placerat convallis. Nullam vestibulum condimentum interdum. Duis vel felis vehicula, ullamcorper neque id, tempor mi. Aliquam erat volutpat. Aenean ac erat et magna hendrerit varius. Curabitur tristique tortor et mi congue, ac luctus purus faucibus.
<p>
Donec hendrerit varius libero interdum rutrum. In commodo, quam a venenatis feugiat, nisl tellus porta tellus, a consequat leo ante sed lorem. Fusce vitae libero augue. Nullam tempor pellentesque dolor, vel vestibulum lacus aliquet et. Etiam suscipit fringilla sem sollicitudin accumsan. Nullam in libero est. Sed nec est id leo facilisis lobortis a non augue. Proin ac justo in quam aliquet varius.
<p>
Phasellus sed nibh ac magna elementum condimentum quis non augue. Quisque egestas turpis lorem, nec ultrices nisl tincidunt fringilla. Praesent sodales justo quis vehicula imperdiet. Vestibulum feugiat magna eget urna facilisis, ac facilisis lacus facilisis. Suspendisse nunc ligula, laoreet sed sodales sit amet, suscipit vel nisl. Suspendisse et feugiat tellus. Duis malesuada convallis libero, at blandit purus pretium ut. Ut bibendum scelerisque massa vel suscipit. In vel urna felis. Nunc quis dapibus arcu, eu mattis elit. Aliquam erat volutpat. Donec vehicula orci ut nulla sagittis egestas. Curabitur at ullamcorper nisi. Vivamus dignissim, erat non vulputate vulputate, arcu justo lobortis arcu, et posuere odio metus vitae nisi. Donec vitae bibendum diam. Nulla dictum convallis orci, et dignissim leo.</div></div>
</div>
<div style="width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; border-top: 75px solid #D846B1; "></div></div>
<div class="tags"><table><tr><td><div class="posttags">jégvirág</div></td> <td><div class="posttags">design</div></td></tr></table></div></div>
<div style="width: 475px; text-align: right; font-size: 6px;"></div>
</center>
AJÁNLOM AZ OLDALT
Archívum