100-project-100-days-website/index.html
2023-03-06 17:21:41 +03:00
Ask

1304 lines
51 KiB
HTML

{57018f5824225440530f1833f666f39498b7c531 true 52112 index.html 0xc002b178f0}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/all.min.css">
<title>100 Projects 100 Days</title>
</head>
<body>
<div class="header">
<div class="nav">
<p>Projects</p>
<div id="menuToggle" onclick="menuToggle();"><i class="fa-solid fa-bars"></i></div>
<ul id="navigation">
<li><a href="#day1">Day 1</a></li>
<li><a href="#day21">Day 21</a></li>
<li><a href="#day41">Day 41</a></li>
<li><a href="#day61">Day 61</a></li>
<li><a href="#day81">Day 81</a></li>
</ul>
</div>
<h1 id="text">100 Projects In 100 Days</h1>
<div class="container">
<div class="countdown-container">
<div class="time">
<h1 id="days">00</h1>
<small>days</small>
</div>
<div class="time">
<h1 id="hours">00</h1>
<small>hours</small>
</div>
<div class="time">
<h1 id="minutes">00</h1>
<small>minutes</small>
</div>
<div class="time">
<h1 id="seconds">00</h1>
<small>seconds</small>
</div>
</div>
</div>
<div class="clouds">
<img src="img/cloud1.png" style="--i:1;" alt="cloud">
<img src="img/cloud2.png" style="--i:2;" alt="cloud">
<img src="img/cloud3.png" style="--i:3;" alt="cloud">
<img src="img/cloud4.png" style="--i:4;" alt="cloud">
<img src="img/cloud5.png" style="--i:5;" alt="cloud">
<img src="img/cloud1.png" style="--i:10;" alt="cloud">
<img src="img/cloud2.png" style="--i:9;" alt="cloud">
<img src="img/cloud3.png" style="--i:8;" alt="cloud">
<img src="img/cloud4.png" style="--i:7;" alt="cloud">
<img src="img/cloud5.png" style="--i:6;" alt="cloud">
</div>
</div>
<section>
<h2>My Projects</h2>
<div class="projects">
<!-- Start Projects -->
<!-- Box 1 >> 1 Day To 20 -->
<div id="day1" class="box">
<img src="img/projects/01.jpg" alt="01">
<div class="content">
<h3>Day 1</h3>
<p>Saudi Founding Day</p>
</div>
<div class="info">
<a class="live-demo" href="https://saudi-founding-days.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/1-saudi_founding_day" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 2 -->
<div class="box">
<img src="img/projects/02.jpg" alt="02">
<div class="content">
<h3>Day 2</h3>
<p>Calculator Glassmorphism Effects</p>
</div>
<div class="info">
<a class="live-demo" href="https://calculator-vanilla-glassmorph.netlify.app">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/2-calculator_using_vanilla_css_glassmorphism_effects" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 3 -->
<div class="box">
<img src="img/projects/03.jpg" alt="03">
<div class="content">
<h3>Day 3</h3>
<p>Dynamic Calendar</p>
</div>
<div class="info">
<a class="live-demo" href="https://dynamic-calendar-js.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/3-javascript-dynamic-calendar-css-glassmorphism-ui-design" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 4 -->
<div class="box">
<img src="img/projects/04.jpg" alt="04">
<div class="content">
<h3>Day 4</h3>
<p>Clock Ui Design</p>
</div>
<div class="info">
<a class="live-demo" href="https://clock-ui-design.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/4-clock-ui-design" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 5 -->
<div class="box">
<img src="img/projects/05.jpg" alt="05">
<div class="content">
<h3>Day 5</h3>
<p>Animated Circular Navigation Menu</p>
</div>
<div class="info">
<a class="live-demo" href="https://animated-circular-nav.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/5-animated-circular-navigation-menu" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 6 -->
<div class="box">
<img src="img/projects/06.jpg" alt="06">
<div class="content">
<h3>Day 6</h3>
<p>Glassmorphism Hover Effects With Magic</p>
</div>
<div class="info">
<a class="live-demo" href="https://hover-effects-magic.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/6-Glassmorphism%20Hover%20Effects%20with%20Magic%20Line%20Indicator" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 7 -->
<div class="box">
<img src="img/projects/07.jpg" alt="07">
<div class="content">
<h3>Day 7</h3>
<p>Animated Menu</p>
</div>
<div class="info">
<a class="live-demo" href="https://animated-menu-using-css-html-js.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/7-animated-menu" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 8 -->
<div class="box">
<img src="img/projects/08.jpg" alt="08">
<div class="content">
<h3>Day 8</h3>
<p>Dark & Light Theme</p>
</div>
<div class="info">
<a class="live-demo" href="https://codepen.io/x39OME/pen/BaOWjPy">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/8-light-%26-dark-theme-toggle" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 9 -->
<div class="box">
<img src="img/projects/09.jpg" alt="09">
<div class="content">
<h3>Day 9</h3>
<p>Auto Write Text</p>
</div>
<div class="info">
<a class="live-demo" href="https://auto-write-text.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/9-javaScript-auto-write-text" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 10 -->
<div class="box">
<img src="img/projects/10.jpg" alt="10">
<div class="content">
<h3>Day 10</h3>
<p>Animated Wavy Background</p>
</div>
<div class="info">
<a class="live-demo" href="https://animated-wavy-background-css.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/10-animated-wavy-background" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 11 -->
<div class="box">
<img src="img/projects/11.jpg" alt="11">
<div class="content">
<h3>Day 11</h3>
<p>Generate Random Serial Number</p>
</div>
<div class="info">
<a class="live-demo" href="https://generate-random-serial-number.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/11-generate-random-serial-number" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 12 -->
<div class="box">
<img src="img/projects/12.jpg" alt="12">
<div class="content">
<h3>Day 12</h3>
<p>Create Tabs</p>
</div>
<div class="info">
<a class="live-demo" href="https://create-tabs-js.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/12-create-tabs" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 13 -->
<div class="box">
<img src="img/projects/13.jpg" alt="13">
<div class="content">
<h3>Day 13</h3>
<p>Mix Blend Loding</p>
</div>
<div class="info">
<a class="live-demo" href="https://mix-blend-loading.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="https://github.com/x39OME/100_project_100_days/tree/main/100_projects/13-mix-blend-loading" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 14 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 14</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 15 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 15</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 16 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 16</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 17 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 17</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 18 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 18</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 19 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 19</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 20 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 20</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- ############################### -->
<!-- Box 21 >> 21 Day To 40 -->
<div id="day21" class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 21</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 22 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 22</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 23 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 23</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 24 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 24</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 25 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 25</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 26 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 26</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 27 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 27</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 28 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 28</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 29 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 29</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 30 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 30</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 31 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 31</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 32 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 32</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 33 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 33</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 34 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 34</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 35 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 35</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 36 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 36</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 37 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 37</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 38 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 38</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 39 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 39</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 40 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 40</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- ############################### -->
<!-- Box 41 >> 41 Day To 60 -->
<div id="day41" class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 41</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 42 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 42</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 43 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 43</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 44 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 44</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 45 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 45</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 46 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 46</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 47 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 47</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 48 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 48</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 49 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 49</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 40 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 40</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 51 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 51</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 52 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 52</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 53 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 53</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 54 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 54</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 55 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 55</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 56 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 56</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 57 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 57</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 58 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 58</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 59 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 59</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 60 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 60</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- ######################## -->
<!-- Box 61 >> 61 Day To 80 -->
<div id="day61" class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 61</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 62 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 62</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 63 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 63</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 64 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 64</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 65 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 65</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 66 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 66</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 67 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 47</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 68 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 68</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 69 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 69</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 70 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 70</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 71 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 71</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 72 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 72</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 73 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 73</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 54 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 74</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 55 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 75</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 76 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 76</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 77 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 77</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 78 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 78</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 79 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 79</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 80 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 80</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- ######################## -->
<!-- Box 81 >> 81 Day To 100 ( end ) -->
<div id="day81" class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 81</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 82 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 82</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 83 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 83</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 84 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 84</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 85 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 85</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 86 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 86</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 87 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 87</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 88 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 88</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 89 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 89</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 90 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 90</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 91 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 91</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 92 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 92</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 93 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 93</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 94 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 94</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 95 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 95</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 96 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 96</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 97 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 97</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 98 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 98</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 99 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 99</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 100 -->
<div class="box">
<img src="img/1.jpg" alt="">
<div class="content">
<h3>Day 100</h3>
<p>lorem !!</p>
</div>
<div class="info">
<a class="live-demo" href="https://">Live Demo <i class="fa-solid fa-right-long"></i> </a>
<a class="source" href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- ######################## -->
</div>
<!-- End Projects -->
</section>
<!-- Start Footer -->
<footer>
<div class="copyright">Copyrights <i class="fa-regular fa-copyright"></i> 2023 All Rights Reserved by x39OME <i class="fa-solid fa-heart"></i></div>
<div class="media">
<ul>
<li><a href="https://www.tiktok.com/@x39ome?lang=en" target="_blank"><i class="fa-brands fa-tiktok"></i></a></li>
<li><a href="https://twitter.com/x39OME" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/x39OME" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="https://www.snapchat.com/add/x39OME" target="_blank"><i class="fa-brands fa-snapchat"></i></a></li>
<li><a href="https://github.com/x39OME" target="_blank"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://codepen.io/x39OME" target="_blank"><i class="fa-brands fa-codepen"></i></a></li>
</ul>
</div>
<div class="date">
<p id="date"></p>
</div>
</footer>
<!-- End Footer -->
<!-- Scroll To Top -->
<div class="scrollTop"><i class="fa-regular fa-circle-up"></i></div>
<!-- Scroll To Top -->
<script src="js/main.js"></script>
<script src="js/all.min.js"></script>
</body>
</html>