x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5675addbde
100-project-100-days-website/index.html
Sam ebc165022d
Update index.html
2023-05-25 09:54:09 +03:00
Ask

1304 lines
61 KiB
HTML
Raw Blame History

{493c739e47b1a7625a74f830cb7be61c6d814424 true 62707 index.html 0xc001eb8070}

<!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/projects/37.jpg" alt="37">
<div class="content">
<h3>Day 37</h3>
<p>Image Slider Using JS</p>
</div>
<div class="info">
<a class="live-demo" href="https://image-slider-using-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/37-image-slider" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 38 -->
<div class="box">
<img src="img/projects/38.jpg" alt="38">
<div class="content">
<h3>Day 38</h3>
<p>Modal Popup Button</p>
</div>
<div class="info">
<a class="live-demo" href="https://codepen.io/x39OME/pen/LYJorRX">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/38-modal-popup-button" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 39 -->
<div class="box">
<img src="img/projects/39.jpg" alt="39">
<div class="content">
<h3>Day 39</h3>
<p>Custom Select Menu</p>
</div>
<div class="info">
<a class="live-demo" href="https://custom-select-menu.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/39-custom-select-menu" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 40 -->
<div class="box">
<img src="img/projects/40.jpg" alt="40">
<div class="content">
<h3>Day 40</h3>
<p>Carousel Image Vanilla</p>
</div>
<div class="info">
<a class="live-demo" href="https://carousel-image-vanilla-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/40-carousel-image-vanilla-js" 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/projects/41.jpg" alt="41">
<div class="content">
<h3>Day 41</h3>
<p>Animated Popup Box</p>
</div>
<div class="info">
<a class="live-demo" href="https://simple-animated-popup-box.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/41-simple-animated-popup-box" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 42 -->
<div class="box">
<img src="img/projects/42.jpg" alt="42">
<div class="content">
<h3>Day 42</h3>
<p>Alarm Clock</p>
</div>
<div class="info">
<a class="live-demo" href="https://alarm-clock-html-css-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/42-alarm-clock" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 43 -->
<div class="box">
<img src="img/projects/43.jpg" alt="43">
<div class="content">
<h3>Day 43</h3>
<p>Landing Design Socially</p>
</div>
<div class="info">
<a class="live-demo" href="https://landing-design-socially.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/43-landing-design-socially" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 44 -->
<div class="box">
<img src="img/projects/44.jpg" alt="44">
<div class="content">
<h3>Day 44</h3>
<p>Custom Range Slider</p>
</div>
<div class="info">
<a class="live-demo" href="https://custom-range-slider-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/44-custom-range-slider" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 45 -->
<div class="box">
<img src="img/projects/45.jpg" alt="45">
<div class="content">
<h3>Day 45</h3>
<p>Glassmorphism Product Card</p>
</div>
<div class="info">
<a class="live-demo" href="https://glassmorphism-product-card-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/45-glassmorphism-product-card" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 46 -->
<div class="box">
<img src="img/projects/46.jpg" alt="46">
<div class="content">
<h3>Day 46</h3>
<p>Dropdown Menu User Account</p>
</div>
<div class="info">
<a class="live-demo" href="https://dropdown-menu-user-account.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/46-dropdown-menu-user-account" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 47 -->
<div class="box">
<img src="img/projects/47.jpg" alt="47">
<div class="content">
<h3>Day 47</h3>
<p>Soundboard Javascript</p>
</div>
<div class="info">
<a class="live-demo" href="https://soundboard-javascript-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/47-soundboard-javascript" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 48 -->
<div class="box">
<img src="img/projects/48.jpg" alt="48">
<div class="content">
<h3>Day 48</h3>
<p>Animated Image Carousel</p>
</div>
<div class="info">
<a class="live-demo" href="https://animated-image-carousel-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/48-create-animated-image-carousel" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 49 -->
<div class="box">
<img src="img/projects/49.jpg" alt="49">
<div class="content">
<h3>Day 49</h3>
<p>Test Notification Click</p>
</div>
<div class="info">
<a class="live-demo" href="https://test-notification-click.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/49-test-notification-click" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 50 -->
<div class="box">
<img src="img/projects/50.jpg" alt="50">
<div class="content">
<h3>Day 50</h3>
<p>Line Through Effect</p>
</div>
<div class="info">
<a class="live-demo" href="https://codepen.io/x39OME/pen/mdzeWeo">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/50-%E2%80%8Fline-through-effect" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 51 -->
<div class="box">
<img src="img/projects/51.jpg" alt="51">
<div class="content">
<h3>Day 51</h3>
<p>Disney Movies Landing Page</p>
</div>
<div class="info">
<a class="live-demo" href="https://disney-movies-landing-page.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/51-disney-movies-landing-page" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 52 -->
<div class="box">
<img src="img/projects/52.jpg" alt="52">
<div class="content">
<h3>Day 52</h3>
<p>Filter Images Gallery</p>
</div>
<div class="info">
<a class="live-demo" href="https://filter-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/52-filter-image-gallery" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 53 -->
<div class="box">
<img src="img/projects/53.jpg" alt="53">
<div class="content">
<h3>Day 53</h3>
<p>Custom Checkbox Toggle Dark Light Mode</p>
</div>
<div class="info">
<a class="live-demo" href="https://custom-checkbox-toggle-dark-light.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/53-custom-checkbox-toggle-dark-light-mode" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 54 -->
<div class="box">
<img src="img/projects/54.jpg" alt="54">
<div class="content">
<h3>Day 54</h3>
<p>Traffic Lights</p>
</div>
<div class="info">
<a class="live-demo" href="https://codepen.io/x39OME/pen/GRYZBrm">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/54-traffic-lights" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 55 -->
<div class="box">
<img src="img/projects/55.jpg" alt="55">
<div class="content">
<h3>Day 55</h3>
<p>QR Code Generator</p>
</div>
<div class="info">
<a class="live-demo" href="https://qr-code-generator-html-css-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/55-qr-code-generator" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 56 -->
<div class="box">
<img src="img/projects/56.jpg" alt="56">
<div class="content">
<h3>Day 56</h3>
<p>Text Reveal Animation</p>
</div>
<div class="info">
<a class="live-demo" href="https://text-reveal-animation-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/56-text-reveal-animation" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 57 -->
<div class="box">
<img src="img/projects/57.jpg" alt="57">
<div class="content">
<h3>Day 57</h3>
<p>Password Validation Check In</p>
</div>
<div class="info">
<a class="live-demo" href="https://password-validation-check-in.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/57-password-validation-check-in" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 58 -->
<div class="box">
<img src="img/projects/58.jpg" alt="58">
<div class="content">
<h3>Day 58</h3>
<p>Cloud Animation Banner</p>
</div>
<div class="info">
<a class="live-demo" href="https://cloud-translate-banner-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/58-cloud-translate-banner-js" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 59 -->
<div class="box">
<img src="img/projects/59.jpg" alt="59">
<div class="content">
<h3>Day 59</h3>
<p>Season's Greetings Happy Eid 2023</p>
</div>
<div class="info">
<a class="live-demo" href="https://seasons-greetings-happy-eid-2023.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/59-season's-greetings-happy-eid-2023" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 60 -->
<div class="box">
<img src="img/projects/60.jpg" alt="60">
<div class="content">
<h3>Day 60</h3>
<p>Eid Al-Fiter 2023</p>
</div>
<div class="info">
<a class="live-demo" href="https://eid-al-fitr-2023.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/60-eid-al-fitr-2023" 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/projects/61.jpg" alt="61">
<div class="content">
<h3>Day 61</h3>
<p>A Message To Pass</p>
</div>
<div class="info">
<a class="live-demo" href="https://a-message-to-pass.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/61-a-message-to-pass" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 62 -->
<div class="box">
<img src="img/projects/62.jpg" alt="62">
<div class="content">
<h3>Day 62</h3>
<p>Music Website</p>
</div>
<div class="info">
<a class="live-demo" href="https://music-website-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/62-music-website" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 63 -->
<div class="box">
<img src="img/projects/63.jpg" alt="63">
<div class="content">
<h3>Day 63</h3>
<p>Card Hover Effects</p>
</div>
<div class="info">
<a class="live-demo" href="https://63-card-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/63-card-hover-effects" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 64 -->
<div class="box">
<img src="img/projects/64.jpg" alt="64">
<div class="content">
<h3>Day 64</h3>
<p>Responsive Glassmorphism Website</p>
</div>
<div class="info">
<a class="live-demo" href="https://responsive-glassmorphism-website.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/64-responsive-glassmorphism-website" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 65 -->
<div class="box">
<img src="img/projects/65.jpg" alt="65">
<div class="content">
<h3>Day 65</h3>
<p>Burger Icon Transform Effects</p>
</div>
<div class="info">
<a class="live-demo" href="https://burger-icon-transform-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/65-burger-icon-transform-effects" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 66 -->
<div class="box">
<img src="img/projects/66.jpg" alt="66">
<div class="content">
<h3>Day 66</h3>
<p>Type Writer Effect On Text</p>
</div>
<div class="info">
<a class="live-demo" href="https://type-writer-effect-on-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/66-type-writer-effect-on-text" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 67 -->
<div class="box">
<img src="img/projects/67.jpg" alt="67">
<div class="content">
<h3>Day 67</h3>
<p>Product Card Shoes</p>
</div>
<div class="info">
<a class="live-demo" href="https://product-card-shoes.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/67-product-card-shoes" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 68 -->
<div class="box">
<img src="img/projects/68.jpg" alt="68">
<div class="content">
<h3>Day 68</h3>
<p>Price Range Slider</p>
</div>
<div class="info">
<a class="live-demo" href="https://price-range-slider.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/68-price-range-slider" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 69 -->
<div class="box">
<img src="img/projects/69.jpg" alt="69">
<div class="content">
<h3>Day 69</h3>
<p>Design Airpods</p>
</div>
<div class="info">
<a class="live-demo" href="https://design-airpods.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/69-design-airpods" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 70 -->
<div class="box">
<img src="img/projects/70.jpg" alt="70">
<div class="content">
<h3>Day 70</h3>
<p>Javascript Zoom Effect</p>
</div>
<div class="info">
<a class="live-demo" href="https://javascript-zoom-effect.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/70-javascript-zoom-effect" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 71 -->
<div class="box">
<img src="img/projects/71.jpg" alt="71">
<div class="content">
<h3>Day 71</h3>
<p>Responsive Sidebar Menu</p>
</div>
<div class="info">
<a class="live-demo" href="https://responsive-sidebar-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/71-responsive-sidebar-menu" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 72 -->
<div class="box">
<img src="img/projects/72.jpg" alt="72">
<div class="content">
<h3>Day 72</h3>
<p>Effects On Mousemove SketchJs</p>
</div>
<div class="info">
<a class="live-demo" href="https://effects-on-mousemove-using-sketch.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/72-effects-on-mousemove-using-sketch.js" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 73 -->
<div class="box">
<img src="img/projects/73.jpg" alt="73">
<div class="content">
<h3>Day 73</h3>
<p>Like And Dislike Using Javascript</p>
</div>
<div class="info">
<a class="live-demo" href="https://like-and-dislike-using-javascript.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/73-like-and-dislike-using-javascript" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 74 -->
<div class="box">
<img src="img/projects/74.jpg" alt="74">
<div class="content">
<h3>Day 74</h3>
<p>Visual Counter</p>
</div>
<div class="info">
<a class="live-demo" href="https://codepen.io/x39OME/pen/mdzXdar">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/74-visual-counter" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 75 -->
<div class="box">
<img src="img/projects/75.jpg" alt="75">
<div class="content">
<h3>Day 75</h3>
<p>Cover Uncover An Image</p>
</div>
<div class="info">
<a class="live-demo" href="https://cover-uncover-an-image.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/75-cover-uncover-an-image" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 76 -->
<div class="box">
<img src="img/projects/76.jpg" alt="76">
<div class="content">
<h3>Day 76</h3>
<p>Fetch API</p>
</div>
<div class="info">
<a class="live-demo" href="https://codepen.io/x39OME/pen/XWxZQro">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/76-fetch-api" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 77 -->
<div class="box">
<img src="img/projects/77.jpg" alt="77">
<div class="content">
<h3>Day 77</h3>
<p>Control Brightness</p>
</div>
<div class="info">
<a class="live-demo" href="https://control-brightness.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/77-control-brightness" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 78 -->
<div class="box">
<img src="img/projects/78.jpg" alt="78">
<div class="content">
<h3>Day 78</h3>
<p>Product Card Nike</p>
</div>
<div class="info">
<a class="live-demo" href="https://product-card-nike.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/78-product-card" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 79 -->
<div class="box">
<img src="img/projects/79.jpg" alt="79">
<div class="content">
<h3>Day 79</h3>
<p>Starbucks Landing</p>
</div>
<div class="info">
<a class="live-demo" href="https://starbucks-landing-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/79-starbucks-landing" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 80 -->
<div class="box">
<img src="img/projects/80.jpg" alt="80">
<div class="content">
<h3>Day 80</h3>
<p>Simple Countdown Timer</p>
</div>
<div class="info">
<a class="live-demo" href="https://simple-countdown-timer-end-2025.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/80-simple-countdown-timer" 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/projects/81.jpg" alt="81">
<div class="content">
<h3>Day 81</h3>
<p>Emoji Range Slider</p>
</div>
<div class="info">
<a class="live-demo" href="https://emoji-range-slider.netlify.app/">Live Demo <i class="fa-solid fa-right-long"></i></a>
<a class="source" href="hhttps://github.com/x39OME/100_project_100_days/tree/main/100_projects/81-emoji-range-slider" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 82 -->
<div class="box">
<img src="img/projects/82.jpg" alt="82">
<div class="content">
<h3>Day 82</h3>
<p>Explore Developer Website</p>
</div>
<div class="info">
<a class="live-demo" href="https://explore-developer-website.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/82-explore-developer-website" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 83 -->
<div class="box">
<img src="img/projects/83.jpg" alt="83">
<div class="content">
<h3>Day 83</h3>
<p>Games Sign In Login Form</p>
</div>
<div class="info">
<a class="live-demo" href="https://games-sign-in-login-form.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/83-games-sign-in-login-form" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 84 -->
<div class="box">
<img src="img/projects/84.jpg" alt="84">
<div class="content">
<h3>Day 84</h3>
<p>Eyes Follow Mouse</p>
</div>
<div class="info">
<a class="live-demo" href="https://eyes-follow-mouse-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/84-eyes-follow-mouse" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 85 -->
<div class="box">
<img src="img/projects/85.jpg" alt="85">
<div class="content">
<h3>Day 85</h3>
<p>Responsive 404 Page Not Found</p>
</div>
<div class="info">
<a class="live-demo" href="https://responsive-404-page-not-found.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/85-responsive-404-page-not-found" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 86 -->
<div class="box">
<img src="img/projects/86.jpg" alt="86">
<div class="content">
<h3>Day 86</h3>
<p>White Snow Rain</p>
</div>
<div class="info">
<a class="live-demo" href="https://white-snow-rain.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/86-white-snow-rain" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 87 -->
<div class="box">
<img src="img/projects/87.jpg" alt="87">
<div class="content">
<h3>Day 87</h3>
<p>Video Game Valorant</p>
</div>
<div class="info">
<a class="live-demo" href="https://video-game-valorant.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/87-video-game-valorant" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 88 -->
<div class="box">
<img src="img/projects/88.jpg" alt="88">
<div class="content">
<h3>Day 88</h3>
<p>Animated Website Bubble</p>
</div>
<div class="info">
<a class="live-demo" href="https://animated-bubble-website.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/88-animated-website-bubble" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 89 -->
<div class="box">
<img src="img/projects/89.jpg" alt="89">
<div class="content">
<h3>Day 89</h3>
<p>Menu Dashboard With Dark Mode</p>
</div>
<div class="info">
<a class="live-demo" href="https://menu-dashboard-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/89-menu-dashboard-with-dark-mode" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 90 -->
<div class="box">
<img src="img/projects/90.jpg" alt="90">
<div class="content">
<h3>Day 90</h3>
<p>Model Landing Page</p>
</div>
<div class="info">
<a class="live-demo" href="https://model-landing-page.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/90-model-landing-page" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 91 -->
<div class="box">
<img src="img/projects/91.jpg" alt="91">
<div class="content">
<h3>Day 91</h3>
<p>Rotating Image Gallery</p>
</div>
<div class="info">
<a class="live-demo" href="https://rotating-image-gallery-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/91-rotating-image-gallery" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 92 -->
<div class="box">
<img src="img/projects/92.jpg" alt="92">
<div class="content">
<h3>Day 92</h3>
<p>Video Movie Popup</p>
</div>
<div class="info">
<a class="live-demo" href="https://video-movie-popup.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/92-video-movie-popup" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Box 93 -->
<div class="box">
<img src="img/projects/93.jpg" alt="93">
<div class="content">
<h3>Day 93</h3>
<p>Stranger Things Cards</p>
</div>
<div class="info">
<a class="live-demo" href="https://stranger-things-cards.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/93-stranger-things-cards" 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>
Reference in New Issue View Git Blame Copy Permalink