├── img
    ├── cb-logo.png
    ├── cb-old-logo.png
    ├── code-folder.png
    ├── code.png
    ├── codepen-logo.png
    ├── download-folder.png
    ├── github-logo.png
    ├── insta-logo.png
    ├── linkedIn-logo.png
    ├── live-icon.png
    ├── loading.gif
    ├── preview
    │   ├── project-preview (1).gif
    │   ├── project-preview (10).gif
    │   ├── project-preview (11).gif
    │   ├── project-preview (12).gif
    │   ├── project-preview (13).gif
    │   ├── project-preview (14).gif
    │   ├── project-preview (15).gif
    │   ├── project-preview (16).gif
    │   ├── project-preview (17).gif
    │   ├── project-preview (18).gif
    │   ├── project-preview (19).gif
    │   ├── project-preview (2).gif
    │   ├── project-preview (20).gif
    │   ├── project-preview (3).gif
    │   ├── project-preview (4).gif
    │   ├── project-preview (5).gif
    │   ├── project-preview (6).gif
    │   ├── project-preview (7).gif
    │   ├── project-preview (8).gif
    │   └── project-preview (9).gif
    ├── tick-mark.png
    ├── top.png
    ├── twitter-logo.png
    ├── video-preview.png
    └── youtube-logo.png
├── index.html
├── index.js
├── navbar-style.css
└── project-cards.css


/img/cb-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/cb-logo.png


--------------------------------------------------------------------------------
/img/cb-old-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/cb-old-logo.png


--------------------------------------------------------------------------------
/img/code-folder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/code-folder.png


--------------------------------------------------------------------------------
/img/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/code.png


--------------------------------------------------------------------------------
/img/codepen-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/codepen-logo.png


--------------------------------------------------------------------------------
/img/download-folder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/download-folder.png


--------------------------------------------------------------------------------
/img/github-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/github-logo.png


--------------------------------------------------------------------------------
/img/insta-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/insta-logo.png


--------------------------------------------------------------------------------
/img/linkedIn-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/linkedIn-logo.png


--------------------------------------------------------------------------------
/img/live-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/live-icon.png


--------------------------------------------------------------------------------
/img/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/loading.gif


--------------------------------------------------------------------------------
/img/preview/project-preview (1).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (1).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (10).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (10).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (11).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (11).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (12).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (12).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (13).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (13).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (14).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (14).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (15).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (15).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (16).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (16).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (17).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (17).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (18).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (18).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (19).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (19).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (2).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (2).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (20).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (20).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (3).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (3).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (4).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (4).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (5).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (5).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (6).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (6).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (7).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (7).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (8).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (8).gif


--------------------------------------------------------------------------------
/img/preview/project-preview (9).gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/preview/project-preview (9).gif


--------------------------------------------------------------------------------
/img/tick-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/tick-mark.png


--------------------------------------------------------------------------------
/img/top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/top.png


--------------------------------------------------------------------------------
/img/twitter-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/twitter-logo.png


--------------------------------------------------------------------------------
/img/video-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/video-preview.png


