HTML part of Simple Card with Flip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Card Flip with Pure CSS</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Handjet:wght@300;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="content">
            <div class="front-side">
                <img class="photo" src="https://via.placeholder.com/150" alt="here's my photo">
                <span class="title">Daniel Lopez</span> <span class="title-small">bio of</span>
            </div>
            <div class="back-side">
                Daniel Lopez is a 14-year-old teenager who enjoys watching sport, watching television and helping old ladies across the road. He is friendly and caring, but can also be very rude and a bit moody.

He is an American Christian. He is currently at school. He is allergic to soy. He has phobias of apostrophes and crocodiles

Physically, Daniel is in good shape. He is very short for his age with olive skin, grey hair and green eyes.

He lives in a working class neighbourhood. His parents abandoned him and he is living in foster care.

Daniel goes to Shelbyville School, where his favourite subjects are chemistry and biology. He loves his teacher Mr Anderson but hates Mr Gill whose interests include putting children in detention for no reason.
Daniel's best friend is a teenager called Rose Washington. They are inseparable. He also hangs around with Marjorie Wright and Toby Khan. They enjoy attending museums together.
            </div>
        </div>
    </div>
</body>
</html>