untitled5 s pace

CSS:
background:radial-gradient(#fff,#f5329a)}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}:before,:after{content:'';position:absolute}:root{--font-1:Cookie,cursive;--font-2:'Lobster Two',cursive;--font-3:'Great Vibes',cursive}a{display:inline-block;text-decoration:none;text-align:center}#jd-main,.jd-app{width:100%;height:100vh;position:relative;font-family:var(--font-1);color:#111;font-size:1em;overflow:hidden}.jd-home-page{position:absolute;width:820px;height:520px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 0 10px #000;display:flex;flex-wrap:wrap}.jd-home-page:after{width:610px;height:80px;background:#000;border-radius:50%;filter:blur(20px);left:calc(50% - 305px);bottom:-45px;z-index:-1;opacity:.8}.jd-aside,.jd-banner{height:480px;background:#ff88c4}.jd-aside{width:320px;border-right:solid 2px #000;text-align:center}.jd-img-home{width:260px;height:340px;background:#222;border-radius:4px;position:relative;margin-top:30px;margin-left:calc(50% - 130px);box-shadow:0 0 25px 6px rgba(0,0,0,.3);overflow:hidden}.jd-img-home img{position:absolute;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.jd-aside h1{margin-top:20px;color:#db2970}.jd-aside span{font-size:1.4em}.jd-banner{width:500px;display:flex}.jd-section-banner{width:calc(100% / 4);position:relative;overflow:hidden}.jd-img-banner{position:absolute;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);filter:grayscale(1)}.jd-section-banner:after{width:100%;height:100%;background:#fff;top:0;left:0;opacity:0;z-index:100}.jd-section-banner:hover:after{animation:flash .2s ease-out}@keyframes flash{0%{opacity:.8}100%{opacity:0}}.jd-section-banner:hover .jd-img-banner{filter:grayscale(0)}.jd-nav{width:100%;height:40px;background:#222;display:flex}.jd-button{width:25%;line-height:40px;color:#000;font-size:1.6em;box-shadow:0 0 #000 inset;transition:all .5s ease-out}.jd-button:hover{box-shadow:0 -40px #000 inset;color:#fff}.jd-button:nth-child(1){background:#db2970}.jd-button:nth-child(2){background:#f53274}.jd-button:nth-child(3){background:#f9598f}.jd-button:nth-child(4){background:#ff7da9}.jd-section-page{position:absolute;width:100%;height:100vh;background:linear-gradient(rgba(0,0,0,.5),rgba(340,80,96,1));visibility:hidden;opacity:0;transition:all .3s ease-in-out;overflow:hidden}[class*='jd-page']{width:780px;height:480px;background:#000;position:absolute;top:50%;left:50%;transform:translate(-50%,-250%);box-shadow:0 0 0 10px #fff,0 0 60px 10px rgba(0,0,0,.4);transition:all .5s .5s ease-out;display:flex;padding:30px}.jd-btn-close{position:absolute;width:34px;height:34px;line-height:36px;background:rgba(340,80,96);color:#000;font-weight:700;top:-44px;right:0}.jd-col-left,.jd-col-right{width:50%;padding:10px}.jd-img-page{width:320px;height:400px;border-radius:4px;margin:auto;overflow:hidden;position:relative}.jd-img-page > img{position:absolute;width:auto;min-height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.jd-col-left{border-right:solid 1px rgba(340,80,96)}.jd-col-friend,.jd-col-gallery{width:100%;height:calc(100% - 20px);overflow-y:auto}.jd-row{width:240px;height:50px;background:rgba(340,80,96);border-radius:4px;margin-bottom:10px;display:flex;align-items:center;overflow:hidden}.jd-user{flex-grow:1;padding-left:10px;font-size:1.4em}.jd-icon{width:40px;height:40px;display:flex;margin-left:5px;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border-radius:3px}.jd-row a{width:73px;height:50px;line-height:50px;background:#fff;color:#000;margin-top:100px;transition:all .3s ease-out}.jd-row:hover a{margin-top:0}#jd-content-1:target .jd-section-page{visibility:visible;opacity:1}#jd-content-1:target .jd-page-about{transform:translate(-50%,-50%)}#jd-content-2:target .jd-section-page{visibility:visible;opacity:1}#jd-content-2:target .jd-page-music{transform:translate(-50%,-50%)}#jd-content-3:target .jd-section-page{visibility:visible;opacity:1}#jd-content-3:target .jd-page-gallery{transform:translate(-50%,-50%)}#jd-content-4:target .jd-section-page{visibility:visible;opacity:1}#jd-content-4:target .jd-page-friend{transform:translate(-50%,-50%)}.jd-img-gallery{width:95%;height:auto;margin-bottom:25px;border-radius:4px}::-webkit-scrollbar{width:5px;background:rgba(340,80,96)}::-webkit-scrollbar-thumb{background:#fff}.jd-infor{line-height:36px;display:block;color:rgba(340,80,96);font-size:1.4em}.jd-col-right p{color:#fff;font-size:1.3em;margin-top:30px}.jd-box-video{width:700px;height:396px;background:#333;margin:auto}.jd-footer{width:100%;position:absolute;line-height:40px;text-align:center;bottom:0;}
HTML:
</style>
<div id="NotAllowedme">

</style>
<div id="NotAllowedme">








<div id="jd-main">
 <div id="jd-content-1">
 <div id="jd-content-2">
 <div id="jd-content-3">
 <div id="jd-content-4">
 <div>
 <div class="jd-home-page">
 <div class="jd-aside">
 <div class="jd-img-home">
 <img src="https://i.postimg.cc/d3W2vZ5P/download.png" />
 </div>
 <h1>𝓜𝓪𝓪𝓱</h1>
 <span>Bem vindo ao meu xatspace</span>
 </div>
 <div class="jd-banner">
 <div class="jd-section-banner">
 <img class="jd-img-banner" src="https://i.postimg.cc/rs6m4Vz0/download-1.png" />
 </div>
 <div class="jd-section-banner">
 <img class="jd-img-banner" src="https://i.postimg.cc/2jFmGFKX/download-2.png" />
 </div>
 <div class="jd-section-banner">
 <img class="jd-img-banner" src="https://i.postimg.cc/g2xfCvgp/download-3.png" />
 </div>
 <div class="jd-section-banner">
 <img class="jd-img-banner" src="https://i.postimg.cc/QNyL04qm/download-4.png" />
 </div>
 </div>
 <div class="jd-nav">
 <a class="jd-button" href="#jd-content-1">Sobre mim</a>
 <a class="jd-button" href="#jd-content-2">Musica</a>
 <a class="jd-button" href="#jd-content-3">Fotos</a>
 <a class="jd-button" href="#jd-content-4">Amigos</a>
 </div>
 </div>
 <div class="jd-section-page">
 <div class="jd-page-about">
 <a class="jd-btn-close" href="#main">✕</a>
 <div class="jd-col-left">
 <div class="jd-img-page">
 <img src="https://i.postimg.cc/PrySSPhj/download-5.png" />
 </div>
 </div>
 <div class="jd-col-right">
 <span class="jd-infor">Nombre: 𝓜𝓪𝓪𝓱</span>
 <span class="jd-infor" style="color:#fff">Idade : Segredinho </span>
 <span class="jd-infor">Pais: Brasil - Maringá Paraná</span>
 <span class="jd-infor" style="color:#fff">Xat: <a href="https://xat.com/http://xat.com/carinhoeamizade">CarinhoeAmizade</a></span>
 <p>
Posso não ser a melhor, mas com certeza faço a diferença. Sou muito para uns poucos para outros e o suficiente para mim mesma. Minha imagem ´você faz! Mas minha vida eu que vivo.
 </p>
 </div>
 </div>
 <div class="jd-page-music">
 <a class="jd-btn-close" href="#main">✕</a>
 <div class="jd-box-video">
Your browser does not support iframes!
 </div>
 </div>
 <div class="jd-page-gallery">
 <a class="jd-btn-close" href="#main">✕</a>
 <div class="jd-col-left">
 <div class="jd-img-page">
 <img src="https://i.postimg.cc/fTFNRwqY/download-7.png" />
 </div>
 </div>
 <div class="jd-col-right">
 <div class="jd-col-gallery">
 <img class="jd-img-gallery" src="https://i.postimg.cc/YCKtxrNM/download-9.png" />
 <img class="jd-img-gallery" src="https://i.postimg.cc/4N40krJV/download-10.png" />
 <img class="jd-img-gallery" src="https://i.postimg.cc/66FK9Wmn/download-8.png" />
 <img class="jd-img-gallery" src="https://i.postimg.cc/gcKYKFSZ/download-11.png" />
 </div>
 </div>
 </div>
 <div class="jd-page-friend">
 <a class="jd-btn-close" href="#main">✕</a>
 <div class="jd-col-left">
 <div class="jd-img-page">
 <img src="https://i.postimg.cc/66FK9Wmn/download-8.png" />
 </div>
 </div>
 <div class="jd-col-right">
 <div class="jd-col-friend">
 <div class="jd-row">
 <div class="jd-img-f">
 <span class="jd-icon">💖</span>
 </div>
 <span class="jd-user">💖</span>
 <a href="💖">✚</a>
 </div>
 <div class="jd-row">
 <div class="jd-img-f">
 <span class="jd-icon">💖</span>
 </div>
 <span class="jd-user">💖</span>
 <a href="💖">✚</a>
 </div>
 <div class="jd-row">
 <div class="jd-img-f">
 <span class="jd-icon">💖</span>
 </div>
 <span class="jd-user">💖</span>
 <a href="💖">✚</a>
 </div>
 <div class="jd-row">
 <div class="jd-img-f">
 <span class="jd-icon">💖</span>
 </div>
 <span class="jd-user">💖</span>
 <a href="💖">✚</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>