code.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <title>Site4U-Code</title>
    <link rel="stylesheet" href="./code.css" />
  </head>
  <body>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
    
    <!-- Nav -->
    <nav class="navbar nav justify-content-center navbar-expand-lg navbar-dark navFix ">
       <div class="container-fluid">
        <a class="navbar-brand" href="../index.html">Site4U</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse nav justify-content-center " id="navbarSupportedContent">
          <ul class="navbar-nav  mb-2 mb-lg-0">
            <li class="  mx-4  px-4 elem nav-item">
              <a class="nav-link  elem active" aria-current="page" href="../index.html">Home</a>
            </li>
            <li class=" mx-4 px-4  elem nav-item">
              <a class="nav-link active  elem" href="../index.html#id">About</a>
            </li>
             <li class=" mx-4 px-4 elem nav-item">
              <a class="nav-link active  elem" href="../index.html#connect">Contact</a>
            </li>
            <li class=" mx-4 px-4  nav-item dropdown">
              <a class="nav-link  elem  active dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Categories
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="elem1 dropdown-item" href="educational.html">Resources</a></li>
                <li><a class="elem1 dropdown-item" href="code.html">Coding</a></li>
                <li><a class="elem1 dropdown-item" href="entertainment.html">Entertainment</a></li>
                <li><a class="elem1 dropdown-item" href="onlineTool.html">Online Tool</a></li>
              </ul>
            </li>

          </ul>
        </div>
      </div>
    </nav>
    <!--carousel-->
    <div
      id="carouselExampleInterval"
      class="carousel slide am"
      data-bs-ride="carousel"
    >

      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="2000">
          <img
            src="images/Code1.jpg"
            class="d-block w-100 dim"
            alt="..."
          />
        </div>
        <div class="carousel-item" data-bs-interval="4000">
          <img
            src="images/Code2.png"
            class="d-block w-100 dim"
            alt="..."
          />
        </div>
        <div class="carousel-item" data-bs-interval="4000">
          <img
            src="images/Code3.jpeg"
            class="d-block w-100 dim"
            alt="..."
          />
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#carouselExampleInterval"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#carouselExampleInterval"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  <main>
    <!-- group 1-->
    <div class="all">
      <!-- Category Heading-->
      <div class="left h">ONLINE COMPILERS</div>
      <!-- Category Item-1 -->
      <a href="https://ideone.com/fork/NCNDie" style="text-decoration: none" target="_blank">
        <div class="movie category1">
          <div class="pic1">
            <img
              src="./images/ide.jfif"
              class="circle"
              width="130px"
              height="130px"
            />
          </div>
          <div class="abt">
            <div class="heading">IdeOne</div>
            <div class="about">
                Ideone is an online compiler
                and debugging tool which allows you to
                compile and execute source code
                in more than 60 programming languages.
            </div>
          </div>
        </div>
      </a>
      <!-- Category Item-2 -->
      <a href="https://www.onlinegdb.com/" style="text-decoration: none" target="_blank">
        <div class="movie  rev category2">
          <div class="abt">
            <div class="heading">Online gdb</div>
            <div class="about">
                GDB online is an online compiler and
                debugger tool for C, C++, Python, PHP, Ruby,
                C#, VB, Perl, Swift, Prolog, Pascal, HTML,
                CSS, JS. Code, Compile, Run and Debug online from anywhere in world.
            </div>
          </div>
          <div class="pic2">
            <img
              src="images/gd.jfif"
              class="circle"
              width="130px"
              height="130px"
            />
          </div>
        </div>
      </a>
    </div>

    <!-- group 2 -->

    <div class="all">
      <!-- Category Heading-->
      <div class="RIGHT">
        <div class="right Video"><span class="spac">CodingBooks</span></div>
      </div>
      <!-- Category Item-1 -->
      <a href="http://www.pdffilestore.com/sumita-arora-python-class-11-12/" style="text-decoration: none" target="_blank">
        <div class="movie category3">
          <div class="pic1">
            <img
              src="images/python.jpg"
              class="circle"
              width="130px"
              height="130px"
            />
          </div>
          <div class="abt">
            <div class="heading">Sumita Arora (Python)</div>
            <div class="about">
                This book provides a complete overview of the principles of computer 
                science. The diagrams, theory descriptions to mathematical deductions,
                 and practice tasks make the chapters easy and interesting for the students.
                Click here to download the book
            </div>
          </div>
        </div>
      </a>

      <!-- Category Item-2 -->
      <a href="https://instapdf.in/let-us-c-by-yashwant-kanetkar-2/" style="text-decoration: none" target="_blank">
        <div class="movie  rev category4">
          <div class="abt">
            <div class="heading">Let us C++</div>
            <div class="about">
                C++ is a powerful general-purpose programming language. It can be used to develop operating systems,
                browsers, games etc. C++ supports different ways of programming like procedural, object-oriented, functional,
               and so on. Click  here to download the book.
            </div>
          </div>
          <div class="pic2">
            <img
              src="./images/c++.jpg"
              class="circle"
              width="130px"
              height="130px"
            />
          </div>
        </div>
      </a>
    </div>

    <!-- group 3 -->
    <div class="all">
      <!-- Category Heading-->
      <div class="left convertor">WEBSITES</div>
      <!-- Category Item-1 -->
      <a href="https://www.w3schools.com/" style="text-decoration: none" target="_blank">
        <div class="movie category5">
          <div class="pic1">
            <img
              src="images/Web1.jpg"
              class="circle"
              width="130px"
              height="130px"
            />
          </div>
          <div class="abt">
            <div class="heading">W3Schools</div>
            <div class="about">
                W3Schools is an educational website for learning coding online,
                with most of the languages covered including web development.
                It is optimized for easy learning, testing, and training.
                Do check it out !
            </div>
          </div>
        </div>
      </a>
      <!-- Category Item-2 -->
      <a href="https://www.sodapdf.com/" style="text-decoration: none" target="_blank">
        <div class="movie rev category6">
          <div class="abt">
            <div class="heading">LearnCpp</div>
            <div class="about">
                LearnCpp.com is a free website devoted to teaching you how to program in C++.
                Whether you’ve had any prior programming experience or not, the tutorials on this site will walk you
                 through all the steps to write, compile, and debug your C++ programs, all with plenty of examples.
            </div>
          </div>
          <div class="pic2">
            <img
              src="./images/c+.jpg"
              class="circle"
              width="130px"
              height="130px"
            />
          </div>
        </div>
      </a>
    </div>

    <!-- group 4 -->

    <div class="all">
      <!-- Category Heading-->
      <div class="RIGHT">
        <div class="right Audio">
          <span class="spac">FREE COURSES</span>
        </div>
      </div>
      <!-- Category Item-1 -->
      <a href="https://mega.nz/folder/p5YWAbAA#eCWHiBBAzvodkdLc_-176g" style="text-decoration: none" target="_blank">
        <div class="movie category7">
          <div class="pic1">
            <img
              src="images/dev.png"
              class="circle"
              width="130px"
              height="130px"
            />
          </div>
          <div class="abt">
            <div class="heading">Web Development</div>
            <div class="about">
                Complete Web Development Bootcamp by Angela Yu, the only course you need to learn to code and become a
                full-stack web developer. With 150,000+ ratings and a 4.8 average, this Web Development course is one of the
                HIGHEST RATED courses in Udemy! Click
               here to go to the course page.
            </div>
          </div>
        </div>
      </a>
      <!-- Category Item-2 -->
      <a href="https://paidcoursesatfree.blogspot.com/mastering-data-structures-algorithms" style="text-decoration: none" target="_blank">
        <div class="movie rev category8">
          <div class="abt">
            <div class="heading">Data Structures/Algorithms</div>
            <div class="about">
                You may be new to Data Structure or you have already Studied and Implemented it but
                still you feel you need to learn more about Data Structure in detail so that it helps you solve challenging problems
                and used it efficiently.Click
               here to go to the course page.
            </div>
          </div>
          <div class="pic2">
            <img
              src="images/dsa.png"
              class="circle"
              width="130px"
              height="130px"
            />
          </div>
        </div>
      </a>
    </div>
  </main>
   
  </body>

</html>