first commit

HassanEssam0110 · Dec 18, 2023 · d55c1f9 · d55c1f9
1 parent 6688483
commit d55c1f9
Show file tree

Hide file tree

Showing 37 changed files with 508 additions and 28 deletions.
diff --git a/Assignment-01 [First HTML]/output.png b/Assignment-01 [First HTML]/output.png
diff --git a/Assignment-02 [User Form]/output.png b/Assignment-02 [User Form]/output.png
diff --git a/Assignment-03 [Bakery Template]/output.png b/Assignment-03 [Bakery Template]/output.png
diff --git a/Assignment-04 [Fokir Template]/output.png b/Assignment-04 [Fokir Template]/output.png
diff --git a/Assignment-05 [Mealify Template]/output.png b/Assignment-05 [Mealify Template]/output.png
diff --git a/Assignment-06 [DevFolio Template]/output.png b/Assignment-06 [DevFolio Template]/output.png
diff --git a/Assignment-07 [First JS]/index.html b/Assignment-07 [First JS]/index.html
@@ -5,8 +5,8 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- *============================= Meta ============================= -->
- <meta name="description" content="Daniels is a responsive creative template - Bootstrap 5 Personal Template">
- <meta name="keywords" content="Daniels, bootstrap 5, cv, personal, Portfolio, multipurpose">
+ <meta name="description" content="learn some JavaScript code">
+ <meta name="keywords" content="JavaScript, bootstrap 5, js, scrollreveal, multipurpose">
  <meta name="author" content="Hassan Essam">
  <!-- *============================= GOOGLE FONTS ============================= -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -23,7 +23,7 @@
  <!-- Main style Css -->
  <link rel="stylesheet" href="./assets/css/style.css">
 
- <title>Document</title>
+ <title>Assignment-07|First JS</title>
 </head>
 
 <body class="min-vh-100 py-0 py-sm-5">

diff --git a/Assignment-07 [First JS]/js-1.png b/Assignment-07 [First JS]/js-1.png
diff --git a/Assignment-08 [Random Quote JS & JSON]/output.png b/Assignment-08 [Random Quote JS & JSON]/output.png
diff --git a/Bootstrap-Exam [Daniels Template]/output.png b/Bootstrap-Exam [Daniels Template]/output.png
diff --git a/...ht Bootstrap-5 Cols/css/bootstrap.min.css → ...t Bootstrap-5 Cols]/css/bootstrap.min.css b/...ht Bootstrap-5 Cols/css/bootstrap.min.css → ...t Bootstrap-5 Cols]/css/bootstrap.min.css
diff --git a/...n Equal Height Bootstrap-5 Cols/img/1.jpg → ... Equal Height Bootstrap-5 Cols]/img/1.jpg b/...n Equal Height Bootstrap-5 Cols/img/1.jpg → ... Equal Height Bootstrap-5 Cols]/img/1.jpg
diff --git a/...n Equal Height Bootstrap-5 Cols/img/2.jpg → ... Equal Height Bootstrap-5 Cols]/img/2.jpg b/...n Equal Height Bootstrap-5 Cols/img/2.jpg → ... Equal Height Bootstrap-5 Cols]/img/2.jpg
diff --git a/...n Equal Height Bootstrap-5 Cols/img/3.jpg → ... Equal Height Bootstrap-5 Cols]/img/3.jpg b/...n Equal Height Bootstrap-5 Cols/img/3.jpg → ... Equal Height Bootstrap-5 Cols]/img/3.jpg
diff --git a/...n Equal Height Bootstrap-5 Cols/img/4.jpg → ... Equal Height Bootstrap-5 Cols]/img/4.jpg b/...n Equal Height Bootstrap-5 Cols/img/4.jpg → ... Equal Height Bootstrap-5 Cols]/img/4.jpg
diff --git a/...n Equal Height Bootstrap-5 Cols/img/5.jpg → ... Equal Height Bootstrap-5 Cols]/img/5.jpg b/...n Equal Height Bootstrap-5 Cols/img/5.jpg → ... Equal Height Bootstrap-5 Cols]/img/5.jpg
diff --git a/...n Equal Height Bootstrap-5 Cols/img/6.jpg → ... Equal Height Bootstrap-5 Cols]/img/6.jpg b/...n Equal Height Bootstrap-5 Cols/img/6.jpg → ... Equal Height Bootstrap-5 Cols]/img/6.jpg
diff --git a/... Equal Height Bootstrap-5 Cols/index.html → ...Equal Height Bootstrap-5 Cols]/index.html b/... Equal Height Bootstrap-5 Cols/index.html → ...Equal Height Bootstrap-5 Cols]/index.html
diff --git a/...otstrap-5 Cols/js/bootstrap.bundle.min.js → ...tstrap-5 Cols]/js/bootstrap.bundle.min.js b/...otstrap-5 Cols/js/bootstrap.bundle.min.js → ...tstrap-5 Cols]/js/bootstrap.bundle.min.js
diff --git a/CSS Tricks [Create An Equal Height Bootstrap-5 Cols]/output.png b/CSS Tricks [Create An Equal Height Bootstrap-5 Cols]/output.png
diff --git a/Gradient tricks/css/style.css → CSS Tricks [Gradient tricks]/css/style.css b/Gradient tricks/css/style.css → CSS Tricks [Gradient tricks]/css/style.css
diff --git a/Gradient tricks/index.html → CSS Tricks [Gradient tricks]/index.html b/Gradient tricks/index.html → CSS Tricks [Gradient tricks]/index.html
diff --git a/CSS Tricks [Gradient tricks]/output.png b/CSS Tricks [Gradient tricks]/output.png
diff --git a/MiniProjectJS [CaptchaGenJS]/assets/css/style.css b/MiniProjectJS [CaptchaGenJS]/assets/css/style.css
@@ -4,7 +4,6 @@
 }
 ::selection {
  background-color: var(--color-main);
-
  color: var(--color-secondary);
 }
 
