js.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JavaScript Projects</title>

	<link rel="icon" href="favicon.ico">
	
	<link rel="stylesheet" href="styles.css">

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>
<body class="bg-dark">

		<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-primary text-white">
	        
	        <div class="container-fluid">
	        
	          <a class="navbar-brand" href="index.html">JavaScript Projects</a>
	        
	          <button class="navbar-toggler collapsed" 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="navbar-collapse collapse" id="navbarSupportedContent" style="">
	        
	            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
	        
	              <li class="nav-item mx-3">
	                <a class="nav-link active" aria-current="page" href="index.html">Home</a>
	              </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Projects
                  </a>
                  <ul class="dropdown-menu bg-light" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item text-info text-center" href="js.html">JavaScript Projects</a></li>
                    <li><a class="dropdown-item text-info text-center" href="htmlcss.html">HTML CSS Projects</a></li>
                    <li><a class="dropdown-item text-info text-center" href="boot.html">Bootstrap Projects</a></li>
                    <li><a class="dropdown-item text-info text-center" href="cpp.html">C++ Projects</a></li>
                    <li><a class="dropdown-item text-info text-center" href="tk.html">Tkinter Projects</a></li>
                  </ul>
                </li>
	              <li class="nav-item mx-3">
	                <a class="nav-link" href="https://mycertif.prabhukalyan.repl.co" target="_blank">My Certificates</a>
	              </li>
	              <li class="nav-item mx-3">
	                <a class="nav-link" href="https://portfolio.prabhukalyan.repl.co" target="_blank">Portfolio</a>
	              </li>
	        
	            </ul>
	        
	          </div>
	        
	        </div>
	    
	    </nav>


		<!-- <section id="works" class="mt-4 p-4">

          <img class="mx-auto d-block mb-3 icimg" src="icake.png" alt="">
          
          <h1 class="text-primary text-center mb-5">Prabhu Kalyan's Projects</h1>
          
          <div class="row">
            
            <div class="col-sm col-md-4">
            
              <div class="card mb-2 text-center">
                <img src="cardimg.jpg" class="card-img-top" alt="icake">
                <div class="card-body">
                  <h5 class="card-title">Read for Interviews</h5>
                  <p class="card-text">Start learning DS & Algo by reading.</p>
                  <a class="btn btn-primary" href="readings.html" target="_blank">Readings</a>
                </div>
              </div>

            </div>

            <div class="col-sm col-md-4">
            
              <div class="card mb-2 text-center">
                <img src="cardimg.jpg" class="card-img-top" alt="icake">
                <div class="card-body">
                  <h5 class="card-title">Practice for Interviews</h5>
                  <p class="card-text">Start practicing DS & Algo problems.</p>
                  <a class="btn btn-primary" href="practice.html" target="_blank">Practice</a>
                </div>
              </div>
              
            </div>

            <div class="col-sm col-md-4">
            
              <div class="card mb-2 text-center">
                <img src="cardimg.jpg" class="card-img-top" alt="icake">
                <div class="card-body">
                  <h5 class="card-title">Tips for Interview</h5>
                  <p class="card-text">Tips to ace your Interview.</p>
                  <a class="btn btn-primary" href="interview.html" target="_blank">Interview Tips</a> 
                </div>
              </div>
              
            </div>

          </div>

        </section> -->

          <div class="container mt-5 p-4 pb-0">

            <div class="row">
              
              <div class="col-sm col-md-4">
                <div class="card mb-3">
                  <img src="images/header image.jpg" class="card-img-top border border-light">
                  <div class="card-body">
                    <h5 class="card-title">Item Lister</h5>
                    <p class="card-text">A Simple To-Do App, in which you can add to-dos or items you wanna buy when you go to a store.</p>
                    <a class="btn btn-primary me-1" href="https://itemlister.prabhukalyan.repl.co" target="_blank">Visit now <i class="fas fa-eye"></i></a>
                    <a class="btn btn-dark" href="https://replit.com/@prabhukalyan/itemlister" target="_blank">Show code <i class="fas fa-code"></i></a>
                  </div>
                </div>
              </div>

              <div class="col-sm col-md-4">
                <div class="card mb-3">
                  <img src="images/header image.jpg" class="card-img-top border">
                  <div class="card-body">
                    <h5 class="card-title">Twitter character counter</h5>
                    <p class="card-text">In twitter, there is a limit on number of characters you can enter while tweeting is 255.</p>
                    <a class="btn btn-primary me-1" href="https://twitter-character-counter.prabhukalyan.repl.co" target="_blank">Visit now <i class="fas fa-eye"></i></a>
                    <a class="btn btn-dark" href="https://replit.com/@prabhukalyan/twitter-character-counter" target="_blank">Show code <i class="fas fa-code"></i></a>
                  </div>
                </div>
              </div>

              <div class="col-sm col-md-4">
                <div class="card mb-3">
                  <img src="images/header image.jpg" alt="header image" class="card-img-top border">
                  <div class="card-body">
                    <h5 class="card-title">BMI Calculator</h5>
                    <p class="card-text">Calculate your Body Mass Index easily, using this website.</p>
                    <a class="btn btn-primary me-1" href="https://bmicalc.prabhukalyan.repl.co" target="_blank">Visit now <i class="fas fa-eye"></i></a>
                    <a class="btn btn-dark" href="https://replit.com/@prabhukalyan/bmicalc" target="_blank">Show code <i class="fas fa-code"></i></a>
                  </div>
                </div>
              </div>

            </div>

          </div>


        <!-- Row 2 -->


        <div class="container p-4 pt-0 pb-0">
          
          <div class="row">
            
            <div class="col-sm col-md-4">
              <div class="card mb-3">
                <img src="images/header image.jpg" alt="header image" class="card-img-top border">
                <div class="card-body">
                  <h5 class="card-title">Basic users form</h5>
                  <p class="card-text">A Basic form to add users to the screen, along with their email-id. No backend involved.</p>
                  <a class="btn btn-primary me-1" href="https://usersform.prabhukalyan.repl.co" target="_blank">Visit now <i class="fas fa-eye"></i></a>
                  <a class="btn btn-dark" href="https://replit.com/@prabhukalyan/usersform" target="_blank">Show code <i class="fas fa-code"></i></a>
                </div>
              </div>
            </div>

            <div class="col-sm col-md-4">
              <div class="card mb-3">
                <img src="images/header image.jpg" alt="header image" class="card-img-top border">
                <div class="card-body">
                  <h5 class="card-title">Dice game</h5>
                  <p class="card-text">A Time-pass game which requires you to refresh your screen, to test your luck.</p>
                  <a class="btn btn-primary me-1" href="https://dicee-game.prabhukalyan.repl.co" target="_blank">Visit now <i class="fas fa-eye"></i></a>
                  <a class="btn btn-dark" href="https://replit.com/@prabhukalyan/Dicee-Game" target="_blank">Show code <i class="fas fa-code"></i></a>
                </div>
              </div>
            </div>

            <div class="col-sm col-md-4">
              <div class="card mb-3">
                <img src="images/header image.jpg" alt="header image" class="card-img-top border">
                <div class="card-body">
                  <h5 class="card-title">Leap year checker</h5>
                  <p class="card-text">Just enter an year and we will check for you, if it is leap year or not.</p>
                  <a class="btn btn-primary me-1" href="https://leapyear.prabhukalyan.repl.co" target="_blank">Visit now <i class="fas fa-eye"></i></a>
                  <a class="btn btn-dark" href="https://replit.com/@prabhukalyan/leapyear" target="_blank">Show code <i class="fas fa-code"></i></a>
                </div>
              </div>
            </div>

          </div>

        </div>


        <!-- Row 3 -->


        <div class="container p-4 pt-0 pb-0">
          
          <div class="row">
            
            <div class="col-sm col-md-4">
              <div class="card mb-3">
                <img src="images/header image.jpg" alt="header image" class="card-img-top border">
                <div class="card-body">
                  <h5 class="card-title">Like and Unlike</h5>
                  <p class="card-text">This is a very basic project, where, you can like and unlike the articles present on the website.</p>
                  <a class="btn btn-primary me-1" href="https://like-posts.prabhukalyan.repl.co" target="_blank">Visit now <i class="fas fa-eye"></i></a>
                  <a class="btn btn-dark" href="https://replit.com/@prabhukalyan/like-posts" target="_blank">Show code <i class="fas fa-code"></i></a>
                </div>
              </div>
            </div>

          </div>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</body>
</html>