About.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>About Us | 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;
    }

    .about-section {
      padding: 50px 0;
      margin-top: 25px;

    }


    .about-section h2 {
      font-size: 28px;
      margin-bottom: 30px;
    }

    .about-section p {
      font-size: 19px;
      font-weight: 500;
      color: #777;
      margin-bottom: 30px;
    }

    /* Container for team members */
    .team-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;

    }

    /* Individual team member card */
    .team-member {
      flex-basis: calc(33.33% - 20px);
      padding: 20px;
      background-color: #f5f5f5;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      margin-bottom: 50px;
      padding: 20px 40px 20px 40px;
    }

    /* Team member name */
    .team-member h3 {
      margin-top: 28px;
      margin-bottom: 20px;
      font-size: 22px;
    }

    /* Team member role */
    .team-member p {
      font-size: 19px;
      color: #777;
    }

    .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">
      <div class="about-section">
        <h2>About Us</h2>
        <p class="lead mb-5">
          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.
          Welcome to our code tutorial website! We're two people who are passionate about coding and want to share our
          knowledge with the world. We've put in a lot of hard work to create this website and hope that you find it
          useful.
        </p>
      </div>

      <div class="team-section">
        <div class="team-member">

          <h3>Our Story</h3>
          <p>Our Story
            Our journey began with a shared passion for coding that ignited at a young age. As we delved into the world
            of programming, we discovered a profound love for the craft and a relentless curiosity to learn and grow.
            With each passing year, we honed our skills, mastered new techniques, and expanded our horizons in the realm
            of coding.</p>
        </div>
        <div class="team-member">

          <h3>What We Offer</h3>
          <p>Our website offers a wide range of tutorials on various programming languages and tools. We cover
            everything from the basics to more advanced topics, so there's something for everyone. We also offer tips
            and tricks to help you become a better coder.</p>
        </div>
        <div class="team-member">

          <h3>Our Philosopy</h3>
          <p>We believe that everyone should have access to quality coding education, regardless of their background or
            experience. That's why we've made our website free and accessible to everyone. We also believe in making
            learning fun and engaging, so our tutorials are designed to be interactive and easy to follow.</p>
        </div>
      </div>
    </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>