index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- setup for proper mobile responsiveness -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <!-- import google fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Alef&family=Bungee&family=Tilt+Neon&family=Unbounded:wght@500&family=Rubik+Dirt&family=Slackey&display=swap" rel="stylesheet" />
        <!-- end google fonts -->

        <title>Daily Dad | Landing Page</title>
        <meta name="description" content="Coming soon to THEE CODR DJ online, is the Daily Dad universe. A web based interactive site that I created for my kids so that we could interact and learn even when we are apart." />

        <!-- declare favicon files -->
        <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
        <link rel="manifest" href="favicon/site.webmanifest" />
        <link rel="shortcut icon" href="favicon/favicon.ico" />
        <meta name="msapplication-TileColor" content="#ffd766" />
        <meta name="msapplication-config" content="favicon/browserconfig.xml" />
        <meta name="theme-color" content="#ffd766" />
        <!-- end favicon -->

        <!-- import vendor css stylesheets -->
        <link href="assets/vendor/aos/aos.css" rel="stylesheet" />
        <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
        <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet" />
        <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet" />
        <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
        <!-- end vendor css -->

        <!-- import custom css stylesheet -->
        <link href="assets/css/tcd.min.css" rel="stylesheet" />
        <!-- end custom css stylesheet -->

        <!-- import bootstrap and jquery js -->
        <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="assets/vendor/jquery/jquery.min.js"></script>
        <!-- end bootstrap and jquery import -->

        <script>
            window.addEventListener("load", (event) => {
                alert("Welp, today is Sunday, Oct. 29. T minus 2 days to Halloween for those counting. We got some fun facts as usual here on Daily Dad Online. The Dad joke had me cracking up...and the vocab word is a big one! I hope y'all have a great day...and as ALWAYS...I love you kiddos! - DAD");
            });
        </script>
    </head>

    <body>
        <!-- #header -->
        <header id="header" class="header fixed-top">
            <div class="container-fluid container-xl d-flex align-items-center justify-content-between">
                <a href="/" class="logo d-flex align-items-center">
                    <img src="assets/img/logos/dailydad-logo.png" alt="Logo for Daily Dad with transparent background" />
                    <span class="dadfont">Daily Dad</span>
                </a>

                <nav id="navbar" class="navbar">
                    <ul>
                        <li><a class="nav-link active" href="/">Home</a></li>
                        <li><a class="nav-link" href="/joke/">Joke</a></li>
                        <li><a class="nav-link" href="/votd/">Vocab</a></li>
                        <li><a class="nav-link" href="/thisday/">History</a></li>
                        <li><a class="nav-link" href="/facts/">Facts</a></li>
                    </ul>
                    <i class="bi bi-list mobile-nav-toggle"></i>
                </nav>
                <!-- end #navbar -->
            </div>
        </header>
        <!-- end #header -->

        <!-- #hero -->
        <section id="hero" class="hero d-flex align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 d-flex flex-column justify-content-center mt-1">
                        <h1 data-aos="fade-up">Time for your Daily Dose of Dad</h1>
                        <h2 data-aos="fade-up" data-aos-delay="400">Welcome to everyones favorite little corner of the internet. Here you can learn, laugh, love every day with new content.</h2>
                    </div>
                    <div class="col-lg-6 hero-img" data-aos="zoom-out" data-aos-delay="200">
                        <img src="assets/img/dailydad-hero.jpeg" class="img-fluid" alt="Daily Dad scene background" />
                    </div>
                </div>
            </div>
        </section>
        <!-- end #hero -->

        <main id="main">
            <!-- #features -->
            <section id="features" class="features">
                <div class="container" data-aos="fade-up">
                    <header class="section-header">
                        <h2>Features</h2>
                        <p>To get your Daily Dose of Dad</p>
                    </header>

                    <div class="features-slider swiper" data-aos="fade-up" data-aos-delay="200">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="features-item">
                                    <p>
                                        If you would like to know fascinating things that have occurred in history, but on this exact day in history, than check out the section "On This Day in History"
                                    </p>
                                    <div class="mt-1">
                                        <img src="assets/img/dailydad-onthisday.jpeg" class="features-img" alt="Daily Dad history feature background" />
                                        <h3>Use button below to navigate to this page</h3>
                                        <a href="/thisday/" class="btn-link">Click Here </a>
                                    </div>
                                </div>
                            </div>
                            <!-- end feature item -->

                            <div class="swiper-slide">
                                <div class="features-item">
                                    <p>
                                        To make sure you keep your vocabulary game strong, head over to Vocab of the Day. Everyday you can learn a new word, as well as how to use it in a sentence. *Bonus is that you also get to learn it in
                                        Spanish.
                                    </p>
                                    <div class="mt-1">
                                        <img src="assets/img/dailydad-vocab.jpeg" class="features-img" alt="Daily Dad vocab scene background" />
                                        <h3>Use button below to navigate to this page</h3>
                                        <a href="/votd/" class="btn-link">Click Here </a>
                                    </div>
                                </div>
                            </div>
                            <!-- end feature item -->

                            <div class="swiper-slide">
                                <div class="features-item">
                                    <p>
                                        If you are a trivia master, or want to be one. Or if you just thirst for knowledge. Head over and check out the Random Factoid(s) of the Day section.
                                    </p>
                                    <div class="mt-1">
                                        <img src="assets/img/dailydad-factoids.jpeg" class="features-img" alt="Daily Dad fact section scene background" />
                                        <h3>Use button below to navigate to this page</h3>
                                        <a href="/facts/" class="btn-link">Click Here </a>
                                    </div>
                                </div>
                            </div>
                            <!-- end feature item -->

                            <div class="swiper-slide">
                                <div class="features-item">
                                    <p>
                                        If laughing is your thing, than stop what you are doing immediately and head over to the "Dad" joke of the day.
                                    </p>
                                    <div class="mt-1">
                                        <img src="assets/img/dailydad-joke.jpeg" class="features-img" alt="Daily Dad joke section scene background" />
                                        <h3>Use button below to navigate to this page</h3>
                                        <a href="/joke/" class="btn-link">Click Here </a>
                                    </div>
                                </div>
                            </div>
                            <!-- end feature item -->
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </section>
            <!-- end #features -->
        </main>
        <!-- end #main -->

        <!-- #footer -->
        <footer id="footer" class="footer">
            <div class="footer-top">
                <div class="container d-flex align-items-center justify-content-center">
                    <div class="page">
                        <a href="/" class="logo">
                            <img src="assets/img/logos/dailydad-logo.png" alt="Daily Dad logo with transparent background" />
                            <span class="dadfont">Daily Dad</span>
                        </a>
                    </div>
                </div>
                <!-- end container -->
            </div>

            <div class="container d-flex align-items-center justify-content-center">
                <div class="copyright">
                    &copy; Copyright 2023
                    <strong>
                        <a href="https://theecodrdj.online"><span class="tcd">THEE COD*R DJ</span></a>
                    </strong>
                    . All Rights Reserved
                </div>
            </div>
            <!-- end container -->
        </footer>
        <!-- end #footer -->

        <!-- import vendor javascript -->
        <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
        <script src="assets/vendor/aos/aos.js"></script>
        <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
        <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
        <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

        <!-- import custom exterior javascript -->
        <script src="assets/js/tcd.min.js"></script>
    </body>
</html>