diff --git a/01-one-page-website-personal/html-css-javascript-practice-project_2.2-beta.3.zip b/01-one-page-website-personal/html-css-javascript-practice-project_2.2-beta.3.zip deleted file mode 100644 index 06f6944..0000000 Binary files a/01-one-page-website-personal/html-css-javascript-practice-project_2.2-beta.3.zip and /dev/null differ diff --git a/01-one-page-website-personal/img/Logo-edited-768x768.jpg b/01-one-page-website-personal/img/Logo-edited-768x768.jpg deleted file mode 100644 index 1f01ade..0000000 Binary files a/01-one-page-website-personal/img/Logo-edited-768x768.jpg and /dev/null differ diff --git a/01-one-page-website-personal/img/bg.jpg b/01-one-page-website-personal/img/bg.jpg deleted file mode 100644 index 411ef36..0000000 Binary files a/01-one-page-website-personal/img/bg.jpg and /dev/null differ diff --git a/01-one-page-website-personal/img/hero-bg.png b/01-one-page-website-personal/img/hero-bg.png deleted file mode 100644 index 1b07df1..0000000 Binary files a/01-one-page-website-personal/img/hero-bg.png and /dev/null differ diff --git a/01-one-page-website-personal/img/iFoolad-Logo-1536x860.jpg b/01-one-page-website-personal/img/iFoolad-Logo-1536x860.jpg deleted file mode 100644 index 782e7c3..0000000 Binary files a/01-one-page-website-personal/img/iFoolad-Logo-1536x860.jpg and /dev/null differ diff --git a/01-one-page-website-personal/img/img-1.jpg b/01-one-page-website-personal/img/img-1.jpg deleted file mode 100644 index 9dca8fb..0000000 Binary files a/01-one-page-website-personal/img/img-1.jpg and /dev/null differ diff --git a/01-one-page-website-personal/img/img-2.png b/01-one-page-website-personal/img/img-2.png deleted file mode 100644 index 640717b..0000000 Binary files a/01-one-page-website-personal/img/img-2.png and /dev/null differ diff --git a/01-one-page-website-personal/img/logosmall.png b/01-one-page-website-personal/img/logosmall.png deleted file mode 100644 index e8d5cd5..0000000 Binary files a/01-one-page-website-personal/img/logosmall.png and /dev/null differ diff --git "a/01-one-page-website-personal/img/\330\265\331\201\330\255\330\247\330\252-\330\267\330\261\330\247\330\255\333\214-\330\264\330\257\331\207-\331\204\331\205\330\263\330\261.jpg" "b/01-one-page-website-personal/img/\330\265\331\201\330\255\330\247\330\252-\330\267\330\261\330\247\330\255\333\214-\330\264\330\257\331\207-\331\204\331\205\330\263\330\261.jpg" deleted file mode 100644 index f3fd5da..0000000 Binary files "a/01-one-page-website-personal/img/\330\265\331\201\330\255\330\247\330\252-\330\267\330\261\330\247\330\255\333\214-\330\264\330\257\331\207-\331\204\331\205\330\263\330\261.jpg" and /dev/null differ diff --git a/01-one-page-website-personal/index.html b/01-one-page-website-personal/index.html deleted file mode 100644 index 6085435..0000000 --- a/01-one-page-website-personal/index.html +++ /dev/null @@ -1,164 +0,0 @@ - - - - - - - - one-page-website-personal - - - - - - - - - -
-
-
-

سلام :)

-

پوریا مشهدی

-

هستم.

- - نمونه کارها -
-
-
- -
-
-
-

خدمات من

-

داشتن یک پایگاه اینترنتی خوب، معرف شخص یا برند شماست. حالا دیگه وقتشه یک وبسایت خوب راه اندازی کنید و فعالیت خودتون رو در دهکده جهانی (اینترنت) از سر بگیرید. داشتن یک وبسایت خوب نیازمند یک تیم خوب برای شناسایی نیاز شما و اجرای درستش هست

-
-
-
-
-

طراحی سایت

-

به طور کلی وب سایت به محلی گفته میشه که صفحه یا صفحاتی رو در فضای اینترنت با نامی اختصاصی و هدفی مشخص نگهداری میکنه.

-
-
-
-

باز طراحی سایت

-

خیلی وقتا یه تغییر کوچیک توی دکوراسیون خونه و محل کار، میتونه خیلی هیجان انگیز باشه و باعث شوق و نشاط بشه و یا دیدن تغییر ویترین یه مغازه که همیشه ازش خرید میکنیم، ما رو ذوق زده میکنه، همین موضوع و همین احساس در مورد سایت ها هم وجود داره

-
-
-
-

بهینه سازی ساختار سایت

-

یکی از کارهای مهمی که برای سئو سایت انجام میشه، بهینه سازی ساختار سایت هست، چون باعث ساختار بندی بهتر و مناسب تر سایت شده و تاثیر مستقیم بر سئو سایت خواهد داشت.

-
-
-
-

طراحی رابط کاربری

-

رابط یک سیستم یا ساز و کاری برای تعامل بین دو سیستم هست، به این معنا که User Interface در حقیقت یک Interface هستش که برای ساده سازی و آسان تر شدن روند تعامل بین سیستم و کاربر طراحی میشه و به کار گرفته میشه.

-
-
-
-
- -
-
-
-

برخی از پروژه های من

-
-
-
-
-

آی فولاد

-

توضیح مختصر درباره آی فولاد

-

سایت آی فولاد فعالیت خود را از حدود سه دهه قبل در شمال کشور در راستای تامین آهن آلات فولاد کاران شروع کرد و در سال 1380 شرکت رسمی خود را در زمینه ساخت سازه های فولادی در کنار فعالیت بازرگانی خود، راه اندازی نمود و اکنون علاوه بر تامین نیازهای داخلی کشور، صادر کننده انواع فلزات ساختمانی، صنعتی و آلیاژی از جمله فولاد، استیل و آلمینیوم به کشور های عراق، ارمنستان و گرجستان است.

-
-
- img -
-
-
-
-

مهر سرمستان

-

توضیح مختصر درباره مهر سرمستان

-

سایت خدماتی تجاری مهر سرمستان از سال 1382 فعالیت خود را با واردات انواع تجهیزات IT، لپ تاپ، نوت بوک، تبلت و موبایل شروع کرد. این شرکت در طی دو دهه فعالیت خود توانسته است با هدف قرار دادن مشتری مداری و تلاش مداوم در این زمینه، به عنوان یک نام در سطح اول توزیع تجهیزات IT در کشور مطرح شود و محصولات خود را با بهترین خدمات پس از فروش، کیفیت بالا و قیمت مناسب به کشور وارد کند. بازرگانی مهر بعنوان نماینده و تامین کننده اصلی برند‌های HP,ASUS ,Lenovo ،Huawei ،Samsung ,Nokia ,Honor ,Apple ,iphone ,Xiaomi در سرتاسر ایران شناخته می شود.

-
-
- img -
-
-
-
-

لمسر

-

توضیح مختصر درباره لمسر

