<div class="phone"><div class="lockscreen"><div class="icons"></div><div class="lockicon"><img src="https://i.ibb.co/gDXjg8J/cadenas.png"></div><div class="time">21:23</div><div class="date">Friday, May 15th</div><div class="notif"><div class="spotify_album"><img src="https://i1.sndcdn.com/artworks-ubKDzyhsRDqT-0-t500x500.jpg"></div><div class="spotify_song" style="margin-left:5px;"><span style="font-size:8px;line-height:12px;">IPhone</span><br><span style="font-weight:700;line-height:10px;font-size:12px;">Everybody knows</span><br>Sigrid - Justice League</div><div class="spotify_musicplayer"><img src="https://i.ibb.co/L5nXdvY/Pngtree-png-music-player-background-8468984.png"></div></div><div class="notif" style="margin-top:5px;padding:0!important;"><div class="notif_header"><img src="https://2img.net/image.noelshack.com/fichiers/2016/45/1478945172-icon.png">MESSAGES</div><div class="apercu_pseudo">Verizon</div><div class="apercu_texto">Votre nouvelle facture est prête. Connectez-vous pour en savoir plus. </div></div></div></div>

<div class="bouton_unlock" tabindex="0">slide to unlock<div class="arrow">❯</div><div class="unlockscreen"><br><div class="pseudo_contact">PSEUDO</div><br><div class="now" style="margin-top:-5px">Aujourd'hui</div><div class="contenu_unlockscreen">
<div class="sms reply">TEXTO DE RÉPONSE </div>
</div></div></div></div></div>

