HTML
<main>
CSS
body{background:radial-gradient(circle at 65% 60%,#e2bef1,#f5cdde,#f9ded7,#fbf7d5)}.phone{background-color:hsla(0,0%,100%,.35);border-radius:40px;min-height:795px;color:rgba(0,0,0,.5)}.wrapper{height:206px}.wrapper .btn{border-radius:10px;padding-top:.9rem;padding-bottom:.85rem;letter-spacing:1px}.wrapper .btn,.wrapper .btn:hover{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.wrapper .btn:hover{background-color:#dedcff}.wrapper .btn:active:focus{background-color:#cdcaff}.wrapper .btn>.fas{color:#736aff}.fas{color:#958eff}a{color:rgba(0,0,0,.5)}a,a:hover{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}a:hover{color:rgba(0,0,0,.65)}.h2{color:#fb6681;letter-spacing:1px}.dots{cursor:pointer}.dot{height:6px;width:6px;background-color:#f7a196;border-radius:50%}.dot-lg{height:8px;width:8px}.fa-heart{color:#f7a196;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.card{background-color:hsla(0,0%,100%,.3);border-radius:10px}.card,.card:hover{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card:hover{-webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,.09);box-shadow:0 10px 20px 0 rgba(0,0,0,.09);background-color:hsla(0,0%,100%,.4)}.h1{color:#a3b7ec}.session{height:648px}.page-item.active .page-link{background-color:transparent;border:1px solid #7a93d8;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:all .2s linear;transition:all .2s linear;color:#5571bc}.page-link{color:rgba(0,0,0,.5);border-radius:8px}.page-item:first-child .page-link{border-top-left-radius:8px;border-bottom-left-radius:8px}.page-item:last-child .page-link{border-top-right-radius:8px;border-bottom-right-radius:8px}.page-link:hover{color:rgba(0,0,0,.5);background-color:hsla(0,0%,100%,.4);border-color:hsla(0,0%,100%,.4)}.page-link:focus{color:rgba(0,0,0,.7);background-color:hsla(0,0%,100%,.5);border-color:hsla(0,0%,100%,.5)}
JS