1304 lines
54 KiB
HTML
1304 lines
54 KiB
HTML
{e9570d07ff1dd68044382168ebb308ce62c69446 true 55308 index.html 0xc001f1dd50}
<!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/projects/14.jpg" alt="14">
|
|
<div class="content">
|
|
<h3>Day 14</h3>
|
|
<p>Battery Level With Dark Mode</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://get-battery-level-with-dark-mode.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/14-get-battery-level-%26-toggle-light-dark-mode" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 15 -->
|
|
<div class="box">
|
|
<img src="img/projects/15.jpg" alt="15">
|
|
<div class="content">
|
|
<h3>Day 15</h3>
|
|
<p>Netflix Mobile Navigation</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://netflix-mobile-navigation-animation.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/15-netflix-mobile-navigation-animation" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 16 -->
|
|
<div class="box">
|
|
<img src="img/projects/16.jpg" alt="16">
|
|
<div class="content">
|
|
<h3>Day 16</h3>
|
|
<p>Creative Image Gallery</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://creative-image-gallery.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/16-creative-image-gallery" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 17 -->
|
|
<div class="box">
|
|
<img src="img/projects/17.jpg" alt="17">
|
|
<div class="content">
|
|
<h3>Day 17</h3>
|
|
<p>Count Input Characters</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://count-input-characters-fill-border.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/17-count-input-characters-fill-borders" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 18 -->
|
|
<div class="box">
|
|
<img src="img/projects/18.jpg" alt="18">
|
|
<div class="content">
|
|
<h3>Day 18</h3>
|
|
<p>Customize Radio Input</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://customize-radio-input.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/18-customize-radio-input" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 19 -->
|
|
<div class="box">
|
|
<img src="img/projects/19.jpg" alt="19">
|
|
<div class="content">
|
|
<h3>Day 19</h3>
|
|
<p>Multiple Loader</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://multiple-dotted-loader.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/19-multiple-dotted-loader" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 20 -->
|
|
<div class="box">
|
|
<img src="img/projects/20.jpg" alt="20">
|
|
<div class="content">
|
|
<h3>Day 20</h3>
|
|
<p>Scroll To Top</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://scroll-to-top-button.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/20-scroll-to-top-button" 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/projects/21.jpg" alt="21">
|
|
<div class="content">
|
|
<h3>Day 21</h3>
|
|
<p>Background Color Change</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://background-color-change-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/21-background-color-change" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 22 -->
|
|
<div class="box">
|
|
<img src="img/projects/22.jpg" alt="22">
|
|
<div class="content">
|
|
<h3>Day 22</h3>
|
|
<p>Page Transition With GSAP Animation</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://page-transition-with-gsap-animation.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/22-page-transition-with-gsap-animation" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 23 -->
|
|
<div class="box">
|
|
<img src="img/projects/23.jpg" alt="23">
|
|
<div class="content">
|
|
<h3>Day 23</h3>
|
|
<p>Clip Path Image Hover</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://clip-path-image-hover-effects.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/23-clip-path-image-hover-effects" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 24 -->
|
|
<div class="box">
|
|
<img src="img/projects/24.jpg" alt="24">
|
|
<div class="content">
|
|
<h3>Day 24</h3>
|
|
<p>Full Screen Navigation</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://fullscreen-navigation-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/24-fullscreen-navigation" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 25 -->
|
|
<div class="box">
|
|
<img src="img/projects/25.jpg" alt="25">
|
|
<div class="content">
|
|
<h3>Day 25</h3>
|
|
<p>Dropdown Menu</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://dropdown-menu-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/25-dropdown-menu" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 26 -->
|
|
<div class="box">
|
|
<img src="img/projects/26.jpg" alt="26">
|
|
<div class="content">
|
|
<h3>Day 26</h3>
|
|
<p>Magic Navigation Menu Indicator</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://magic-navigation-menu-indicator.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/26-magic-navigation-menu-indicator" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 27 -->
|
|
<div class="box">
|
|
<img src="img/projects/27.jpg" alt="27">
|
|
<div class="content">
|
|
<h3>Day 27</h3>
|
|
<p>Fill Element Background From Other Element</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://fill-element-background-from-other.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/27-fill-element-background-from-other" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 28 -->
|
|
<div class="box">
|
|
<img src="img/projects/28.jpg" alt="28">
|
|
<div class="content">
|
|
<h3>Day 28</h3>
|
|
<p>Show Random Image Every x Second</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://show-random-image-every-x-second.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/28-show-random-image-every-x-second" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 29 -->
|
|
<div class="box">
|
|
<img src="img/projects/29.jpg" alt="29">
|
|
<div class="content">
|
|
<h3>Day 29</h3>
|
|
<p>Glassmorphism Login Form</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://glassmorphism-login-form-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/29-glassmorphism-login-form" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 30 -->
|
|
<div class="box">
|
|
<img src="img/projects/30.jpg" alt="30">
|
|
<div class="content">
|
|
<h3>Day 30</h3>
|
|
<p>Calculate Textarea Text While Writing</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://calculate-textarea-text-while-writing.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/30-calculate-textarea-text-while-writing" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 31 -->
|
|
<div class="box">
|
|
<img src="img/projects/31.jpg" alt="31">
|
|
<div class="content">
|
|
<h3>Day 31</h3>
|
|
<p>Change Colors With Local Storage</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://change-colors-with-local-storage.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/31-change-colors-with-local-storage" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 32 -->
|
|
<div class="box">
|
|
<img src="img/projects/32.jpg" alt="32">
|
|
<div class="content">
|
|
<h3>Day 32</h3>
|
|
<p>Increase Numbers On Scrolling</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://increase-numbers-on-scrolling.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/32-increase-numbers-on-scrolling" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 33 -->
|
|
<div class="box">
|
|
<img src="img/projects/33.jpg" alt="33">
|
|
<div class="content">
|
|
<h3>Day 33</h3>
|
|
<p>Create Countdown Timer</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://create-countdown-timer-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/33-create-countdown-timer" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 34 -->
|
|
<div class="box">
|
|
<img src="img/projects/34.jpg" alt="34">
|
|
<div class="content">
|
|
<h3>Day 34</h3>
|
|
<p>Animated Sidebar Menu</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://animated-sidebar-menu.netlify.app/">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/projects/35.jpg" alt="35">
|
|
<div class="content">
|
|
<h3>Day 35</h3>
|
|
<p>Profile Card</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://profile-card-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/35-profile-card" target="_blank"><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Box 36 -->
|
|
<div class="box">
|
|
<img src="img/projects/36.jpg" alt="36">
|
|
<div class="content">
|
|
<h3>Day 36</h3>
|
|
<p>Create Simple Clock</p>
|
|
</div>
|
|
<div class="info">
|
|
<a class="live-demo" href="https://create-simple-clock.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/36-create-simple-clock" 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>
|