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">
    <meta name="description"
        content="Tribute Page FreeCodeCamp task example. 📘🎓 Example of an assignment tribute page from 💎 FreeCodeCamp. ❤️" />
    <meta name="keywords"
        content="tribute page, tribute page assignment, tribute page example, tribute page task, tribute page freeCodeCamp, tribute page task freeCodeCamp, tribute page task freeCodeCamp example" />
    <meta name="author" content="Hacking-NASSA-with-HTML Vyacheslav Plekhanov" />
    <meta name="theme-color" content="#317EFB" />
    <meta name="google-site-verification" content="q5Uu7r_0az7-IRT92Z3HNDaYzegHIz_RVCZdAYEKa3k" />
    <meta name="robots" content="index, nofollow" />
    <title>Tribute Page Assignment FreeCodeCamp Example</title>
    <link rel="apple-touch-icon" sizes="180x180"
        href="https://hacking-nassa-with-html.github.io/The-functioning-of-JS-buttons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32"
        href="https://hacking-nassa-with-html.github.io/The-functioning-of-JS-buttons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16"
        href="https://hacking-nassa-with-html.github.io/The-functioning-of-JS-buttons/favicon-16x16.png">
    <link rel="canonical" href="https://hacking-nassa-with-html.github.io/Tribute_Page/" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <!-- Yandex.Metrika counter -->
    <!-- <script type="text/javascript">
        (function (d, w, c) {
            (w[c] = w[c] || []).push(function () {
                try {
                    w.yaCounter46443969 = new Ya.Metrika({
                        id: 46443969,
                        clickmap: true,
                        trackLinks: true,
                        accurateTrackBounce: true,
                        webvisor: true
                    });
                } catch (e) { }
            });

            var n = d.getElementsByTagName("script")[0],
                s = d.createElement("script"),
                f = function () { n.parentNode.insertBefore(s, n); };
            s.type = "text/javascript";
            s.async = true;
            s.src = "https://mc.yandex.ru/metrika/watch.js";

            if (w.opera == "[object Opera]") {
                d.addEventListener("DOMContentLoaded", f, false);
            } else { f(); }
        })(document, window, "yandex_metrika_callbacks");
    </script> -->
    <!-- <noscript>
        <div><img src="https://mc.yandex.ru/watch/46443969" style="position:absolute; left:-9999px;" alt="" /></div>
    </noscript> -->
    <!-- /Yandex.Metrika counter -->

    <a href="https://github.com/Hacking-NASSA-with-HTML/Tribute_Page" target="_blank"><img width="149" height="149"
            src="./forkme_left_red.png" style="position: fixed; top:0; left:0; z-index: 10;" alt="Fork me on GitHub">
    </a>

    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">

        <div id="hello">
            <h2 class="text-center wow fadeInUpBig" data-wow-duration="1.0s" data-wow-delay="0.5s">Tribute
                Page</h2>
            <h2 class="text-center wow fadeInUpBig" data-wow-duration="1.5s" data-wow-delay="1.0s">To one
                of the best</h2>
            <h3 class="text-center wow flip" data-wow-duration="2.0s" data-wow-delay="2.6s">good person in
                my life</h3>
            <h4 class="text-center wow fadeInDownBig" data-wow-duration="3.3s" data-wow-delay="3.3s">is
                dedicated</h4>
        </div>


        <div class="jumbotron">
            <div class="wrapper text-center">
                <!-- < ************  Carousel  ******************** > -->
                <div class="container">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                            <li data-target="#myCarousel" data-slide-to="3"></li>
                            <li data-target="#myCarousel" data-slide-to="4"></li>
                            <li data-target="#myCarousel" data-slide-to="5"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="./LA/image1.jpg" class="img-responsive" alt="">
                            </div>

                            <div class="item">
                                <img src="./LA/image.jpg" class="img-responsive" alt="">
                            </div>

                            <div class="item">
                                <img src="./LA/image2.jpg" class="img-responsive" alt="">
                            </div>

                            <div class="item">
                                <img src="./LA/image3.jpg" class="img-responsive" alt="">
                            </div>

                            <div class="item">
                                <img src="./LA/image4.jpg" class="img-responsive" alt="">
                            </div>

                            <div class="item">
                                <img src="./LA/image5.jpg" class="img-responsive" alt="">
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" title="Previous Image"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" title="Next Image"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <!--  < ************ End Of Carousel ******************** >  -->


                <h1 class="text-center titleH1">Tribute Page Task FreeCodeCamp Example</h1>
                <h2 class="text-center">Example of the assignment tribute page from FreeCodeCamp</h2>
                <h2 class="text-center">💎 my Tribute Page to Quincy Larson ❤️</h2>
                <h2 class="text-center"><em>The Man who makes the world better</em></h2>

                <div class="thumbnail">
                    <img src="./freeCodeCamp.jpg" alt="freeCodeCamp's site page">
                    <div class="caption text-center">
                        Quincy Larson. Founder of <em>freeCodeCamp</em>
                    </div>
                </div>

                <div class="container" id="aboutQuincy">
                    <div class="text-center">
                        <p>Quincy Larson is the teacher and &quot;guy who started it&quot; - freeCodeCamp,
                            where people learn to code and help nonprofits. He has worked as a software engineer at
                            various
                            companies and a teacher at various schools, but is more known for his approachable technical
                            videos and well written essays on the state of tech. Almost a million people use
                            freeCodeCamp
                            every month to learn to code.
                        </p>
                    </div>
                </div>

                <div id="video">
                    <p>Quincy Larson is &quot;The Code Coach&quot;</p>
                    <iframe class="large-screen" width="640" height="360"
                        src="https://www.youtube.com/embed/b_K0zM0EEnA" title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen></iframe>
                    <iframe class="medium-screen" width="480" height="270"
                        src="https://www.youtube.com/embed/b_K0zM0EEnA" title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen></iframe>
                    <iframe class="small-screen" width="288" height="162"
                        src="https://www.youtube.com/embed/b_K0zM0EEnA" title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen></iframe>
                </div>

                <p class="text-center">
                    To learn more about Quincy Larson and <em>freeCodeCamp</em>, head over to their Wikipedia
                    pages.<br /><br />
                    <a href="https://en.wikipedia.org/wiki/Quincy_Larson" target="_blank">Quincy Larson</a> - <a
                        href="https://en.wikipedia.org/wiki/FreeCodeCamp" target="_blank">freeCodeCamp</a>
                </p>

                <p>Written with pride and respect by <a href="https://www.freecodecamp.org/vyacheslav_plekhanov"
                        target="_blank">Vyacheslav Plekhanov</a>.</p>
                <p>Find me on Facebook <a href="https://www.facebook.com/vyacheslav.plekhanov"
                        target="_blank">Vyacheslav Plekhanov</a></p>
                <p>Best regards 2018 - 2023</p>

                <button type="button" class="styled" id="playMusic"></button>

                <!-- < ******** div from jumbotron ****** > -->
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="./js/wow.min.js"></script>
    <script src="./js/initWOWanimation.js"></script>
    <script src="./js/bootstrapCarousel.js"></script>
    <script src="./js/playBackgroundMusic.js"></script>
</body>

</html>