<!doctype html>
<html lang="{{ .Site.Language.Lang }}" class="no-js">

<head>
    {{ partial "head.html" . }}
    <style>
        @media only screen and (min-width: 768px) {
            .scrollable-navbar-margin {
                margin-top: 64px;
            }
        }

        .card-custom-style {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            border-radius: 0.5rem;
        }

        .card-body-custom-style {
            padding-bottom: 8px;
        }

        .subtitle-col-custom-style {
            margin-right: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>

<body class="td-{{ .Kind }}">
    <header>
        {{ partial "navbar.html" . }}
    </header>
    {{ partial "tutorial-modal.html" . }}
    <div class="jumbotron jumbotron-fluid scrollable-navbar-margin bg-white">
        <div class="container" style="padding-top: 40px; ">
            <h2>Interactive Tutorials</h1>
                <p class="lead">These are interactive tutorials
                    that help you learn how to use Tekton step by step.
                </p>
        </div>
    </div>
    <div class="container">
        <section class="row">
            <div class="col-lg-3 mr-2 pb-3">
                <p class="h2 d-inline">control and visualize</p>
                <p class="h2 d-inline text-light">every step of the CI/CD workflow.</p>
            </div>
            <div class="col-lg-8 mr-2 ml-2">
                <div class="row">
                    <div class="col-md-4 pl-1 pr-1 pb-3">
                        <a href="https://katacoda.com/ncskier/scenarios/tekton-dashboard" target="_blank" rel="noopener">
                            <article  class="card card-custom-style"
                                style="background-color: hsl(171, 100%, 41%)">
                                <div class="card-img-top">
                                    <img src="/try/icons/dashboard.png" class="img-fluid">
                                </div>
                                <div class="card-body card-body-custom-style">
                                    <p class="h4 text-white">Monitor with Tekton dashboard</p>
                                </div>
                            </article>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>
    {{ partial "privacy-notice.html" }}
    {{ partial "scripts.html" . }}
</body>

</html>