index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
    <title>Visualizing Algorithms</title>
    <style>
        .bg-custom-1 {
            background-color: #85144b;
        }

        .bg-custom-2 {
            background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
        }

        .promoting-card:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
    </style>
</head>


<body>
    <nav class="navbar navbar-dark navbar-expand-md bg-custom-2">
        <div class="container"><a class="navbar-brand" href="/index.html">Visualizing Algorithms</a></div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav1"
            aria-controls="basicExampleNav1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse container" id="basicExampleNav1">

            <ul class="navbar-nav ml-auto">
                <li class="breadcrumb-item"><a class="waves-effect" href="/index.html" style="color:black">Home</a></li>
                <li class="breadcrumb-item"><a class="waves-effect" href="/aboutUs.html" style="color:black">About
                        Us</a></li>
                <li class="breadcrumb-item"><a class="waves-effect" href="/contactUs.html" style="color:black">Contact
                        Us</a></li>
            </ul>
        </div>
    </nav>


    <div class="container">
        <div class="row">
            <div class="col card promoting-card" onclick="location.href='Selection Sort/index.html';">

                <div class="card-body d-flex flex-row">

                    <img src="selectionSort.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">

                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Selection Sort</h4>

                    </div>

                </div>

                <div class="view overlay">
                    <img class="card-img-top rounded-0" src="selectionSort.png" alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>

                <div class="card-body">

                    <div class="collapse-content">

                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>


                    </div>

                </div>

            </div>

        </div>

        <br>

        <div class=" row">
            <!-- Card -->
            <div class="col card promoting-card" onclick="location.href='Insertion Sort/index.html';">

                <!-- Card content -->
                <div class="card-body d-flex flex-row">

                    <!-- Avatar -->
                    <img src="insertionSort.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">

                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Insertion Sort</h4>

                    </div>

                </div>

                <!-- Card image -->
                <div class="view overlay">
                    <img class="card-img-top rounded-0" src="insertionSort.png" alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>

                <!-- Card content -->
                <div class="card-body">

                    <div class="collapse-content">

                        <!-- Text -->

                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>

                    </div>

                </div>

            </div>


        </div>


        <div class=" row">
            <!-- Card -->
            <div class="col card promoting-card" onclick="location.href='Bubble Sort/index.html';">

                <!-- Card content -->
                <div class="card-body d-flex flex-row">

                    <!-- Avatar -->
                    <img src="bubbleSort.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">

                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Bubble Sort</h4>

                    </div>

                </div>

                <!-- Card image -->
                <div class="view overlay">
                    <img class="card-img-top rounded-0" src="bubbleSort.png" alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>

                <!-- Card content -->
                <div class="card-body">

                    <div class="collapse-content">

                        <!-- Text -->

                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>

                    </div>

                </div>

            </div>


        </div>


        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='Binary Search/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="binarySearchIcon.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Binary Search</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="binarySearch.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>

        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='Convex Hull/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="convexHull.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Convex Hull</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="convexHull.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>


        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='DFS/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="dfs.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">DFS</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="dfs.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>

        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='Maze Generator/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="mazeGenerator.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Maze Generator</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="mazeGenerator.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>


        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='BFS/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="bfs.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">BFS</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="bfs.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>


        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='Dijkstra/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="dijkstra.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Dijkstra</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="dijkstra.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>

        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='Fractal Tree/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="fractalTree.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Fractal Tree</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="fractalTree.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>


        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='Superellipse/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="superellipse.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">Superellipse</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="superellipse.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>

        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='Path Finding A* Algorithm/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="aStarAlgorithm.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">A* Algorithm</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="aStarAlgorithm.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>


        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='Path Finding BFS/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="bfsPathAlgorithm.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">BFS Path Finding Algorithm</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="bfsPathAlgorithm.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>


        <div class=" row">
            <div class="col card promoting-card" onclick="location.href='The Destroyers/index.html';">
                <div class="card-body d-flex flex-row">
                    <img src="theDestroyers.png" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
                    <div>
                        <h4 class="card-title font-weight-bold mb-2">The Destroyers</h4>
                    </div>
                </div>
                <div class="view overlay">
                    <img class="card-img-top rounded-0" style=" border: 5px solid #555;" src="theDestroyers.png"
                        alt="Card image cap">
                    <a href="#!">
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>
                <div class="card-body">
                    <div class="collapse-content">
                        <a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse"
                            href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
                    </div>
                </div>
            </div>
        </div>


        <!-- </div> -->
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="/__/firebase/8.1.2/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="/__/firebase/8.1.2/firebase-analytics.js"></script>

    <!-- Initialize Firebase -->
    <script src="/__/firebase/init.js"></script>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <!-- <script src="/__/firebase/8.1.2/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
    <!-- <script src="/__/firebase/8.1.2/firebase-analytics.js"></script> -->

    <!-- Initialize Firebase -->
    <!-- <script src="/__/firebase/init.js"></script> --> -->
</body>

</html>