--------------------------------------------------------------------------------
/img/youtube-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/img/youtube-logo.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | 
   4 | <head>
   5 |     <meta charset="UTF-8" />
   6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   8 |     <title>CodeBustler | All Projects</title>
   9 |     <link rel="icon" type="image/x-icon" href="./img/cb-logo.png" />
  10 |     <link rel="stylesheet" href="./navbar-style.css" />
  11 |     <link rel="stylesheet" href="./project-cards.css" />
  12 |     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  13 |     <script src="./index.js"></script>
  14 | </head>
  15 | 
  16 | <body>
  17 |     <a href="#home-return" class="top"><img src="./img/top.png" alt="" width="40px" /></a>
  18 | 
  19 |     <div class="nav-container">
  20 |         <nav class="nav-bar">
  21 |             <div class="branding">
  22 |                 <div class="logo">
  23 |                     <a href="#home-return"><img src="./img/cb-logo.png" alt="" width="40px" /></a>
  24 |                 </div>
  25 |                 <div class="name">
  26 |                     <p class="code"><a href="#home-return">CODE</a></p>
  27 |                     <p class="bustler"><a href="#home-return">BUSTLER</a></p>
  28 |                     <p class="projects"><a href="#home-return">Projects</a></p>
  29 |                 </div>
  30 |             </div>
  31 | 
  32 |             <div class="social-links">
  33 |                 <ul>
  34 |                     <li>
  35 |                         <a href="https://openinapp.co/9dpjt" target="_blank"><img src="./img/insta-logo.png"
  36 |                                 alt="" /></a>
  37 |                     </li>
  38 |                     <li>
  39 |                         <a href="https://openinapp.co/empxu" target="_blank"><img src="./img/youtube-logo.png"
  40 |                                 alt="" /></a>
  41 |                     </li>
  42 |                     <li>
  43 |                         <a href="https://openinapp.co/jmg5z" target="_blank">
  44 |                             <img src="./img/twitter-logo.png" alt="" /></a>
  45 |                     </li>
  46 |                     <li>
  47 |                         <a href="https://github.com/codebustler" target="_blank"><img src="./img/github-logo.png"
  48 |                                 alt="" /></a>
  49 |                     </li>
  50 |                     <li>
  51 |                         <a href="https://openinapp.co/n462o" target="_blank">
  52 |                             <img src="./img/linkedIn-logo.png" alt="" /></a>
  53 |                     </li>
  54 |                 </ul>
  55 |             </div>
  56 |         </nav>
  57 |     </div>
  58 |     <div class="title">
  59 |         <p>🚀 All My Projects & Source Code</p>
  60 |         <div class="social-links2">
  61 |             <ul>
  62 |                 <li>
  63 |                     <a href="https://openinapp.co/9dpjt" target="_blank"><img src="./img/insta-logo.png" alt="" /></a>
  64 |                 </li>
  65 |                 <li>
  66 |                     <a href="https://openinapp.co/empxu" target="_blank"><img src="./img/youtube-logo.png" alt="" /></a>
  67 |                 </li>
  68 |                 <li>
  69 |                     <a href="https://openinapp.co/jmg5z" target="_blank">
  70 |                         <img src="./img/twitter-logo.png" alt="" /></a>
  71 |                 </li>
  72 |                 <li>
  73 |                     <a href="https://github.com/codebustler" target="_blank"><img src="./img/github-logo.png"
  74 |                             alt="" /></a>
  75 |                 </li>
  76 |                 <li>
  77 |                     <a href="https://openinapp.co/n462o" target="_blank">
  78 |                         <img src="./img/linkedIn-logo.png" alt="" /></a>
  79 |                 </li>
  80 |             </ul>
  81 |         </div>
  82 |     </div>
  83 | 
  84 | 
  85 |     <div class="all-projects-container" id="home-return">
  86 |         <!-- Project No-01 -->
  87 |         <div class="project-container project-01" data-aos="fade-up" data-aos-duration="1200">
  88 |             <img class="bg-code" src="./img/code.png" alt="" />
  89 |             <div class="project-name">
  90 |                 <p><span> 01. CodeBustler Links</span></p>
  91 |             </div>
  92 |             <div class="project-content">
  93 |                 <!-- video_preview -->
  94 |                 <div class="project-preview">
  95 |                     <!-- Video_link -->
  96 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/boN3f6nh2Es?start=4&mute=1"
  97 |                         title="YouTube video player" frameborder="0"
  98 |                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  99 |                         allowfullscreen></iframe> -->
 100 |                     <img src="./img/preview/project-preview (1).gif" alt="">
 101 |                 </div>
 102 |                 <!-- Project Details -->
 103 |                 <div class="project-detail">
 104 |                     <ul class="project-pros">
 105 |                         <li>
 106 |                             <img src="./img/tick-mark.png" alt="" />
 107 |                             <span>Responsive Page</span>
 108 |                         </li>
 109 |                         <li>
 110 |                             <img src="./img/tick-mark.png" alt="" />
 111 |                             <span>Images/Resouces Included</span>
 112 |                         </li>
 113 |                         <li>
 114 |                             <img src="./img/tick-mark.png" alt="" />
 115 |                             <span>With Comments</span>
 116 |                         </li>
 117 |                         <li>
 118 |                             <img src="./img/tick-mark.png" alt="" />
 119 |                             <span>Using HTML & CSS</span>
 120 |                         </li>
 121 |                         <li>
 122 |                             <img src="./img/tick-mark.png" alt="" />
 123 |                             <span>Free Source Code</span>
 124 |                         </li>
 125 |                     </ul>
 126 |                     <div class="button-container">
 127 |                         <div class="first-row">
 128 |                             <a href="https://codepen.io/CodeBustler/pen/rNZWOpj" class="codepen-button buttons"
 129 |                                 target="_blank">
 130 |                                 <img src="./img/codepen-logo.png" alt="" />
 131 |                                 <p>View Code</p>
 132 |                             </a>
 133 |                             <a href="https://github.com/mallikarjun-mavnoor/cblinks" class="github-button buttons"
 134 |                                 target="_blank">
 135 |                                 <img src="./img/github-logo.png" alt="" />
 136 |                                 <p>GitHub</p>
 137 |                             </a>
 138 |                         </div>
 139 |                         <div class="second-row">
 140 |                             <a href="https://drive.google.com/file/d/1HUwdn5M4y_j74xTCRgnzdvhsV9k9Nn3P/view?usp=share_link"
 141 |                                 class="download-button buttons" target="_blank">
 142 |                                 <img src="./img/download-folder.png" alt="" />
 143 |                                 <p>Download</p>
 144 |                             </a>
 145 |                             <a href="https://mallikarjun-mavnoor.github.io/cblinks/" class="live-preview buttons"
 146 |                                 target="_blank">
 147 |                                 <img src="./img/live-icon.png" alt="" />
 148 |                                 <p>Live Preview</p>
 149 |                             </a>
 150 |                         </div>
 151 |                     </div>
 152 |                 </div>
 153 |             </div>
 154 |         </div>
 155 | 
 156 |         <!-- Project No-02 -->
 157 |         <div class="project-container project-02" data-aos="fade-up" data-aos-duration="1200">
 158 |             <img class="bg-code" src="./img/code.png" alt="" />
 159 |             <div class="project-name">
 160 |                 <p><span> 02. Google Page | Clone </span></p>
 161 |             </div>
 162 |             <div class="project-content">
 163 |                 <!-- video_preview -->
 164 |                 <div class="project-preview">
 165 |                     <!-- Video_link -->
 166 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/dMhsd0hKUno?start=3&mute=1"
 167 |                         title="YouTube video player" frameborder="0"
 168 |                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 169 |                         allowfullscreen></iframe> -->
 170 |                     <img src="./img/preview/project-preview (2).gif" alt="">
 171 | 
 172 |                 </div>
 173 |                 <!-- Project Details -->
 174 |                 <div class="project-detail">
 175 |                     <ul class="project-pros">
 176 |                         <li>
 177 |                             <img src="./img/tick-mark.png" alt="" />
 178 |                             <span>Responsive Page</span>
 179 |                         </li>
 180 |                         <li>
 181 |                             <img src="./img/tick-mark.png" alt="" />
 182 |                             <span>Images/Resouces Included</span>
 183 |                         </li>
 184 |                         <li>
 185 |                             <img src="./img/tick-mark.png" alt="" />
 186 |                             <span>With Comments</span>
 187 |                         </li>
 188 |                         <li>
 189 |                             <img src="./img/tick-mark.png" alt="" />
 190 |                             <span>Using HTML & CSS</span>
 191 |                         </li>
 192 |                         <li>
 193 |                             <img src="./img/tick-mark.png" alt="" />
 194 |                             <span>Free Source Code</span>
 195 |                         </li>
 196 |                     </ul>
 197 |                     <div class="button-container">
 198 |                         <div class="first-row">
 199 |                             <a href="https://codepen.io/CodeBustler/pen/XWPNmOa" class="codepen-button buttons"
 200 |                                 target="_blank">
 201 |                                 <img src="./img/codepen-logo.png" alt="" />
 202 |                                 <p>View Code</p>
 203 |                             </a>
 204 |                             <a href="https://github.com/mallikarjun-mavnoor/googlepage" class="github-button buttons"
 205 |                                 target="_blank">
 206 |                                 <img src="./img/github-logo.png" alt="" />
 207 |                                 <p>GitHub</p>
 208 |                             </a>
 209 |                         </div>
 210 |                         <div class="second-row">
 211 |                             <a href="https://drive.google.com/file/d/1I0u2j9EaddW0ZQoJ122cwNYQReXDaKT6/view?usp=share_link"
 212 |                                 class="download-button buttons" target="_blank">
 213 |                                 <img src="./img/download-folder.png" alt="" />
 214 |                                 <p>Download</p>
 215 |                             </a>
 216 |                             <a href="https://mallikarjun-mavnoor.github.io/googlepage/" class="live-preview buttons"
 217 |                                 target="_blank">
 218 |                                 <img src="./img/live-icon.png" alt="" />
 219 |                                 <p>Live Preview</p>
 220 |                             </a>
 221 |                         </div>
 222 |                     </div>
 223 |                 </div>
 224 |             </div>
 225 |         </div>
 226 | 
 227 |         <!-- Project No-03 -->
 228 |         <div class="project-container project-03" data-aos="fade-up" data-aos-duration="1200">
 229 |             <img class="bg-code" src="./img/code.png" alt="" />
 230 |             <div class="project-name">
 231 |                 <p><span> 03. Diwali Quotes</span></p>
 232 |             </div>
 233 |             <div class="project-content">
 234 |                 <!-- video_preview -->
 235 |                 <div class="project-preview">
 236 |                     <!-- Video_link -->
 237 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/729GlM07Q64?start=3&mute=1"
 238 |                         title="YouTube video player" frameborder="0"
 239 |                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 240 |                         allowfullscreen></iframe> -->
 241 |                     <img src="./img/preview/project-preview (3).gif" alt="">
 242 | 
 243 |                 </div>
 244 |                 <!-- Project Details -->
 245 |                 <div class="project-detail">
 246 |                     <ul class="project-pros">
 247 |                         <li>
 248 |                             <img src="./img/tick-mark.png" alt="" />
 249 |                             <span>Responsive Page</span>
 250 |                         </li>
 251 |                         <li>
 252 |                             <img src="./img/tick-mark.png" alt="" />
 253 |                             <span>Images/Resouces Included</span>
 254 |                         </li>
 255 |                         <li>
 256 |                             <img src="./img/tick-mark.png" alt="" />
 257 |                             <span>With Comments</span>
 258 |                         </li>
 259 |                         <li>
 260 |                             <img src="./img/tick-mark.png" alt="" />
 261 |                             <span>Using HTML & CSS</span>
 262 |                         </li>
 263 |                         <li>
 264 |                             <img src="./img/tick-mark.png" alt="" />
 265 |                             <span>Free Source Code</span>
 266 |                         </li>
 267 |                     </ul>
 268 |                     <div class="button-container">
 269 |                         <div class="first-row">
 270 |                             <a href="https://codepen.io/CodeBustler/pen/YzOpyMd" class="codepen-button buttons"
 271 |                                 target="_blank">
 272 |                                 <img src="./img/codepen-logo.png" alt="" />
 273 |                                 <p>View Code</p>
 274 |                             </a>
 275 |                             <a href="https://github.com/mallikarjun-mavnoor/diwali" class="github-button buttons"
 276 |                                 target="_blank">
 277 |                                 <img src="./img/github-logo.png" alt="" />
 278 |                                 <p>GitHub</p>
 279 |                             </a>
 280 |                         </div>
 281 |                         <div class="second-row">
 282 |                             <a href="https://drive.google.com/file/d/1I-fyayqWnOOue2Uc1vTNLqtN1ZVimqis/view?usp=share_link"
 283 |                                 class="download-button buttons" target="_blank">
 284 |                                 <img src="./img/download-folder.png" alt="" />
 285 |                                 <p>Download</p>
 286 |                             </a>
 287 |                             <a href="https://mallikarjun-mavnoor.github.io/diwali/" class="live-preview buttons"
 288 |                                 target="_blank">
 289 |                                 <img src="./img/live-icon.png" alt="" />
 290 |                                 <p>Live Preview</p>
 291 |                             </a>
 292 |                         </div>
 293 |                     </div>
 294 |                 </div>
 295 |             </div>
 296 |         </div>
 297 | 
 298 |         <!-- Project No-04 -->
 299 |         <div class="project-container project-04" data-aos="fade-up" data-aos-duration="1200">
 300 |             <img class="bg-code" src="./img/code.png" alt="" />
 301 |             <div class="project-name">
 302 |                 <p><span> 04. FireFox Homepage | Clone </span></p>
 303 |             </div>
 304 |             <div class="project-content">
 305 |                 <!-- video_preview -->
 306 |                 <div class="project-preview">
 307 |                     <!-- Video_link -->
 308 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/cUmMrIGVCn4?start=4&&mute=1"
 309 |                         title="YouTube video player" frameborder="0"
 310 |                         allow="accelerometer; autoplay;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 311 |                         allowfullscreen></iframe> -->
 312 |                     <img src="./img/preview/project-preview (4).gif" alt="">
 313 | 
 314 |                 </div>
 315 |                 <!-- Project Details -->
 316 |                 <div class="project-detail">
 317 |                     <ul class="project-pros">
 318 |                         <li>
 319 |                             <img src="./img/tick-mark.png" alt="" />
 320 |                             <span>Responsive Page</span>
 321 |                         </li>
 322 |                         <li>
 323 |                             <img src="./img/tick-mark.png" alt="" />
 324 |                             <span>Images/Resouces Included</span>
 325 |                         </li>
 326 |                         <li>
 327 |                             <img src="./img/tick-mark.png" alt="" />
 328 |                             <span>With Comments</span>
 329 |                         </li>
 330 |                         <li>
 331 |                             <img src="./img/tick-mark.png" alt="" />
 332 |                             <span>Using HTML & CSS</span>
 333 |                         </li>
 334 |                         <li>
 335 |                             <img src="./img/tick-mark.png" alt="" />
 336 |                             <span>Free Source Code</span>
 337 |                         </li>
 338 |                     </ul>
 339 |                     <div class="button-container">
 340 |                         <div class="first-row">
 341 |                             <a href="https://codepen.io/CodeBustler/pen/eYLBpqE" class="codepen-button buttons"
 342 |                                 target="_blank">
 343 |                                 <img src="./img/codepen-logo.png" alt="" />
 344 |                                 <p>View Code</p>
 345 |                             </a>
 346 |                             <a href="https://github.com/mallikarjun-mavnoor/firefox-page-clone"
 347 |                                 class="github-button buttons" target="_blank">
 348 |                                 <img src="./img/github-logo.png" alt="" />
 349 |                                 <p>GitHub</p>
 350 |                             </a>
 351 |                         </div>
 352 |                         <div class="second-row">
 353 |                             <a href="https://drive.google.com/file/d/1IeutHrOBcfO-BJMEbsrc_izVnFmGEz_S/view?usp=share_link"
 354 |                                 class="download-button buttons" target="_blank">
 355 |                                 <img src="./img/download-folder.png" alt="" />
 356 |                                 <p>Download</p>
 357 |                             </a>
 358 |                             <a href="https://mallikarjun-mavnoor.github.io/firefox-page-clone/"
 359 |                                 class="live-preview buttons" target="_blank">
 360 |                                 <img src="./img/live-icon.png" alt="" />
 361 |                                 <p>Live Preview</p>
 362 |                             </a>
 363 |                         </div>
 364 |                     </div>
 365 |                 </div>
 366 |             </div>
 367 |         </div>
 368 | 
 369 |         <!-- Project No-05 -->
 370 |         <div class="project-container project-05" data-aos="fade-up" data-aos-duration="1200">
 371 |             <img class="bg-code" src="./img/code.png" alt="" />
 372 |             <div class="project-name">
 373 |                 <p><span> 05. Simple Login Page</span></p>
 374 |             </div>
 375 |             <div class="project-content">
 376 |                 <!-- video_preview -->
 377 |                 <div class="project-preview">
 378 |                     <!-- Video_link -->
 379 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/x8BII6J15dA?start=4&mute=1"
 380 |                         title="YouTube video player" frameborder="0"
 381 |                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 382 |                         allowfullscreen></iframe> -->
 383 |                     <img src="./img/preview/project-preview (5).gif" alt="">
 384 | 
 385 |                 </div>
 386 |                 <!-- Project Details -->
 387 |                 <div class="project-detail">
 388 |                     <ul class="project-pros">
 389 |                         <li>
 390 |                             <img src="./img/tick-mark.png" alt="" />
 391 |                             <span>Responsive Page</span>
 392 |                         </li>
 393 |                         <li>
 394 |                             <img src="./img/tick-mark.png" alt="" />
 395 |                             <span>Images/Resouces Included</span>
 396 |                         </li>
 397 |                         <li>
 398 |                             <img src="./img/tick-mark.png" alt="" />
 399 |                             <span>With Comments</span>
 400 |                         </li>
 401 |                         <li>
 402 |                             <img src="./img/tick-mark.png" alt="" />
 403 |                             <span>Using HTML & CSS</span>
 404 |                         </li>
 405 |                         <li>
 406 |                             <img src="./img/tick-mark.png" alt="" />
 407 |                             <span>Free Source Code</span>
 408 |                         </li>
 409 |                     </ul>
 410 |                     <div class="button-container">
 411 |                         <div class="first-row">
 412 |                             <a href="https://codepen.io/CodeBustler/pen/wvEoMpo" class="codepen-button buttons"
 413 |                                 target="_blank">
 414 |                                 <img src="./img/codepen-logo.png" alt="" />
 415 |                                 <p>View Code</p>
 416 |                             </a>
 417 |                             <a href="https://github.com/mallikarjun-mavnoor/simple-login-page"
 418 |                                 class="github-button buttons" target="_blank">
 419 |                                 <img src="./img/github-logo.png" alt="" />
 420 |                                 <p>GitHub</p>
 421 |                             </a>
 422 |                         </div>
 423 |                         <div class="second-row">
 424 |                             <a href="https://drive.google.com/file/d/1If6FkbdVIMwKd7Fg6N2jaBm7LS4X0jf3/view?usp=share_link"
 425 |                                 class="download-button buttons" target="_blank">
 426 |                                 <img src="./img/download-folder.png" alt="" />
 427 |                                 <p>Download</p>
 428 |                             </a>
 429 |                             <a href="https://mallikarjun-mavnoor.github.io/simple-login-page/"
 430 |                                 class="live-preview buttons" target="_blank">
 431 |                                 <img src="./img/live-icon.png" alt="" />
 432 |                                 <p>Live Preview</p>
 433 |                             </a>
 434 |                         </div>
 435 |                     </div>
 436 |                 </div>
 437 |             </div>
 438 |         </div>
 439 | 
 440 |         <!-- Project No-06 -->
 441 |         <div class="project-container project-06" data-aos="fade-up" data-aos-duration="1200">
 442 |             <img class="bg-code" src="./img/code.png" alt="" />
 443 |             <div class="project-name">
 444 |                 <p><span> 06. Simple Register Form </span></p>
 445 |             </div>
 446 |             <div class="project-content">
 447 |                 <!-- video_preview -->
 448 |                 <div class="project-preview">
 449 |                     <!-- Video_link -->
 450 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/orKeS-hMIXo?start=3&mute=1"
 451 |                         title="YouTube video player" frameborder="0"
 452 |                         allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 453 |                         allowfullscreen></iframe> -->
 454 |                     <img src="./img/preview/project-preview (6).gif" alt="">
 455 | 
 456 |                 </div>
 457 |                 <!-- Project Details -->
 458 |                 <div class="project-detail">
 459 |                     <ul class="project-pros">
 460 |                         <li>
 461 |                             <img src="./img/tick-mark.png" alt="" />
 462 |                             <span>Responsive Page</span>
 463 |                         </li>
 464 |                         <li>
 465 |                             <img src="./img/tick-mark.png" alt="" />
 466 |                             <span>Images/Resouces Included</span>
 467 |                         </li>
 468 |                         <li>
 469 |                             <img src="./img/tick-mark.png" alt="" />
 470 |                             <span>With Comments</span>
 471 |                         </li>
 472 |                         <li>
 473 |                             <img src="./img/tick-mark.png" alt="" />
 474 |                             <span>Using HTML & CSS</span>
 475 |                         </li>
 476 |                         <li>
 477 |                             <img src="./img/tick-mark.png" alt="" />
 478 |                             <span>Free Source Code</span>
 479 |                         </li>
 480 |                     </ul>
 481 |                     <div class="button-container">
 482 |                         <div class="first-row">
 483 |                             <a href="https://codepen.io/CodeBustler/pen/vYzyKQQ" class="codepen-button buttons"
 484 |                                 target="_blank">
 485 |                                 <img src="./img/codepen-logo.png" alt="" />
 486 |                                 <p>View Code</p>
 487 |                             </a>
 488 |                             <a href="https://github.com/mallikarjun-mavnoor/simple-register-form"
 489 |                                 class="github-button buttons" target="_blank">
 490 |                                 <img src="./img/github-logo.png" alt="" />
 491 |                                 <p>GitHub</p>
 492 |                             </a>
 493 |                         </div>
 494 |                         <div class="second-row">
 495 |                             <a href="https://drive.google.com/file/d/1IitlBZxOcdYkYdjdSgQ1M5bhop7vRmO2/view?usp=share_link"
 496 |                                 class="download-button buttons" target="_blank">
 497 |                                 <img src="./img/download-folder.png" alt="" />
 498 |                                 <p>Download</p>
 499 |                             </a>
 500 |                             <a href="https://mallikarjun-mavnoor.github.io/simple-register-form/"
 501 |                                 class="live-preview buttons" target="_blank">
 502 |                                 <img src="./img/live-icon.png" alt="" />
 503 |                                 <p>Live Preview</p>
 504 |                             </a>
 505 |                         </div>
 506 |                     </div>
 507 |                 </div>
 508 |             </div>
 509 |         </div>
 510 | 
 511 |         <!-- Project No-07 -->
 512 |         <div class="project-container project-07" data-aos="fade-up" data-aos-duration="1200">
 513 |             <img class="bg-code" src="./img/code.png" alt="" />
 514 |             <div class="project-name">
 515 |                 <p><span> 07. Indian Flag</span></p>
 516 |             </div>
 517 |             <div class="project-content">
 518 |                 <!-- video_preview -->
 519 |                 <div class="project-preview">
 520 |                     <!-- Video_link -->
 521 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/U8QG_64U844?start=3&mute=1"
 522 |                         title="YouTube video player" frameborder="0"
 523 |                         allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 524 |                         allowfullscreen></iframe> -->
 525 |                     <img src="./img/preview/project-preview (7).gif" alt="">
 526 | 
 527 |                 </div>
 528 |                 <!-- Project Details -->
 529 |                 <div class="project-detail">
 530 |                     <ul class="project-pros">
 531 |                         <li>
 532 |                             <img src="./img/tick-mark.png" alt="" />
 533 |                             <span>Responsive Page</span>
 534 |                         </li>
 535 |                         <li>
 536 |                             <img src="./img/tick-mark.png" alt="" />
 537 |                             <span>Images/Resouces Included</span>
 538 |                         </li>
 539 |                         <li>
 540 |                             <img src="./img/tick-mark.png" alt="" />
 541 |                             <span>With Comments</span>
 542 |                         </li>
 543 |                         <li>
 544 |                             <img src="./img/tick-mark.png" alt="" />
 545 |                             <span>Using HTML & CSS</span>
 546 |                         </li>
 547 |                         <li>
 548 |                             <img src="./img/tick-mark.png" alt="" />
 549 |                             <span>Free Source Code</span>
 550 |                         </li>
 551 |                     </ul>
 552 |                     <div class="button-container">
 553 |                         <div class="first-row">
 554 |                             <a href="https://codepen.io/CodeBustler/pen/vYzyLjE" class="codepen-button buttons"
 555 |                                 target="_blank">
 556 |                                 <img src="./img/codepen-logo.png" alt="" />
 557 |                                 <p>View Code</p>
 558 |                             </a>
 559 |                             <a href="https://github.com/mallikarjun-mavnoor/indian-flag" class="github-button buttons"
 560 |                                 target="_blank">
 561 |                                 <img src="./img/github-logo.png" alt="" />
 562 |                                 <p>GitHub</p>
 563 |                             </a>
 564 |                         </div>
 565 |                         <div class="second-row">
 566 |                             <a href="https://drive.google.com/file/d/1HoDdCRGc5PiIWPLuyU5iOQfPuk7OGd9n/view?usp=share_link"
 567 |                                 class="download-button buttons" target="_blank">
 568 |                                 <img src="./img/download-folder.png" alt="" />
 569 |                                 <p>Download</p>
 570 |                             </a>
 571 |                             <a href="https://mallikarjun-mavnoor.github.io/indian-flag/" class="live-preview buttons"
 572 |                                 target="_blank">
 573 |                                 <img src="./img/live-icon.png" alt="" />
 574 |                                 <p>Live Preview</p>
 575 |                             </a>
 576 |                         </div>
 577 |                     </div>
 578 |                 </div>
 579 |             </div>
 580 |         </div>
 581 | 
 582 |         <!-- Project No-08 -->
 583 |         <div class="project-container project-08" data-aos="fade-up" data-aos-duration="1200">
 584 |             <img class="bg-code" src="./img/code.png" alt="" />
 585 |             <div class="project-name">
 586 |                 <p><span> 08. Simple Resume </span></p>
 587 |             </div>
 588 |             <div class="project-content">
 589 |                 <!-- video_preview -->
 590 |                 <div class="project-preview">
 591 |                     <!-- Video_link -->
 592 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/FgTg_Cmzy6w?start=3&mute=1"
 593 |                         title="YouTube video player" frameborder="0"
 594 |                         allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 595 |                         allowfullscreen></iframe> -->
 596 |                     <img src="./img/preview/project-preview (8).gif" alt="">
 597 | 
 598 |                 </div>
 599 |                 <!-- Project Details -->
 600 |                 <div class="project-detail">
 601 |                     <ul class="project-pros">
 602 |                         <li>
 603 |                             <img src="./img/tick-mark.png" alt="" />
 604 |                             <span>Responsive Page</span>
 605 |                         </li>
 606 |                         <li>
 607 |                             <img src="./img/tick-mark.png" alt="" />
 608 |                             <span>Images/Resouces Included</span>
 609 |                         </li>
 610 |                         <li>
 611 |                             <img src="./img/tick-mark.png" alt="" />
 612 |                             <span>With Comments</span>
 613 |                         </li>
 614 |                         <li>
 615 |                             <img src="./img/tick-mark.png" alt="" />
 616 |                             <span>Using HTML & CSS</span>
 617 |                         </li>
 618 |                         <li>
 619 |                             <img src="./img/tick-mark.png" alt="" />
 620 |                             <span>Free Source Code</span>
 621 |                         </li>
 622 |                     </ul>
 623 |                     <div class="button-container">
 624 |                         <div class="first-row">
 625 |                             <a href="https://codepen.io/CodeBustler/pen/ZEMBQwj" class="codepen-button buttons"
 626 |                                 target="_blank">
 627 |                                 <img src="./img/codepen-logo.png" alt="" />
 628 |                                 <p>View Code</p>
 629 |                             </a>
 630 |                             <a href="https://github.com/CodeBustler/simple-resume" class="github-button buttons"
 631 |                                 target="_blank">
 632 |                                 <img src="./img/github-logo.png" alt="" />
 633 |                                 <p>GitHub</p>
 634 |                             </a>
 635 |                         </div>
 636 |                         <div class="second-row">
 637 |                             <a href="https://drive.google.com/file/d/1I576SqRwhnq_uQ9N7Cg5gGSSU-VKsj-D/view?usp=share_link"
 638 |                                 class="download-button buttons" target="_blank">
 639 |                                 <img src="./img/download-folder.png" alt="" />
 640 |                                 <p>Download</p>
 641 |                             </a>
 642 |                             <a href="https://codebustler.github.io/simple-resume/" class="live-preview buttons"
 643 |                                 target="_blank">
 644 |                                 <img src="./img/live-icon.png" alt="" />
 645 |                                 <p>Live Preview</p>
 646 |                             </a>
 647 |                         </div>
 648 |                     </div>
 649 |                 </div>
 650 |             </div>
 651 |         </div>
 652 | 
 653 |         <!-- Project No-09 -->
 654 |         <div class="project-container project-09" data-aos="fade-up" data-aos-duration="1200">
 655 |             <img class="bg-code" src="./img/code.png" alt="" />
 656 |             <div class="project-name">
 657 |                 <p><span> 09. Tribute Page</span></p>
 658 |             </div>
 659 |             <div class="project-content">
 660 |                 <!-- video_preview -->
 661 |                 <div class="project-preview">
 662 |                     <!-- Video_link -->
 663 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/01QTBxBgZNg?start=3&mute=1"
 664 |                         title="YouTube video player" frameborder="0"
 665 |                         allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 666 |                         allowfullscreen></iframe> -->
 667 |                     <img src="./img/preview/project-preview (9).gif" alt="">
 668 | 
 669 |                 </div>
 670 |                 <!-- Project Details -->
 671 |                 <div class="project-detail">
 672 |                     <ul class="project-pros">
 673 |                         <li>
 674 |                             <img src="./img/tick-mark.png" alt="" />
 675 |                             <span>Responsive Page</span>
 676 |                         </li>
 677 |                         <li>
 678 |                             <img src="./img/tick-mark.png" alt="" />
 679 |                             <span>Images/Resouces Included</span>
 680 |                         </li>
 681 |                         <li>
 682 |                             <img src="./img/tick-mark.png" alt="" />
 683 |                             <span>With Comments</span>
 684 |                         </li>
 685 |                         <li>
 686 |                             <img src="./img/tick-mark.png" alt="" />
 687 |                             <span>Using HTML & CSS</span>
 688 |                         </li>
 689 |                         <li>
 690 |                             <img src="./img/tick-mark.png" alt="" />
 691 |                             <span>Free Source Code</span>
 692 |                         </li>
 693 |                     </ul>
 694 |                     <div class="button-container">
 695 |                         <div class="first-row">
 696 |                             <a href="https://codepen.io/CodeBustler/pen/eYLBZqN" class="codepen-button buttons"
 697 |                                 target="_blank">
 698 |                                 <img src="./img/codepen-logo.png" alt="" />
 699 |                                 <p>View Code</p>
 700 |                             </a>
 701 |                             <a href="https://github.com/mallikarjun-mavnoor/Tribute-Page" class="github-button buttons"
 702 |                                 target="_blank">
 703 |                                 <img src="./img/github-logo.png" alt="" />
 704 |                                 <p>GitHub</p>
 705 |                             </a>
 706 |                         </div>
 707 |                         <div class="second-row">
 708 |                             <a href="https://drive.google.com/file/d/1IOTZ_LF-e7XgksGmYE7OjwvGqv-zWVRJ/view?usp=share_link"
 709 |                                 class="download-button buttons" target="_blank">
 710 |                                 <img src="./img/download-folder.png" alt="" />
 711 |                                 <p>Download</p>
 712 |                             </a>
 713 |                             <a href="https://mallikarjun-mavnoor.github.io/Tribute-Page/" class="live-preview buttons"
 714 |                                 target="_blank">
 715 |                                 <img src="./img/live-icon.png" alt="" />
 716 |                                 <p>Live Preview</p>
 717 |                             </a>
 718 |                         </div>
 719 |                     </div>
 720 |                 </div>
 721 |             </div>
 722 |         </div>
 723 | 
 724 |         <!-- Project No-10 -->
 725 |         <div class="project-container project-10" data-aos="fade-up" data-aos-duration="1200">
 726 |             <img class="bg-code" src="./img/code.png" alt="" />
 727 |             <div class="project-name">
 728 |                 <p><span> 10. Calculator UI Only </span></p>
 729 |             </div>
 730 |             <div class="project-content">
 731 |                 <!-- video_preview -->
 732 |                 <div class="project-preview">
 733 |                     <!-- Video_link -->
 734 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/DX5PfMUXnAo?start=3&mute=1"
 735 |                         title="YouTube video player" frameborder="0"
 736 |                         allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 737 |                         allowfullscreen></iframe> -->
 738 |                     <img src="./img/preview/project-preview (10).gif" alt="">
 739 | 
 740 |                 </div>
 741 |                 <!-- Project Details -->
 742 |                 <div class="project-detail">
 743 |                     <ul class="project-pros">
 744 |                         <li>
 745 |                             <img src="./img/tick-mark.png" alt="" />
 746 |                             <span>Responsive Page</span>
 747 |                         </li>
 748 |                         <li>
 749 |                             <img src="./img/tick-mark.png" alt="" />
 750 |                             <span>Images/Resouces Included</span>
 751 |                         </li>
 752 |                         <li>
 753 |                             <img src="./img/tick-mark.png" alt="" />
 754 |                             <span>With Comments</span>
 755 |                         </li>
 756 |                         <li>
 757 |                             <img src="./img/tick-mark.png" alt="" />
 758 |                             <span>Using HTML & CSS</span>
 759 |                         </li>
 760 |                         <li>
 761 |                             <img src="./img/tick-mark.png" alt="" />
 762 |                             <span>Free Source Code</span>
 763 |                         </li>
 764 |                     </ul>
 765 |                     <div class="button-container">
 766 |                         <div class="first-row">
 767 |                             <a href="https://codepen.io/CodeBustler/pen/mdGOEbx" class="codepen-button buttons"
 768 |                                 target="_blank">
 769 |                                 <img src="./img/codepen-logo.png" alt="" />
 770 |                                 <p>View Code</p>
 771 |                             </a>
 772 |                             <a href="https://github.com/mallikarjun-mavnoor/calculator-ui-only"
 773 |                                 class="github-button buttons" target="_blank">
 774 |                                 <img src="./img/github-logo.png" alt="" />
 775 |                                 <p>GitHub</p>
 776 |                             </a>
 777 |                         </div>
 778 |                         <div class="second-row">
 779 |                             <a href="https://drive.google.com/file/d/1HWseoBMPPTr4-b9KEPoU4nhM-Fki6IsR/view?usp=share_link"
 780 |                                 class="download-button buttons" target="_blank">
 781 |                                 <img src="./img/download-folder.png" alt="" />
 782 |                                 <p>Download</p>
 783 |                             </a>
 784 |                             <a href="https://mallikarjun-mavnoor.github.io/calculator-ui-only/"
 785 |                                 class="live-preview buttons" target="_blank">
 786 |                                 <img src="./img/live-icon.png" alt="" />
 787 |                                 <p>Live Preview</p>
 788 |                             </a>
 789 |                         </div>
 790 |                     </div>
 791 |                 </div>
 792 |             </div>
 793 |         </div>
 794 | 
 795 |         <!-- Project No-11 -->
 796 |         <div class="project-container project-11" data-aos="fade-up" data-aos-duration="1200">
 797 |             <img class="bg-code" src="./img/code.png" alt="" />
 798 |             <div class="project-name">
 799 |                 <p><span> 11. HamBurger NavBar </span></p>
 800 |             </div>
 801 |             <div class="project-content">
 802 |                 <!-- video_preview -->
 803 |                 <div class="project-preview">
 804 |                     <!-- Video_link -->
 805 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/htKgmHrTXu4?start=3&mute=1"
 806 |                         title="YouTube video player" frameborder="0"
 807 |                         allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 808 |                         allowfullscreen></iframe> -->
 809 |                     <img src="./img/preview/project-preview (11).gif" alt="">
 810 | 
 811 |                 </div>
 812 |                 <!-- Project Details -->
 813 |                 <div class="project-detail">
 814 |                     <ul class="project-pros">
 815 |                         <li>
 816 |                             <img src="./img/tick-mark.png" alt="" />
 817 |                             <span>Responsive Page</span>
 818 |                         </li>
 819 |                         <li>
 820 |                             <img src="./img/tick-mark.png" alt="" />
 821 |                             <span>Images/Resouces Included</span>
 822 |                         </li>
 823 |                         <li>
 824 |                             <img src="./img/tick-mark.png" alt="" />
 825 |                             <span>With Comments</span>
 826 |                         </li>
 827 |                         <li>
 828 |                             <img src="./img/tick-mark.png" alt="" />
 829 |                             <span>Using HTML & CSS</span>
 830 |                         </li>
 831 |                         <li>
 832 |                             <img src="./img/tick-mark.png" alt="" />
 833 |                             <span>Free Source Code</span>
 834 |                         </li>
 835 |                     </ul>
 836 |                     <div class="button-container">
 837 |                         <div class="first-row">
 838 |                             <a href="https://codepen.io/CodeBustler/pen/YzOpWPY" class="codepen-button buttons"
 839 |                                 target="_blank">
 840 |                                 <img src="./img/codepen-logo.png" alt="" />
 841 |                                 <p>View Code</p>
 842 |                             </a>
 843 |                             <a href="https://github.com/mallikarjun-mavnoor/hamburger-menu"
 844 |                                 class="github-button buttons" target="_blank">
 845 |                                 <img src="./img/github-logo.png" alt="" />
 846 |                                 <p>GitHub</p>
 847 |                             </a>
 848 |                         </div>
 849 |                         <div class="second-row">
 850 |                             <a href="https://drive.google.com/file/d/1IFdG93tNSGPp3Qed5O07i2qe5VGHsj9a/view?usp=share_link"
 851 |                                 class="download-button buttons" target="_blank">
 852 |                                 <img src="./img/download-folder.png" alt="" />
 853 |                                 <p>Download</p>
 854 |                             </a>
 855 |                             <a href="https://mallikarjun-mavnoor.github.io/hamburger-menu/" class="live-preview buttons"
 856 |                                 target="_blank">
 857 |                                 <img src="./img/live-icon.png" alt="" />
 858 |                                 <p>Live Preview</p>
 859 |                             </a>
 860 |                         </div>
 861 |                     </div>
 862 |                 </div>
 863 |             </div>
 864 |         </div>
 865 | 
 866 |         <!-- Project No-12 -->
 867 |         <div class="project-container project-12" data-aos="fade-up" data-aos-duration="1200">
 868 |             <img class="bg-code" src="./img/code.png" alt="" />
 869 |             <div class="project-name">
 870 |                 <p><span> 12. Instagram Login Clone </span></p>
 871 |             </div>
 872 |             <div class="project-content">
 873 |                 <!-- video_preview -->
 874 |                 <div class="project-preview">
 875 |                     <!-- Video_link -->
 876 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hs6nhmRVdXU?start=4&mute=1"
 877 |                         title="YouTube video player" frameborder="0"
 878 |                         allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 879 |                         allowfullscreen></iframe> -->
 880 |                     <img src="./img/preview/project-preview (12).gif" alt="">
 881 | 
 882 |                 </div>
 883 |                 <!-- Project Details -->
 884 |                 <div class="project-detail">
 885 |                     <ul class="project-pros">
 886 |                         <li>
 887 |                             <img src="./img/tick-mark.png" alt="" />
 888 |                             <span>Responsive Page</span>
 889 |                         </li>
 890 |                         <li>
 891 |                             <img src="./img/tick-mark.png" alt="" />
 892 |                             <span>Images/Resouces Included</span>
 893 |                         </li>
 894 |                         <li>
 895 |                             <img src="./img/tick-mark.png" alt="" />
 896 |                             <span>With Comments</span>
 897 |                         </li>
 898 |                         <li>
 899 |                             <img src="./img/tick-mark.png" alt="" />
 900 |                             <span>Using HTML & CSS</span>
 901 |                         </li>
 902 |                         <li>
 903 |                             <img src="./img/tick-mark.png" alt="" />
 904 |                             <span>Free Source Code</span>
 905 |                         </li>
 906 |                     </ul>
 907 |                     <div class="button-container">
 908 |                         <div class="first-row">
 909 |                             <a href="https://codepen.io/CodeBustler/pen/oNPYLje" class="codepen-button buttons"
 910 |                                 target="_blank">
 911 |                                 <img src="./img/codepen-logo.png" alt="" />
 912 |                                 <p>View Code</p>
 913 |                             </a>
 914 |                             <a href="https://github.com/mallikarjun-mavnoor/insta-login-page"
 915 |                                 class="github-button buttons" target="_blank">
 916 |                                 <img src="./img/github-logo.png" alt="" />
 917 |                                 <p>GitHub</p>
 918 |                             </a>
 919 |                         </div>
 920 |                         <div class="second-row">
 921 |                             <a href="https://drive.google.com/file/d/1IOEagH7GdDtmN7B3RnfTNPoxuHR58lZ1/view?usp=share_link"
 922 |                                 class="download-button buttons" target="_blank">
 923 |                                 <img src="./img/download-folder.png" alt="" />
 924 |                                 <p>Download</p>
 925 |                             </a>
 926 |                             <a href="https://mallikarjun-mavnoor.github.io/insta-login-page/"
 927 |                                 class="live-preview buttons" target="_blank">
 928 |                                 <img src="./img/live-icon.png" alt="" />
 929 |                                 <p>Live Preview</p>
 930 |                             </a>
 931 |                         </div>
 932 |                     </div>
 933 |                 </div>
 934 |             </div>
 935 |         </div>
 936 | 
 937 |         <!-- Project No-13 -->
 938 |         <div class="project-container project-13" data-aos="fade-up" data-aos-duration="1200">
 939 |             <img class="bg-code" src="./img/code.png" alt="" />
 940 |             <div class="project-name">
 941 |                 <p><span> 13. Profile Card </span></p>
 942 |             </div>
 943 |             <div class="project-content">
 944 |                 <!-- video_preview -->
 945 |                 <div class="project-preview">
 946 |                     <!-- Video_link -->
 947 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/eBdGHTnHRbo?start=4&mute=1"
 948 |                         title="YouTube video player" frameborder="0"
 949 |                         allow="accelerometer;  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 950 |                         allowfullscreen></iframe> -->
 951 |                     <img src="./img/preview/project-preview (13).gif" alt="">
 952 | 
 953 |                 </div>
 954 |                 <!-- Project Details -->
 955 |                 <div class="project-detail">
 956 |                     <ul class="project-pros">
 957 |                         <li>
 958 |                             <img src="./img/tick-mark.png" alt="" />
 959 |                             <span>Responsive Page</span>
 960 |                         </li>
 961 |                         <li>
 962 |                             <img src="./img/tick-mark.png" alt="" />
 963 |                             <span>Images/Resouces Included</span>
 964 |                         </li>
 965 |                         <li>
 966 |                             <img src="./img/tick-mark.png" alt="" />
 967 |                             <span>With Comments</span>
 968 |                         </li>
 969 |                         <li>
 970 |                             <img src="./img/tick-mark.png" alt="" />
 971 |                             <span>Using HTML & CSS</span>
 972 |                         </li>
 973 |                         <li>
 974 |                             <img src="./img/tick-mark.png" alt="" />
 975 |                             <span>Free Source Code</span>
 976 |                         </li>
 977 |                     </ul>
 978 |                     <div class="button-container">
 979 |                         <div class="first-row">
 980 |                             <a href="https://codepen.io/CodeBustler/pen/VwGmjKQ" class="codepen-button buttons"
 981 |                                 target="_blank">
 982 |                                 <img src="./img/codepen-logo.png" alt="" />
 983 |                                 <p>View Code</p>
 984 |                             </a>
 985 |                             <a href="https://github.com/mallikarjun-mavnoor/profile-card" class="github-button buttons"
 986 |                                 target="_blank">
 987 |                                 <img src="./img/github-logo.png" alt="" />
 988 |                                 <p>GitHub</p>
 989 |                             </a>
 990 |                         </div>
 991 |                         <div class="second-row">
 992 |                             <a href="https://drive.google.com/file/d/1Hd4xqYzfyvyblmpP7zmC7TSnRFjRwjHf/view?usp=share_link"
 993 |                                 class="download-button buttons" target="_blank">
 994 |                                 <img src="./img/download-folder.png" alt="" />
 995 |                                 <p>Download</p>
 996 |                             </a>
 997 |                             <a href="https://mallikarjun-mavnoor.github.io/profile-card/" class="live-preview buttons"
 998 |                                 target="_blank">
 999 |                                 <img src="./img/live-icon.png" alt="" />
