Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- css :
- background-color: #FFD6D6;}/*-------CSS-BY-JASON-DESIGN-------*/*{margin:0;padding:0;box-sizing:border-box}:before,:after{content:'';position:absolute}:root{--font-1:Dosis,sans-serif;--font-2:Quicksand,sans-serif;--font-3:Cookie,cursive;--font-4:'Archivo Black',sans-serif}a{display:inline-block;text-decoration:none;text-align:center}h1,h2{font-weight:300}#main{width:100%;height:100vh;position:relative;font-size:1em;font-family:var(--font-2);color:#222;overflow:hidden}.app{position:absolute;width:800px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;display:flex;flex-wrap:wrap}.app:after{width:90%;height:100px;background:#000;left:5%;bottom:-50px;border-radius:50%;filter:blur(25px);opacity:.6;z-index:-1}.aside{width:280px;height:460px;background:#FFBFBF;text-align:center}.img-user{width:170px;height:170px;padding:10px;background:#000;border-radius:50%;margin-top:40px}.title-user,.aside p{font-family:var(--font-3)}.aside p{font-size:1.6em;margin-top:20px}.aside a{color:#000;margin-top:10px}.aside a:hover{color:#fff;text-decoration:underline}.section{width:520px;height:460px;background:#fff;position:relative;overflow:hidden}.slyde{width:1040px;height:460px;position:absolute;left:0;top:0;transition:all .5s cubic-bezier(.32,.06,.39,1);display:flex}.nav{width:520px;height:460px;position:relative;overflow:hidden}.banner{position:absolute;width:450px;height:460px;top:0;right:0}.box-nav{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.row-nav{width:100%;height:calc(100% / 4);display:flex;overflow:hidden}.nav-left{width:70px;line-height:114px;font-size:2em;color:#666;opacity:.6;transition:all .3s ease-out}.nav-right{width:calc(100% - 70px);border-bottom:solid 1px rgba(224, 174, 174, 1);text-transform:uppercase;color:#fff;background:rgba(213, 83, 85, 0.25);position:relative}.nav-right span{display:block;height:100%;line-height:114px;position:relative}.nav-right span:nth-of-type(1){text-align:left;padding-left:20px;margin-top:0;font-size:1.4em;transition:all .3s ease-out}.row-nav:hover .nav-right span:nth-of-type(1){margin-top:-115px}.nav-right span:nth-of-type(2){font-family:var(--font-4);font-size:4em;color:rgba(213, 83, 85, 0.25);text-shadow:2px 2px rgba(194, 173, 173, 1)}.row-nav:nth-of-type(4) .nav-right{border:none}.row-nav:hover .nav-left{color:#fff}.row-nav:hover .nav-right{animation:flash .2s ease-out;animation-fill-mode:forwards}@keyframes flash{0%{background:rgba(224, 200, 238, 1)}100%{background:rgba(224, 200, 238, 1)}}.pages{width:520px;height:460px;position:relative;background:#A86868}.about,.friend,.music,.gallery{position:absolute;width:100%;height:100%;background:#A86868;visibility:hidden;border-left:solid 10px #fff;transition:all .5s;padding:10px}#content-1:target .slyde{left:-520px}#content-1:target .about{visibility:visible}#content-2:target .slyde{left:-520px}#content-2:target .friend{visibility:visible}#content-3:target .slyde{left:-520px}#content-3:target .music{visibility:visible}#content-4:target .slyde{left:-520px}#content-4:target .gallery{visibility:visible}.title-page{color:#E7A2A2;font-size:1.5em}.btn-prev{position:absolute;width:24px;font-size:1.6em;line-height:24px;top:0;right:5px;color:#FFC7C7}.btn-prev:hover{color:#fff}.block{width:100%;height:410px;border:solid 1px #fff;padding:5px}.about .block{display:flex}.col-about{text-align:center;padding:10px;overflow-y:auto}.desc{color:#fff;font-size:.9em}.col-about h2{color:#FFC7C7;margin:10px 0;line-height:36px;border:solid 1px #FFB3B3}.col-friend,.col-gallery{height:398px;overflow-y:auto}.row-friend{width:220px;height:110px;margin-bottom:10px;position:relative;display:flex;align-items:center}.row-friend img{width:100px;height:100px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 5px #E79D9D;margin-left:10px}.btn-me{width:30px;height:30px;line-height:30px;transform:rotate(45deg);position:absolute;background:#9C6565;color:#fff;font-size:.8em;border-radius:50%;box-shadow:0 0 5px rgba(177, 104, 104, 0.4);top:10px;left:90px;z-index:100}.btn-me:hover{background:#fff;color:#E3A8A8}.row-friend span{position:absolute;left:200px;top:20px;padding:5px 10px;background:#E3A8A8;border-radius:3px;box-shadow:3px 3px 5px rgba(173, 92, 92, 0.3);opacity:0;transition:all .3s ease-out}.row-friend:hover span{opacity:1;left:140px}.music .block{text-align:center;color:#fff;position:relative;z-index:50}.artist{color:#FFA8A8;margin:20px 0}.video{width:400px;height:226px;display:inline-block;background:#000;position:relative}.video:before{width:90%;height:60px;background:#000;border-radius:50%;left:5%;bottom:-30px;filter:blur(15px);z-index:-1}.song{display:block;margin-top:40px}.row-gallery{width:99%;height:auto;overflow:hidden;margin-bottom:20px}.row-gallery img{width:100%;height:auto;filter:blur(5px) grayscale(1);transition:all .3s ease-out}.row-gallery:hover img{filter:blur(0) grayscale(0)}::-webkit-scrollbar{width:5px;background:#fff}::-webkit-scrollbar-thumb{background:#FFA8A8}.footer{width:100%;height:40px;background:#000;line-height:40px;font-size:.75em;color:#888;text-align:left;padding-left:10px;}
- div#nowayfixed {
- z-index: 2147483647;
- position: fixed;
- bottom: 0;
- left: 0;
- }
- div#nowaymenu
- {
- background-color:#009;
- background: linear-gradient(#000014, #000024, #00004e);
- border-radius: 0px 5px 0px 0px;
- display: none;
- FONT-SIZE: 12pt;
- FONT-FAMILY: Arial, Helvetica, sans-serif;
- }
- div#nowayitems
- {
- padding-top: 5px;
- padding-right: 0px;
- /*padding-bottom: 5px;*/
- padding-left: 0px;
- margin-left: 6px;
- line-height: 130%;
- color:#fff;
- }
- div#nowayitems > a
- {
- color:#fff;
- text-decoration: none;
- }
- div#nowayitems > a:hover {
- text-decoration: underline;
- }}
- div#noowayfixed {
- z-index: 2147483647;
- position: fixed;
- bottom: 0;
- left: 0;
- }
- div#noowaymenu
- {
- background-color:#009;
- background: linear-gradient(#000014, #000024, #00004e);
- border-radius: 0px 5px 0px 0px;
- display: none;
- FONT-SIZE: 12pt;
- FONT-FAMILY: Arial, Helvetica, sans-serif;
- }
- div#noowayitems
- {
- padding-top: 5px;
- padding-right: 0px;
- /*padding-bottom: 5px;*/
- padding-left: 0px;
- margin-left: 6px;
- line-height: 130%;
- color:#fff;
- }
- div#noowayitems > a
- {
- color:#fff;
- text-decoration: none;
- }
- div#noowayitems > a:hover {
- text-decoration: underline;
- _______________________________________________________________________________________________________________
- hmtl :
- </style>
- <div id="xatstyme">
- </style>
- <div id="NotAllowedme">
- <div id="main">
- <div id="content-1">
- <div id="content-2">
- <div id="content-3">
- <div id="content-4">
- <div class="app">
- <div class="aside">
- <img class="img-user" src="http://i64.tinypic.com/3130u8o.jpg" width="170/" />
- <h1 class="title-user">πΎπππ¦</h1>
- <span>ππππ¦ (10131013)</span>
- <p>πππππππ π‘π ππ¦ πππ‘πππππ</p>
- <a class="me" href="http://xat.me/xDrew">Β»ππ π΄πππβ£</a>
- </div>
- <div class="section">
- <div class="slyde">
- <div class="nav">
- <div class="banner">
- <img src="http://oi66.tinypic.com/28a7rir.jpg/" />
- </div>
- <div class="box-nav">
- <a class="row-nav" href="#content-1">
- <span class="nav-left">01</span>
- <div class="nav-right">
- <span>πΏππ£π</span>
- <span>πΏππ£π</span>
- </div>
- </a>
- <a class="row-nav" href="#content-2">
- <span class="nav-left">02</span>
- <div class="nav-right">
- <span>πΉππππππ </span>
- <span>πΉππππππ </span>
- </div>
- </a>
- <a class="row-nav" href="#content-3">
- <span class="nav-left">03</span>
- <div class="nav-right">
- <span>ππ’π ππ</span>
- <span>ππ’π ππ</span>
- </div>
- </a>
- <a class="row-nav" href="#content-4">
- <span class="nav-left">04</span>
- <div class="nav-right">
- <span>ππ©ππ‘ππ </span>
- <span>ππ©ππ‘ππ </span>
- </div>
- </a>
- </div>
- </div>
- <div class="pages">
- <div class="about">
- <h1 class="title-page"><span style="color:#fff">πΏ</span>ππ£π</h1>
- <a class="btn-prev" href="#">β¨―</a>
- <div class="col-love">
- <div class="row-love">
- <img src="http://i64.tinypic.com/htwp5t.jpg/" />
- </div>
- </div>
- <h2>π΄ππππππ β₯ π·π πΈπ<span style="color:#fff"> </span></h2>
- <p class="desc">
- </p>
- </div>
- </div>
- </div>
- <div class="friend">
- <h1 class="title-page"><span style="color:#fff">πΉ</span>ππππππ </h1>
- <a class="btn-prev" href="#">β¨―</a>
- <div class="block">
- <div class="col-friend">
- <div class="row-friend">
- <img src="http://oi64.tinypic.com/9t0sjr.jpg/" />
- <a class="btn-me" href="http://xat.me/Arianee">β</a>
- <span>π΅πππ</span>
- </div>
- <div class="row-friend">
- <img src="http://oi65.tinypic.com/28u08lf.jpg/" />
- <a class="btn-me" href="http://xat.me/Odyys">β</a>
- <span>πππππ‘π</span>
- </div>
- <div class="row-friend">
- <img src="http://oi68.tinypic.com/a1kl0.jpg/" />
- <a class="btn-me" href="http://xat.me/Addict">β</a>
- <span>ππππππ</span>
- </div>
- </div>
- </div>
- </div>
- <div class="music">
- <h1 class="title-page"><span style="color:#fff">π</span>π’π ππ</h1>
- <a class="btn-prev" href="#">β¨―</a>
- <div class="block">
- <h2 class="artist">πΈπ ππ©πππππ</h2>
- <div class="video">
- <div id="video" class="displayIt">
- <iframe width="400" height="226" src="//www.youtube.com/embed/2Vv-BfVoq4g?1&autoplay=1&loop=1&controls=0&disablekb=1&showinfo=0&start=0" frameborder="0">Your browser does not support iframes!</iframe>
- </div>
- </div>
- <span class="song">πππππππ‘</span>
- </div>
- </div>
- <div class="gallery">
- <h1 class="title-page"><span style="color:#fff">π</span>π©ππ‘ππ </h1>
- <a class="btn-prev" href="#">β¨―</a>
- <div class="block">
- <div class="col-gallery">
- <div class="row-gallery">
- <img src="http://oi66.tinypic.com/29qimq1.jpg" width="470/" />
- <img src="http://oi67.tinypic.com/330egys.jpg" width="470/" />
- <img src="http://oi63.tinypic.com/jb7aq0.jpg" width="470/" />
- <img src="http://oi67.tinypic.com/28c3k9d.png" width="470/" />
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="footer">
- <span>πππ‘ππππ π£π₯ βΏ</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement