add comments

index.html

@@ -29,6 +29,8 @@
     <!-- The <div> element is a container used to group and style content. In this code, <div> elements with specific classes like "layout," "main_content," "home_page," and "navbar" are used to organize different sections of the webpage.  -->
     <div class="layout">
         <div class="main_content">
+
+            <!-- Home Page starts here -->
             <div class="home_page">
                 <div class="home_heading" id="Home">
                     <!-- Edit here 👇 Change "GDSC IIIT Kalyani" to your own name -->
@@ -41,6 +43,8 @@
                     <img src="./assets/pfp.png">
                 </div>
             </div>
+
+            <!-- About Page starts here -->
             <div class="about_page" id="About">
                 <div class="about_heading">About</div>
                 <div class="right_container">
@@ -107,21 +111,27 @@
                     </div>
                 </div>
             </div>
+
+            <!-- Portfolio page starts here -->
             <div class="portfolio" id="Portfolio">
                 <div class="portfolio_heading">Portfolio</div>
                 <div class="portfolio_container">
-
+                    <!--Edit here 👇 Add your own photo or video here. Incase of photo change the <Video> tag to <img> and remove autoplay and controls -->
                     <video src="./assets/IMG_0473.mp4" autoplay controls class="bento__item" style="--columns: span 2; object-fit: cover;">
                     </video>
                     <!-- <div class="bento__item" style="--columns: span 2;">
                         
                     </div> -->
+                    <!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
                     <img src="./assets/robotics.png" class="bento__item" style="--columns: span 2; object-fit: cover; width: 20rem;">
-                    <!-- <div class="bento__item" style="--columns: span 2;"></div> -->
+                    <!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
                     <img src="./assets/team.jpeg" class="bento__item" style="--rows: span 4; --columns: 1 / -1; object-fit: cover;">
 
+                    <!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
                     <img src="./assets/rebase.png" class="bento__item" style="object-fit: cover">
+                    <!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
                     <img src="./assets/git.png" class="bento__item" style="--columns: span 2; object-fit: cover; height: 14rem;">
+                    <!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
                     <img class="bento__item" src="./assets/rebase2.png">
                 </div>
             </div>