1000 |                                 <p>Live Preview</p>
1001 |                             </a>
1002 |                         </div>
1003 |                     </div>
1004 |                 </div>
1005 |             </div>
1006 |         </div>
1007 | 
1008 |         <!-- Project No-14 -->
1009 |         <div class="project-container project-14" data-aos="fade-up" data-aos-duration="1200">
1010 |             <img class="bg-code" src="./img/code.png" alt="" />
1011 |             <div class="project-name">
1012 |                 <p><span> 14. CheckList </span></p>
1013 |             </div>
1014 |             <div class="project-content">
1015 |                 <!-- video_preview -->
1016 |                 <div class="project-preview">
1017 |                     <!-- Video_link -->
1018 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/iWc7sXeHFqY?start=3&mute=1"
1019 |                         title="YouTube video player" frameborder="0"
1020 |                         allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
1021 |                         allowfullscreen></iframe> -->
1022 |                     <img src="./img/preview/project-preview (14).gif" alt="">
1023 | 
1024 |                 </div>
1025 |                 <!-- Project Details -->
1026 |                 <div class="project-detail">
1027 |                     <ul class="project-pros">
1028 |                         <li>
1029 |                             <img src="./img/tick-mark.png" alt="" />
1030 |                             <span>Responsive Page</span>
1031 |                         </li>
1032 |                         <li>
1033 |                             <img src="./img/tick-mark.png" alt="" />
1034 |                             <span>Images/Resouces Included</span>
1035 |                         </li>
1036 |                         <li>
1037 |                             <img src="./img/tick-mark.png" alt="" />
1038 |                             <span>With Comments</span>
1039 |                         </li>
1040 |                         <li>
1041 |                             <img src="./img/tick-mark.png" alt="" />
1042 |                             <span>Using HTML & CSS </span>
1043 |                         </li>
1044 |                         <li>
1045 |                             <img src="./img/tick-mark.png" alt="" />
1046 |                             <span>Free Source Code</span>
1047 |                         </li>
1048 |                     </ul>
1049 |                     <div class="button-container">
1050 |                         <div class="first-row">
1051 |                             <a href="https://codepen.io/CodeBustler/pen/BaOQzQM" class="codepen-button buttons"
1052 |                                 target="_blank">
1053 |                                 <img src="./img/codepen-logo.png" alt="" />
1054 |                                 <p>View Code</p>
1055 |                             </a>
1056 |                             <a href="https://github.com/mallikarjun-mavnoor/checklist" class="github-button buttons"
1057 |                                 target="_blank">
1058 |                                 <img src="./img/github-logo.png" alt="" />
1059 |                                 <p>GitHub</p>
1060 |                             </a>
1061 |                         </div>
1062 |                         <div class="second-row">
1063 |                             <a href="https://drive.google.com/file/d/1I2ZRTrfoK5AnGM-08GtdzUocvg2GAPQ-/view?usp=share_link"
1064 |                                 class="download-button buttons" target="_blank">
1065 |                                 <img src="./img/download-folder.png" alt="" />
1066 |                                 <p>Download</p>
1067 |                             </a>
1068 |                             <a href="https://mallikarjun-mavnoor.github.io/checklist/" class="live-preview buttons"
1069 |                                 target="_blank">
1070 |                                 <img src="./img/live-icon.png" alt="" />
1071 |                                 <p>Live Preview</p>
1072 |                             </a>
1073 |                         </div>
1074 |                     </div>
1075 |                 </div>
1076 |             </div>
1077 |         </div>
1078 | 
1079 |         <!-- Project No-15 -->
1080 |         <div class="project-container project-15" data-aos="fade-up" data-aos-duration="1200">
1081 |             <img class="bg-code" src="./img/code.png" alt="" />
1082 |             <div class="project-name">
1083 |                 <p><span> 15. Calculator | BlackCalc</span></p>
1084 |             </div>
1085 |             <div class="project-content">
1086 |                 <!-- video_preview -->
1087 |                 <div class="project-preview">
1088 |                     <!-- Video_link -->
1089 |                     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/8G6sg2BtNs8&mute=1"
1090 |                         title="YouTube video player" frameborder="0"
1091 |                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
1092 |                         allowfullscreen></iframe> -->
1093 |                     <img src="./img/preview/project-preview (15).gif" alt="">
1094 | 
1095 |                 </div>
1096 |                 <!-- Project Details -->
1097 |                 <div class="project-detail">
1098 |                     <ul class="project-pros">
1099 |                         <li>
1100 |                             <img src="./img/tick-mark.png" alt="" />
1101 |                             <span>Responsive Page</span>
1102 |                         </li>
1103 |                         <li>
1104 |                             <img src="./img/tick-mark.png" alt="" />
1105 |                             <span>Images/Resouces Included</span>
1106 |                         </li>
1107 |                         <li>
1108 |                             <img src="./img/tick-mark.png" alt="" />
1109 |                             <span>With Comments</span>
1110 |                         </li>
1111 |                         <li>
1112 |                             <img src="./img/tick-mark.png" alt="" />
1113 |                             <span>Using HTML, CSS & JavaScript</span>
1114 |                         </li>
1115 |                         <li>
1116 |                             <img src="./img/tick-mark.png" alt="" />
1117 |                             <span>Free Source Code</span>
1118 |                         </li>
1119 |                     </ul>
1120 |                     <div class="button-container">
1121 |                         <div class="first-row">
1122 |                             <a href="https://codepen.io/CodeBustler/pen/abaBZwW" class="codepen-button buttons"
1123 |                                 target="_blank">
1124 |                                 <img src="./img/codepen-logo.png" alt="" />
1125 |                                 <p>View Code</p>
1126 |                             </a>
1127 |                             <a href="https://github.com/CodeBustler/blackCalc" class="github-button buttons"
1128 |                                 target="_blank">
1129 |                                 <img src="./img/github-logo.png" alt="" />
1130 |                                 <p>GitHub</p>
1131 |                             </a>
1132 |                         </div>
1133 |                         <div class="second-row">
1134 |                             <a href="https://drive.google.com/file/d/1QMIX9AyyrlOKDYgrg0E8L1NZNjNI_TNy/view?usp=share_link"
1135 |                                 class="download-button buttons" target="_blank">
1136 |                                 <img src="./img/download-folder.png" alt="" />
1137 |                                 <p>Download</p>
1138 |                             </a>
1139 |                             <a href="https://codebustler.github.io/blackCalc/" class="live-preview buttons"
1140 |                                 target="_blank">
1141 |                                 <img src="./img/live-icon.png" alt="" />
1142 |                                 <p>Live Preview</p>
1143 |                             </a>
1144 |                         </div>
1145 |                     </div>
1146 |                 </div>
1147 |             </div>
1148 |         </div>
1149 | 
1150 |         <!-- Project No-16 -->
1151 |         <div class="project-container project-16" data-aos="fade-up" data-aos-duration="1200">
1152 |             <img class="bg-code" src="./img/code.png" alt="" />
1153 |             <div class="project-name">
1154 |                 <p><span> 16. Dice Game | Using JS</span></p>
1155 |             </div>
1156 |             <div class="project-content">
1157 |                 <!-- video_preview -->
1158 |                 <div class="project-preview">
1159 |                     <!-- Video_link -->
1160 |                     <img src="./img/preview/project-preview (16).gif" alt="">
1161 |                 </div>
1162 |                 <!-- Project Details -->
1163 |                 <div class="project-detail">
1164 |                     <ul class="project-pros">
1165 |                         <li>
1166 |                             <img src="./img/tick-mark.png" alt="" />
1167 |                             <span>Responsive Page</span>
1168 |                         </li>
1169 |                         <li>
1170 |                             <img src="./img/tick-mark.png" alt="" />
1171 |                             <span>Images/Resouces Included</span>
1172 |                         </li>
1173 |                         <li>
1174 |                             <img src="./img/tick-mark.png" alt="" />
1175 |                             <span>With Comments</span>
1176 |                         </li>
1177 |                         <li>
1178 |                             <img src="./img/tick-mark.png" alt="" />
1179 |                             <span>Using HTML, CSS & JavaScript</span>
1180 |                         </li>
1181 |                         <li>
1182 |                             <img src="./img/tick-mark.png" alt="" />
1183 |                             <span>Free Source Code</span>
1184 |                         </li>
1185 |                     </ul>
1186 |                     <div class="button-container">
1187 |                         <div class="first-row">
1188 |                             <a href="https://codepen.io/CodeBustler/pen/PodjMZE" class="codepen-button buttons"
1189 |                                 target="_blank">
1190 |                                 <img src="./img/codepen-logo.png" alt="" />
1191 |                                 <p>View Code</p>
1192 |                             </a>
1193 |                             <a href="https://github.com/CodeBustler/diceGame" class="github-button buttons"
1194 |                                 target="_blank">
1195 |                                 <img src="./img/github-logo.png" alt="" />
1196 |                                 <p>GitHub</p>
1197 |                             </a>
1198 |                         </div>
1199 |                         <div class="second-row">
1200 |                             <a href="https://drive.google.com/file/d/1NV-BDHNdJJu4ThivkqZOtg3R0Yn00Bsj/view?usp=share_link"
1201 |                                 class="download-button buttons" target="_blank">
1202 |                                 <img src="./img/download-folder.png" alt="" />
1203 |                                 <p>Download</p>
1204 |                             </a>
1205 |                             <a href="https://codebustler.github.io/diceGame/" class="live-preview buttons"
1206 |                                 target="_blank">
1207 |                                 <img src="./img/live-icon.png" alt="" />
1208 |                                 <p>Live Preview</p>
1209 |                             </a>
1210 |                         </div>
1211 |                     </div>
1212 |                 </div>
1213 |             </div>
1214 |         </div>
1215 | 
1216 |         <!-- Project No-17 -->
1217 |         <div class="project-container project-17" data-aos="fade-up" data-aos-duration="1200">
1218 |             <img class="bg-code" src="./img/code.png" alt="" />
1219 |             <div class="project-name">
1220 |                 <p><span> 17. Tip Calculator | Using JS</span></p>
1221 |             </div>
1222 |             <div class="project-content">
1223 |                 <!-- video_preview -->
1224 |                 <div class="project-preview">
1225 |                     <!-- Video_link -->
1226 |                     <img src="./img/preview/project-preview (17).gif" alt="">
1227 |                 </div>
1228 |                 <!-- Project Details -->
1229 |                 <div class="project-detail">
1230 |                     <ul class="project-pros">
1231 |                         <li>
1232 |                             <img src="./img/tick-mark.png" alt="" />
1233 |                             <span>Responsive Page</span>
1234 |                         </li>
1235 |                         <li>
1236 |                             <img src="./img/tick-mark.png" alt="" />
1237 |                             <span>Images/Resouces Included</span>
1238 |                         </li>
1239 |                         <li>
1240 |                             <img src="./img/tick-mark.png" alt="" />
1241 |                             <span>With Comments</span>
1242 |                         </li>
1243 |                         <li>
1244 |                             <img src="./img/tick-mark.png" alt="" />
1245 |                             <span>Using HTML, CSS & JavaScript</span>
1246 |                         </li>
1247 |                         <li>
1248 |                             <img src="./img/tick-mark.png" alt="" />
1249 |                             <span>Free Source Code</span>
1250 |                         </li>
1251 |                     </ul>
1252 |                     <div class="button-container">
1253 |                         <div class="first-row">
1254 |                             <a href="https://github.com/CodeBustler/tipCalculator" class="codepen-button buttons"
1255 |                                 target="_blank">
1256 |                                 <img src="./img/codepen-logo.png" alt="" />
1257 |                                 <p>View Code</p>
1258 |                             </a>
1259 |                             <a href="https://github.com/CodeBustler/tipCalculator" class="github-button buttons"
1260 |                                 target="_blank">
1261 |                                 <img src="./img/github-logo.png" alt="" />
1262 |                                 <p>GitHub</p>
1263 |                             </a>
1264 |                         </div>
1265 |                         <div class="second-row">
1266 |                             <a href="https://drive.google.com/file/d/1OihpVChYEo1C0PhZx5sdIyYlKC-yxKyX/view?usp=sharing"
1267 |                                 class="download-button buttons" target="_blank">
1268 |                                 <img src="./img/download-folder.png" alt="" />
1269 |                                 <p>Download</p>
1270 |                             </a>
1271 |                             <a href="https://codebustler.github.io/tipCalculator/" class="live-preview buttons"
1272 |                                 target="_blank">
1273 |                                 <img src="./img/live-icon.png" alt="" />
1274 |                                 <p>Live Preview</p>
1275 |                             </a>
1276 |                         </div>
1277 |                     </div>
1278 |                 </div>
1279 |             </div>
1280 |         </div>
1281 | 
1282 |         <!-- Project No-18 -->
1283 |         <div class="project-container project-18" data-aos="fade-up" data-aos-duration="1200">
1284 |             <img class="bg-code" src="./img/code.png" alt="" />
1285 |             <div class="project-name">
1286 |                 <p><span> 18. Length Converter | Using JS</span></p>
1287 |             </div>
1288 |             <div class="project-content">
1289 |                 <!-- video_preview -->
1290 |                 <div class="project-preview">
1291 |                     <!-- Video_link -->
1292 |                     <img src="./img/preview/project-preview (18).gif" alt="">
1293 |                 </div>
1294 |                 <!-- Project Details -->
1295 |                 <div class="project-detail">
1296 |                     <ul class="project-pros">
1297 |                         <li>
1298 |                             <img src="./img/tick-mark.png" alt="" />
1299 |                             <span>Responsive Page</span>
1300 |                         </li>
1301 |                         <li>
1302 |                             <img src="./img/tick-mark.png" alt="" />
1303 |                             <span>Images/Resouces Included</span>
1304 |                         </li>
1305 |                         <li>
1306 |                             <img src="./img/tick-mark.png" alt="" />
1307 |                             <span>With Comments</span>
1308 |                         </li>
1309 |                         <li>
1310 |                             <img src="./img/tick-mark.png" alt="" />
1311 |                             <span>Using HTML, CSS & JavaScript</span>
1312 |                         </li>
1313 |                         <li>
1314 |                             <img src="./img/tick-mark.png" alt="" />
1315 |                             <span>Free Source Code</span>
1316 |                         </li>
1317 |                     </ul>
1318 |                     <div class="button-container">
1319 |                         <div class="first-row">
1320 |                             <a href="https://codepen.io/CodeBustler/pen/BaOrPEE" class="codepen-button buttons"
1321 |                                 target="_blank">
1322 |                                 <img src="./img/codepen-logo.png" alt="" />
1323 |                                 <p>View Code</p>
1324 |                             </a>
1325 |                             <a href="https://github.com/CodeBustler/lengthConverter" class="github-button buttons"
1326 |                                 target="_blank">
1327 |                                 <img src="./img/github-logo.png" alt="" />
1328 |                                 <p>GitHub</p>
1329 |                             </a>
1330 |                         </div>
1331 |                         <div class="second-row">
1332 |                             <a href="https://drive.google.com/file/d/1rHlkv7LkV_jrDrgRQ99kebCCat5aVy0_/view?usp=share_link"
1333 |                                 class="download-button buttons" target="_blank">
1334 |                                 <img src="./img/download-folder.png" alt="" />
1335 |                                 <p>Download</p>
1336 |                             </a>
1337 |                             <a href="https://codebustler.github.io/lengthConverter/" class="live-preview buttons"
1338 |                                 target="_blank">
1339 |                                 <img src="./img/live-icon.png" alt="" />
1340 |                                 <p>Live Preview</p>
1341 |                             </a>
1342 |                         </div>
1343 |                     </div>
1344 |                 </div>
1345 |             </div>
1346 |         </div>
1347 | 
1348 |         <!-- Project No-19 -->
1349 |         <div class="project-container project-19" data-aos="fade-up" data-aos-duration="1200">
1350 |             <img class="bg-code" src="./img/code.png" alt="" />
1351 |             <div class="project-name">
1352 |                 <p><span> 19. ChatGPT (UI) | Clone </span></p>
1353 |             </div>
1354 |             <div class="project-content">
1355 |                 <!-- video_preview -->
1356 |                 <div class="project-preview">
1357 |                     <!-- Video_link -->
1358 |                     <img src="./img/preview/project-preview (19).gif" alt="">
1359 |                 </div>
1360 |                 <!-- Project Details -->
1361 |                 <div class="project-detail">
1362 |                     <ul class="project-pros">
1363 |                         <li>
1364 |                             <img src="./img/tick-mark.png" alt="" />
1365 |                             <span>Responsive Page</span>
1366 |                         </li>
1367 |                         <li>
1368 |                             <img src="./img/tick-mark.png" alt="" />
1369 |                             <span>Images/Resouces Included</span>
1370 |                         </li>
1371 |                         <li>
1372 |                             <img src="./img/tick-mark.png" alt="" />
1373 |                             <span>With Comments</span>
1374 |                         </li>
1375 |                         <li>
1376 |                             <img src="./img/tick-mark.png" alt="" />
1377 |                             <span>Using HTML and CSS </span>
1378 |                         </li>
1379 |                         <li>
1380 |                             <img src="./img/tick-mark.png" alt="" />
1381 |                             <span>Free Source Code</span>
1382 |                         </li>
1383 |                     </ul>
1384 |                     <div class="button-container">
1385 |                         <div class="first-row">
1386 |                             <a href="https://github.com/CodeBustler/cloneChatGPT" class="codepen-button buttons"
1387 |                                 target="_blank">
1388 |                                 <img src="./img/codepen-logo.png" alt="" />
1389 |                                 <p>View Code</p>
1390 |                             </a>
1391 |                             <a href="https://github.com/CodeBustler/cloneChatGPT" class="github-button buttons"
1392 |                                 target="_blank">
1393 |                                 <img src="./img/github-logo.png" alt="" />
1394 |                                 <p>GitHub</p>
1395 |                             </a>
1396 |                         </div>
1397 |                         <div class="second-row">
1398 |                             <a href="https://drive.google.com/file/d/1T2yy_mGjTyxkEniYyyjAn7oacJcxD4vw/view?usp=share_link"
1399 |                                 class="download-button buttons" target="_blank">
1400 |                                 <img src="./img/download-folder.png" alt="" />
1401 |                                 <p>Download</p>
1402 |                             </a>
1403 |                             <a href="https://codebustler.github.io/cloneChatGPT/" class="live-preview buttons"
1404 |                                 target="_blank">
1405 |                                 <img src="./img/live-icon.png" alt="" />
1406 |                                 <p>Live Preview</p>
1407 |                             </a>
1408 |                         </div>
1409 |                     </div>
1410 |                 </div>
1411 |             </div>
1412 |         </div>
1413 | 
1414 |         <!-- Project No-20 -->
1415 |         <div class="project-container project-20" data-aos="fade-up" data-aos-duration="1200">
1416 |             <img class="bg-code" src="./img/code.png" alt="" />
1417 |             <div class="project-name">
1418 |                 <p><span> 20. Random Emoji Generator </span></p>
1419 |             </div>
1420 |             <div class="project-content">
1421 |                 <!-- video_preview -->
1422 |                 <div class="project-preview">
1423 |                     <!-- Video_link -->
1424 |                     <img src="./img/preview/project-preview (20).gif" alt="">
1425 |                 </div>
1426 |                 <!-- Project Details -->
1427 |                 <div class="project-detail">
1428 |                     <ul class="project-pros">
1429 |                         <li>
1430 |                             <img src="./img/tick-mark.png" alt="" />
1431 |                             <span>Responsive Page</span>
1432 |                         </li>
1433 |                         <li>
1434 |                             <img src="./img/tick-mark.png" alt="" />
1435 |                             <span>Images/Resouces Included</span>
1436 |                         </li>
1437 |                         <li>
1438 |                             <img src="./img/tick-mark.png" alt="" />
1439 |                             <span>With Comments</span>
1440 |                         </li>
1441 |                         <li>
1442 |                             <img src="./img/tick-mark.png" alt="" />
1443 |                             <span>Using HTML, CSS & JavaScript</span>
1444 |                         </li>
1445 |                         <li>
1446 |                             <img src="./img/tick-mark.png" alt="" />
1447 |                             <span>Free Source Code</span>
1448 |                         </li>
1449 |                     </ul>
1450 |                     <div class="button-container">
1451 |                         <div class="first-row">
1452 |                             <a href="https://github.com/CodeBustler/emojiGenerator" class="codepen-button buttons"
1453 |                                 target="_blank">
1454 |                                 <img src="./img/codepen-logo.png" alt="" />
1455 |                                 <p>View Code</p>
1456 |                             </a>
1457 |                             <a href="https://github.com/CodeBustler/emojiGenerator" class="github-button buttons"
1458 |                                 target="_blank">
1459 |                                 <img src="./img/github-logo.png" alt="" />
1460 |                                 <p>GitHub</p>
1461 |                             </a>
1462 |                         </div>
1463 |                         <div class="second-row">
1464 |                             <a href="https://drive.google.com/file/d/1a-i5gfmhhVmnmFQ3Zi6AcR6raVkI5RB5/view?usp=share_link"
1465 |                                 class="download-button buttons" target="_blank">
1466 |                                 <img src="./img/download-folder.png" alt="" />
1467 |                                 <p>Download</p>
1468 |                             </a>
1469 |                             <a href="https://codebustler.github.io/emojiGenerator/" class="live-preview buttons"
1470 |                                 target="_blank">
1471 |                                 <img src="./img/live-icon.png" alt="" />
1472 |                                 <p>Live Preview</p>
1473 |                             </a>
1474 |                         </div>
1475 |                     </div>
1476 |                 </div>
1477 |             </div>
1478 |         </div>
1479 | 
1480 |     </div>
1481 | 
1482 |     <!-- Animation Style  -->
1483 | 
1484 |     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
1485 |     <script>
1486 |         AOS.init();
1487 |     </script>
1488 | </body>
1489 | 
1490 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeBustler/myProjects/be1de989f2a8e9074c3417f8955c35f18c6e25bf/index.js


