project.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- ad sense tag-->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1733919132650092"
        crossorigin="anonymous"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FBJL1SB5QM"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-FBJL1SB5QM');
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description"
        content="CodingNation is a comprehensive code tutorial website, providing beginner to advanced coding tutorials, coding exercises, and coding challenges to help you learn to code and build your skills.">
    <meta name="keywords"
        content="coding quiz,coding, programming, tutorial, learn, HTML, CSS, JavaScript, Python, resources, free, code tutorial, coding exercises, coding challenges, learn to code, coding skills">
    <meta name="author" content="coding-nation">
    <meta name="description"
        content="Coding Nation is a website that provides a wide range of coding resources, tutorials, and articles for programmers of all levels. Join our community and enhance your coding skills.">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png">


    <script>
        function changeTitle(newTitle) {
            document.title = newTitle;
        }
    </script>
    <title>Projects | CodingNation</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
        @import url(https://fonts.googleapis.com/css?family=Khula:300,regular,600,700,800);

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Navbar Styles */
        .navbar {
            /* background: linear-gradient(to right, #2bdcff, #ff416c); */
            border: none;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
            font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
        }

        .navbar-brand {
            font-size: 28px;
        }

        /*navigation fields hover animation*/
        nav li a:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: #ffffff;
            border-radius: 12px;
            transform-origin: right;
            transition: all 0.4s ease;
        }

        nav li a:hover:before {
            width: 100%;
        }

        nav li.center a:before {
            left: 50%;
            transform: translateX(-50%);
        }

        nav li.upward a:before {
            width: 100%;
            bottom: -5px;
            opacity: 0;
        }

        nav li.upward a:hover:before {
            bottom: 0px;
            opacity: 1;
        }

        nav li.forward a:before {
            width: 100%;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.1s ease;
        }

        nav li.forward a:hover:before {
            transform: scaleX(1);
            transform-origin: left;
        }

        .nav-link {
            color: #fff !important;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0 10px;
        }

        .nav-link:hover {
            color: #ffc107 !important;
            transform: translateY(-3px);
        }

        h1,
        h2 {
            text-align: center;
            font-size: 35px;
            text-align: center;
            padding-bottom: 15px;
            text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            font-family: "Poppins", sans-serif;
        }

        .container {
            padding: 20px;
            margin-top: 80px;
        }

        .container .row .col-md-6 {
            margin-bottom: 50px;
        }

        .description {
            margin-top: 5px;
            font-size: 15px;
            font-family: "poppins", sans-serif;
            margin-bottom: 30px;
        }


        .chatbot-icon {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: all 0.3s ease-in-out;
        }

        .chatbot-icon:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
        }

        .chatbot-icon a {
            text-decoration: none;
        }

        .chatbot-icon i {
            display: flex;
            align-self: center;
            justify-content: center;
            color: #292929;
            font-size: 28px;
            width: 40px;
            height: 30px;
        }

        @media (max-width: 768px) {
            .about-section {
                padding: 30px 0;
            }

            .team-section .team-member {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="chatbot-icon">
        <a href="../codebot.html" target="_blank"><i class='bx bx-bot'></i></i>
        </a>
    </div>
    <header>
        <header class="fixed-navbar">
            <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
                <div class="container-fluid">
                    <a class="navbar-brand" href="../index.html">CodingNation</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ms-auto" id="navbarNavLinks">
                            <li class="nav-item">
                                <a class="nav-link" href="../index.html">Home</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-controls="navbarNav" aria-expanded="false"
                                    aria-label="Toggle navigation">Courses</a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="../Python.html">Python</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../React.html">React JS</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../html.html">HTML</a>
                                    </li>
                                    <li><a class="dropdown-item" href="../css.html">CSS</a></li>
                                    <li>
                                        <a class="dropdown-item" href="../jascri.html">JavaScript</a>
                                    </li>
                                    <li><a class="dropdown-item" href="../cpro.html">C</a></li>
                                    <li>
                                        <a class="dropdown-item" href="../java.html">Java</a>
                                    </li>
                                    <li><a class="dropdown-item" href="../php.html">PHP</a></li>
                                </ul>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button"
                                    data-bs-toggle="dropdown">Practice</a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="../HTMLQuiz.html" target="_blank">HTML
                                            Quiz</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../CSSQuiz.html" target="_blank">CSS
                                            Quiz</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../JSQuiz.html" target="_blank">JavaScript
                                            Quiz</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../CQuiz.html" target="_blank">C Quiz</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../JAVAQuiz.html" target="_blank">Java
                                            Quiz</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button"
                                    data-bs-toggle="dropdown">Exercises</a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="../HTMLExer.html" target="_blank">HTML
                                            Exercise</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../CSSExer.html" target="_blank">CSS Exercise</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../JsExer.html" target="_blank">JavaScript
                                            Exercise</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../CExer.html" target="_blank">C Exercise</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="../JAVAExer.html" target="_blank">Java
                                            Exercise</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../codebot.html" target="_blank">CodeBot</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../Editor.html" target="_blank">Editor</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="../About.html">About</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <div class="container">
            <h1 class="text-center">Project</h1>
            <hr>
            <div class="row ">
                <div class="col-md-6 ">
                    <h2>CodingNation</h2>
                    <img src="../images/Screenshot 2023-11-21 175638.png" class="img-thumbnail" alt="Cinque Terre"
                        width="500" height="250"><br>
                    <p class="description">CodingNation a Code tutorial platform to learn programming</p>
                    <a href="www.coding-nation.com" class="btn btn-success">View Project</a>
                </div>
                <div class="col-md-6">
                    <h2>Movie App using React js</h2>
                    <img src="../images/Screenshot 2023-11-22 213623.png" class="img-thumbnail" alt="Cinque Terre"
                        width="500" height="250">
                    <p class="description">Movie App using React js is a simple movie showing app</p>
                    <a href="https://dinakar2329.github.io/Movieland.github.io/" class="btn btn-success">View
                        Project</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h2>Text-utils</h2>
                    <img src="../images/Screenshot 2023-11-22 213946.png" class="img-thumbnail" alt="Cinque Terre"
                        width="500" height="250">
                    <p class="description">Text-utils is a free online text manipulator tool</p>
                    <a href="https://dinakar2329.github.io/Text-utils.github.io/" class="btn btn-success">View
                        Project</a>
                </div>
                <div class="col-md-6">
                    <h2>Calculator App</h2>
                    <img src="../images/Screenshot 2023-11-22 214046.png" class="img-thumbnail" alt="Cinque Terre"
                        width="500" height="250">
                    <p class="description">Calculator app is a simple calculator created using html, css, js</p>
                    <a href="https://dinakar2329.github.io/calculator.github.io/" class="btn btn-success">View
                        Project</a>
                </div>
            </div>
            <hr>
        </div>
        <!-- Footer Section -->
        <footer class="container-fluid text-center">
            <hr>
            <span class="bi bi-caret-up" onclick="topFunction()"></span>
            <p>Copyright &copy; 2023 CodingNation. All rights reserved. <br>
            <p>Trademark &trade; CodingNation <a href="https://www.coding-nation.com/">www.coding-nation.com</a></p>
        </footer>
        <script>// When the user clicks on the button, scroll to the top of the document
            function topFunction() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            }</script>

</body>

</html>