-

سایت لمسر فعالیت خود را از سال 1386 در زمینه ی واردات مواد آرایشی و بهداشتی آغاز کرده و در سال های بعد با هدف حمایت از تولید داخلی شروع به فعالیت های دیگری کرده است. در واقع گام بزرگی که این شرکت در زمینه رشد اقتصادی از طریق تولید ملی برداشت باعث شد تا این شرکت پیشرفت روز افزونی را تجربه کند. شرکت صادق تجارت وحید با ترویج کالاهای با کیفیت هم اکنون به عنوان یکی از بزرگ ترین شرکت های تولید کننده لوازم آرایشی، نوشیدنی و خوشبو کننده ها شناخته شده است. همچنین شما می توانید با مراجعه به فروشگاه های بزرگ محصولات این شرکت را تهیه کرده و نگرانی از بابت مرغوب نبودن کیفیت کالاهای این شرکت نداشته باشید.

-
-
- img -
-
- -
-
-
- -
-
-
-
- img -
-
-
-

درباره من

-

طراح و برنامه نویس وب

-

- سلام! من یک کارآموز فرانت اند هستم و در حال حاضر به دنبال فرصتی برای کارآموزی هستم. من تجربه‌ای قوی در طراحی و توسعه وب دارم و علاقه‌مند به بهبود و بهبود رابط کاربری هستم. من با استفاده از ابزارهای مدرن مانند HTML، CSS و JavaScript، صفحات وب زیبا و کاربرپسند ایجاد می‌کنم. من با فریمورک‌های محبوب مانند React و Angular نیز آشنا هستم. -
-من یک تیم‌پلایر قوی هستم و علاقه‌مند به یادگیری مستمر و به روزرسانی مهارت‌هایم هستم. من توانایی حل مسائل پیچیده را دارم و توانایی کار در محیط‌های چندسکویی را نیز دارم. -
-با آزادی کامل کاربر، من آماده همکاری با تیم‌های مختلف و پروژه‌های چالش برانگیز هستم. من توانایی کار در محیط‌های دینامیک و سریع را دارم و می‌توانم با تلاش و تعهد خود به هدف‌های تیم کمک کنم. - - -

