RS Amy

In this example below you will see how to do a RS Amy with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Loufoca, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Loufoca ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>RS Amy</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="boots"><span class="prnm">Amy Lovecraft</span></div><div style="height: 280px; width: 180px; padding: 10px;  background: black; margin-top: 10px; overflow: auto; color: red; text-align: justify; font-family: 'Times New Roman', Times; font-family: 12px;"> belelelelelelelelel belelelelelelelelelele belelelelelelele bele ble ble bele bele bele bele bele blelelelelelelelele belelelelelelelelel belelelelelelelelelele belelelelelelelelel belelelelelelelelelele belelelelelelele bele ble ble bele bele bele bele bele blelelelelelelelele belelelelelelelelel belelelelelelelelelele belelelelelelelelel belelelelelelelelelele belelelelelelele bele ble ble bele bele bele bele bele blelelelelelelelele belelelelelelelelel belelelelelelelelelele belelelelelelele bele ble ble bele bele bele bele bele blelelelelelelelele belelelelelelelelel belelelelelelelelelele belelelelelelele bele ble ble bele bele bele bele bele blelelelelelelelele</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Loufoca/rs-amy-xZRzLZ */
@import url(https://fonts.googleapis.com/css?family=Lobster);
::-webkit-scrollbar {width: 0px;}::-webkit-scrollbar-track {background: transparent url(images/backgrounds/scrollbar.png) repeat-y;}::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
.boots{
  background: url('https://41.media.tumblr.com/54c2813f7b3257e91c09df70f44c570a/tumblr_nqb4c0rarB1rt8u1ao2_1280.jpg'); 
  background-size: cover;
  width: 600px; 
  height: 300px;
  -webkit-transition: -webkit-opacity 0.5s ease-in;/* Utilisé pour la transition sur chrome et safari */
    -moz-transition: -moz-opacity 0.5s ease-in;/* Utilisé pour la transition sur Firefox */
    transition: opacity 0.5s ease-in;
}
.boots:hover{
  opacity: 0.9;
}
.prnm{
  opacity: 0;
  width: 600px;
  height: 300px;
  display: block;
  -webkit-transition: -webkit-opacity 0.5s ease-in;/* Utilisé pour la transition sur chrome et safari */
    -moz-transition: -moz-opacity 0.5s ease-in;/* Utilisé pour la transition sur Firefox */
    transition: opacity 0.5s ease-in;
  font-size: 7em;
  font-family: 'Lobster', cursive;
  text-align: center;
  color: black;
  text-shadow: red 2px 2px 0px;
}
.prnm:hover{
  opacity: 1;
}

Comments