|
|
Line 1: |
Line 1: |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> | | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> |
− |
| |
− |
| |
− | <style>
| |
− | .slidebar{
| |
− | width:700px;
| |
− | height:110px;
| |
− | background:#FFF;
| |
− | margin-bottom:100px;
| |
− | margin-left:-200px;
| |
− | margin-right:100px;
| |
− | float:right;
| |
− | z-index:8;
| |
− | text-align:left;
| |
− | line-height:1.1;
| |
− | font-family: Century Gothic;
| |
− | font-size: 40px;
| |
− | }
| |
− | .slidebar > .face{
| |
− |
| |
− | }
| |
− | .slidebar > .text{
| |
− |
| |
− |
| |
− | }
| |
− | .slidebar > .closed{
| |
− | position:absolute;
| |
− | background:#000; width:150px; height:150px;
| |
− | transition: -webkit-transform 1s ease-in-out 0s;
| |
− | -moz-transition: transform 1s ease-in-out 0s;
| |
− | -ms-transition: transform 1s ease-in-out 0s;
| |
− | }
| |
− | .slidebar > .open{
| |
− | float:left;
| |
− | text-align:left;
| |
− | font-family: Century Gothic;
| |
− | line-height:2;
| |
− | font-size:15px;
| |
− | padding-left:20px;
| |
− | position:absolute;
| |
− | opacity:0;
| |
− | background:#CCC; width:700px; height:150px; border-radius:3px;
| |
− | transition: -webkit-transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;
| |
− | -moz-transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;
| |
− | -ms-transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;
| |
− | }
| |
− | .slidebar:hover > .closed{
| |
− | transform: translateX(700px);
| |
− | -moz-transform: translateX(700px);
| |
− | -webkit-transform: translateX(700px);
| |
− | -ms-transform: translateX(700px);
| |
− | -o-transform: translateX(700px);
| |
− | }
| |
− | .slidebar:hover > .open{
| |
− | transform: translateX(50px);
| |
− | -moz-transform: translateX(50px);
| |
− | -webkit-transform: translateX(50px);
| |
− | -ms-transform: translateX(50px);
| |
− | -o-transform: translateX(50px);
| |
− | opacity:1;
| |
− | }
| |
− | .slidebar:hover > h9{
| |
− | color:#000;
| |
− | }
| |
− | .heading{
| |
− | width:700px;
| |
− | height:40px;
| |
− | background:#FFF;
| |
− | margin-bottom:60px;
| |
− | margin-left:-200px;
| |
− | margin-right:100px;
| |
− | float:right;
| |
− | z-index:8;
| |
− | text-align:left;
| |
− | line-height:1.1;
| |
− | font-family:Arial, Helvetica, sans-serif;
| |
− | font-size:40px;
| |
− | }
| |
− |
| |
− | .quote{
| |
− | float:left;
| |
− | margin-top:-100px;
| |
− | margin-left:450px;
| |
− | position:absolute;
| |
− | font-style:italic;
| |
− | max-width:140px;
| |
− | line-height:15px;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | </style>
| |
| | | |
| | | |