--------------------------------------------------------------------------------
/navbar-style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |     scroll-behavior: smooth;
  6 | }
  7 | 
  8 | body {
  9 |     width: 100%;
 10 | }
 11 | 
 12 | .loader {
 13 |     display: grid;
 14 |     place-items: center;
 15 |     height: 100vh;
 16 |     margin:auto;
 17 | }
 18 | 
 19 | .loader img {
 20 |     width: 50%;
 21 |     margin-top: -200px;
 22 | }
 23 | 
 24 | .nav-container {
 25 |     z-index: 10;
 26 |     width: 100%;
 27 |     padding: 8px;
 28 |     height: 58;
 29 |     background-color: black;
 30 |     display: flex;
 31 |     align-items: center;
 32 |     position: sticky;
 33 |     top: 0;
 34 | }
 35 | 
 36 | .nav-bar {
 37 |     width: 80%;
 38 |     margin: auto;
 39 |     height: 50px;
 40 |     display: flex;
 41 |     align-items: center;
 42 |     justify-content: space-between;
 43 | }
 44 | 
 45 | /* Branding */
 46 | .branding {
 47 |     color: #fff;
 48 |     display: flex;
 49 |     justify-content: flex-start;
 50 |     align-items: center;
 51 |     gap: 10px;
 52 |     font-family: montserrat, sans-serif;
 53 | }
 54 | 
 55 | .branding .name {
 56 |     display: flex;
 57 |     justify-content: center;
 58 |     align-items: center;
 59 |     font-size: larger;
 60 |     letter-spacing: 1.5px;
 61 | }
 62 | 
 63 | .branding .name .code {
 64 |     font-weight: 700;
 65 | }
 66 | 
 67 | .branding .name .bustler {
 68 |     color: rgba(211, 211, 211, 0.788);
 69 | }
 70 | 
 71 | .branding .name .projects {
 72 |     display: none;
 73 | 
 74 | }
 75 | 
 76 | 
 77 | /* SOCIAL LINKS */
 78 | .social-links ul {
 79 |     list-style: none;
 80 |     display: flex;
 81 |     justify-content: center;
 82 |     align-items: center;
 83 | 
 84 | }
 85 | 
 86 | .social-links ul li img {
 87 |     width: 65%;
 88 | }
 89 | 
 90 | 
 91 | .social-links ul li a {
 92 |     display: flex;
 93 |     justify-content: center;
 94 |     align-items: center;
 95 | }
 96 | 
 97 | 
 98 | 
 99 | .title {
100 |     z-index: 10;
101 |     font-family: montserrat, sans-serif;
102 |     font-size: medium;
103 |     color: lightgray;
104 |     font-weight: 500;
105 |     letter-spacing: 1px;
106 |     padding: 10px;
107 |     width: 100%;
108 |     height: 40px;
109 |     background-color: #464646;
110 |     display: flex;
111 |     justify-content: center;
112 |     align-items: center;
113 |     position: sticky;
114 |     top: 66px;
115 |     margin-bottom: 8px;
116 | }
117 | 
118 | 
119 | .title .my-project img {
120 |     width: 20%;
121 | }
122 | 
123 | .title p {
124 |     text-align: center;
125 | }
126 | 
127 | .social-links2 {
128 |     display: none;
129 | }
130 | 
131 | .m-projects {
132 |     display: none;
133 | }
134 | 
135 | .social-links ul li img {
136 |     padding: 5px;
137 | }
138 | 
139 | .social-links ul li img:hover {
140 | 
141 |     outline: 2px solid #f1c40f;
142 | }
143 | 
144 | 
145 | /* Navbar Media Query */
146 | 
147 | @media only screen and (max-width:600px) {
148 | 
149 |     .loader img {
150 |     width: 90%;
151 |     margin-top: -200px;
152 | }
153 | 
154 |     .branding .name {
155 |         font-size: x-large;
156 |     }
157 | 
158 |     .social-links {
159 |         display: none;
160 |     }
161 | 
162 |     .title,
163 |     .nav-bar {
164 |         justify-content: center;
165 |     }
166 | 
167 |     .social-links2 {
168 |         display: block;
169 |     }
170 | 
171 |     .social-links2 ul {
172 |         list-style: none;
173 |         display: flex;
174 |         justify-content: center;
175 |         align-items: center;
176 | 
177 |     }
178 | 
179 |     .social-links2 ul li img {
180 |         width: 50%;
181 |     }
182 | 
183 | 
184 |     .social-links2 ul li a {
185 |         display: flex;
186 |         justify-content: center;
187 |         align-items: center;
188 |     }
189 | 
190 |     .title p {
191 |         display: none;
192 |     }
193 | 
194 |     .logo {
195 |         display: none;
196 |     }
197 | 
198 |     .title {
199 |         margin-bottom: 0;
200 |     }
201 | 
202 | 
203 |     .m-projects {
204 |         background-color: #131313;
205 |         color: #fff;
206 |         padding: 10px;
207 |         display: block;
208 |         font-family: montserrat, sans-serif;
209 |         font-size: 15px;
210 |         font-weight: 500;
211 |         letter-spacing: 1px;
212 |         text-align: center;
213 |         margin-bottom: 8px;
214 |     }
215 | 
216 |     .branding .name {
217 |         align-items: flex-end;
218 |     }
219 | 
220 |     .branding .name .projects {
221 |         display: inline-block;
222 |         font-size: large;
223 |         font-weight: 600;
224 |         font-style: italic;
225 |         color: #464646;
226 |         padding-left: 8px;
227 |     }
228 | 
229 | }
230 | 
231 | @media only screen and (max-width:380px) {}
232 | 
233 | /* **** Completed Navbar **** */
234 | 
235 | 
236 | /* ------ Project Card Style ------ */


