Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- [dohtml]
- <link href="https://fonts.googleapis.com/css?family=Muli:800|Abril+Fatface" rel="stylesheet">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <style>
- #prototype-3 {
- width: 550px;
- height: 500px;
- overflow: hidden;
- position: relative;
- margin: 0px auto;
- outline: 1px solid #000;
- border-left: 4px solid #fff;
- border-bottom: 4px solid #fff;
- }
- #prototype-3 ::-webkit-scrollbar {
- width: 1px;
- }
- #prototype-3 ::-webkit-scrollbar-track {
- background: #ccc;
- border: 0.5px solid #ccc;
- }
- #prototype-3 ::-webkit-scrollbar-thumb {
- background: #F45D3F;
- border: 0.5px solid #EAFF3B;
- }
- #prototype-3 .background{
- position: absolute;
- width: 550px;
- height: 500px;
- background: url(https://i.imgur.com/qw4EopO.jpg);
- background-size: 820px;
- background-position: left;s;
- opacity: 1;
- transition: all 0.8s ease-in-out 2.5s;
- }
- #prototype-3 input[type=checkbox]:checked ~ .background{
- background-position: right;
- transition: all 1s ease-in-out 1.5s;
- }
- #prototype-3 .base{
- position: absolute;
- width: 550px;
- height: 500px;
- background: #000;
- opacity: 0.5;
- transition: all 1s ease-in-out 2.5s;
- }
- #prototype-3 input[type=checkbox]:checked ~ .base{
- opacity: 0.9;
- transition: all 1s ease-in-out 1.5s;
- }
- #prototype-3 .container {
- overflow: auto;
- background: transparent;
- width: 440px;
- height: 400px;
- position: absolute;
- top: 45px;
- left: 40px;
- text-align: right;
- opacity: 0;
- transition: all 1s ease-in-out 0s;
- }
- #prototype-3 input[type=checkbox]:checked ~ .container {
- opacity: 0.95;
- transition: all 1s ease-in-out 2.5s;
- }
- #prototype-3 .click{
- position: absolute;
- bottom: 35px;
- left: 15px;
- transition: all 1s ease-in-out 0s;
- }
- #prototype-3 input[type=checkbox]:checked ~ .click {
- transform: rotate(45deg);
- transition: all 1s ease-in-out 0s;
- }
- #prototype-3 label {
- text-transform: uppercase;
- font-family: 'Montseratt', sans-serif;
- font-size: 8px;
- font-weight: 600;
- padding: 5px 10px;
- padding-left: 20px;
- transition: 0.5s;
- letter-spacing: 9px;
- }
- #prototype-3 label:hover {
- cursor: crosshair;
- }
- #prototype-3 input[type=checkbox] {
- display: none;
- }
- #prototype-3 .title{
- height: 108px;
- position: absolute;
- top: 265px;
- left: 187px;
- background: transparent;
- opacity: 0.9;
- letter-spacing: 0px;
- line-height: 50px;
- transform: rotate(32.5deg);
- transition: all 0.8s ease-in-out 2.5s;
- }
- #prototype-3 input[type=checkbox]:checked ~ .title {
- opacity: 0;
- transition: all 0.8s ease-in-out 0s;
- }
- #prototype-3 t1{
- font-family: 'Abril Fatface', cursive;
- font-size: 72px;
- color: #fff;
- letter-spacing: 0px;
- }
- #prototype-3 .triangle{
- position: absolute;
- bottom: -1px;
- left: 0px;
- width: 550px;
- height: 350px;
- background: #EAFF3B;
- opacity: 0.7;
- -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 0);
- clip-path: polygon(0 0, 0 100%, 100% 100%, 0 0);
- transition: all 1s ease-in-out 1.2s;
- }
- #prototype-3 input[type=checkbox]:checked ~ .triangle {
- width: 370px;
- height: 501px;
- opacity: 0.75;
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- transition: all 1s ease-in-out 2s;
- }
- #prototype-3 .triangle2{
- position: absolute;
- top: -1px;
- right: -1px;
- width: 550px;
- height: 350px;
- background: #000;
- opacity: 0.8;
- -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
- clip-path: polygon(0 0, 100% 100%, 100% 0);
- transition: all 1s ease-in-out 1.2s;
- }
- #prototype-3 input[type=checkbox]:checked ~ .triangle2 {
- top: -235px;
- background: #fff;
- opacity: 0.5;
- transition: all 1s ease-in-out 0s;
- }
- #prototype-3 t2{
- font-family: 'Abril Fatface', cursive;
- font-size: 35px;
- color: #EAFF3B;
- letter-spacing: 0px;
- padding-right: 40px;
- line-height: 10px;
- }
- #prototype-3 o{
- font-family: 'Abril Fatface', cursive;
- font-size: 18px;
- color: #000;
- letter-spacing: 0px;
- opacity: 0;
- }
- #prototype-3 t3{
- font-family: 'Abril Fatface', cursive;
- font-size: 30px;
- color: #000;
- letter-spacing: 0px;
- margin-right: 60px;
- text-transform: lowercase;
- line-height: 57px;
- border-bottom: 0.5px solid #eee;
- }
- #prototype-3 t4{
- font-family: 'Muli', sans-serif;
- font-size: 12px;
- font-weight: 800;
- color: #000;
- letter-spacing: 0.5px;
- margin-right: 150px;
- text-transform: uppercase;
- line-height: 25px;
- transition: 0.5s;
- }
- #prototype-3 t4:hover{
- letter-spacing: 2px;
- }
- #prototype-3 a{
- text-decoration: none;
- color: #000;
- cursor: crosshair;
- }
- #prototype-3 .line{
- position: absolute;
- top: 125px;
- left: -70px;
- width: 195px;
- height: 350px;
- background: transparent;
- opacity: 0.8;
- border-top: 0.5px solid #fff;
- transform: rotate(32.5deg);
- transition: all 0.8s ease-in-out 2.5s;
- }
- #prototype-3 input[type=checkbox]:checked ~ .line {
- opacity: 0;
- transition: all 0.8s ease-in-out 0s;
- }
- </style>
- <center>
- <div id="prototype-3">
- <input type="checkbox" id="max-toggle">
- <div class="background"></div>
- <div class="base"></div>
- <div class="triangle"></div>
- <div class="triangle2"></div>
- <div class="line"></div>
- <div class="title">
- <t1>prototype</t1>
- </div>
- <div class="container">
- <t3>threads</t3> <t2>01<o>.</o></t2><br>
- <a href="http://shine.jcink.net/index.php?showtopic=38770&view=findpost&p=301158"><t4>ultraviolence
- <i class="fa fa-unlock" style="margin-left:5px;font-size:12px;color:#000;"></i></t4></a><br>
- <a href="http://shine.jcink.net/index.php?showtopic=38748&st=0&#entry300980"><t4>the price of freedom
- <i class="fa fa-lock" style="margin-left:5px;margin-right:3px;font-size:12px;color:#000;"></i></t4></a><br>
- <a href="http://shine.jcink.net/index.php?showtopic=38769&view=findpost&p=301157"><t4>young god
- <i class="fa fa-unlock" style="margin-left:5px;font-size:12px;color:#000;"></i></t4></a><br><br>
- <t3>signatures</t3> <t2>02</t2><br>
- <t4><i>coming soon</i>
- <i class="fa fa-key" style="margin-left:5px;margin-right:3px;font-size:12px;color:#000;"></i></t4><br><br>
- <t3>foundations</t3> <t2>03</t2><br>
- <a href="http://shine.jcink.net/index.php?showtopic=38768&view=findpost&p=301156"><t4>John Tyree (shipper)
- <i class="fa fa-unlock" style="margin-left:5px;font-size:12px;color:#000;"></i></t4></a><br><br>
- <t3>mini profiles</t3> <t2>04</t2><br>
- <t4><i>coming soon</i>
- <i class="fa fa-key" style="margin-left:5px;margin-right:3px;font-size:12px;color:#000;"></i></t4><br><br>
- <t3>skins</t3> <t2>05</t2><br>
- <t4><i>coming soon</i>
- <i class="fa fa-key" style="margin-left:5px;margin-right:3px;font-size:12px;color:#000;"></i></t4><br><br>
- <t3>miscellaneous</t3> <t2>06</t2><br>
- <a href="http://shine.jcink.net/index.php?showtopic=38748&st=0&#entry301010"><t4>prototype
- <i class="fa fa-lock" style="margin-left:5px;margin-right:3px;font-size:12px;color:#000;"></i></t4></a><br><br>
- </div>
- <div class="click">
- <label for="max-toggle"><i class="fa fa-plus" style="font-size:20px;color:#eee;"></i></label>
- </div>
- </div>
- </center>
- [/dohtml]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement