index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="./assets/bootstrap.bundle.css" rel="stylesheet">
    <link rel="shortcut icon" href="./assets/favicon.png" type="image/png">
    <title>Sorting Visualizations - by Louis Stanko</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="container h-100 d-md-none">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center my-5" style="font-family: 'Times New Roman', Times, serif;">
                    Sorting
                    Visualizations
                </h1>
            </div>
            <div class="col-12">
                <div class="p-3 position-relative" style="height: 220px;">
                    <div class="bubble sort w-100 h-100 p-4">
                        <h1 class="fw-bolder">Bubble Sort</h1>
                        <a class="text-decoration-none link-dark stretched-link" href="./bubblesort/" target="_blank"
                            rel="noopener noreferrer"></a>
                    </div>
                </div>
                <div class="p-3 position-relative" style="height: 220px;">
                    <div class="heap sort w-100 h-100 p-4">
                        <h1 class="fw-bolder">Heap Sort</h1>
                        <a class="text-decoration-none link-dark stretched-link" href="./heapsort/" target="_blank"
                            rel="noopener noreferrer"></a>
                    </div>
                </div>
                <div class="p-3 position-relative" style="height: 220px;">
                    <div class="merge sort w-100 h-100 p-4">
                        <h1 class="fw-bolder">Merge Sort</h1>
                        <a class="text-decoration-none link-dark stretched-link" href="./mergesort/" target="_blank"
                            rel="noopener noreferrer"></a>
                    </div>
                </div>
                <div class="p-3 position-relative" style="height: 220px;">
                    <div class="insertion sort w-100 h-100 p-4">
                        <h1 class="fw-bolder">Insertion Sort</h1>
                        <a class="text-decoration-none link-dark stretched-link" href="./insertionsort/" target="_blank"
                            rel="noopener noreferrer"></a>
                    </div>
                </div>
                <div class="p-3 position-relative" style="height: 220px;">
                    <div class="quick sort w-100 h-100 p-4">
                        <h1 class="fw-bolder">Quick Sort</h1>
                        <a class="text-decoration-none link-dark stretched-link" href="./quicksort/" target="_blank"
                            rel="noopener noreferrer"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container h-100 d-none d-md-block">
        <div class="row align-items-center h-100">
            <div class="col-12 mx-auto">
                <div class="h-100 border-primary justify-content-center">
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <h1 class="text-center mb-5"
                                style="font-family: 'Times New Roman', Times, serif; font-size: 80px; line-height: 80px;">
                                Sorting
                                Visualizations
                            </h1>
                        </div>

                        <div class="bubble sort col-md-4 d-inline-block p-4 m-3 position-relative"
                            style="width: 220px;">
                            <h1 class="fw-bolder">Bubble Sort</h1>
                            <a class="text-decoration-none link-dark stretched-link" href="./bubblesort/"
                                target="_blank" rel="noopener noreferrer"></a>
                        </div>

                        <div class="col-8">
                            <div class="row">
                                <div class="col-md-8 p-3 position-relative" style="height: 220px;">
                                    <h1 class="fw-bolder p-4">Heap Sort</h1>
                                    <div class="bg-heap w-100 p-4"></div>
                                    <a class="text-decoration-none link-dark stretched-link" href="./heapsort/"
                                        target="_blank" rel="noopener noreferrer"></a>
                                </div>
                                <div class="col-md-4 p-3 position-relative" style="height: 220px;">
                                    <div class="merge sort w-100 h-100 p-4">
                                        <h1 class="fw-bolder">Merge Sort</h1>
                                        <a class="text-decoration-none link-dark stretched-link" href="./mergesort/"
                                            target="_blank" rel="noopener noreferrer"></a>
                                    </div>
                                </div>
                                <div class="col-md-4 p-3 position-relative" style="height: 220px;">
                                    <div class="insertion sort w-100 h-100 p-4" style="border-radius: 25px;">
                                        <h1 class="fw-bolder position-relative">Insertion Sort</h1>
                                        <a class="text-decoration-none link-dark stretched-link" href="./insertionsort/"
                                            target="_blank" rel="noopener noreferrer"></a>
                                    </div>
                                </div>
                                <div class="col-md-8 p-3 position-relative" style="height: 220px;">
                                    <h1 class="fw-bolder p-4">Quick Sort</h1>
                                    <div class="bg-quick w-100 p-4"></div>
                                    <a class="text-decoration-none link-dark stretched-link" href="./quicksort/"
                                        target="_blank" rel="noopener noreferrer"></a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>