--------------------------------------------------------------------------------
/project-cards.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | .project-container {
  8 |     width: 95vw;
  9 |     margin: 30px auto;
 10 |     padding: 10px;
 11 |     background-color: rgb(235, 235, 235);
 12 |     border-radius: 5px;
 13 |     position: relative;
 14 |     box-shadow: 5px 5px 10px rgba(109, 109, 109, 0.493);
 15 | }
 16 | 
 17 | .project-15 {
 18 |     margin: 15px auto;
 19 | }
 20 | 
 21 | 
 22 | /* PROJECT CONTENT */
 23 | 
 24 | /* Project Name */
 25 | .project-name {
 26 |     margin-left: 10px;
 27 | }
 28 | 
 29 | .project-name p {
 30 |     padding: 15px 0;
 31 | }
 32 | 
 33 | .project-name p span {
 34 |     font-family: montserrat, sans-serif;
 35 |     font-weight: 600;
 36 |     font-size: 22px;
 37 |     background-color: #f1c40f;
 38 |     padding: 10px;
 39 |     border-radius: 5px;
 40 | 
 41 | }
 42 | 
 43 | .bg-code {
 44 |     position: absolute;
 45 |     opacity: 0.1;
 46 |     filter: blur(4px);
 47 |     filter: opacity(0.5);
 48 |     width: 30%;
 49 |     right: 10px;
 50 | }
 51 | 
 52 | .project-content {
 53 |     display: flex;
 54 |     justify-content: center;
 55 |     align-items: center;
 56 | }
 57 | 
 58 | /* **** */
 59 | .project-preview {
 60 |     width: 60vw;
 61 |     height: 420px;
 62 |     margin: 10px;
 63 | }
 64 | 
 65 | .project-detail {
 66 |     width: 50vw;
 67 |     height: 420px;
 68 |     margin: 10px;
 69 | }
 70 | 
 71 | /* **** */
 72 | 
 73 | 
 74 | /* Project Preview  */
 75 | .project-preview {
 76 |     display: flex;
 77 |     justify-content: center;
 78 |     align-items: center;
 79 |     /* background-color: #f1c40f; */
 80 |     position: relative;
 81 | }
 82 | 
 83 | .project-preview img {
 84 |     width: 95%;
 85 |     position: absolute;
 86 |     top: 7%;
 87 |     left: 3%;
 88 |     border-radius: 8px;
 89 |     box-shadow: 16px 15px 20px rgba(77, 77, 77, 0.418);
 90 | 
 91 | }
 92 | 
 93 | .project-preview iframe {
 94 |     width: 100%;
 95 |     height: 90%;
 96 |     border-radius: 8px;
 97 |     box-shadow: 16px 15px 20px rgba(77, 77, 77, 0.418);
 98 | }
 99 | 
