<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip Book - Samuel</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap" rel="stylesheet">
</head>
<body>

<!--FLIPBOOK-->

<div class="flipbookkk">
    <h3 class="flipbookkk-title">Denotation & Connotation</h3>
    <iframe src="https://cdn.flipsnack.com/widget/v2/widget.html?hash=fu56p2gym" 
    width="100%" height="480" seamless="seamless" scrolling="no" frameBorder="0" allowFullScreen></iframe>
</div>


<div class="flipbookkk">
    <h3 class="flipbookkk-title">Compositions & Narratives</h3>
    <iframe src="https://cdn.flipsnack.com/widget/v2/widget.html?hash=fxcj4pmko"
     width="100%" height="480" seamless="seamless" scrolling="no" frameBorder="0" allowFullScreen></iframe>
</div>


<div class="flipbookkk">
    <h3 class="flipbookkk-title">Patterns & Types (Fonts)</h3>
    <iframe src="https://cdn.flipsnack.com/widget/v2/widget.html?hash=ft95r3fmz" 
    width="100%" height="480" seamless="seamless" scrolling="no" frameBorder="0" allowFullScreen></iframe>
</div>

<!--FLIPBOOK-->

</body>
</html>

    .flipbookkk{
        margin-top: 15vh !important;
        margin-bottom: 5vh !important;

    }

    .flipbookkk-title{
        color: #ffa200;
        text-align: center;
        font-size: 5vw !important;
        font-family: "Poppins", Sans-serif;
        font-weight: 900;
        line-height: 75px;
       text-shadow: 1px 3px 0px #373737;
    }

    @media(min-width: 768px){
        .flipbookkk-title{
        font-size: 2.5vw !important;
    }

    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.