<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Pomodoro Clock</title>
        <link
            rel="stylesheet"
            href="./bootstrap.min.css"
        />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Poiret+One"
        />
        <link
            rel="stylesheet"
            href="./font-awesome.min.css"
        />
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <!-- partial:index.partial.html -->
        <div class="row">
            <div class="col-xs-2 col-md-2"></div>
            <div class="col-xs-8 col-md-8" id="main">
                <h1 id="header">Pomodoro Clock</h1>
                <div id="pomodoro-clock">
                    <h1 id="state">Session</h1>
                    <h1 id="timer">25:00</h1>
                    <div class="progress" id="progress">
                        <div
                            class="progress-bar progress-bar-striped progress-bar-success active"
                            id="progress-bar"
                            style="width: 0%"
                        ></div>
                    </div>
                </div>
                <ul id="main-ul">
                    <li id="session-li" class="sb-li">
                        <ul id="session-ul" class="sb-ul">
                            <li class="sb-li2">Session:</li>
                            <br />
                            <li id="session-plus" class="sb-li2 clickable">
                                <i class="fa fa-plus"></i>
                            </li>
                            <li id="session-display" class="sb-li2">25:00</li>
                            <li id="session-minus" class="sb-li2 clickable">
                                <i class="fa fa-minus"></i>
                            </li>
                        </ul>
                    </li>
                    <li id="break-li" class="sb-li">
                        <ul id="break-ul" class="sb-ul">
                            <li class="sb-li2">Break:</li>
                            <br />
                            <li id="break-plus" class="sb-li2 clickable">
                                <i class="fa fa-plus"></i>
                            </li>
                            <li id="break-display" class="sb-li2">5:00</li>
                            <li id="break-minus" class="sb-li2 clickable">
                                <i class="fa fa-minus"></i>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col-xs-2 col-md-2"></div>
        </div>
        <!-- partial -->
        <script src="./jquery.min.js"></script>
        <script src="./script.js"></script>
    </body>
</html>