<style>.lockscreen{position:absolute;width:245px;height:445px;margin:56px 0 0 49px;background-image:url(https://i.ibb.co/DtW0fpx/pexels-photo-12167617.jpg);background-size:cover;z-index:3;}.phone{width:350px;height:600px;margin:auto;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/xa5has12.png);font-family:Roboto;text-align:center;}.icons{width:255px;height:30px;margin-left:-5px;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/icones10.png);background-size:contain;opacity:0.5;}.lockicon img{width:50px;opacity:0.6;}.time{margin-top:25px;font-size:55px;font-family:Roboto;font-weight:100;color:#959393;}.date{font-family:roboto;font-size:14px;font-weight:300;margin:18px auto 5px;color:#959393;}.notif{backdrop-filter: blur(3px);padding:5px 5px 0 5px; width:92%; background-color:#a1a1a150;border-radius:10px;margin:auto;box-sizing:border-box;text-align:left;display:flex;flex-wrap:wrap;align-items:center;color:#121212;}.notif_header{width:100%; display:flex; height:20px;background-color:#a1a1a160; border-radius:5px 5px 0 0;padding: 2px 0 2px 5px;align-items:center;}.notif_header img {width:15px;margin-right:5px;opacity:0.7;}.spotify_album img{height:45px;width:45px;border-radius:3px;}.spotify_musicplayer{text-align:center;width:100%;} .spotify_musicplayer img{height:45px;width:90%;opacity:0.8;margin-top:5px;text-align:center;} .apercu_texto{width:100%;padding:3px 5px;margin-top:-5px;line-height:12px;}.arrow {color:black;border-radius:5px;transition: width 1s;position:relative;height:30px; width:20px; padding:6px;background-color:#a1a1a160;font-size:20px;text-align:right;margin-top: -25px;margin-left: -7px; box-sizing:border-box;z-index:5;}.bouton_unlock {font-size:15px;backdrop-filter: blur(1px);border-radius:5px;background-color:#00000060;opacity:1;position:relative; height:30px;width: 200px;margin:-187px auto 75px;z-index:5;padding:7px;box-sizing:border-box;text-align:center;font-family:roboto;}.bouton_unlock .unlockscreen {position:absolute;opacity:0;transition:opacity 0s; transition-delay:3s; margin-top:-423px; margin-left:-33px; width:245px; height:445px; padding:5px; overflow:hidden; text-align:justify; font-size:11px; line-height:14px;background-size:cover;box-sizing:border-box;}.bouton_unlock:hover .unlockscreen {opacity:1 !important; transition-delay:1s;}.bouton_unlock:hover .arrow{width:200px;transistion-delay:0s;}::-webkit-scrollbar {display: none;}.unlockscreen{z-index:99;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/essai12.jpg);filter:brightness(0.9);}.contenu_unlockscreen{overflow-y:auto;overflow-x:hidden; height:313px; width:100%}.now{font-size:9px; color:#ccc;text-align:center;margin: 15px 0 0 0;}.pseudo_contact{font-size:9px; color:#121212;text-align:center;margin: 15px 0 0 0;}.sms {width: 80%; padding: 5px; text-align: left;} .message {background: #2EA2FD; color: #fff; margin: 0 0 0 35px; border-radius: 15px 15px 0 15px;} .reply {background: #E5E5EA; color: #000; margin: 0px 0 0px 5px; border-radius: 15px 15px 15px 0;}.apercu_pseudo{padding-left:5px;font-weight:700}</style>

<div class="phone"><div class="lockscreen"><div class="icons"></div><div class="lockicon"><img src="https://i.ibb.co/gDXjg8J/cadenas.png"></div><div class="time">21:23</div><div class="date">Friday, May 15th</div><div class="notif"><div class="spotify_album"><img src="https://i1.sndcdn.com/artworks-ubKDzyhsRDqT-0-t500x500.jpg"></div><div class="spotify_song" style="margin-left:5px;"><span style="font-size:8px;line-height:12px;">IPhone</span><br><span style="font-weight:700;line-height:10px;font-size:12px;">Everybody knows</span><br>Sigrid - Justice League</div><div class="spotify_musicplayer"><img src="https://i.ibb.co/L5nXdvY/Pngtree-png-music-player-background-8468984.png"></div></div><div class="notif" style="margin-top:5px;padding:0!important;"><div class="notif_header"><img src="https://2img.net/image.noelshack.com/fichiers/2016/45/1478945172-icon.png">MESSAGES</div><div class="apercu_pseudo">Verizon</div><div class="apercu_texto">Votre nouvelle facture est prête. Connectez-vous pour en savoir plus. </div></div></div></div>

<div class="bouton_unlock" tabindex="0">slide to unlock<div class="arrow">❯</div><div class="unlockscreen"><br><div class="pseudo_contact">PSEUDO</div><br><div class="now" style="margin-top:-5px">Aujourd'hui</div><div class="contenu_unlockscreen"><div class="sms message">TEXTO DE DÉBUT</div>
<div class="sms reply">TEXTO DE RÉPONSE </div>
</div></div></div></div></div>

<style>.lockscreen{position:absolute;width:245px;height:445px;margin:56px 0 0 49px;background-image:url(https://th.bing.com/th/id/OIP.HEDyCfvKYpo8j1VZW68QSAHaLP?pid=ImgDet&rs=1);background-size:cover;z-index:3;}.phone{width:350px;height:600px;margin:auto;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/xa5has12.png);font-family:Roboto;text-align:center;}.icons{width:255px;height:30px;margin-left:-5px;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/icones10.png);background-size:contain;opacity:0.5;}.lockicon img{width:50px;opacity:0.6;}.time{margin-top:25px;font-size:55px;font-family:Roboto;font-weight:100;color:#959393;}.date{font-family:roboto;font-size:14px;font-weight:300;margin:18px auto 5px;color:#959393;}.notif{backdrop-filter: blur(3px);padding:5px 5px 0 5px; width:92%; background-color:#a1a1a150;border-radius:10px;margin:auto;box-sizing:border-box;text-align:left;display:flex;flex-wrap:wrap;align-items:center;color:#121212;}.notif_header{width:100%; display:flex; height:20px;background-color:#a1a1a160; border-radius:5px 5px 0 0;padding: 2px 0 2px 5px;align-items:center;}.notif_header img {width:15px;margin-right:5px;opacity:0.7;}.spotify_album img{height:45px;width:45px;border-radius:3px;}.spotify_musicplayer{text-align:center;width:100%;} .spotify_musicplayer img{height:45px;width:90%;opacity:0.8;margin-top:5px;text-align:center;} .apercu_texto{width:100%;padding:3px 5px;margin-top:-5px;line-height:12px;}.arrow {color:black;border-radius:5px;transition: width 1s;position:relative;height:30px; width:20px; padding:6px;background-color:#a1a1a160;font-size:20px;text-align:right;margin-top: -25px;margin-left: -7px; box-sizing:border-box;z-index:5;}.bouton_unlock {font-size:15px;backdrop-filter: blur(1px);border-radius:5px;background-color:#00000060;opacity:1;position:relative; height:30px;width: 200px;margin:-187px auto 75px;z-index:5;padding:7px;box-sizing:border-box;text-align:center;font-family:roboto;}.bouton_unlock .unlockscreen {position:absolute;opacity:0;transition:opacity 0s; transition-delay:3s; margin-top:-423px; margin-left:-33px; width:245px; height:445px; padding:5px; overflow:hidden; text-align:justify; font-size:11px; line-height:14px;background-size:cover;box-sizing:border-box;}.bouton_unlock:hover .unlockscreen {opacity:1 !important; transition-delay:1s;}.bouton_unlock:hover .arrow{width:200px;transistion-delay:0s;}::-webkit-scrollbar {display: none;}.unlockscreen{z-index:99;background-image:url(https://i.servimg.com/u/f15/20/38/34/97/essai12.jpg);filter:brightness(0.9);}.contenu_unlockscreen{overflow-y:auto;overflow-x:hidden; height:313px; width:100%}.pseudo_contact{font-size:9px; color:#121212;text-align:center;margin: 15px 0 0 0;}.now{font-size:9px; color: #ccc;text-align:center;margin: 15px 0 0 0;}.sms {width: 80%; padding: 5px; text-align: left;} .message {background: #2EA2FD; color: #fff; margin: 0 0 0 35px; border-radius: 15px 15px 0 15px;} .reply {background: #E5E5EA; color: #000; margin: 0px 0 0px 5px; border-radius: 15px 15px 15px 0;}.apercu_pseudo{padding-left:5px;font-weight:700}</style>