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

<head>
    <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">
</head>

<body>
    <h1>Drop Caps</h1>
    <hr>
    <div class="container">
        <p>
            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.
        </p>
        <hr>
        <p>
            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.
        </p>
    </div>
</body>

</html>
*{
    box-sizing: border-box;
}

body{
    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{
    width:50px;
    border: none;
    border-bottom: 1px solid rgba(119, 119, 119, 0.25)
}
.container{
    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{
    color:#FE5F55;
    font-weight: bold;
    font-size: 70px;
    float: left;
    line-height: 60px;
    padding-right: 8px;
    margin-top: -3px;
}

@media screen and (max-width:600px){
    .container{
        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.