100 | 
101 | /* Project Details */
102 | .project-detail {
103 |     padding-left: 50px;
104 |     display: flex;
105 |     flex-direction: column;
106 |     justify-content: center;
107 | }
108 | 
109 | .project-detail ul {
110 |     list-style: none;
111 |     font-family: montserrat, sans-serif;
112 |     font-weight: 500;
113 |     line-height: 50px;
114 |     font-size: larger;
115 | }
116 | 
117 | 
118 | .project-pros li {
119 |     display: flex;
120 |     align-items: center;
121 |     gap: 8px
122 | }
123 | 
124 | /* BUTTONS */
125 | 
126 | .button-container {
127 |     margin-top: 15px;
128 | }
129 | 
130 | .buttons {
131 |     width: 180px;
132 |     height: 100;
133 |     display: flex;
134 |     justify-content: center;
135 |     align-items: center;
136 |     gap: 10px;
137 |     background-color: rgb(54, 54, 54);
138 |     margin: 10px 0;
139 |     padding: 0px 7px;
140 |     border-radius: 5px;
141 |     color: #fff;
142 |     cursor: pointer;
143 | }
144 | 
145 | 
146 | .button-container a {
147 |     text-decoration: none;
148 | }
149 | 
150 | .button-container .buttons:hover {
151 |     background-color: rgb(31, 30, 30);
152 |     box-shadow: 8px 8px 10px rgba(77, 77, 77, 0.418);
153 | 
154 | }
155 | 
156 | .github-button {
157 |     z-index: 5;
158 | }
159 | 
160 | .button-container .buttons p {
161 |     font-family: montserrat, sans-serif;
162 |     font-weight: 500;
163 |     line-height: 50px;
164 |     font-size: larger;
165 | }
166 | 
167 | .button-container .buttons img {
168 |     width: 19%;
169 | }
170 | 
171 | .first-row,
172 | .second-row {
173 |     display: flex;
174 |     gap: 20px;
175 |     font-size: 14px;
176 | }
177 | 
178 | .branding a {
179 |     text-decoration: none;
180 |     color: inherit;
181 | }
182 | 
183 | /* ALL PORJECT CONTAINER */
184 | 
185 | .all-projects-container {
186 |     display: flex;
187 |     flex-direction: column-reverse;
188 | }
189 | 
190 | iframe {
191 |     display: none;
192 | }
193 | 
194 | /* TO-TOP */
195 | 
196 | 
197 | 
198 | .body {
199 |     position: relative;
200 | }
201 | 
202 | .top {
203 |     opacity: 0.2;
204 |     z-index: 10;
205 |     position: fixed;
206 |     bottom: 2vh;
207 |     right: 2vw;
208 |     transition: 0.6s;
209 | }
210 | 
211 | .top:hover {
212 | 
213 |     opacity: 1;
214 | }
215 | 
216 | @media only screen and (max-width:855px) {
217 | 
218 |     .project-container {
219 |         width: 94vw;
220 |         margin: 20px auto;
221 |     }
222 | 
223 |     .project-name {
224 |         margin-left: 0;
225 |     }
226 | 
227 |     .project-content {
228 |         flex-direction: column;
229 |     }
230 | 
231 | 
232 |     .project-container .bg-code {
233 |         display: none;
234 | 
235 |     }
236 | 
237 |     .project-name p span {
238 |         font-size: 18px;
239 |     }
240 | 
241 |     .project-preview {
242 |         width: 90vw;
243 |     }
244 | 
245 |     .project-detail {
246 |         width: 90vw;
247 |     }
248 | 
249 |     .project-preview {
250 |         /* overflow: visible; */
251 |         padding-bottom: 56.25%;
252 |         /* position: relative; */
253 |         height: 0;
254 |         width: 100%;
255 |     }
256 | 
257 |     .project-preview iframe {
258 |         left: 0;
259 |         top: 0;
260 |         height: 100%;
261 |         width: 100%;
262 |         position: absolute;
263 |     }
264 | 
265 |     .project-detail {
266 |         padding-left: 0;
267 |     }
268 | 
269 |     .first-row,
270 |     .second-row {
271 |         display: flex;
272 |         flex-direction: row;
273 |         gap: 20px;
274 |     }
275 | 
276 |     .buttons {
277 |         width: 70%;
278 |     }
279 | 
280 |     .button-container .buttons img {
281 |         width: 18%;
282 |     }
283 | 
284 |     .project-detail ul {
285 |         font-size: 18px;
286 |     }
287 | 
288 |     .top {
289 |         right: 3vw;
290 |     }
291 | 
292 |     .top {
293 |         opacity: 1;
294 |     }
295 | 
296 |     .project-preview {
297 |         position: relative;
298 |     }
299 | 
300 |     .project-preview img {
301 |         width: 100%;
302 |         position: absolute;
303 |         top: 2%;
304 |         left: 0;
305 |         box-shadow: 5px 15px 20px rgba(77, 77, 77, 0.418);
306 | 
307 |     }
308 | 
309 | }


--------------------------------------------------------------------------------