Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Opcional (URL o fondo CSS)::
- background:url(https://s25.postimg.org/8bbtf3zwv/image.jpg)top left repeat;} *{margin:0; padding:0; box-sizing:border-box;} :root{--font: 'Cookie', cursive;} a{text-decoration:none; display:inline-block;} h1, h2, h3, h4, h5, h6{font-weight:300;} span{display:inline-block;} #main-JD{width:1080px; height:100vh; position:relative; margin:0 auto; font-family:var(--font); color:#8c7f99; font-size:1em;} #header-JD{width:100%; height:178px; padding:0 46px;} #header-JD h1{display:inline-block; width:100%; color:yellow; font-size:3.1em; margin-top:20px; line-height:36px;} #header-JD span{font-size:2em; color:#d4c8dd; line-height:30px;} .navbar-JD{width:660px; height:47px; margin-top:43px;} .navbar-JD ul{list-style:none;} .btn-menu-JD{width:150px; line-height:45px; float:left; margin-right:15px; text-align:center; background:white; font-size:2em; color:#f0c425; box-shadow:0 -3px #f0c425 inset; transition:all .2s;} .btn-menu-JD:hover{background:yellow; color:#083366; box-shadow:0 -3px #083366 inset;} #selected-1{background:yellow; color:#083366; box-shadow:0 -3px #083366 inset;} #pages-JD{width:1080px; height:500px; background:white; position:relative; overflow:hidden; box-shadow:0 10px #f0c425;} #home-JD, #about-JD, #music-JD{width:100%; height:370px; background:white; position:absolute; top:0; left:0; visibility:hidden; opacity:0; padding:0 46px;} #home-JD{visibility:visible; opacity:1;} .img-princ-JD{width:284px; height:284px; float:left; margin-top:44px;} .center-JD{width:480px; height:284px; float:left; margin-left:20px; margin-top:44px; overflow:hidden; margin-right:20px;} .center-JD h2{color:#083366; font-size:3em;} .text-home-JD{width:100%; padding:15px 0; font-size:1.3em; text-align:justify;} .friends-JD{float:right; width:180px; height:284px; border-left:solid 1px #d4c8dd; padding-left:20px; margin-top:44px;} .friends-JD h3{font-size:1.6em; color:#d5c9dd; margin-bottom:10px;} .box-friends-JD{width:100%; height:44px; margin-bottom:6px; color:#d5c9dd; font-size:1.2em;} .img-friends-JD{width:44px; height:44px; float:left; margin-right:10px; position:relative;} .img-user-friends-JD{position:absolute; width:44px; height:44px; border-radius:50%;} .checked-JD{position:relative; margin-left:24px; width:20px; height:20px;} .box-friends-JD span{float:left; width:calc(100% - 54px); font-size:.9em;} .box-friends-JD h4{float:left; margin-top:5px;} #sociais-JD{width:988px; height:130px; position:relative; top:369px; left:46px; border-top:solid 1px #d4c8dd; display:flex; justify-content:space-between; padding-top:38px;} .btn-sociais-JD{width:320px; height:60px; line-height:60px; background:yellow; border-radius:4px;} .icon-JD{float:left; margin:10px 40px;} .btn-sociais-JD span{font-size:2.6em; line-height:60px; color:#083366;} .number{width:22px; height:22px; display:inline-block; text-align:center; line-height:23px; margin:0 10px; border-radius:50%; background:aquamarine; color:white; font-family:sans-serif; font-size:.5em;} .on{color:aquamarine; font-size:.8em;} #content-JD-3:target #home-JD{visibility:visible; opacity:1;} #content-JD-3:target #selected-1{background:yellow; color:#083366; box-shadow:0 -3px #083366 inset;} #content-JD-3:target #about-JD, #music-JD{visibility:hidden; opacity:0;} #content-JD-2:target #home-JD, #music-JD{visibility:hidden; opacity:0;} #content-JD-2:target #about-JD{visibility:visible; opacity:1;} #content-JD-2:target #selected-2{background:yellow; color:#083366; box-shadow:0 -3px #083366 inset;} #content-JD-2:target #selected-1{width:150px; line-height:45px; float:left; margin-right:15px; text-align:center; background:white; font-size:2em; color:#f0c425; box-shadow:0 -3px #f0c425 inset; transition:all .2s;} #content-JD-2:target #selected-1:hover{background:yellow; color:#083366; box-shadow:0 -3px #083366 inset;} #content-JD-1:target #home-JD, #about-JD{visibility:hidden; opacity:0;} #content-JD-1:target #music-JD{visibility:visible; opacity:1;} #content-JD-1:target #selected-3{background:yellow; color:#083366; box-shadow:0 -3px #083366 inset;} #content-JD-1:target #selected-1{width:150px; line-height:45px; float:left; margin-right:15px; text-align:center; background:white; font-size:2em; color:#f0c425; box-shadow:0 -3px #f0c425 inset; transition:all .2s;} #content-JD-1:target #selected-1:hover{background:yellow; color:#083366; box-shadow:0 -3px #083366 inset;} .bloco-about-JD{width:626px; height:370px; float:left;} .bloco-about-JD h5{margin-top:44px; font-size:3em; width:100%; border-bottom:solid 1px #d4c8dd;} .text-about-JD{width:100%; padding:15px 0; height:260px; overflow:hidden; font-size:1.6em;} .img-about-JD{float:right; margin-top:44px; width:335px; height:300px;} .video-JD{width:540px; height:306px; margin-top:44px; box-shadow:0 10px yellow; float:left;} .infor-video-JD{width:370px; float:left; margin-left:25px; padding-left:25px; margin-top:44px; height:316px; border-left:solid 1px #d4c8dd;} .img-video-JD{width:180px; height:180px; margin-bottom:20px;} .infor-video-JD h6{font-size:2em;} .infor-video-JD span{font-size:1.8em; display:block; color:#d4c9dd;} .btn-youtube-JD{line-height:26px; font-family:sans-serif; color:red; text-decoration:underline; font-style:italic; font-size:.8em;} #footer-JD{width:100%; height:auto; margin-top:30px; text-align:center; font-family:sans-serif; color:yellow; font-size:.75em;
- Introduzca cosas en el cuadro de contenido del perfil (simple html e incrustamientos están permitidos) Marque esta casilla para utilizar la edición WYSIWYG:
- [font:Cookie]
- <div id="main-JD">
- <div id="content-JD-1">
- <div id="content-JD-2">
- <div id="content-JD-3">
- <div id="main-content-JD">
- <div id="header-JD">
- <h1>Cami</h1>
- <span>personal xat me</span>
- <div class="navbar-JD">
- <ul>
- <li><a class="btn-menu-JD" id="selected-1" href="#content-JD-3">Home</a></li>
- <li><a class="btn-menu-JD" id="selected-2" href="#content-JD-2">About</a></li>
- <li><a class="btn-menu-JD" id="selected-3" href="#content-JD-1">Music</a></li>
- <li><a class="btn-menu-JD" id="selected-4" href="https://xat.com/xat5">Chat</a></li>
- </ul>
- </div>
- </div>
- <div id="pages-JD">
- <div id="home-JD">
- <img class="img-princ-JD" src="https://imgur.com/d8vRDgn.png" width="284" height="284/" />
- <div class="center-JD">
- <h2>Welcome my xatspace!</h2>
- <p class="text-home-JD">
- - Name Camila - Nationality Chilean - Relationship Single - 🍁 Weed - Sun ☀ -
- </p>
- </div>
- <div class="friends-JD">
- <h3>Friends<span class="number">5</span><span class="on">Online</span></h3>
- <a class="box-friends-JD" href="http://xat.me/Fiona">
- <div class="img-friends-JD">
- <img class="img-user-friends-JD" src="http://www.xat.com/web_gear/chat/av/452.png" width="44" height="44/" />
- <img class="checked-JD" src="https://s25.postimg.org/6jiuk714f/icon-checked.png" width="20" height="20/" />
- </div>
- <h4>Fiona</h4>
- <span>81926573</span>
- </a>
- <a class="box-friends-JD" href="https://xat.me/MiraL">
- <div class="img-friends-JD">
- <img class="img-user-friends-JD" src="http://www.xat.com/web_gear/chat/av/740.png" width="44" height="44/" />
- <img class="checked-JD" src="https://s25.postimg.org/6jiuk714f/icon-checked.png" width="20" height="20/" />
- </div>
- <h4>Miri</h4>
- <span>1461632942</span>
- </a>
- <a class="box-friends-JD" href="https://xat.me/DJCRAZY">
- <div class="img-friends-JD">
- <img class="img-user-friends-JD" src="http://www.xat.com/web_gear/chat/av/945.png" width="44" height="44/" />
- <img class="checked-JD" src="https://s25.postimg.org/6jiuk714f/icon-checked.png" width="20" height="20/" />
- </div>
- <h4>Honey</h4>
- <span>444000444</span>
- </a>
- <a class="box-friends-JD" href="https://xat.me/Vritme">
- <div class="img-friends-JD">
- <img class="img-user-friends-JD" src="https://xat.com/images/smw/xavi.png" width="44" height="44/" />
- <img class="checked-JD" src="https://s25.postimg.org/6jiuk714f/icon-checked.png" width="20" height="20/" />
- </div>
- <h4>Vritme</h4>
- <span>11100000</span>
- </a>
- <a class="box-friends-JD" href="https://xat.me/Paul">
- <div class="img-friends-JD">
- <img class="img-user-friends-JD" src="http://www.xat.com/web_gear/chat/av/1258.png" width="44" height="44/" />
- <img class="checked-JD" src="https://s25.postimg.org/6jiuk714f/icon-checked.png" width="20" height="20/" />
- </div>
- <h4>Paul</h4>
- <span>83735214</span>
- </a>
- </div>
- </div>
- <div id="about-JD">
- <div class="bloco-about-JD">
- <h5>About</h5>
- <p class="text-about-JD">
- in construction...
- </p>
- </div>
- <img class="img-about-JD" src="https://s25.postimg.org/un9m8hrb3/about-img.jpg" width="335" height="300/" />
- </div>
- <div id="music-JD">
- <div class="video-JD">
- [youtube:540:306:qooQd8AA7_M:start=0&end=0&autohide=1&autoplay=1&controls=0&disablekb=1&loop=1&modestbranding=1&rel=0&showinfo=0&vq=large]
- </div>
- <div class="infor-video-JD">
- <img class="img-video-JD" src="https://imgur.com/gK4ojin.png" width="180" height="180/" />
- <h6>REMIX</h6>
- <span>CamilaCabello&DaddyYankee</span>
- <a class="btn-youtube-JD" href="https://www.youtube.com/watch?v=qooQd8AA7_M">watch on YouTube</a>
- </div>
- </div>
- <div id="sociais-JD">
- <a class="btn-sociais-JD" href="https://www.facebook.com/Camilaa.ayuda">
- <img class="icon-JD" src="https://s25.postimg.org/nk1qsur0f/icon-face.png" width="40" height="40/" />
- <span>Facebook</span>
- </a>
- <a class="btn-sociais-JD" href="https://www.twitter.com/">
- <img class="icon-JD" src="https://s25.postimg.org/w2b6x7cyn/icon-tw.png" width="40" height="40/" />
- <span>Twitter</span>
- </a>
- <a class="btn-sociais-JD" href="https://www.instagram.com/">
- <img class="icon-JD" src="https://s25.postimg.org/5u027t5pr/icon-inst.png" width="40" height="40/" />
- <span>Instagram</span>
- </a>
- </div>
- </div>
- <div id="footer-JD">
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement