<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop Caps</title>
    <link rel="stylesheet" href="style.css">

    <h1>Drop Caps</h1>
    <div class="container">
            Drop cap or dropped capital is a large capital letter used as a decorative element at the beginning of a
            paragraph or section. The size of a drop cap is usually two or more lines.
            The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased
            usability by marking important passages and guiding readers through the text.

    box-sizing: border-box;

    margin: 0;
    padding: 2rem;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

body h1{
    font-weight: 600;
body hr{
    border: none;
    border-bottom: 1px solid rgba(119, 119, 119, 0.25)
    width: 60%;
    margin: 1rem auto;
    padding: 2rem;
    text-align: justify;
    transition: all 0.3s;
.container p{
    line-height: 1.5;
    letter-spacing: 0.3px;
    word-spacing: 2px;

.container p:first-child::first-letter{
    font-weight: bold;
    font-size: 70px;
    float: left;
    line-height: 60px;
    padding-right: 8px;
    margin-top: -3px;

@media screen and (max-width:600px){
        width: 100%;
        padding: 1rem;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.