Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en-US">
- <!-- Profile By Lyend -->
- <head>
- <!-- Links and shit -->
- <script src="https://dl.dropboxusercontent.com/u/108390498/Code/fade().js"></script>
- <link href="http://fonts.googleapis.com/css?family=La+Belle+Aurore" rel="stylesheet">
- <link type="text/css" rel="stylesheet" href="http://www.dreamtemplate.com/dreamcodes/divider/css/tsc_divider.css" />
- <style>
- body { overflow:hidden; }
- Background {
- Top:0px;
- Left:0px;
- Height:100%;
- Width:100%;
- background-color:white;
- position:absolute;
- background-image:url('http://i.imgur.com/mDGGLII.png');
- opacity:1.0;
- filter:alpha(opacity=100); /* For IE8 and earlier */ }
- #head {
- width:100%;
- height:100px;
- position:relative;
- top:0;
- left:0;
- z-index: +1;
- background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #C0C0C0 100%);
- background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #C0C0C0 100%);
- background-image: -o-linear-gradient(top left, #FFFFFF 0%, #C0C0C0 100%);
- background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #C0C0C0));
- background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #C0C0C0 100%);
- background-image: linear-gradient(to bottom right, #FFFFFF 0%, #C0C0C0 100%);
- -webkit-box-shadow: 0 1px 9px 1px #000;
- box-shadow: 0 1px 9px 1px #000;
- }
- span.headtext {
- font-family:'La Belle Aurore';
- font-size:14px;
- bottom:0;
- width:100%;
- text-align:center;
- padding:2px 2px 2px 2px;
- display:inline-block;
- position:absolute;
- }
- #boxone,#boxtwo {
- width:200px;
- height:300px;
- margin-top:2%;
- margin-left:2%;
- border: dotted 1px #c0c0c0;
- position:relative;
- }
- #profile-pic {
- -webkit-border-radius: 100%;
- border-radius: 100%;
- height:50px;
- width:50px;
- background-image:url('http://fp.chatango.com/profileimg/l/y/lyend/thumb.jpg');
- position:relative;
- margin-top:1%;
- margin-left:2%;
- margin-left:auto;
- margin-right:auto;
- }
- #profile-pic:hover {
- }
- #main {
- width:899px;
- height:700px;
- border:1px solid black;
- position:absolute;
- top:20%;
- margin-left:25%;
- background-color:white;
- /* The background is used to specify the border background */
- background: -moz-linear-gradient(90deg, #000, transparent);
- background: -webkit-linear-gradient(90deg, #000, transparent);
- /* Background origin is the padding box by default.
- Override to make the background cover the border as well. */
- -moz-background-origin: border;
- background-origin: border-box;
- /* A transparent border determines the width */
- border: 1px solid transparent;
- border-radius: 8px;
- box-shadow: inset -999px 0 0 #fff; /* The background color */
- overflow:hidden;
- float: left;
- }
- /* simple */
- .flip-container {
- -webkit-perspective: 1000;
- -moz-perspective: 1000;
- -ms-perspective: 1000;
- perspective: 1000;
- -ms-transform: perspective(1000px);
- -moz-transform: perspective(1000px);
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- }
- .flip-container:hover .back, .flip-container.hover .back {
- -webkit-transform: rotateY(0deg);
- -moz-transform: rotateY(0deg);
- -o-transform: rotateY(0deg);
- -ms-transform: rotateY(0deg);
- transform: rotateY(0deg);
- }
- .flip-container:hover .front, .flip-container.hover .front {
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
- -o-transform: rotateY(180deg);
- transform: rotateY(180deg);
- }
- .flip-container, .front, .back {
- width:200px;
- height:300px;
- margin-top:2%;
- margin-left:2%;
- }
- .flipper {
- -webkit-transition: 0.6s;
- -webkit-transform-style: preserve-3d;
- -ms-transition: 0.6s;
- -moz-transition: 0.6s;
- -moz-transform: perspective(1000px);
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- transition: 0.6s;
- transform-style: preserve-3d;
- position: relative;
- }
- .front, .back {
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- -ms-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-transition: 0.6s;
- -webkit-transform-style: preserve-3d;
- -moz-transition: 0.6s;
- -moz-transform-style: preserve-3d;
- -o-transition: 0.6s;
- -o-transform-style: preserve-3d;
- -ms-transition: 0.6s;
- -ms-transform-style: preserve-3d;
- transition: 0.6s;
- transform-style: preserve-3d;
- position: absolute;
- top: 0;
- left: 0;
- background-color:white;
- }
- .front {
- -webkit-transform: rotateY(0deg);
- -ms-transform: rotateY(0deg);
- z-index: 2;
- padding:5px 5px 5px 5px;
- color:black;
- border:1px dotted #c0c0c0;
- }
- .back {
- -webkit-transform: rotateY(-180deg);
- -moz-transform: rotateY(-180deg);
- -o-transform: rotateY(-180deg);
- -ms-transform: rotateY(-180deg);
- transform: rotateY(-180deg);
- padding:5px 5px 5px 5px;
- overflow:none;
- border:1px dotted skyblue;
- color:white;
- filter: dropshadow(color=#820882, offx=8, offy=8);
- }
- .front .name {
- font-size: 2em;
- display: inline-block;
- background: rgba(33, 33, 33, 0.9);
- color: #f8f8f8;
- font-family: Courier;
- padding: 5px 10px;
- border-radius: 5px;
- bottom: 60px;
- left: 25%;
- position: absolute;
- text-shadow: 0.1em 0.1em 0.05em #333;
- display: none;
- overflow:none;
- -webkit-transform: rotate(-20deg);
- -moz-transform: rotate(-20deg);
- -ms-transform: rotate(-20deg);
- transform: rotate(-20deg);
- }
- /* vertical */
- .vertical.flip-container {
- position: relative;
- }
- .vertical .back {
- -webkit-transform: rotateX(180deg);
- -moz-transform: rotateX(180deg);
- -ms-transform: rotateX(180deg);
- transform: rotateX(180deg);
- }
- .vertical.flip-container .flipper {
- -webkit-transform-origin: 100% 213.5px;
- -moz-transform-origin: 100% 213.5px;
- -ms-transform-origin: 100% 213.5px;
- transform-origin: 100% 213.5px;
- }
- /*
- .vertical.flip-container:hover .flipper {
- -webkit-transform: rotateX(-180deg);
- -moz-transform: rotateX(-180deg);
- -ms-transform: rotateX(-180deg);
- transform: rotateX(-180deg);
- }
- */
- /* Comfirm Rotation, accommodating for IE support */
- .vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
- -webkit-transform: rotateX(0deg);
- -moz-transform: rotateX(0deg);
- -o-transform: rotateX(0deg);
- -ms-transform: rotateX(0deg);
- transform: rotateX(0deg);
- }
- .vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
- -webkit-transform: rotateX(180deg);
- -moz-transform: rotateX(180deg);
- -o-transform: rotateX(180deg);
- transform: rotateX(180deg);
- }
- #tsc_divider7 {Width:50%;}
- div.title {
- text-align: center;
- font-family:'La Belle Aurore';
- font-size: 18px;}
- p {
- font-family: 'Times new roman' serif;
- font-size:13px;
- color:black;
- padding:1px 1px 1px 1px;
- }
- </style>
- </head>
- <body>
- <Background />
- <div id="head">
- <span class="headtext">Be Careful for What you Wish For.</span>
- </div>
- <div id="profile-pic" alt="Lyend"></div>
- <div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top:2%;">
- <div class="flipper">
- <div class="front">
- <div class="title">Welcome!</div>
- <div class="tsc_divider10"></div> <!-- Believe it or not, that's an hr code.... Sorta. -->
- <p>Hai there, hover your cursor over me to preview text, or click on me to show more!</p>
- </div>
- <div class="back"><div class="title1">About me</div>
- <p class="box">asdfasdfsdf</p>
- </div>
- </div>
- </div>
- <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');" style="margin-top:2%;">
- <div class="flipper">
- <div class="front">
- <div class="title">About Me</div>
- <div class="tsc_divider10"></div>
- <p>asdasdasdasd</P>
- </div>
- <div class="back">
- <div class="title1">About me</div>
- <p class="box">asdfasdfsdf</p>
- </div>
- </div>
- </div>
- <div id="main"></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement