[Topic-08] Pseudo-Elements, Pt. 2

In this example below you will see how to do a [Topic-08] Pseudo-Elements, Pt. 2 with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>[Topic-08] Pseudo-Elements, Pt. 2</title>
  
  
  <link rel='stylesheet prefetch' href='css/gmvpka.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
   <div class="parent-container">
      <div class="text-block">
         <p>Thereupon he himself locked up the room, and left her in it alone. So there sat the poor miller's daughter, and for the life of her could not tell what to do, she had no idea how straw could be spun into gold, and she grew more and more frightened, until at last she began to weep.</p>
         <p>But all at once the door opened, and in came a little man, and said, <span class="spoken">"Good evening, mistress miller, why are you crying so?"</span></p>
         <p><span class="spoken">"Alas,"</span> answered the girl, <span class="spoken">"I have to spin straw into gold, and I do not know how to do it."</span></p>
         <p><span class="spoken" id="first-offer">"What will you give me,"</span> said the manikin, <span class="spoken">"if I do it for you?"</span></p>
      </div>
   </div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Media-Ed-Online/topic-08-pseudo-elements-pt-2-JOodqR */
@import url('https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700');

body {
    background-color: rgb(147, 12, 76);
}

.parent-container {
    padding: 1em;
}
.text-block {
    font-family: 'Gentium Book Basic', serif;
    font-weight: 400;
    font-size: 1.5em;
    padding: 1em;
    margin: 1em;
    background-color: #fff;
    text-indent: 1.5em;
    line-height: 1.5em;
}

/* Select the first paragraph child of .text-block: */
.text-block p:first-child {
    text-indent: 0;
}

/* Select the first letter that occurs in the .text-block: */
.text-block p:first-child:first-letter {
    font-size: 4em;
    font-weight: 700;
    color: rgb(11, 44, 126);
}

/* Select specific instances: */
.spoken {
   font-style: italic;
}
#first-offer {
   color: rgb(147, 12, 76);
   text-decoration: underline
}

Comments