blog/inputAndOptions/index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input And Options</title>
    <link rel="stylesheet" href="../editing-toolbar/css/editingtoolbar.min.css">
</head>

<body>
    <hr>
    <div id="progressReport"></div>
    <hr>
    <div class="editing-tool-bar">
        <div class="input-and-options" id="fontName-IAO">
            <input type="text" class="input font-name" value="Roboto" id="font-name-in">
            <button class="options-btn"><img src="./icons/arrow-drop-down.svg" alt="more"></button>
            <div id="options" class="options options-type-2" style="max-height: 50vh; overflow: auto; position: absolute; top: 100px;"></div>
        </div>
    </div>
    
    <p id="text">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae voluptatem ullam quis autem provident
        repellendus quia tenetur, asperiores sunt! Quia, itaque reprehenderit deserunt unde facere, harum tenetur cumque
        vero neque sapiente molestiae numquam modi ducimus voluptas, dolore provident sequi officia necessitatibus quas
        velit qui nemo veniam vel laboriosam? Illum, quidem!
    </p>
    <script src="./scripts/inputAndOptions.js"></script>
</body>

</html>