CSS:

background:repeating-linear-gradient(45deg,rgba(231,10,1,.6) 1px,rgba(0,0,0,.1) 50px),repeating-linear-gradient(-45deg,rgba(0,0,0,.1) 1px,rgba(231,10,1,.6) 50px),#d90000}*{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:#e70a01;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(255,255,255,.4);text-transform:uppercase;color:#fff;background:rgba(255,255,255,0);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(255,255,255,.5);text-shadow:2px 2px rgba(0,0,0,.2)}.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(255,255,255,.9)}100%{background:rgba(255,255,255,.5)}}.pages{width:520px;height:460px;position:relative;background:#24252a}.about,.friend,.music,.gallery{position:absolute;width:100%;height:100%;background:#24252a;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:#e70a01;font-size:1.5em}.btn-prev{position:absolute;width:24px;font-size:1.6em;line-height:24px;top:0;right:5px;color:#e70a01}.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:#e70a01;margin:10px 0;line-height:36px;border:solid 1px #e70a01}.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 #e70a01;margin-left:10px}.btn-me{width:30px;height:30px;line-height:30px;transform:rotate(45deg);position:absolute;background:#700300;color:#fff;font-size:.8em;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.4);top:10px;left:90px;z-index:100}.btn-me:hover{background:#fff;color:#700300}.row-friend span{position:absolute;left:200px;top:20px;padding:5px 10px;background:#e70a01;border-radius:3px;box-shadow:3px 3px 5px rgba(0,0,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:#e70a01;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:#e70a01}.footer{width:100%;height:40px;background:#000;line-height:40px;font-size:.75em;color:#888;text-align:left;padding-left:10px;}

HTML: