Drop Cap

What is a drop cap How do you make a drop cap? This script and codes were developed by Garrett Saiki on 15 October 2021, Friday.

How do I make an drop cap?
  1. Drop Cap Previews
  2. Drop Cap HTML Codes
  3. Drop Cap CSS Codes
Drop Cap Previews

Drop Cap HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Drop Cap</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor repellat consequuntur perspiciatis eos ducimus labore, atque illo, deserunt sunt rerum eius sequi nisi quam rem quidem incidunt nobis nihil aperiam.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor repellat consequuntur perspiciatis eos ducimus labore, atque illo, deserunt sunt rerum eius sequi nisi quam rem quidem incidunt nobis nihil aperiam.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor repellat consequuntur perspiciatis eos ducimus labore, atque illo, deserunt sunt rerum eius sequi nisi quam rem quidem incidunt nobis nihil aperiam.</p>
  
  
</body>
</html>

Drop Cap CSS Codes

p:first-child:first-letter {
  background: black;
  float: left;
  display: inline-block;
  color: magenta;
  font-size: 5em;
  margin: .25em;
  padding: .25em;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.