- دانلود رزومه -
-
-
- - - - - - - - \ No newline at end of file diff --git a/01-one-page-website-personal/site.js b/01-one-page-website-personal/site.js deleted file mode 100644 index a2a97b8..0000000 --- a/01-one-page-website-personal/site.js +++ /dev/null @@ -1,25 +0,0 @@ -const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger'); -const mobile_menu = document.querySelector('.header .nav-bar .nav-list ul'); -const menu_item = document.querySelectorAll('.header .nav-bar .nav-list ul li a'); -const header = document.querySelector('.header.container'); - -hamburger.addEventListener('click', () => { - hamburger.classList.toggle('active'); - mobile_menu.classList.toggle('active'); -}); - -document.addEventListener('scroll', () => { - var scroll_position = window.scrollY; - if (scroll_position > 250) { - header.style.backgroundColor = '#29323c'; - } else { - header.style.backgroundColor = 'transparent'; - } -}); - -menu_item.forEach((item) => { - item.addEventListener('click', () => { - hamburger.classList.toggle('active'); - mobile_menu.classList.toggle('active'); - }); -}); diff --git a/01-one-page-website-personal/style.css b/01-one-page-website-personal/style.css deleted file mode 100644 index 317ffbe..0000000 --- a/01-one-page-website-personal/style.css +++ /dev/null @@ -1,677 +0,0 @@ -@import 'https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css'; -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} -html { - direction: rtl; - font-size: 10px; - font-family: Vazirmatn, sans-serif; - scroll-behavior: smooth; -} -a { - text-decoration: none; -} -.container { - min-height: 100vh; - width: 100%; - display: flex; - align-items: center; - justify-content: center; -} -img { - height: 100%; - width: 100%; - object-fit: cover; -} -p { - color: black; - font-size: 1.4rem; - margin-top: 5px; - line-height: 2.5rem; - font-weight: 300; - -} -.section-title { - font-size: 4rem; - font-weight: 300; - color: black; - margin-bottom: 10px; - text-transform: uppercase; - - text-align: center; -} -.section-title span { - color: crimson; -} - -.cta { - display: inline-block; - padding: 10px 30px; - color: white; - background-color: transparent; - border: 2px solid crimson; - font-size: 2rem; - text-transform: uppercase; - - margin-top: 30px; - transition: 0.3s ease; - transition-property: background-color, color; -} -.cta:hover { - color: white; - background-color: crimson; -} -.brand h1 { - font-size: 3rem; - text-transform: uppercase; - color: white; -} -.brand h1 span { - color: crimson; -} - -/* Header section */ -#header { - position: fixed; - z-index: 1000; - left: 0; - top: 0; - width: 100vw; - height: auto; -} -#header .header { - min-height: 8vh; - background-color: rgba(31, 30, 30, 0.24); - transition: 0.3s ease background-color; -} -#header .nav-bar { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - height: 100%; - max-width: 1300px; - padding: 0 10px; -} -#header .nav-list ul { - list-style: none; - position: absolute; - background-color: rgb(31, 30, 30); - width: 100vw; - height: 100vh; - left: 100%; - top: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - z-index: 1; - overflow-x: hidden; - transition: 0.5s ease left; -} -#header .nav-list ul.active { - left: 0%; -} -#header .nav-list ul a { - font-size: 2.5rem; - font-weight: 500; - - text-decoration: none; - color: white; - - padding: 20px; - display: block; -} -#header .nav-list ul a::after { - content: attr(data-after); - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scale(0); - color: rgba(240, 248, 255, 0.021); - font-size: 13rem; - - z-index: -1; -} -#header .nav-list ul li:hover a::after { - transform: translate(-50%, -50%) scale(1); - -} -#header .nav-list ul li:hover a { - color: crimson; -} -#header .hamburger { - height: 60px; - width: 60px; - display: inline-block; - border: 3px solid white; - border-radius: 50%; - position: relative; - display: flex; - align-items: center; - justify-content: center; - z-index: 100; - cursor: pointer; - transform: scale(0.8); - margin-right: 20px; -} -#header .hamburger:after { - position: absolute; - content: ''; - height: 100%; - width: 100%; - border-radius: 50%; - border: 3px solid white; - animation: hamburger_puls 1s ease infinite; -} -#header .hamburger .bar { - height: 2px; - width: 30px; - position: relative; - background-color: white; - z-index: -1; -} -#header .hamburger .bar::after, -#header .hamburger .bar::before { - content: ''; - position: absolute; - height: 100%; - width: 100%; - left: 0; - background-color: white; - transition: 0.3s ease; - transition-property: top, bottom; -} -#header .hamburger .bar::after { - top: 8px; -} -#header .hamburger .bar::before { - bottom: 8px; -} -#header .hamburger.active .bar::before { - bottom: 0; -} -#header .hamburger.active .bar::after { - top: 0; -} - -#hero { - background-image: url(./img/bg.jpg); - background-size: cover; - background-position: top center; - position: relative; - z-index: 1; -} -#hero::after { - content: ''; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; - background-color: black; - opacity: 0.7; - z-index: -1; -} -#hero .hero { - max-width: 1200px; - margin: 0 auto; - padding: 0 50px; - justify-content: flex-start; -} -#hero h1 { - display: block; - width: fit-content; - font-size: 4rem; - position: relative; - color: transparent; - animation: text_reveal 0.5s ease forwards; - animation-delay: 1s; -} -#hero h1:nth-child(1) { - animation-delay: 1s; -} -#hero h1:nth-child(2) { - animation-delay: 2s; -} -#hero h1:nth-child(3) { - animation: text_reveal_name 0.5s ease forwards; - animation-delay: 3s; -} -#hero h1 span { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 0; - background-color: crimson; - animation: text_reveal_box 1s ease; - animation-delay: 0.5s; -} -#hero h1:nth-child(1) span { - animation-delay: 0.5s; -} -#hero h1:nth-child(2) span { - animation-delay: 1.5s; -} -#hero h1:nth-child(3) span { - animation-delay: 2.5s; -} - - -#services .services { - flex-direction: column; - text-align: center; - max-width: 1500px; - margin: 0 auto; - padding: 100px 0; -} -#services .service-top { - max-width: 500px; - margin: 0 auto; -} -#services .service-bottom { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - margin-top: 50px; -} -#services .service-item { - flex-basis: 80%; - display: flex; - align-items: flex-start; - justify-content: center; - flex-direction: column; - padding: 30px; - border-radius: 10px; - background-image: url(./img/img-1.jpg); - background-size: cover; - margin: 10px 5%; - position: relative; - z-index: 1; - overflow: hidden; -} -#services .service-item::after { - content: ''; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; - background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); - opacity: 0.9; - z-index: -1; -} -#services .service-bottom .icon { - height: 80px; - width: 80px; - margin-bottom: 20px; -} -#services .service-item h2 { - font-size: 2rem; - color: white; - margin-bottom: 10px; - text-transform: uppercase; -} -#services .service-item p { - color: white; - text-align: right; -} - -#projects .projects { - flex-direction: column; - max-width: 1200px; - margin: 0 auto; - padding: 100px 0; -} -#projects .projects-header h1 { - margin-bottom: 50px; -} -#projects .all-projects { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} -#projects .project-item { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - width: 80%; - margin: 20px auto; - overflow: hidden; - border-radius: 10px; -} -#projects .project-info { - padding: 30px; - flex-basis: 50%; - height: 100%; - display: flex; - align-items: flex-start; - justify-content: center; - flex-direction: column; - background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); - color: white; -} -#projects .project-info h1 { - font-size: 4rem; - font-weight: 500; -} -#projects .project-info h2 { - font-size: 1.8rem; - font-weight: 500; - margin-top: 10px; -} -#projects .project-info p { - color: white; -} -#projects .project-img { - flex-basis: 50%; - height: 300px; - overflow: hidden; - position: relative; -} -#projects .project-img:after { - content: ''; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; - background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); - opacity: 0.7; -} -#projects .project-img img { - transition: 0.3s ease transform; -} -#projects .project-item:hover .project-img img { - transform: scale(1.1); -} - -#about .about { - flex-direction: column-reverse; - text-align: center; - max-width: 1200px; - margin: 0 auto; - padding: 100px 20px; -} -#about .col-left { - width: 250px; - height: 360px; -} -#about .col-right { - width: 100%; -} -#about .col-right h2 { - font-size: 1.8rem; - font-weight: 500; - - margin-bottom: 10px; -} -#about .col-right p { - margin-bottom: 20px; -} -#about .col-right .cta { - color: black; - margin-bottom: 50px; - padding: 10px 20px; - font-size: 2rem; -} -#about .col-left .about-img { - height: 100%; - width: 100%; - position: relative; - border: 10px solid white; -} -#about .col-left .about-img::after { - content: ''; - position: absolute; - left: -33px; - top: 19px; - height: 98%; - width: 98%; - border: 7px solid crimson; - z-index: -1; -} - -#contact .contact { - flex-direction: column; - max-width: 1200px; - margin: 0 auto; - width: 90%; -} -#contact .contact-items { - - width: 100%; -} -#contact .contact-item { - width: 80%; - padding: 20px; - text-align: center; - border-radius: 10px; - padding: 30px; - margin: 30px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - box-shadow: 0px 0px 18px 0 #0000002c; - transition: 0.3s ease box-shadow; -} -#contact .contact-item:hover { - box-shadow: 0px 0px 5px 0 #0000002c; -} -#contact .icon { - width: 70px; - margin: 0 auto; - margin-bottom: 10px; -} -#contact .contact-info h1 { - font-size: 2.5rem; - font-weight: 500; - margin-bottom: 5px; -} -#contact .contact-info h2 { - font-size: 1.3rem; - line-height: 2rem; - font-weight: 500; -} - -#footer { - background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); -} -#footer .footer { - min-height: 200px; - flex-direction: column; - padding-top: 50px; - padding-bottom: 10px; -} -#footer h2 { - color: white; - font-weight: 500; - font-size: 1.8rem; - - margin-top: 10px; - margin-bottom: 10px; -} -#footer .social-icon { - display: flex; - margin-bottom: 30px; -} -#footer .social-item { - height: 50px; - width: 50px; - margin: 0 5px; -} -#footer .social-item img { - filter: grayscale(1); - transition: 0.3s ease filter; -} -#footer .social-item:hover img { - filter: grayscale(0); -} -#footer p { - color: white; - font-size: 1.3rem; -} - -@keyframes hamburger_puls { - 0% { - opacity: 1; - transform: scale(1); - } - 100% { - opacity: 0; - transform: scale(1.4); - } -} -@keyframes text_reveal_box { - 50% { - width: 100%; - left: 0; - } - 100% { - width: 0; - left: 100%; - } -} -@keyframes text_reveal { - 100% { - color: white; - } -} -@keyframes text_reveal_name { - 100% { - color: crimson; - font-weight: 500; - } -} - -@media only screen and (min-width: 768px) { - .cta { - font-size: 2.5rem; - padding: 20px 60px; - } - h1.section-title { - font-size: 6rem; - } - - - #hero h1 { - font-size: 7rem; - } - - #services .service-bottom .service-item { - flex-basis: 45%; - margin: 2.5%; - } - - #projects .project-item { - flex-direction: row; - } - #projects .project-item:nth-child(even) { - flex-direction: row-reverse; - } - #projects .project-item { - height: 400px; - margin: 0; - width: 100%; - border-radius: 0; - } - #projects .all-projects .project-info { - height: 100%; - } - #projects .all-projects .project-img { - height: 100%; - } - - #about .about { - flex-direction: row; - } - #about .col-left { - width: 600px; - height: 400px; - padding-left: 60px; - } - #about .about .col-left .about-img::after { - left: -45px; - top: 34px; - height: 98%; - width: 98%; - border: 10px solid crimson; - } - #about .col-right { - text-align: right; - padding: 30px; - } - #about .col-right h1 { - text-align: right; - } - - #contact .contact { - flex-direction: column; - padding: 100px 0; - align-items: center; - justify-content: center; - min-width: 20vh; - } - #contact .contact-items { - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-evenly; - margin: 0; - } - #contact .contact-item { - width: 30%; - margin: 0; - flex-direction: row; - } - #contact .contact-item .icon { - height: 100px; - width: 100px; - } - #contact .contact-item .icon img { - object-fit: contain; - } - #contact .contact-item .contact-info { - width: 100%; - text-align: left; - padding-left: 20px; - } - -} - -@media only screen and (min-width: 1200px) { - - #header .hamburger { - display: none; - } - #header .nav-list ul { - position: initial; - display: block; - height: auto; - width: fit-content; - background-color: transparent; - } - #header .nav-list ul li { - display: inline-block; - } - #header .nav-list ul li a { - font-size: 1.8rem; - } - #header .nav-list ul a:after { - display: none; - } - /* End header */ - - #services .service-bottom .service-item { - flex-basis: 22%; - margin: 1.5%; - } -} - diff --git a/03-TicTacToe Game/click.mp3 b/03-TicTacToe Game/click.mp3 deleted file mode 100644 index 8e118ba..0000000 Binary files a/03-TicTacToe Game/click.mp3 and /dev/null differ diff --git a/03-TicTacToe Game/gameover.mp3 b/03-TicTacToe Game/gameover.mp3 deleted file mode 100644 index 73ef6bb..0000000 Binary files a/03-TicTacToe Game/gameover.mp3 and /dev/null differ diff --git a/03-TicTacToe Game/index.html b/03-TicTacToe Game/index.html deleted file mode 100644 index 868ff43..0000000 --- a/03-TicTacToe Game/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - TicTacToe Game - - -
نوبت بازيکن x !
- -
-
-
-
-
-
-
-
-
-
-
- -
-
- -
- - -
-
-
- - - - - - diff --git a/03-TicTacToe Game/script.js b/03-TicTacToe Game/script.js deleted file mode 100644 index 2a59990..0000000 --- a/03-TicTacToe Game/script.js +++ /dev/null @@ -1,126 +0,0 @@ -const cells = document.querySelectorAll(".cell"); -const message = document.getElementById("message"); -const overlay = document.getElementById("overlay"); -const restartBtn = document.getElementById("btn-restart"); -const quitBtn = document.getElementById("btn-quit"); -const clickAudio = document.getElementById("click"); -const gameoverAudio = document.getElementById("gameover"); -let currentTurn = "بازيکن X"; -const wins = [ - [0, 1, 2], - [3, 4, 5], - [6, 7, 8], - [0, 3, 6], - [1, 4, 7], - [2, 5, 8], - [0, 4, 8], - [2, 4, 6], -]; -let wonArr; - -cells.forEach((cell) => { - cell.addEventListener("mouseenter", hoverIn); - cell.addEventListener("mouseleave", hoverOut); - cell.addEventListener("click", action, { once: true }); -}); - -restartBtn.addEventListener("click", restart); -quitBtn.addEventListener("click", quit); - -function restart() { - message.innerText = "بازيکن X's Turn"; - overlay.classList.remove("active"); - - cells.forEach((cell) => { - cell.addEventListener("mouseenter", hoverIn); - cell.addEventListener("mouseleave", hoverOut); - cell.classList.remove("cross"); - cell.classList.remove("cross-hover"); - cell.classList.remove("circle"); - cell.classList.remove("circle-hover"); - cell.classList.remove("highlight"); - cell.removeEventListener("click", action); - cell.addEventListener("click", action, { once: true }); - cell.style.cursor = "pointer"; - }); -} - -function quit() { - window.close(); -} - -function action() { - let currentClass = currentTurn === "بازيکن X" ? "cross" : "circle"; - this.classList.remove(`${currentClass}-hover`); - this.classList.add(currentClass); - clickAudio.play(); - - if (isWinner(currentClass)) { - message.innerText = `برنده ${currentTurn} !`; - wonArr.forEach((i) => cells[i].classList.add("highlight")); - reset(); - return; - } else { - const res = Array.from(cells).every((cell) => { - return cell.classList.length === 2; - }); - if (res) { - message.innerText = `بازي برنده ندارند :)`; - cells.forEach((cell) => { - cell.classList.add("highlight"); - }); - reset(); - return; - } - } - - currentTurn === "بازيکن X" - ? (currentTurn = "بازيکن O") - : (currentTurn = "بازيکن X"); - - message.innerText = `نوبت ${currentTurn} !`; -} - -function isWinner(curClass) { - return wins.some((win) => { - const res = win.every((i) => cells[i].classList.contains(curClass)); - if (res) { - wonArr = win; - } - return res; - }); -} - -function hoverIn() { - let currentClass = currentTurn === "بازيکن X" ? "cross" : "circle"; - if (this.classList.contains("cross") || this.classList.contains("circle")) { - this.style.cursor = "not-allowed"; - } else { - this.classList.add(`${currentClass}-hover`); - } -} - -function hoverOut() { - if ( - this.classList.contains("cross-hover") || - this.classList.contains("circle-hover") - ) { - this.classList.remove("cross-hover"); - this.classList.remove("circle-hover"); - } -} - -function reset() { - cells.forEach((cell) => { - cell.removeEventListener("mouseenter", hoverIn); - cell.removeEventListener("mouseleave", hoverOut); - cell.removeEventListener("click", action); - cell.style.cursor = "not-allowed"; - }); - - gameoverAudio.play(); - - setTimeout(() => { - overlay.classList.add("active"); - }, 2000); -} diff --git a/03-TicTacToe Game/style.css b/03-TicTacToe Game/style.css deleted file mode 100644 index 1c97a77..0000000 --- a/03-TicTacToe Game/style.css +++ /dev/null @@ -1,139 +0,0 @@ -@import 'https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css'; - -*, -*::before, -*::after { - box-sizing: border-box; -} - -body { - margin: 0; - padding: 0; - font-family: Vazirmatn, sans-serif; - display: grid; - place-items: center; - min-height: 100vh; - direction: rtl; -} - - -.message { - padding: 1.75rem; - width: calc(8.4375rem * 3 + 0.75rem * 2); - background-color: lightblue; - border-radius: 0.5rem; - text-align: center; - font-size: 2.5rem; -} - - -.tictactoe-game { - display: grid; - grid-template-columns: repeat(3, 1fr); - background-color: #0a0a0a; - gap: 0.75rem; -} - -.cell { - width: 8.4375rem; - height: 8.4375rem; - background-color: #fff; - cursor: pointer; -} - - -.circle::before, -.cross::before, -.circle-hover::before, -.cross-hover::before { - content: "\274C"; - font-size: 4rem; - display: flex; - justify-content: center; - align-items: center; - height: 100%; -} - -.circle::before, -.circle-hover::before { - content: "\26AB"; -} - -.circle-hover::before, -.cross-hover::before { - opacity: 0.3; - filter: grayscale(100%); -} - - -.overlay { - max-height: 0px; - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-color: rgba(0, 0, 0, 0.8); - display: flex; - justify-content: center; - align-items: center; - font-size: 3rem; - color: #f3f3f3; - overflow: hidden; -} - -.overlay h1 { - margin-bottom: 0.5rem; - background: linear-gradient(to right, #343434, #ffffff, #111); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.btns-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1rem; -} - -.btn { - padding: 0.75rem 1rem; - border-radius: 0.5rem; - border: none; - outline: none; - color: #f3f3f3; - font-size: 1.5rem; - background-size: 200% auto; - transition: all 0.5s ease-in-out; - cursor: pointer; -} - -.btn:hover { - background-position: right; -} - -.btn-restart { - background-image: linear-gradient( - to right, - #314755 0%, - #26a0da 51%, - #314755 100% - ); -} - -.btn-quit { - background-image: linear-gradient( - to right, - #d31027 0%, - #5c0711 51%, - #ea384d 100% - ); -} - -.overlay.active { - max-height: 100vh; -} - -.highlight { - background-color: lightblue; -} diff --git a/04-auto-text-effect/index.html b/04-auto-text-effect/index.html deleted file mode 100644 index 35f06fa..0000000 --- a/04-auto-text-effect/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - Auto Text Effect - - -

- - - - - diff --git a/04-auto-text-effect/script.js b/04-auto-text-effect/script.js deleted file mode 100644 index 841252a..0000000 --- a/04-auto-text-effect/script.js +++ /dev/null @@ -1,21 +0,0 @@ -const textEl = document.getElementById('text') - -const text = 'Time is precious, waste it wisely.' -let idx = 1 -let speed = 300 - -writeText() - -function writeText() { - textEl.innerText = text.slice(0, idx) - - idx++ - - if(idx > text.length) { - idx = 1 - } - - setTimeout(writeText, speed) -} - - diff --git a/04-auto-text-effect/style.css b/04-auto-text-effect/style.css deleted file mode 100644 index 3cbb777..0000000 --- a/04-auto-text-effect/style.css +++ /dev/null @@ -1,25 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -* { - box-sizing: border-box; -} - -body { - - font-family: 'Roboto', sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -div { - position: absolute; - bottom: 20px; - background: rgba(0, 0, 0, 0.1); - padding: 10px 20px; - font-size: 18px; -} diff --git a/05-sidebar/06-sidebar nav/app.js b/05-sidebar/06-sidebar nav/app.js deleted file mode 100644 index 5c49b54..0000000 --- a/05-sidebar/06-sidebar nav/app.js +++ /dev/null @@ -1,17 +0,0 @@ -const getElement = (selector) => { - const el = document.querySelector(selector) - if (el) return el - throw new Error(`Please check your classes : ${selector} does not exist`) -} - -const sidebarToggle = getElement('.sidebar-toggle') -const sidebar = getElement('.sidebar') -const closeBtn = getElement('.close-btn') - -sidebarToggle.addEventListener('click', function () { - sidebar.classList.toggle('show-sidebar') -}) - -closeBtn.addEventListener('click', () => { - sidebar.classList.remove('show-sidebar') -}) diff --git a/05-sidebar/06-sidebar nav/index.html b/05-sidebar/06-sidebar nav/index.html deleted file mode 100644 index 6ab1b12..0000000 --- a/05-sidebar/06-sidebar nav/index.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - sidebar nav - - - - - - - - - - - - - - diff --git a/05-sidebar/06-sidebar nav/logo.svg b/05-sidebar/06-sidebar nav/logo.svg deleted file mode 100644 index 96dc429..0000000 --- a/05-sidebar/06-sidebar nav/logo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/05-sidebar/06-sidebar nav/main.css b/05-sidebar/06-sidebar nav/main.css deleted file mode 100644 index 9a37f27..0000000 --- a/05-sidebar/06-sidebar nav/main.css +++ /dev/null @@ -1,211 +0,0 @@ -*, -::after, -::before { - box-sizing: border-box; -} -/* fonts */ - -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap'); -html { - font-size: 100%; -} - - -body { - background: #fff; - font-family: 'Nunito', sans-serif; - font-weight: 400; - line-height: 1.75; - -} - -p { - margin-bottom: 1.5rem; - max-width: 40em; -} - -h1, -h2, -h3, -h4, -h5 { - margin: 0; - margin-bottom: 1.38rem; - - font-weight: 400; - line-height: 1.3; - text-transform: capitalize; - -} - -h1 { - margin-top: 0; - font-size: 3.052rem; -} - -h2 { - font-size: 2.441rem; -} - -h3 { - font-size: 1.953rem; -} - -h4 { - font-size: 1.563rem; -} - -h5 { - font-size: 1.25rem; -} - -a { - text-decoration: none; -} -ul { - list-style-type: none; - padding: 0; -} - -.img { - width: 100%; - display: block; - object-fit: cover; -} -/* buttons */ - -.btn { - cursor: pointer; - color: #fff; - background: #ee384e; - border: transparent; - border-radius:2px; - - padding: 0.375rem 0.75rem; - - text-transform: capitalize; - display: inline-block; -} -.btn:hover { - background: #ee384e; -} - -.btn-block { - width: 100%; -} - - -/* -=============== -Sidebar -=============== -*/ - -.sidebar-toggle { - position: fixed; - top: 2rem; - right: 3rem; - font-size: 2rem; - background: transparent; - border-color: transparent; - color: #ee384e; - transition: 0.3s ease-in-out all;; - cursor: pointer; - animation: bounce 2s ease-in-out infinite; -} - -.sidebar-toggle:hover { - color: #ee384e; -} - -@keyframes bounce { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.5); - } - 100% { - transform: scale(1); - } -} - -/* sidebar */ -.sidebar { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #fff; - display: grid; - grid-template-rows: auto 1fr auto; - row-gap: 1rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06);; - transition: 0.3s ease-in-out all; - transform: translate(-100%); -} -.show-sidebar { - transform: translate(0); -} -/* todo show sidebar */ - -@media screen and (min-width: 676px) { - .sidebar { - width: 400px; - } -} - -.sidebar-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 1.5rem; -} -.close-btn { - font-size: 1.75rem; - background: transparent; - border-color: transparent; - color: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06);; - transition: 0.3s ease-in-out all;; - cursor: pointer; -} -.close-btn:hover { - transform: rotate(360deg); -} -.logo { - height: 40px; -} -.links a { - display: block; - font-size: 1.5rem; - text-transform: capitalize; - padding: 1rem 1.5rem; - color: #000000; - transition: 0.3s ease-in-out all;; -} - -.links a:hover { - background:#fca6b0; - color: #a80303; - padding-left: 1.75rem; -} - -.social-icons { - display: flex; - padding-bottom: 2rem; - justify-content: center; - gap: 0 1rem; -} -.social-icons a { - font-size: 1.5rem; - /* margin: 0 0.5rem; */ - color: #790202; - transition: 0.3s ease-in-out all;; -} - -.social-icons a:hover { - color: #ff0303; -} diff --git a/06-double-vertical-slider/index.html b/06-double-vertical-slider/index.html deleted file mode 100644 index f8906ba..0000000 --- a/06-double-vertical-slider/index.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - double-vertical-slider - - -
-
-
-

Nature flower

-

all in pink

-
-
-

Bluuue Sky

-

with it's mountains

-
-
-

Lonely castle

-

in the wilderness

-
-
-

Flying eagle

-

in the sunset

-
-
-
-
-
-
-
-
-
- - -
-
- - - - diff --git a/06-double-vertical-slider/script.js b/06-double-vertical-slider/script.js deleted file mode 100644 index 996730f..0000000 --- a/06-double-vertical-slider/script.js +++ /dev/null @@ -1,31 +0,0 @@ -const sliderContainer = document.querySelector('.slider-container') -const slideRight = document.querySelector('.right-slide') -const slideLeft = document.querySelector('.left-slide') -const upButton = document.querySelector('.up-button') -const downButton = document.querySelector('.down-button') -const slidesLength = slideRight.querySelectorAll('div').length - -let activeSlideIndex = 0 - -slideLeft.style.top = `-${(slidesLength - 1) * 100}vh` - -upButton.addEventListener('click', () => changeSlide('up')) -downButton.addEventListener('click', () => changeSlide('down')) - -const changeSlide = (direction) => { - const sliderHeight = sliderContainer.clientHeight - if(direction === 'up') { - activeSlideIndex++ - if(activeSlideIndex > slidesLength - 1) { - activeSlideIndex = 0 - } - } else if(direction === 'down') { - activeSlideIndex-- - if(activeSlideIndex < 0) { - activeSlideIndex = slidesLength - 1 - } - } - - slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)` - slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)` -} \ No newline at end of file diff --git a/06-double-vertical-slider/style.css b/06-double-vertical-slider/style.css deleted file mode 100644 index 709c11d..0000000 --- a/06-double-vertical-slider/style.css +++ /dev/null @@ -1,97 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Open+Sans'); - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -body { - font-family: 'Open Sans', sans-serif; - height: 100vh; -} - -.slider-container { - position: relative; - overflow: hidden; - width: 100vw; - height: 100vh; -} - -.left-slide { - height: 100%; - width: 35%; - position: absolute; - top: 0; - left: 0; - transition: transform 0.5s ease-in-out; -} - -.left-slide > div { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: #fff; -} - -.left-slide h1 { - font-size: 40px; - margin-bottom: 10px; - margin-top: -30px; -} - -.right-slide { - height: 100%; - position: absolute; - top: 0; - left: 35%; - width: 65%; - transition: transform 0.5s ease-in-out; -} - -.right-slide > div { - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - height: 100%; - width: 100%; -} - -button { - background-color: #fff; - border: none; - color: #aaa; - cursor: pointer; - font-size: 16px; - padding: 15px; -} - -button:hover { - color: #222; -} - -button:focus { - outline: none; -} - -.slider-container .action-buttons button { - position: absolute; - left: 35%; - top: 50%; - z-index: 100; -} - -.slider-container .action-buttons .down-button { - transform: translateX(-100%); - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} - -.slider-container .action-buttons .up-button { - transform: translateY(-100%); - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; -} diff --git a/07-event-keycodes/index.html b/07-event-keycodes/index.html deleted file mode 100644 index a6b9ad0..0000000 --- a/07-event-keycodes/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - Event KeyCodes - - -
-
- Press any key to get the keyCode -
-
- - - diff --git a/07-event-keycodes/script.js b/07-event-keycodes/script.js deleted file mode 100644 index 68dab4d..0000000 --- a/07-event-keycodes/script.js +++ /dev/null @@ -1,20 +0,0 @@ -const insert = document.getElementById('insert') - -window.addEventListener('keydown', (event) => { - insert.innerHTML = ` -
- ${event.key === ' ' ? 'Space' : event.key} - event.key -
- -
- ${event.keyCode} - event.keyCode -
- -
- ${event.code} - event.code -
- ` -}) \ No newline at end of file diff --git a/07-event-keycodes/style.css b/07-event-keycodes/style.css deleted file mode 100644 index e597872..0000000 --- a/07-event-keycodes/style.css +++ /dev/null @@ -1,48 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #e1e1e1; - font-family: 'Muli', sans-serif; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.key { - border: 1px solid #999; - background-color: #eee; - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); - display: inline-flex; - align-items: center; - font-size: 20px; - font-weight: bold; - padding: 20px; - flex-direction: column; - margin: 10px; - min-width: 150px; - position: relative; -} - -.key small { - position: absolute; - top: -24px; - left: 0; - text-align: center; - width: 100%; - color: #555; - font-size: 14px; -} - -@media(max-width:768px){ - .key{ - margin: 10px 0px; - } -} diff --git a/08-final/app.js b/08-final/app.js deleted file mode 100644 index 28714c8..0000000 --- a/08-final/app.js +++ /dev/null @@ -1,12 +0,0 @@ -const getElement = (selector) => { - const el = document.querySelector(selector) - if (el) return el - throw new Error(`Please check your classes : ${selector} does not exist`) -} - -const navToggle = getElement('.nav-toggle') -const links = getElement('.links') - -navToggle.addEventListener('click', function () { - links.classList.toggle('show-links') -}) diff --git a/08-final/index.html b/08-final/index.html deleted file mode 100644 index 973d0b0..0000000 --- a/08-final/index.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - - Navbar || Final - - - - - - - - - - - - diff --git a/08-final/main.css b/08-final/main.css deleted file mode 100644 index dbd04a8..0000000 --- a/08-final/main.css +++ /dev/null @@ -1,356 +0,0 @@ -*, -::after, -::before { - box-sizing: border-box; -} -/* fonts */ - -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap'); -html { - font-size: 100%; -} - -:root { - - --ion-color-primary: #eb445a; - --ion-color-primary-rgb: 235,68,90; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #cf3c4f; - --ion-color-primary-tint: #ed576b; - - --primary-100: #fac6cd; - --primary-200: #ffc1c9; - --primary-300: #ffa0ad; - --primary-400: #fa596e; - --primary-500: #f75167; - --primary-600: #d63b4f; - --primary-700: #e92f48; - --primary-800: #e21934; - --primary-900: #d40621; - --grey-50: #f8fafc; - --grey-100: #f1f5f9; - --grey-200: #e2e8f0; - --grey-300: #cbd5e1; - --grey-400: #94a3b8; - --grey-500: #64748b; - --grey-600: #475569; - --grey-700: #334155; - --grey-800: #1e293b; - --grey-900: #0f172a; - --black: #222; - --white: #fff; - --red-light: #f8d7da; - --red-dark: #842029; - --green-light: #d1e7dd; - --green-dark: #0f5132; - - --headingFont: 'Roboto', sans-serif; - --bodyFont: 'Nunito', sans-serif; - --smallText: 0.7em; - - --backgroundColor: var(--grey-50); - --textColor: var(--grey-900); - --borderRadius: 0.25rem; - --letterSpacing: 1px; - --transition: 0.3s ease-in-out all; - --max-width: 1120px; - --fixed-width: 600px; - - - --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); - --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); - --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), - 0 10px 10px -5px rgba(0, 0, 0, 0.04); -} - -body { - background: var(--backgroundColor); - font-family: var(--bodyFont); - font-weight: 400; - line-height: 1.75; - color: var(--textColor); -} - -p { - margin-bottom: 1.5rem; - max-width: 40em; -} - -h1, -h2, -h3, -h4, -h5 { - margin: 0; - margin-bottom: 1.38rem; - font-family: var(--headingFont); - font-weight: 400; - line-height: 1.3; - text-transform: capitalize; - letter-spacing: var(--letterSpacing); -} - -h1 { - margin-top: 0; - font-size: 3.052rem; -} - -h2 { - font-size: 2.441rem; -} - -h3 { - font-size: 1.953rem; -} - -h4 { - font-size: 1.563rem; -} - -h5 { - font-size: 1.25rem; -} - -small, -.text-small { - font-size: var(--smallText); -} - -a { - text-decoration: none; -} -ul { - list-style-type: none; - padding: 0; -} - -.img { - width: 100%; - display: block; - object-fit: cover; -} -/* buttons */ - -.btn { - cursor: pointer; - color: var(--white); - background: var(--primary-500); - border: transparent; - border-radius: var(--borderRadius); - letter-spacing: var(--letterSpacing); - padding: 0.375rem 0.75rem; - box-shadow: var(--shadow-1); - transition: var(--transition); - text-transform: capitalize; - display: inline-block; -} -.btn:hover { - background: var(--primary-700); - box-shadow: var(--shadow-3); -} -.btn-hipster { - color: var(--primary-500); - background: var(--primary-200); -} -.btn-hipster:hover { - color: var(--primary-200); - background: var(--primary-700); -} -.btn-block { - width: 100%; -} - -/* alerts */ -.alert { - padding: 0.375rem 0.75rem; - margin-bottom: 1rem; - border-color: transparent; - border-radius: var(--borderRadius); -} - -.alert-danger { - color: var(--red-dark); - background: var(--red-light); -} -.alert-success { - color: var(--green-dark); - background: var(--green-light); -} -/* form */ - -.form { - width: 90vw; - max-width: var(--fixed-width); - background: var(--white); - border-radius: var(--borderRadius); - box-shadow: var(--shadow-2); - padding: 2rem 2.5rem; - margin: 3rem auto; -} -.form-label { - display: block; - font-size: var(--smallText); - margin-bottom: 0.5rem; - text-transform: capitalize; - letter-spacing: var(--letterSpacing); -} -.form-input, -.form-textarea { - width: 100%; - padding: 0.375rem 0.75rem; - border-radius: var(--borderRadius); - background: var(--backgroundColor); - border: 1px solid var(--grey-200); -} - -.form-row { - margin-bottom: 1rem; -} - -.form-textarea { - height: 7rem; -} -::placeholder { - font-family: inherit; - color: var(--grey-400); -} -.form-alert { - color: var(--red-dark); - letter-spacing: var(--letterSpacing); - text-transform: capitalize; -} -/* alert */ - -@keyframes spinner { - to { - transform: rotate(360deg); - } -} - -.loading { - width: 6rem; - height: 6rem; - border: 5px solid var(--grey-400); - border-radius: 50%; - border-top-color: var(--primary-500); - animation: spinner 0.6s linear infinite; -} -.loading { - margin: 0 auto; -} -/* title */ - -.title { - text-align: center; -} - -.title-underline { - background: var(--primary-500); - width: 7rem; - height: 0.25rem; - margin: 0 auto; - margin-top: -1rem; -} - -nav { - background: var(--white); - box-shadow: var(--shadow-2); - line-height: 1; -} -.nav-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem; -} -.nav-toggle { - font-size: 1.5rem; - color: var(--primary-500); - background: transparent; - border-color: transparent; - transition: var(--transition); - cursor: pointer; -} -.nav-toggle:hover { - transform: rotate(90deg); -} -.logo { - margin-bottom: 0; - font-weight: 700; -} -.logo span { - color: var(--primary-500); -} -.social-icons { - display: none; -} -.links a { - color: var(--grey-700); - font-size: 1rem; - text-transform: capitalize; - letter-spacing: var(--letterSpacing); - display: block; - padding: 0.75rem 1rem; - transition: var(--transition); -} -.links a:hover { - background: var(--primary-300); - color: var(--primary-500); - padding-left: 1.5rem; -} - -.links { - margin: 0; - height: 0; - overflow: hidden; - transition: var(--transition); - -} - -.show-links { - height: 10rem; -} - -@media screen and (min-width: 800px) { - .nav-toggle { - display: none; - } - .nav-center { - max-width: var(--max-width); - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem; - } - .nav-header { - padding: 0; - } - .links { - height: auto; - display: flex; - } - .links a { - padding: 0; - margin: 0 0.5rem; - } - .links a:hover { - padding: 0; - background: transparent; - } - .social-icons { - display: flex; - } - .social-icons a { - margin: 0 0.5rem; - color: var(--primary-500); - transition: var(--transition); - } - .social-icons a:hover { - color: var(--primary-300); - } -} diff --git a/08-final/normalize.css b/08-final/normalize.css deleted file mode 100644 index 2768db4..0000000 --- a/08-final/normalize.css +++ /dev/null @@ -1,351 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { - /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { - /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type='button']:-moz-focusring, -[type='reset']:-moz-focusring, -[type='submit']:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type='checkbox'], -[type='radio'] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/09-notes-app/index.html b/09-notes-app/index.html deleted file mode 100644 index 1849bcf..0000000 --- a/09-notes-app/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - Notes App - - - - - - - - diff --git a/09-notes-app/script.js b/09-notes-app/script.js deleted file mode 100644 index 399ab0f..0000000 --- a/09-notes-app/script.js +++ /dev/null @@ -1,63 +0,0 @@ -const addBtn = document.getElementById('add') - -const notes = JSON.parse(localStorage.getItem('notes')) - -if(notes) { - notes.forEach(note => addNewNote(note)) -} - -addBtn.addEventListener('click', () => addNewNote()) - -function addNewNote(text = '') { - const note = document.createElement('div') - note.classList.add('note') - - note.innerHTML = ` -
- - -
- -
- - ` - - const editBtn = note.querySelector('.edit') - const deleteBtn = note.querySelector('.delete') - const main = note.querySelector('.main') - const textArea = note.querySelector('textarea') - - textArea.value = text - main.innerHTML = marked(text) - - deleteBtn.addEventListener('click', () => { - note.remove() - - updateLS() - }) - - editBtn.addEventListener('click', () => { - main.classList.toggle('hidden') - textArea.classList.toggle('hidden') - }) - - textArea.addEventListener('input', (e) => { - const { value } = e.target - - main.innerHTML = marked(value) - - updateLS() - }) - - document.body.appendChild(note) -} - -function updateLS() { - const notesText = document.querySelectorAll('textarea') - - const notes = [] - - notesText.forEach(note => notes.push(note.value)) - - localStorage.setItem('notes', JSON.stringify(notes)) -} \ No newline at end of file diff --git a/09-notes-app/style.css b/09-notes-app/style.css deleted file mode 100644 index 4fc2258..0000000 --- a/09-notes-app/style.css +++ /dev/null @@ -1,76 +0,0 @@ -@import 'https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css'; - - -* { - box-sizing: border-box; - outline: none; -} - -body { - background-color: #e7e7e7; - font-family: Vazirmatn, sans-serif; - display: flex; - flex-wrap: wrap; - margin: 0; - padding-top: 3rem; - direction: rtl; -} - -.add { - position: fixed; - top: 1rem; - right: 1rem; - background-color: #628ec8; - color: #fff; - border: none; - border-radius: 3px; - padding: 0.5rem 1rem; - cursor: pointer; -} - -.add:active { - transform: scale(0.98); -} - -.note { - background-color: #fff; - box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); - margin: 30px 20px; - height: 400px; - width: 400px; - overflow-y: scroll; -} - -.note .tools { - background-color: #628ec8; - display: flex; - justify-content: flex-end; - padding: 0.5rem; -} - -.note .tools button { - background-color: transparent; - border: none; - color: #fff; - cursor: pointer; - font-size: 1rem; - margin-left: 0.5rem; -} - -.note textarea { - outline: none; - font-family: inherit; - font-size: 1.2rem; - border: none; - height: 400px; - width: 100%; - padding: 20px; -} - -.main { - padding: 20px; -} - -.hidden { - display: none; -} diff --git a/10-Product-image-slider/imgs/iphone13-01.jpg b/10-Product-image-slider/imgs/iphone13-01.jpg deleted file mode 100644 index d8ec22c..0000000 Binary files a/10-Product-image-slider/imgs/iphone13-01.jpg and /dev/null differ diff --git a/10-Product-image-slider/imgs/iphone13-02.jpg b/10-Product-image-slider/imgs/iphone13-02.jpg deleted file mode 100644 index 12f37ae..0000000 Binary files a/10-Product-image-slider/imgs/iphone13-02.jpg and /dev/null differ diff --git a/10-Product-image-slider/imgs/iphone13-03.jpg b/10-Product-image-slider/imgs/iphone13-03.jpg deleted file mode 100644 index a84ea0b..0000000 Binary files a/10-Product-image-slider/imgs/iphone13-03.jpg and /dev/null differ diff --git a/10-Product-image-slider/index.html b/10-Product-image-slider/index.html deleted file mode 100644 index ea89a47..0000000 --- a/10-Product-image-slider/index.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - Product image slider - - -
-
-
- - -
-
- iphone13-green -
-
- iphone13-starlight -
-
- iphone13-pink -
-
-
-
- -
-
-
- iphone13-green -
-
- iphone13-starlight -
-
- iphone13-pink -
-
-
- -
- - - - diff --git a/10-Product-image-slider/site.js b/10-Product-image-slider/site.js deleted file mode 100644 index 99448cf..0000000 --- a/10-Product-image-slider/site.js +++ /dev/null @@ -1,76 +0,0 @@ -const slidesContainer = document.querySelector(".slides-container"); -const slides = document.querySelectorAll(".slide"); -const nextBtn = document.querySelector("#nextBtn"); -const prevBtn = document.querySelector("#prevBtn"); -const items = document.querySelectorAll(".item"); - -const slideWidth = slides[0].clientWidth; -let index = 0; - -slidesContainer.insertAdjacentHTML( - "afterbegin", - slides[slides.length - 1].outerHTML -); -slidesContainer.insertAdjacentHTML("beforeend", slides[0].outerHTML); - -slidesContainer.style.transform = `translateX(${-slideWidth}px)`; - -nextBtn.addEventListener("click", () => { - slidesContainer.style.transition = "all 0.3s ease-in-out"; - index++; - slidesContainer.style.transform = `translateX(${ - -slideWidth * (index + 1) - }px)`; - - items.forEach((item) => item.classList.remove("active")); - - if (index > slides.length - 1) { - setTimeout(() => { - index = 0; - slidesContainer.style.transform = `translateX(${-slideWidth}px)`; - items[index].classList.add("active"); - slidesContainer.style.transition = "none"; - }, 300); - } else { - items[index].classList.add("active"); - } -}); - -prevBtn.addEventListener("click", () => { - slidesContainer.style.transition = "all 0.3s ease-in-out"; - - index--; - slidesContainer.style.transform = `translateX(${ - -slideWidth * (index + 1) - }px)`; - - items.forEach((item) => item.classList.remove("active")); - - if (index < 0) { - setTimeout(() => { - index = slides.length - 1; - slidesContainer.style.transform = `translateX(${ - -slideWidth * (index + 1) - }px)`; - items[index].classList.add("active"); - slidesContainer.style.transition = "none"; - }, 300); - } else { - items[index].classList.add("active"); - } -}); - -items.forEach((item, i) => { - slidesContainer.style.transition = "all 0.3s ease-in-out"; - - item.addEventListener("click", () => { - items.forEach((item) => item.classList.remove("active")); - index = i; - item.classList.add("active"); - slidesContainer.style.transition = "all 0.3s ease-in-out"; - - slidesContainer.style.transform = `translateX(${ - -slideWidth * (index + 1) - }px)`; - }); -}); diff --git a/10-Product-image-slider/style.css b/10-Product-image-slider/style.css deleted file mode 100644 index cd1a0be..0000000 --- a/10-Product-image-slider/style.css +++ /dev/null @@ -1,73 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - margin: 0; - padding: 0; - display: grid; - place-items: center; - height: 100vh; -} - -.row { - display: flex; -} - -.col-2 { - width: 16.6%; -} - -.col-10 { - width: 84.4%; -} - -.item { - border: 2px solid #808080; - margin: 0.5rem; - border-radius: 3px; - cursor: pointer; -} - -.item.active { - border: 2px solid #343434; -} - -.item img { - width: 80px; - height: 80px; -} - -.carousel { - position: relative; - margin: 0 auto; - overflow: hidden; -} - -.slides-container { - display: flex; - width: 579px; - height: 579px; -} - -#nextBtn, -#prevBtn { - position: absolute; - top: 50%; - padding: 0.5rem; - background-color: transparent; - border: none; - outline: none; - font-size: 1.5rem; - cursor: pointer; - z-index: 1; -} - -#nextBtn { - right: 0; -} - -.slide img { - width: 579px; - height: 579px; -} diff --git a/README.md b/README.md new file mode 100644 index 0000000..92726ef --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# html-css-javascript-practice-project \ No newline at end of file diff --git a/html-css-javascript-practice-project b/html-css-javascript-practice-project deleted file mode 160000 index 67b7392..0000000 --- a/html-css-javascript-practice-project +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 67b7392b8e8280f0e7b847bf9f585a4c9d3c9915