@@ -13,14 +12,7 @@ body {
 }
 
 .section-captcha {
- /* background-color: #19172e; */
- background-color: rgba(228, 89, 38, 0.176);
- background-image: linear-gradient(
- to bottom,
- rgba(228, 89, 38, 0.8),
- rgba(228, 89, 38, 0.8)
- ),
- url("../img/1.jpg");
+ background-color: #19172e;
 }
 .text-main {
  color: var(--color-main);
@@ -66,10 +58,6 @@ body {
  transition: 0.3s;
 }
 
-.btn-main:active {
- transform: scale(0.97);
-}
-
 form .btn-main {
  position: absolute;
  font-size: 14px;
@@ -93,12 +81,6 @@ form .invalid-feedback {
  border: 1px solid #e45826;
 }
 
-@media screen and (min-width: 451px) and (max-width: 991px) {
- .title {
- font-size: 1.25rem;
- }
-}
-
 @media screen and (max-width: 450px) {
  .w-75 {
  width: 100% !important;
@@ -113,3 +95,9 @@ form .invalid-feedback {
  font-size: 0.9375rem;
  }
 }
+
+@media screen and (min-width: 451px) and (max-width: 991px) {
+ .title {
+ font-size: 1.25rem;
+ }
+}
diff --git a/MiniProjectJS [CaptchaGenJS]/assets/js/main.js b/MiniProjectJS [CaptchaGenJS]/assets/js/main.js
@@ -28,20 +28,21 @@ function generatCaptca(arr, num) {
 
 // *================= JS Functions =================
 generatCaptca(chars, 6);
-alertify.set('notifier', 'position', 'top-center');
+alertify.set('notifier', 'position');
 
 function checkCaptca(captca, capatchInput) {
  const validFeedback = document.querySelector(".invalid-feedback");
  if (!capatchInput.value) {
  validFeedback.style.display = 'block'
  validFeedback.textContent = "Please enter captca"
- alertify.warning('Please enter captcha');
+ alertify.warning('Please enter the captcha.');
+
  } else if (capatchInput.value === captca) {
- alertify.notify('Valid Captca', 'success', 5);
+ alertify.notify('Congratulations! Captcha is correct. 🎉', 'success', 5);
  validFeedback.style.display = 'none';
+
  } else {
- // capatchInput.classList.add('is-invalid');
- alertify.notify('Invalid captcha, Please try again', 'error', 5);
+ alertify.notify('Invalid captcha. Please try again.', 'error', 5);
  validFeedback.style.display = 'block';
  validFeedback.textContent = "Invalid, Enter captcha correct."
  }

diff --git a/MiniProjectJS [CaptchaGenJS]/output.png b/MiniProjectJS [CaptchaGenJS]/output.png
diff --git a/MiniProjectJS [RGB GameJS]/assets/css/bootstrap.min.css b/MiniProjectJS [RGB GameJS]/assets/css/bootstrap.min.css
diff --git a/MiniProjectJS [RGB GameJS]/assets/css/style.css b/MiniProjectJS [RGB GameJS]/assets/css/style.css
@@ -0,0 +1,236 @@
+:root {
+ --color-main: #120f1b;
+ --color-second: #6225e6;
+ --color-light: #fff;
+
+ --hight-cards: 200px;
+}
+
+body {
+ font-family: "Fredoka One", cursive;
+ background-color: #f1f1f1;
+ background-image: url("../img/bg-01.jpg");
+ color: var(--color-main);
+}
+
+main {
+ background-color: var(--color-light);
+}
+
+.w-custom {
+ width: 25%;
+}
+
+.text-color-second {
+ color: var(--color-second);
+}
+.text-bg-second {
+ background-color: var(--color-second);
+ color: var(--color-light);
+}
+.bg-main {
+ background-color: var(--color-main);
+ color: var(--color-light);
+}
+
+.img-background {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.header-title {
+ font-family: "Rubik Doodle Shadow", sans-serif;
+ font-size: 60px;
+ letter-spacing: 5px;
+}
+.header-title span {
+ display: inline-block;
+ animation: jump-chars 1.5s linear infinite;
+}
+.header-title span:not(.jump) {
+ animation: jump-chars-2 1.5s linear infinite;
+}
+
+@keyframes jump-chars {
+ 0% {
+ transform: translateY(0) scale(0.89);
+ }
+ 50% {
+ transform: translateY(-5px) scale(1);
+ }
+ 100% {
+ transform: translateY(0) scale(0.9);
+ }
+}
+@keyframes jump-chars-2 {
+ 0% {
+ transform: translateY(-5px) scale(1);
+ }
+ 50% {
+ transform: translateY(0) scale(0.89);
+ }
+ 100% {
+ transform: translateY(-5px) scale(1);
+ }
+}
+
+.header-subtitle {
+ font-size: 20px;
+ min-height: 18px;
+}
+
+.winning-color {
+ background-color: rgba(98, 37, 230, 0.1);
+ width: fit-content;
+}
+
+.square {
+ height: var(--hight-cards);
+ cursor: pointer;
+}
+
+/************** skeleton loading ****************/
+.skeleton {
+ background-image: linear-gradient(
+ 90deg,
+ rgba(98, 37, 230, 0.2),
+ var(--color-light),
+ rgba(98, 37, 230, 0.2)
+ );
+ overflow: hidden;
+ height: var(--hight-cards);
+ cursor: default;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ animation: loading-skeleton 1.5s ease-in-out infinite;
+}
+
+@keyframes loading-skeleton {
+ 0% {
+ opacity: 0.1;
+ }
+ 50% {
+ opacity: 0.4;
+ }
+ 100% {
+ opacity: 0.1;
+ }
+}
+
+/************** btn levels ****************/
+.btn-level {
+ width: 25%;
+}
+.btn-main {
+ --bs-btn-color: var(--color-second);
+ --bs-btn-border-color: var(--color-second);
+ --bs-btn-hover-color: var(--color-light);
+ --bs-btn-hover-bg: var(--color-second);
+ --bs-btn-hover-border-color: var(--color-second);
+ --bs-btn-focus-shadow-rgb: 25, 135, 84;
+ --bs-btn-active-color: var(--color-light);
+ --bs-btn-active-bg: var(--color-second);
+ --bs-btn-active-border-color: var(--color-second);
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: var(--color-second);
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: var(--color-second);
+ --bs-gradient: none;
+}
+
+/************** btn play ****************/
+.wrapper {
+ display: flex;
+ justify-content: center;
+}
+
+.cta {
+ display: flex;
+ padding: 5px 10px;
+ text-decoration: none;
+ border: none;
+ font-size: 20px;
+ background: var(--color-second);
+ color: var(--color-light);
+ transition: 1s;
+ box-shadow: 5px 5px 0 #222;
+ transform: skewX(-15deg);
+}
+
+.cta:focus {
+ outline: none;
+}
+
+.cta:hover {
+ transition: 0.5s;
+ box-shadow: 5px 5px 0 #fbc638;
+}
+
+.cta span:nth-child(2) {
+ transition: 0.5s;
+ margin-right: 0px;
+}
+
+.cta:hover span:nth-child(2) {
+ transition: 0.5s;
+ margin-right: 10px;
+}
+
+.cta span {
+ transform: skewX(15deg);
+}
+
+.cta span:nth-child(2) {
+ position: relative;
+ top: 40%;
+ width: 20px;
+ margin-left: 10px;
+ transform: translateY(-50%);
+}
+
+/************** SVG btn play ****************/
+path.one {
+ transition: 0.4s;
+ transform: translateX(-60%);
+}
+
+path.two {
+ transition: 0.5s;
+ transform: translateX(-30%);
+}
+
+.cta:hover path.three {
+ animation: color_anim 1s infinite 0.2s;
+}
+
+.cta:hover path.one {
+ transform: translateX(0%);
+ animation: color_anim 1s infinite 0.6s;
+}
+
+.cta:hover path.two {
+ transform: translateX(0%);
+ animation: color_anim 1s infinite 0.4s;
+}
+/* SVG animations */
+@keyframes color_anim {
+ 0% {
+ fill: var(--color-light);
+ }
+ 50% {
+ fill: #fbc638;
+ }
+ 100% {
+ fill: var(--color-light);
+ }
+}
+
+@media screen and (max-width: 767px) {
+ .header-title {
+ font-size: 45px;
+ }
+ .w-custom,
+ .btn-level {
+ width: 100%;
+ }
+}
diff --git a/MiniProjectJS [RGB GameJS]/assets/img/bg-01.jpg b/MiniProjectJS [RGB GameJS]/assets/img/bg-01.jpg
diff --git a/MiniProjectJS [RGB GameJS]/assets/img/nyan-cat.gif b/MiniProjectJS [RGB GameJS]/assets/img/nyan-cat.gif
diff --git a/MiniProjectJS [RGB GameJS]/assets/img/trees.png b/MiniProjectJS [RGB GameJS]/assets/img/trees.png
diff --git a/MiniProjectJS [RGB GameJS]/assets/js/bootstrap.bundle.min.js b/MiniProjectJS [RGB GameJS]/assets/js/bootstrap.bundle.min.js