├── Animated tab
├── README.md
├── Tab.png
├── data.mkd
├── images
│ ├── app development.png
│ ├── ux-ui.jpg
│ ├── web design.jpg
│ └── web-development.jpg
├── index.html
├── script.js
└── style.css
├── Back to top button
├── Back-to-Top.png
├── README.md
├── data.md
├── index.html
└── style.css
├── New Year Countdown Timer
├── README.md
├── data.mkd
├── index.html
├── script.js
├── style.css
└── thumbnail.png
├── Portfolio-website-hero
├── README.md
├── data.md
├── first-look.png
├── images
│ ├── logo.png
│ └── profile-img.png
├── index.html
├── script.js
└── style.css
├── Project Filter
├── README.md
├── data.md
├── image
│ ├── app-01.png
│ ├── app-02.png
│ ├── app-03.png
│ ├── game-01.png
│ ├── game-02.png
│ ├── game-03.png
│ ├── software-01.png
│ ├── software-02.png
│ ├── software-03.png
│ ├── website-01.png
│ ├── website-02.png
│ └── website-03.png
├── index.html
├── project-filter.png
├── script.js
└── style.css
├── README.md
├── Web font
├── README.md
├── data.md
├── index.html
└── thumbnail.png
├── btn ripple effect
├── Btn-Ripple-effect.png
├── README.md
├── index.html
└── style.css
├── button effect playlist
└── button sliding effect in css
│ ├── README.md
│ ├── data.md
│ ├── index.html
│ ├── style.css
│ └── thumbnail.png
├── custom-select-option
├── README.md
├── data.md
├── index.html
├── script.js
├── style.css
└── thumbnail.png
├── gaphic design
└── business card
│ ├── README.md
│ └── thumbnail.png
├── intreactive-nav-links-hover-effect
├── README.md
├── data.mkd
├── index.html
├── logo.png
├── nav-links-hover-effect.png
├── script.js
└── style.css
├── light and dark mode
├── README.md
├── code.png
├── data.md
├── index.html
├── logo-white.png
├── script.js
├── style.css
└── tutorial.svg
├── password show & hide
├── README.md
├── index.html
├── style.css
└── thumbnail.png
├── product image gallery
├── README.md
├── images
│ ├── shoe-01.png
│ ├── shoe-02.png
│ ├── shoe-03.png
│ └── shoe-04.png
├── index.html
├── script.js
├── style.css
└── thumbnail.png
├── rest-api
├── .env
├── README.md
├── index.js
├── package.json
└── thumbnail.png
├── sass-setup
├── README.md
├── css
│ ├── compress.css
│ └── style.css
├── package.json
├── sass
│ ├── _mixins.scss
│ └── style.scss
└── thumbnail.png
├── short
└── leaflate
│ └── index.html
├── web components
├── React-Swiper-Slider-3D-Coverflow
│ ├── README.md
│ ├── final
│ │ ├── index.html
│ │ ├── package-lock.json
│ │ ├── package.json
│ │ ├── public
│ │ │ └── vite.svg
│ │ ├── src
│ │ │ ├── App.jsx
│ │ │ ├── assets
│ │ │ │ └── images
│ │ │ │ │ ├── img_1.jpg
│ │ │ │ │ ├── img_2.jpg
│ │ │ │ │ ├── img_3.jpg
│ │ │ │ │ ├── img_4.jpg
│ │ │ │ │ ├── img_5.jpg
│ │ │ │ │ ├── img_6.jpg
│ │ │ │ │ └── img_7.jpg
│ │ │ ├── index.css
│ │ │ └── main.jsx
│ │ └── vite.config.js
│ ├── starter
│ │ └── 3d-slider
│ │ │ ├── .gitignore
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── public
│ │ │ └── vite.svg
│ │ │ ├── src
│ │ │ ├── App.css
│ │ │ ├── App.jsx
│ │ │ ├── assets
│ │ │ │ ├── images
│ │ │ │ │ ├── img_1.jpg
│ │ │ │ │ ├── img_2.jpg
│ │ │ │ │ ├── img_3.jpg
│ │ │ │ │ ├── img_4.jpg
│ │ │ │ │ ├── img_5.jpg
│ │ │ │ │ ├── img_6.jpg
│ │ │ │ │ └── img_7.jpg
│ │ │ │ └── react.svg
│ │ │ ├── index.css
│ │ │ └── main.jsx
│ │ │ └── vite.config.js
│ └── thumbnail.png
├── Sass-sidebar
│ ├── README.md
│ ├── images
│ │ ├── arrow.svg
│ │ ├── bg.png
│ │ ├── icon-1.svg
│ │ ├── icon-2.svg
│ │ ├── icon-3.svg
│ │ ├── icon-4.svg
│ │ ├── icon-5.svg
│ │ ├── icon-6.svg
│ │ ├── icon-7.svg
│ │ ├── icon-8.svg
│ │ ├── icon-calendar.svg
│ │ ├── icon-cloud.svg
│ │ ├── icon-code-working.svg
│ │ ├── icon-design.svg
│ │ ├── icon-toggle.svg
│ │ ├── profile.svg
│ │ └── settings.svg
│ ├── index.html
│ ├── script.js
│ ├── starter.md
│ ├── style.css
│ └── thumbnail.jpg
├── Swiper-Slider-3D-Coverflow
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── tranding-food-1.png
│ │ ├── tranding-food-2.png
│ │ ├── tranding-food-3.png
│ │ ├── tranding-food-4.png
│ │ ├── tranding-food-5.png
│ │ ├── tranding-food-6.png
│ │ └── tranding-food-7.png
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── black-to-color-image
│ ├── README.md
│ ├── images
│ │ ├── company-1.png
│ │ ├── company-2.png
│ │ ├── company-3.png
│ │ ├── company-4.png
│ │ └── company-5.png
│ ├── index.html
│ ├── style.css
│ └── thumbnail.png
├── chart-js-for-data-visualization
│ ├── README.md
│ ├── data
│ │ └── Totals.csv
│ ├── index.html
│ ├── resources.md
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── chart-only-js
│ ├── README.md
│ ├── index.html
│ ├── resource.md
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── ecommerce-api-fetch
│ ├── README.md
│ ├── index.html
│ ├── part02
│ │ ├── index.html
│ │ ├── resource.md
│ │ ├── script.js
│ │ └── style.css
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── features section
│ └── one
│ │ ├── README.md
│ │ ├── feature section design.fig
│ │ ├── images
│ │ ├── arrow-2.svg
│ │ ├── arrow.svg
│ │ ├── icon-1.svg
│ │ ├── icon-2.svg
│ │ └── section-img.png
│ │ ├── index.html
│ │ ├── style.css
│ │ └── thumbnail.png
├── grid-view list-view
│ ├── README.md
│ ├── images
│ │ ├── product-1.jpg
│ │ ├── product-2.jpg
│ │ ├── product-3.jpg
│ │ ├── product-4.jpg
│ │ ├── product-5.jpg
│ │ └── product-6.jpg
│ ├── index.html
│ ├── product.json
│ ├── resource.md
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── hamburger-icon
│ ├── README.md
│ ├── data.md
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── light&dark-toggle-icon
│ ├── README.md
│ ├── data.md
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── members-status
│ ├── README.md
│ ├── images
│ │ ├── profile-1.svg
│ │ ├── profile-2.svg
│ │ └── profile-3.svg
│ ├── index.html
│ ├── style.css
│ └── thumbnail.png
├── mixitup-product-filter
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── car-01.png
│ │ ├── car-02.png
│ │ ├── car-03.png
│ │ ├── car-04.png
│ │ ├── car-05.png
│ │ ├── car-06.png
│ │ ├── car-07.png
│ │ ├── car-08.png
│ │ └── car-09.png
│ ├── index.html
│ ├── mixitup.min.js
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── modern-skills-section
│ ├── README.md
│ ├── app-development.png
│ ├── data.md
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── multi-range-slider
│ ├── README.md
│ ├── data.md
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── nft-card
│ ├── README.md
│ ├── images
│ │ ├── bid-icon.png
│ │ ├── card-img-1.jpg
│ │ ├── card-img-2.jpg
│ │ ├── ethereum.svg
│ │ └── profile.svg
│ ├── index.html
│ ├── style.css
│ └── thumbnail.png
├── popup-modal
│ ├── README.md
│ ├── data.md
│ ├── image.svg
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── post-card
│ ├── README.md
│ ├── images
│ │ ├── avatar.png
│ │ ├── icon-1.svg
│ │ ├── icon-2.svg
│ │ ├── icon-3.svg
│ │ ├── icon-4.svg
│ │ ├── icon-5.svg
│ │ ├── post-image.png
│ │ ├── viewer-1.png
│ │ ├── viewer-2.png
│ │ ├── viewer-3.png
│ │ └── viewer-4.png
│ ├── index.html
│ ├── style.css
│ └── thumbnail.png
├── pricing-table
│ ├── README.md
│ ├── images
│ │ └── overlay.png
│ ├── index.html
│ ├── starter.md
│ ├── style.css
│ └── thumbnail.png
├── product-card
│ ├── Image.png
│ ├── README.md
│ ├── data.md
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── product-filter-using-mixitup
│ ├── README.md
│ ├── images
│ │ ├── shoe-1.jpeg
│ │ ├── shoe-2.jpeg
│ │ ├── shoe-3.jpeg
│ │ ├── shoe-4.jpeg
│ │ ├── shoe-5.jpeg
│ │ ├── shoe-6.jpeg
│ │ └── shoe-7.jpeg
│ ├── index.html
│ ├── mixitup.min.js
│ ├── resources.md
│ ├── style.css
│ └── thumbnail.png
├── reactjs-basic-form-handling
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src
│ │ ├── App.jsx
│ │ ├── images
│ │ │ └── bg.jpg
│ │ ├── index.css
│ │ └── index.jsx
│ └── thumbnail.png
├── reactjs-navigation-bar
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── images
│ │ │ ├── favicon.png
│ │ │ └── logo.png
│ │ ├── index.html
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src
│ │ ├── App.jsx
│ │ ├── components
│ │ │ └── Navigation.jsx
│ │ ├── index.css
│ │ ├── index.jsx
│ │ └── pages
│ │ │ ├── About.jsx
│ │ │ ├── Contact.jsx
│ │ │ ├── Home.jsx
│ │ │ └── Portfolio.jsx
│ └── thumbnail.png
├── responsive-mega-menu
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── arrow.svg
│ │ ├── icon-1.svg
│ │ ├── icon-10.svg
│ │ ├── icon-11.svg
│ │ ├── icon-12.svg
│ │ ├── icon-13.svg
│ │ ├── icon-14.svg
│ │ ├── icon-15.svg
│ │ ├── icon-16.svg
│ │ ├── icon-2.svg
│ │ ├── icon-3.svg
│ │ ├── icon-4.svg
│ │ ├── icon-5.svg
│ │ ├── icon-6.svg
│ │ ├── icon-7.svg
│ │ ├── icon-8.svg
│ │ ├── icon-9.svg
│ │ └── logo.svg
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── scroll-to-animate-counter
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── app-design.png
│ │ ├── ux-design.png
│ │ ├── web-design.png
│ │ └── web-development.png
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── section design
│ └── part 01
│ │ ├── Design file.fig
│ │ ├── README.md
│ │ ├── images
│ │ ├── arrow.svg
│ │ ├── icon-1.svg
│ │ ├── icon-2.svg
│ │ ├── icon-3.svg
│ │ ├── logo.svg
│ │ └── main-image.png
│ │ ├── index.html
│ │ ├── style.css
│ │ └── thumbnail.png
├── sequence_animation_gsap
│ ├── Intro.mp4
│ ├── README.md
│ ├── starter.md
│ ├── thumbnail.png
│ └── video-to-image.txt
├── sidebar
│ ├── README.md
│ ├── css
│ │ └── style.css
│ ├── data.md
│ ├── images
│ │ ├── create-team.svg
│ │ ├── icon-01.svg
│ │ ├── icon-02.svg
│ │ ├── icon-03.svg
│ │ ├── icon-04.svg
│ │ ├── icon-05.svg
│ │ ├── icon-dot.svg
│ │ ├── logo-icon.svg
│ │ └── profile.svg
│ ├── index.html
│ ├── package.json
│ ├── sass
│ │ ├── _layout.scss
│ │ ├── _mixins.scss
│ │ ├── _reset.scss
│ │ ├── _variables.scss
│ │ └── style.scss
│ ├── script.js
│ └── thumbnail.png
├── signin
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── google.svg
│ │ ├── logo.svg
│ │ └── main-image.svg
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── slider
│ ├── image-slider-part-1
│ │ ├── README.md
│ │ ├── data.md
│ │ ├── images
│ │ │ ├── slide-1.jpg
│ │ │ ├── slide-2.jpg
│ │ │ ├── slide-3.jpg
│ │ │ └── slide-4.jpg
│ │ ├── index.html
│ │ ├── script.js
│ │ ├── style.css
│ │ └── thumbnail.jpg
│ ├── image-slider-part-2
│ │ ├── README.md
│ │ ├── data.md
│ │ ├── images
│ │ │ ├── slide-1.jpg
│ │ │ ├── slide-2.jpg
│ │ │ ├── slide-3.jpg
│ │ │ └── slide-4.jpg
│ │ ├── index.html
│ │ ├── script.js
│ │ ├── style.css
│ │ └── thumbnail.jpg
│ └── image-slider-part-3
│ │ ├── README.md
│ │ ├── data.md
│ │ ├── images
│ │ ├── slide-1.jpg
│ │ ├── slide-2.jpg
│ │ ├── slide-3.jpg
│ │ └── slide-4.jpg
│ │ ├── index.html
│ │ ├── script.js
│ │ ├── style.css
│ │ └── thumbnail.jpg
├── swiper-app-drawer
│ ├── README.md
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── swiper-effect-cards-slider
│ ├── README.md
│ ├── images
│ │ ├── img_1.jpg
│ │ ├── img_2.jpg
│ │ ├── img_3.jpg
│ │ ├── img_4.jpg
│ │ ├── img_5.jpg
│ │ ├── img_6.jpg
│ │ └── img_7.jpg
│ ├── index.html
│ ├── resources.md
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── thumbnail-slider
│ ├── README.md
│ ├── images
│ │ ├── favicon.png
│ │ ├── image-1.webp
│ │ ├── image-2.webp
│ │ ├── image-3.webp
│ │ ├── image-4.webp
│ │ ├── image-5.webp
│ │ └── image-6.webp
│ ├── index.html
│ ├── script.js
│ ├── starter.md
│ ├── style.css
│ └── thumbnail.png
├── travel-card-design
│ ├── README.md
│ ├── images
│ │ ├── card-main.png
│ │ ├── icon-building.svg
│ │ ├── icon-heart.svg
│ │ ├── icon-leaf.svg
│ │ ├── icon-map.svg
│ │ ├── icon-send.svg
│ │ └── profile.png
│ ├── index.html
│ ├── starter.md
│ ├── style.css
│ └── thumbnail.jpg
└── vision_pro
│ ├── README.md
│ ├── index.html
│ ├── script.js
│ ├── starter.md
│ ├── style.css
│ └── thumbnail.png
└── website
├── Hero-Design
├── Animated ecommerce
│ ├── README.md
│ ├── images
│ │ ├── favicon.svg
│ │ ├── hero-image.png
│ │ └── logo.svg
│ ├── index.html
│ ├── script.js
│ ├── starter.md
│ └── style.css
├── Banking
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── apple.svg
│ │ ├── favicon.svg
│ │ ├── google-play.svg
│ │ ├── hero-image.png
│ │ └── logo.svg
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── Dlex
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── favicon.svg
│ │ ├── hero-img.png
│ │ └── logo.svg
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── Fody
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── company-1.png
│ │ ├── company-2.png
│ │ ├── company-3.png
│ │ ├── company-4.png
│ │ ├── company-5.png
│ │ ├── customer-hero-1.png
│ │ ├── customer-hero-2.png
│ │ ├── customer-hero-3.png
│ │ └── hero-image.png
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── Learning Course Platform
│ ├── README.md
│ ├── images
│ │ ├── hero-img.png
│ │ └── icon-check.svg
│ ├── index.html
│ ├── resource.md
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── NFT-LANDING
│ └── data.md
├── Organic
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── favicon.png
│ │ ├── logo.png
│ │ ├── slide-1.png
│ │ ├── slide-2.png
│ │ └── slide-3.png
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── Remotely
│ ├── README.md
│ ├── data.md
│ ├── images
│ │ ├── favicon.svg
│ │ ├── hero-img.svg
│ │ └── logo.svg
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── Responsive-Landing-page-video
│ ├── README.md
│ ├── assets
│ │ ├── logo.svg
│ │ └── video.mp4
│ ├── index.html
│ ├── script.js
│ ├── starter.md
│ ├── style.css
│ └── thumbnail.png
├── business-app
│ ├── README.md
│ ├── images
│ │ ├── app-store.svg
│ │ ├── favicon.svg
│ │ ├── hero-image.png
│ │ ├── logo.svg
│ │ ├── menu-close.svg
│ │ ├── menu-open.svg
│ │ └── play-store.svg
│ ├── index.html
│ ├── script.js
│ ├── starter.md
│ └── style.css
├── camping
│ ├── README.md
│ ├── images
│ │ ├── bg.svg
│ │ ├── icon-arrow.svg
│ │ ├── icon-bag.svg
│ │ ├── icon-play.svg
│ │ ├── icon-search.svg
│ │ ├── icon-user.svg
│ │ ├── link-after.svg
│ │ └── logo.svg
│ ├── index.html
│ ├── resources.md
│ ├── script.js
│ ├── style.css
│ ├── thumbnail.jpg
│ └── webfont
│ │ └── Gilroy-Heavy.woff
├── mental-helth
│ ├── README.md
│ ├── images
│ │ ├── bg.png
│ │ ├── favicon.png
│ │ ├── hero-image.png
│ │ ├── icon-arrow.svg
│ │ ├── icon-play.svg
│ │ └── logo.svg
│ ├── index.html
│ ├── script.js
│ ├── starter.md
│ ├── style.css
│ └── thumbnail.jpg
└── payment system
│ ├── README.md
│ ├── images
│ ├── Logo.svg
│ ├── icon-1.svg
│ ├── icon-2.svg
│ └── section-image.png
│ ├── index.html
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── fifa-world-cup-2022
└── part-1
│ ├── README.md
│ ├── arrow.png
│ ├── favicon.png
│ ├── fifa-world-cup.json
│ ├── index.html
│ ├── resource.md
│ ├── script.js
│ ├── style.css
│ └── thumbnail.png
├── fifa-world-cup-Hero-Design
├── README.md
├── images
│ ├── hero-image.png
│ ├── logo.svg
│ └── mascot.png
├── index.html
├── resource.md
├── script.js
├── style.css
├── thumbnail.png
└── thumbnail01.png
├── meditation
├── README.md
├── data.md
├── image.svg
├── index.html
├── script.js
├── style.css
└── thumbnail.png
├── portfolio
└── README.md
└── real-estate
├── README.md
├── css
└── style.css
├── htmlContent.md
├── images
├── arrow-right.svg
├── arrow-up-outline.svg
├── arrow-up.svg
├── client-1.png
├── client-2.png
├── client-3.png
├── client-4.png
├── client-5.png
├── featured.svg
├── found.png
├── hero-illustration.svg
├── logo.svg
├── newsletter-img.svg
├── properties-1.png
├── properties-2.png
├── properties-3.png
├── properties-icon-1.svg
├── properties-icon-2.svg
├── properties-icon-3.svg
├── social-icon-1.svg
├── social-icon-2.svg
├── social-icon-3.svg
├── star.svg
├── works-icon-1.svg
├── works-icon-2.svg
└── works-icon-3.svg
├── index.html
├── js
└── script.js
├── package.json
├── sass
├── _layout.scss
├── _mixins.scss
├── _reset.scss
├── _variable.scss
├── components
│ └── _navigation.scss
├── layout
│ ├── _feature-two.scss
│ ├── _featured-properties.scss
│ ├── _footer.scss
│ ├── _hero.scss
│ ├── _hows-it-work.scss
│ ├── _newsletter.scss
│ └── _partner.scss
└── style.scss
├── starter
├── htmlContent.md
├── images
│ ├── arrow-right.svg
│ ├── arrow-up-outline.svg
│ ├── arrow-up.svg
│ ├── client-1.png
│ ├── client-2.png
│ ├── client-3.png
│ ├── client-4.png
│ ├── client-5.png
│ ├── featured.svg
│ ├── found.png
│ ├── hero-illustration.svg
│ ├── logo.svg
│ ├── newsletter-img.svg
│ ├── properties-1.png
│ ├── properties-2.png
│ ├── properties-3.png
│ ├── properties-icon-1.svg
│ ├── properties-icon-2.svg
│ ├── properties-icon-3.svg
│ ├── social-icon-1.svg
│ ├── social-icon-2.svg
│ ├── social-icon-3.svg
│ ├── star.svg
│ ├── works-icon-1.svg
│ ├── works-icon-2.svg
│ └── works-icon-3.svg
├── package.json
└── sass
│ ├── _layout.scss
│ ├── _mixins.scss
│ ├── _reset.scss
│ ├── _variable.scss
│ ├── components
│ └── _navigation.scss
│ ├── layout
│ ├── _feature-two.scss
│ ├── _featured-properties.scss
│ ├── _footer.scss
│ ├── _hero.scss
│ ├── _hows-it-work.scss
│ ├── _newsletter.scss
│ └── _partner.scss
│ └── style.scss
└── thumbnail.png
/Animated tab/Tab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Animated tab/Tab.png
--------------------------------------------------------------------------------
/Animated tab/images/app development.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Animated tab/images/app development.png
--------------------------------------------------------------------------------
/Animated tab/images/ux-ui.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Animated tab/images/ux-ui.jpg
--------------------------------------------------------------------------------
/Animated tab/images/web design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Animated tab/images/web design.jpg
--------------------------------------------------------------------------------
/Animated tab/images/web-development.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Animated tab/images/web-development.jpg
--------------------------------------------------------------------------------
/Back to top button/Back-to-Top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Back to top button/Back-to-Top.png
--------------------------------------------------------------------------------
/Back to top button/data.md:
--------------------------------------------------------------------------------
1 | section*4>h1{Section $}
2 |
3 | ```html css
4 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
5 |
6 | font-family: 'Roboto', sans-serif;
7 |
8 |
9 |
13 |
17 | ```
--------------------------------------------------------------------------------
/New Year Countdown Timer/data.mkd:
--------------------------------------------------------------------------------
1 | ```css
2 | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;800&display=swap');
3 | *,
4 | *::after,
5 | *::before {
6 | margin: 0;
7 | padding: 0;
8 | box-sizing: border-box;
9 | }
10 | body {
11 | font-family: 'Rubik', sans-serif;
12 | }
13 | ```
--------------------------------------------------------------------------------
/New Year Countdown Timer/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/New Year Countdown Timer/thumbnail.png
--------------------------------------------------------------------------------
/Portfolio-website-hero/data.md:
--------------------------------------------------------------------------------
1 | ## Css Reset
2 | ```css
3 | @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap');
4 | * {
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: border-box;
8 | text-decoration: none;
9 | list-style-type: none;
10 | }
11 |
12 | :root {
13 | --primary: #8a3ffc;
14 | --primary-border: rgba(138, 63, 252, 0.2);
15 | --white: #fff;
16 | --black: #0e0b3d;
17 | --container: 120rem;
18 | --nav-height: 6rem;
19 | }
20 | .container {
21 | max-width: var(--container);
22 | width: calc(100% - 2rem);
23 | padding: 0 1rem;
24 | margin: 0 auto;
25 | }
26 | html {
27 | font-size: 62.5%;
28 | }
29 | body {
30 | font-family: 'Outfit', sans-serif;
31 | }
32 | ```
--------------------------------------------------------------------------------
/Portfolio-website-hero/first-look.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Portfolio-website-hero/first-look.png
--------------------------------------------------------------------------------
/Portfolio-website-hero/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Portfolio-website-hero/images/logo.png
--------------------------------------------------------------------------------
/Portfolio-website-hero/images/profile-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Portfolio-website-hero/images/profile-img.png
--------------------------------------------------------------------------------
/Project Filter/data.md:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
2 | *,
3 | *::after,
4 | *::before {
5 | margin: 0;
6 | padding: 0;
7 | -webkit-box-sizing: inherit;
8 | box-sizing: inherit;
9 | list-style-type: none;
10 | text-decoration: none;
11 | }
12 | :root {
13 | --container: 112rem;
14 | --m-auto: 0 auto;
15 | --white: #fff;
16 | --white-light: rgb(243, 243, 243);
17 | --black: #333;
18 | --primary: #7d6be8;
19 | --dark-light: #f1f1f1;
20 | }
21 | html {
22 | font-family: 'Roboto', sans-serif;
23 | font-size: 62.5%;
24 | scroll-behavior: smooth;
25 | }
26 | body {
27 | font-size: 1.6rem;
28 | -webkit-box-sizing: border-box;
29 | box-sizing: border-box;
30 | }
31 | ::-webkit-scrollbar {
32 | width: 0;
33 | }
--------------------------------------------------------------------------------
/Project Filter/image/app-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/app-01.png
--------------------------------------------------------------------------------
/Project Filter/image/app-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/app-02.png
--------------------------------------------------------------------------------
/Project Filter/image/app-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/app-03.png
--------------------------------------------------------------------------------
/Project Filter/image/game-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/game-01.png
--------------------------------------------------------------------------------
/Project Filter/image/game-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/game-02.png
--------------------------------------------------------------------------------
/Project Filter/image/game-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/game-03.png
--------------------------------------------------------------------------------
/Project Filter/image/software-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/software-01.png
--------------------------------------------------------------------------------
/Project Filter/image/software-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/software-02.png
--------------------------------------------------------------------------------
/Project Filter/image/software-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/software-03.png
--------------------------------------------------------------------------------
/Project Filter/image/website-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/website-01.png
--------------------------------------------------------------------------------
/Project Filter/image/website-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/website-02.png
--------------------------------------------------------------------------------
/Project Filter/image/website-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/image/website-03.png
--------------------------------------------------------------------------------
/Project Filter/project-filter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Project Filter/project-filter.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # All Youtube videos I make 👇
2 |
3 | [⏯ Youtube channel](https://www.youtube.com/c/cods-yt)
4 |
5 | [👉 Join For Facebook ](https://www.facebook.com/groups/3072356883017916/)
6 |
--------------------------------------------------------------------------------
/Web font/data.md:
--------------------------------------------------------------------------------
1 | https://ionic.io/ionicons
2 | https://boxicons.com/
3 | https://remixicon.com/
--------------------------------------------------------------------------------
/Web font/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | ion-icon
8 |
9 |
10 |
11 |
12 |
16 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/Web font/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/Web font/thumbnail.png
--------------------------------------------------------------------------------
/btn ripple effect/Btn-Ripple-effect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/btn ripple effect/Btn-Ripple-effect.png
--------------------------------------------------------------------------------
/button effect playlist/button sliding effect in css/data.md:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 | :root {
9 | --btn-bg: rgb(109, 80, 240);
10 | --btn-hover-bg: rgb(97, 64, 243);
11 | --btn-shadow: rgba(85, 54, 223, 0.8);
12 | }
13 | html {
14 | font-size: 62.5%;
15 | }
16 | .container {
17 | max-width: 114rem;
18 | margin: 0 auto;
19 | }
--------------------------------------------------------------------------------
/button effect playlist/button sliding effect in css/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | button slideing hover effect
8 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/button effect playlist/button sliding effect in css/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/button effect playlist/button sliding effect in css/thumbnail.png
--------------------------------------------------------------------------------
/custom-select-option/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/custom-select-option/thumbnail.png
--------------------------------------------------------------------------------
/gaphic design/business card/README.md:
--------------------------------------------------------------------------------
1 | ## Professional business card design using Adobe Illustrator | Graphic Design
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/6Mq-sJng3d8)
4 |
5 | 
6 |
7 | ----------
8 |
9 |
--------------------------------------------------------------------------------
/gaphic design/business card/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/gaphic design/business card/thumbnail.png
--------------------------------------------------------------------------------
/intreactive-nav-links-hover-effect/data.mkd:
--------------------------------------------------------------------------------
1 | ```html
2 | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
3 | font-family: 'Rubik', sans-serif;
4 | ```
--------------------------------------------------------------------------------
/intreactive-nav-links-hover-effect/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Nav Links hover Effect
8 |
9 |
10 |
11 |
12 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/intreactive-nav-links-hover-effect/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/intreactive-nav-links-hover-effect/logo.png
--------------------------------------------------------------------------------
/intreactive-nav-links-hover-effect/nav-links-hover-effect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/intreactive-nav-links-hover-effect/nav-links-hover-effect.png
--------------------------------------------------------------------------------
/intreactive-nav-links-hover-effect/script.js:
--------------------------------------------------------------------------------
1 | let marker = document.querySelector('#marker');
2 | let nav_links = document.querySelectorAll('nav ul li a');
3 |
4 | function indicator(e) {
5 | marker.style.left = e.offsetLeft + 'px';
6 | marker.style.width = e.offsetWidth + 'px';
7 | }
8 | nav_links.forEach((link) => {
9 | link.addEventListener('click', (e) => {
10 | e.preventDefault();
11 | indicator(e.target);
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/light and dark mode/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/light and dark mode/code.png
--------------------------------------------------------------------------------
/light and dark mode/data.md:
--------------------------------------------------------------------------------
1 | ```html
2 | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;900&display=swap');
3 | font-family: 'Rubik', sans-serif;
4 | :root {
5 | --nav-height: 6rem;
6 | --primary: #3e54cf;
7 | --black: #090429;
8 | --white: #fff;
9 | transition: background 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
10 | color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);}
11 |
12 | A dark theme displays dark surfaces across the majority of a UI.
13 | It's designed to be a supplemental mode to a default (or light)
14 | theme
15 |
16 |
20 |
24 | ```
--------------------------------------------------------------------------------
/light and dark mode/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/light and dark mode/logo-white.png
--------------------------------------------------------------------------------
/password show & hide/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | body {
7 | background: #5d46e2;
8 | }
9 | .input-group {
10 | background: #fff;
11 | display: flex;
12 | align-items: center;
13 | position: absolute;
14 | left: 50%;
15 | top: 50%;
16 | width: 300px;
17 | transform: translate(-50%, -50%);
18 | padding: 0 0 0 0.5rem;
19 | justify-content: space-between;
20 | box-shadow: 0 0 0.5rem #aea3f1;
21 | }
22 | .input-group input {
23 | width: 100%;
24 | outline: none;
25 | padding: 0.5rem 0.3rem 0.5rem 0;
26 | border: none;
27 | }
28 | .input-group ion-icon {
29 | background: #382a88;
30 | cursor: pointer;
31 | font-size: 1.6rem;
32 | padding: 0.2rem 0.5rem;
33 | color: #fff;
34 | --ionicon-stroke-width: 35px;
35 | }
36 |
--------------------------------------------------------------------------------
/password show & hide/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/password show & hide/thumbnail.png
--------------------------------------------------------------------------------
/product image gallery/images/shoe-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/product image gallery/images/shoe-01.png
--------------------------------------------------------------------------------
/product image gallery/images/shoe-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/product image gallery/images/shoe-02.png
--------------------------------------------------------------------------------
/product image gallery/images/shoe-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/product image gallery/images/shoe-03.png
--------------------------------------------------------------------------------
/product image gallery/images/shoe-04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/product image gallery/images/shoe-04.png
--------------------------------------------------------------------------------
/product image gallery/script.js:
--------------------------------------------------------------------------------
1 | let product_img = document.querySelector('.product-img img');
2 | let product_thumbnail = document.querySelectorAll('.product-thumbnail');
3 |
4 | product_thumbnail.forEach((product) => {
5 | product.addEventListener('click', () => {
6 | product_thumbnail.forEach((product) => {
7 | product.classList.remove('active');
8 | });
9 | product.classList.add('active');
10 |
11 | let img = product.querySelector('img').getAttribute('src');
12 | let index = product.querySelector('img').getAttribute('data-index');
13 |
14 | product_img.setAttribute('src', img);
15 | product_img.setAttribute('data-index', index);
16 |
17 | product_img.classList.add('product-down-animation');
18 | setTimeout(() => {
19 | product_img.classList.remove('product-down-animation');
20 | }, 500);
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/product image gallery/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/product image gallery/thumbnail.png
--------------------------------------------------------------------------------
/rest-api/.env:
--------------------------------------------------------------------------------
1 | DB_HOST="localhost"
2 | DB_USER="root"
3 | DB_PASSWORD=""
4 | DB_NAME="userinfo"
--------------------------------------------------------------------------------
/rest-api/README.md:
--------------------------------------------------------------------------------
1 | ## REST API Using Node Express With Mysql
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/LdCVLUxcTTA)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/rest-api/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rest-api",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "scripts": {
6 | "start": "node index",
7 | "dev": "nodemon index"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "description": "",
12 | "dependencies": {
13 | "cors": "^2.8.5",
14 | "dotenv": "^16.0.3",
15 | "express": "^4.18.2",
16 | "mysql": "^2.18.1"
17 | },
18 | "devDependencies": {
19 | "nodemon": "^2.0.20"
20 | }
21 | }
--------------------------------------------------------------------------------
/rest-api/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/rest-api/thumbnail.png
--------------------------------------------------------------------------------
/sass-setup/README.md:
--------------------------------------------------------------------------------
1 | # SASS setup less than 5 Minute
2 |
3 | 
4 |
5 | [Watch On Youtube](https://youtu.be/K7zmx_kwtX0)
6 |
7 | ## setup Snippet
8 |
9 | ### step 1
10 | ```npm command
11 | npm init -y
12 | ```
13 | ### step 2
14 | ```sass install command
15 | npm i -g sass
16 | ```
17 |
18 | > package.json
19 |
20 | ```json
21 | "scripts": {
22 | "sass": "sass --no-source-map --watch sass/style.scss css/style.css",
23 | "sass:compress": "sass --no-source-map --watch sass/style.scss css/compress.css --style compressed"
24 | },
25 | ```
--------------------------------------------------------------------------------
/sass-setup/css/compress.css:
--------------------------------------------------------------------------------
1 | *{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%;scroll-behavior:smooth}.p{padding:1rem}
2 |
--------------------------------------------------------------------------------
/sass-setup/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | html {
8 | font-size: 62.5%;
9 | scroll-behavior: smooth;
10 | }
11 |
12 | .p {
13 | padding: 1rem;
14 | }
15 |
--------------------------------------------------------------------------------
/sass-setup/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sass-setup",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "sass": "sass --no-source-map --watch sass/style.scss css/style.css",
8 | "sass:compress": "sass --no-source-map --watch sass/style.scss css/compress.css --style compressed"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC"
13 | }
14 |
--------------------------------------------------------------------------------
/sass-setup/sass/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin p($p) {
2 | padding: $p;
3 | }
4 |
--------------------------------------------------------------------------------
/sass-setup/sass/style.scss:
--------------------------------------------------------------------------------
1 | @import './mixins';
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 | html {
8 | font-size: 62.5%;
9 | scroll-behavior: smooth;
10 | }
11 | .p {
12 | @include p(1rem);
13 | }
14 |
--------------------------------------------------------------------------------
/sass-setup/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/sass-setup/thumbnail.png
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Slider | Swiper Slider 3D-Coverflow Effect React JS
2 |
3 | [Watch On Youtube](https://youtu.be/OtqxDT0IlHI)
4 |
5 | 
6 |
7 | ## Step
8 |
9 | 1. Download Starter File
10 |
11 | ```javascript
12 | npm install
13 |
14 | npm run dev
15 |
16 | npm i swiper
17 | ```
18 |
19 | ---
20 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 3d Slider
7 |
8 |
9 |
10 |
11 |
15 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "3d-slider",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "react": "^18.2.0",
13 | "react-dom": "^18.2.0",
14 | "swiper": "^9.0.3"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "^3.1.0",
20 | "vite": "^4.1.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_1.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_2.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_3.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_4.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_5.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_6.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/final/src/assets/images/img_7.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/final/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 3d Slider
7 |
8 |
9 |
10 |
11 |
15 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "3d-slider",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "react": "^18.2.0",
13 | "react-dom": "^18.2.0"
14 | },
15 | "devDependencies": {
16 | "@types/react": "^18.0.27",
17 | "@types/react-dom": "^18.0.10",
18 | "@vitejs/plugin-react": "^3.1.0",
19 | "vite": "^4.1.0"
20 | }
21 | }
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_1.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_2.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_3.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_4.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_5.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_6.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/assets/images/img_7.jpg
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/starter/3d-slider/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/web components/React-Swiper-Slider-3D-Coverflow/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/React-Swiper-Slider-3D-Coverflow/thumbnail.png
--------------------------------------------------------------------------------
/web components/Sass-sidebar/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Advanced Sidebar Design Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/WM3PlCnqfrU)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/arrow.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Sass-sidebar/images/bg.png
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-2.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-3.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-7.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-8.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-calendar.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-cloud.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-code-working.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-design.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/icon-toggle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/images/profile.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/web components/Sass-sidebar/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Sass-sidebar/thumbnail.jpg
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Slider | Swiper Slider 3D-Coverflow Effect
2 |
3 | [Watch On Youtube](https://youtu.be/li-ylRo7VEc)
4 |
5 | 
6 |
7 | ------------------------
8 |
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-1.png
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-2.png
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-3.png
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-4.png
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-5.png
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-6.png
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Swiper-Slider-3D-Coverflow/images/tranding-food-7.png
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/script.js:
--------------------------------------------------------------------------------
1 | var TrandingSlider = new Swiper('.tranding-slider', {
2 | effect: 'coverflow',
3 | grabCursor: true,
4 | centeredSlides: true,
5 | loop: true,
6 | slidesPerView: 'auto',
7 | coverflowEffect: {
8 | rotate: 0,
9 | stretch: 0,
10 | depth: 100,
11 | modifier: 2.5,
12 | },
13 | pagination: {
14 | el: '.swiper-pagination',
15 | clickable: true,
16 | },
17 | navigation: {
18 | nextEl: '.swiper-button-next',
19 | prevEl: '.swiper-button-prev',
20 | }
21 | });
--------------------------------------------------------------------------------
/web components/Swiper-Slider-3D-Coverflow/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/Swiper-Slider-3D-Coverflow/thumbnail.png
--------------------------------------------------------------------------------
/web components/black-to-color-image/README.md:
--------------------------------------------------------------------------------
1 | ## How To Change COLOR Image To BLACK & WHITE Using HTML and CSS
2 |
3 | [⏯ Watch On Youtube](https://youtu.be/uXtrzhtKLc8)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/web components/black-to-color-image/images/company-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/black-to-color-image/images/company-1.png
--------------------------------------------------------------------------------
/web components/black-to-color-image/images/company-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/black-to-color-image/images/company-2.png
--------------------------------------------------------------------------------
/web components/black-to-color-image/images/company-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/black-to-color-image/images/company-3.png
--------------------------------------------------------------------------------
/web components/black-to-color-image/images/company-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/black-to-color-image/images/company-4.png
--------------------------------------------------------------------------------
/web components/black-to-color-image/images/company-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/black-to-color-image/images/company-5.png
--------------------------------------------------------------------------------
/web components/black-to-color-image/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | html {
10 | font-size: 62.5%;
11 | }
12 |
13 | body {
14 | font-size: 1.6rem;
15 | }
16 |
17 | .container {
18 | max-width: 144rem;
19 | padding: 0 2rem;
20 | margin: 0 auto;
21 | height: 100vh;
22 | display: grid;
23 | align-items: center;
24 | }
25 |
26 | .items {
27 | display: grid;
28 | grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
29 | gap: 2rem;
30 | }
31 |
32 | .item {
33 | display: flex;
34 | align-items: center;
35 | justify-content: center;
36 | }
37 |
38 | .item img {
39 | width: 15rem;
40 | object-fit: contain;
41 | aspect-ratio: 2/1.5;
42 | filter: grayscale(100);
43 | transition: filter 1s cubic-bezier(0.165, 0.84, 0.44, 1);
44 | cursor: pointer;
45 | }
46 |
47 | .item img:hover {
48 | filter: grayscale(0);
49 | transition: filter 1s cubic-bezier(0.165, 0.84, 0.44, 1);
50 | }
51 |
--------------------------------------------------------------------------------
/web components/black-to-color-image/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/black-to-color-image/thumbnail.png
--------------------------------------------------------------------------------
/web components/chart-js-for-data-visualization/README.md:
--------------------------------------------------------------------------------
1 | ## Data Visualization Chart Using HTML | CSS | Chart JS | Javascript
2 |
3 | [⏯ Watch On Youtube](https://youtu.be/V9_SUK6orD4)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/web components/chart-js-for-data-visualization/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/web components/chart-js-for-data-visualization/resources.md:
--------------------------------------------------------------------------------
1 | ## Starter HTML & CSS
2 |
3 | ```html
4 |
10 |
11 | ```
12 |
13 | ```css
14 | *,
15 | *::after,
16 | *::before {
17 | margin: 0;
18 | padding: 0;
19 | box-sizing: inherit;
20 | }
21 |
22 | :root {
23 | --container: 112rem;
24 | --m-auto: 0 auto;
25 | --white: #fff;
26 | --black: #333;
27 | --gray: gray;
28 | }
29 |
30 | html {
31 | box-sizing: border-box;
32 | font-size: 62.5%;
33 | scroll-behavior: smooth;
34 | }
35 |
36 | body {
37 | font-size: 1.6rem;
38 | }
39 |
40 | .container {
41 | max-width: var(--container);
42 | padding: 4rem 2rem;
43 | margin: 0 auto;
44 | }
45 | ```
46 |
--------------------------------------------------------------------------------
/web components/chart-js-for-data-visualization/script.js:
--------------------------------------------------------------------------------
1 | d3.csv('./data/Totals.csv').then(function (loadeData) {
2 | let data = [];
3 | let labels = [];
4 |
5 | for (let i = 0; i < loadeData.length; i++) {
6 | let Date = loadeData[i].Date;
7 | labels.push(Date);
8 | let Views = loadeData[i].Views;
9 | data.push(Views);
10 | }
11 |
12 | let options = {
13 | type: 'line',
14 | options: {
15 | animation: {
16 | duration: 4000,
17 | },
18 | },
19 | data: {
20 | labels: labels,
21 | datasets: [
22 | {
23 | label: 'Channel Views Count',
24 | data: data,
25 | fill: false,
26 | borderColor: 'rgb(121,56,235)',
27 | tension: 0.1,
28 | },
29 | ],
30 | },
31 | };
32 |
33 | let chart = new Chart(document.querySelector('.chart'), options);
34 | });
35 |
--------------------------------------------------------------------------------
/web components/chart-js-for-data-visualization/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: inherit;
7 | }
8 |
9 | :root {
10 | --container: 112rem;
11 | --m-auto: 0 auto;
12 | --white: #fff;
13 | --black: #333;
14 | --gray: gray;
15 | }
16 |
17 | html {
18 | box-sizing: border-box;
19 | font-size: 62.5%;
20 | scroll-behavior: smooth;
21 | }
22 |
23 | body {
24 | font-size: 1.6rem;
25 | }
26 |
27 | .container {
28 | max-width: var(--container);
29 | padding: 4rem 2rem;
30 | margin: 0 auto;
31 | }
32 |
--------------------------------------------------------------------------------
/web components/chart-js-for-data-visualization/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/chart-js-for-data-visualization/thumbnail.png
--------------------------------------------------------------------------------
/web components/chart-only-js/README.md:
--------------------------------------------------------------------------------
1 | ## Animated Bar Chart Using HTML | CSS | Javascript | Javascript Only
2 |
3 | [⏯ Watch On Youtube](https://youtu.be/lATQXH2ArQw)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/web components/chart-only-js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Bar Chart
9 |
10 |
11 |
12 |
13 |
14 |
Bar Chart
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/web components/chart-only-js/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | :root {
10 | --container: 112rem;
11 | --m-auto: 0 auto;
12 | }
13 |
14 | html {
15 | font-size: 62.5%;
16 | scroll-behavior: smooth;
17 | }
18 |
19 | body {
20 | min-height: 100vh;
21 | display: flex;
22 | justify-content: center;
23 | }
24 |
25 | .container {
26 | max-width: var(--container);
27 | margin: var(--m-auto);
28 | padding: 0 2rem;
29 | }
30 |
31 | .heading {
32 | margin: 2rem 0;
33 | text-align: center;
34 | font-size: 3rem;
35 | }
36 |
37 | #chart {
38 | width: 550px;
39 | height: 300px;
40 | border-bottom: 0.1rem solid black;
41 | border-left: 0.1rem solid black;
42 | margin-top: 50px;
43 | color: rgb(29, 21, 48);
44 | }
--------------------------------------------------------------------------------
/web components/chart-only-js/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/chart-only-js/thumbnail.png
--------------------------------------------------------------------------------
/web components/ecommerce-api-fetch/README.md:
--------------------------------------------------------------------------------
1 | ## Ecommerce Api Data Fetch Using Javascript Fetch Api
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/LNoEn2N1w84)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/web components/ecommerce-api-fetch/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/web components/ecommerce-api-fetch/part02/resource.md:
--------------------------------------------------------------------------------
1 | ## Api
2 |
3 | https://fakeapi.platzi.com/
4 |
5 | ```html
6 |
32 | ```
33 |
--------------------------------------------------------------------------------
/web components/ecommerce-api-fetch/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/ecommerce-api-fetch/thumbnail.png
--------------------------------------------------------------------------------
/web components/features section/one/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Features Section 01 Design Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/aREkrq4N2g8)
4 |
5 | 
6 |
7 | ----------
--------------------------------------------------------------------------------
/web components/features section/one/feature section design.fig:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/features section/one/feature section design.fig
--------------------------------------------------------------------------------
/web components/features section/one/images/arrow-2.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/features section/one/images/arrow.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/features section/one/images/section-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/features section/one/images/section-img.png
--------------------------------------------------------------------------------
/web components/features section/one/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/features section/one/thumbnail.png
--------------------------------------------------------------------------------
/web components/grid-view list-view/README.md:
--------------------------------------------------------------------------------
1 | ## Grid View and List View Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/D0H-ujor_E4)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/web components/grid-view list-view/images/product-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/grid-view list-view/images/product-1.jpg
--------------------------------------------------------------------------------
/web components/grid-view list-view/images/product-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/grid-view list-view/images/product-2.jpg
--------------------------------------------------------------------------------
/web components/grid-view list-view/images/product-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/grid-view list-view/images/product-3.jpg
--------------------------------------------------------------------------------
/web components/grid-view list-view/images/product-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/grid-view list-view/images/product-4.jpg
--------------------------------------------------------------------------------
/web components/grid-view list-view/images/product-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/grid-view list-view/images/product-5.jpg
--------------------------------------------------------------------------------
/web components/grid-view list-view/images/product-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/grid-view list-view/images/product-6.jpg
--------------------------------------------------------------------------------
/web components/grid-view list-view/resource.md:
--------------------------------------------------------------------------------
1 | # icon
2 |
3 | ```html
4 |
8 |
12 | ```
13 |
14 | ## starter css
15 |
16 | ```css
17 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
18 | *,
19 | *::after,
20 | *::before {
21 | margin: 0;
22 | padding: 0;
23 | box-sizing: border-box;
24 | }
25 |
26 | :root {
27 | --container: 144rem;
28 | --m-auto: 0 auto;
29 | --text-primary: #212b36;
30 | --text-secondary: #637381;
31 | --star: #ffa645;
32 | }
33 |
34 | html {
35 | font-size: 62.5%;
36 | font-family: 'Inter', sans-serif;
37 | scroll-behavior: smooth;
38 | }
39 |
40 | body {
41 | font-size: 1.6rem;
42 | }
43 |
44 | .container {
45 | max-width: var(--container);
46 | margin: var(--m-auto);
47 | padding: 0 1rem;
48 | }
49 | ```
50 |
--------------------------------------------------------------------------------
/web components/grid-view list-view/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/grid-view list-view/thumbnail.png
--------------------------------------------------------------------------------
/web components/hamburger-icon/data.md:
--------------------------------------------------------------------------------
1 | ```css
2 | *,
3 | *::after,
4 | *::before {
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: inherit;
8 | }
9 | :root {
10 | --bg: #2f2371;
11 | --icon: #efedfc;
12 | --transition: all 0.5s ease-in-out;
13 | }
14 | html {
15 | font-size: 62.5%;
16 | scroll-behavior: smooth;
17 | }
18 | ```
--------------------------------------------------------------------------------
/web components/hamburger-icon/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Hamburger Icon
8 |
9 |
10 |
11 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/web components/hamburger-icon/script.js:
--------------------------------------------------------------------------------
1 | let hamburger = document.querySelector('.mobile_hamburger');
2 | let hamburger_line = document.querySelector('.hamburger_line');
3 |
4 | hamburger.addEventListener('click', () => {
5 | hamburger_line.classList.toggle('active');
6 | });
7 |
--------------------------------------------------------------------------------
/web components/hamburger-icon/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/hamburger-icon/thumbnail.png
--------------------------------------------------------------------------------
/web components/light&dark-toggle-icon/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Light & Dark Theme Toggle
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Day
17 |
18 |
16 |
17 | }>
18 | }>
19 | }>
20 | }>
21 |
22 |
23 |
24 |
25 | );
26 | }
27 |
28 | export default App;
29 |
--------------------------------------------------------------------------------
/web components/reactjs-navigation-bar/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { BrowserRouter as Router } from 'react-router-dom';
4 |
5 | import './index.css';
6 | import App from './App';
7 |
8 | const root = ReactDOM.createRoot(document.getElementById('root'));
9 | root.render(
10 |
11 |
12 |
13 | );
14 |
--------------------------------------------------------------------------------
/web components/reactjs-navigation-bar/src/pages/About.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function About() {
4 | return (
5 | About
6 | )
7 | }
8 |
9 | export default About
--------------------------------------------------------------------------------
/web components/reactjs-navigation-bar/src/pages/Contact.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Contact() {
4 | return (
5 | Contact
6 | )
7 | }
8 |
9 | export default Contact
--------------------------------------------------------------------------------
/web components/reactjs-navigation-bar/src/pages/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Home() {
4 | return (
5 | Home
6 | )
7 | }
8 |
9 | export default Home
--------------------------------------------------------------------------------
/web components/reactjs-navigation-bar/src/pages/Portfolio.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Portfolio() {
4 | return (
5 | Portfolio
6 | )
7 | }
8 |
9 | export default Portfolio
--------------------------------------------------------------------------------
/web components/reactjs-navigation-bar/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/reactjs-navigation-bar/thumbnail.png
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Mega Menu and Dropdown Menu using only HTML and CSS & Javascript
2 |
3 | [Watch On Youtube](https://youtu.be/1eqhm3UTk58)
4 |
5 | 
6 |
7 | ------------------------
8 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/arrow.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-1.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-10.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-11.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-12.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-13.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-14.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-15.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-16.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-2.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-3.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-4.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-5.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-6.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-7.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-8.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/images/icon-9.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/script.js:
--------------------------------------------------------------------------------
1 | let nav_toggle = document.querySelector('.nav_toggle');
2 | let nav_toggle_icon = document.querySelector('.nav_toggle ion-icon');
3 | let nav_menu = document.querySelector('.nav_menu');
4 |
5 | nav_toggle.addEventListener('click', () => {
6 | nav_menu.classList.toggle('active');
7 | nav_toggle_icon.setAttribute('name',
8 | nav_menu.classList.contains('active') ? 'close-outline' : 'menu-outline'
9 | );
10 | });
--------------------------------------------------------------------------------
/web components/responsive-mega-menu/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/responsive-mega-menu/thumbnail.png
--------------------------------------------------------------------------------
/web components/scroll-to-animate-counter/data.md:
--------------------------------------------------------------------------------
1 | ## Css Reset
2 | ```css
3 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
4 | *,
5 | *::after,
6 | *::before {
7 | margin: 0;
8 | padding: 0;
9 | box-sizing: inherit;
10 | }
11 | :root {
12 | --container: 112rem;
13 | --m-auto: 0 auto;
14 | --white: #fff;
15 | --bg-hero: #251c5a;
16 | --bg-counter: #2f2371;
17 | --bg-item: #5d46e2;
18 | }
19 | html {
20 | font-family: 'Poppins', sans-serif;
21 | font-size: 62.5%;
22 | scroll-behavior: smooth;
23 | }
24 | body {
25 | color: var(--white);
26 | font-size: 1.6rem;
27 | box-sizing: border-box;
28 | }
29 | .container {
30 | max-width: var(--container);
31 | margin: var(--m-auto);
32 | padding: 0 1rem;
33 | }
34 | ```
--------------------------------------------------------------------------------
/web components/scroll-to-animate-counter/images/app-design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/scroll-to-animate-counter/images/app-design.png
--------------------------------------------------------------------------------
/web components/scroll-to-animate-counter/images/ux-design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/scroll-to-animate-counter/images/ux-design.png
--------------------------------------------------------------------------------
/web components/scroll-to-animate-counter/images/web-design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/scroll-to-animate-counter/images/web-design.png
--------------------------------------------------------------------------------
/web components/scroll-to-animate-counter/images/web-development.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/scroll-to-animate-counter/images/web-development.png
--------------------------------------------------------------------------------
/web components/scroll-to-animate-counter/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/scroll-to-animate-counter/thumbnail.png
--------------------------------------------------------------------------------
/web components/section design/part 01/Design file.fig:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/section design/part 01/Design file.fig
--------------------------------------------------------------------------------
/web components/section design/part 01/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Section Design Part 01 | Using HTML & CSS
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/p5Kyk2UyOBU)
4 |
5 | 
6 |
7 | ----------
--------------------------------------------------------------------------------
/web components/section design/part 01/images/arrow.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/section design/part 01/images/icon-2.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/web components/section design/part 01/images/icon-3.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/web components/section design/part 01/images/main-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/section design/part 01/images/main-image.png
--------------------------------------------------------------------------------
/web components/section design/part 01/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/section design/part 01/thumbnail.png
--------------------------------------------------------------------------------
/web components/sequence_animation_gsap/Intro.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/sequence_animation_gsap/Intro.mp4
--------------------------------------------------------------------------------
/web components/sequence_animation_gsap/README.md:
--------------------------------------------------------------------------------
1 | # Video Intro Sequence Image Animation Using HTML & CSS and GSAP
2 |
3 | [🎬 Watch on Youtube](https://youtu.be/qbl-ExUArqs)
4 |
5 | 
6 |
--------------------------------------------------------------------------------
/web components/sequence_animation_gsap/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/sequence_animation_gsap/thumbnail.png
--------------------------------------------------------------------------------
/web components/sequence_animation_gsap/video-to-image.txt:
--------------------------------------------------------------------------------
1 | https://ezgif.com/video-to-png
--------------------------------------------------------------------------------
/web components/sidebar/images/icon-01.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/sidebar/images/icon-02.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/web components/sidebar/images/icon-03.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/sidebar/images/icon-04.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/sidebar/images/icon-dot.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/web components/sidebar/images/logo-icon.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/web components/sidebar/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sidebar",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.html",
6 | "scripts": {
7 | "sass": "sass --no-source-map --watch sass/style.scss css/style.css",
8 | "sass:compress": "sass --no-source-map --watch sass/style.scss css/compress.css --style compressed"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC"
13 | }
14 |
--------------------------------------------------------------------------------
/web components/sidebar/sass/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin p($padding) {
2 | padding: $padding;
3 | }
4 | @mixin m($margin) {
5 | margin: $margin;
6 | }
7 | @mixin wh($w, $h) {
8 | width: $w;
9 | height: $h;
10 | }
11 | @mixin w($w) {
12 | width: $w;
13 | }
14 | @mixin br($b) {
15 | border-radius: $b;
16 | }
17 | @mixin link-active {
18 | filter: drop-shadow(0px 4.01974px 34.1678px rgba(0, 0, 0, 0.28));
19 | }
20 | @mixin account-bg {
21 | background: linear-gradient(
22 | 230.04deg,
23 | #483fbd 2.11%,
24 | rgba(46, 46, 72, 0) 102.63%
25 | );
26 | filter: drop-shadow(0rem 0.4rem 3.3rem rgba(0, 0, 0, 0.25));
27 | }
28 |
--------------------------------------------------------------------------------
/web components/sidebar/sass/_reset.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
2 | *,
3 | *:before,
4 | *::after {
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: border-box;
8 | list-style-type: none;
9 | text-decoration: none;
10 | }
11 | html {
12 | scroll-behavior: smooth;
13 | }
14 | body {
15 | background: $bg;
16 | font-family: 'Poppins', sans-serif;
17 | }
18 | .text-white {
19 | color: $white;
20 | }
21 | .text-dark {
22 | color: $white-40;
23 | }
24 | .section-heading {
25 | color: $white;
26 | }
27 | .content {
28 | & section {
29 | height: 100vh;
30 | display: flex;
31 | align-items: center;
32 | justify-content: center;
33 | &:nth-child(even) {
34 | background: $sidebar-active-bg;
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/web components/sidebar/sass/_variables.scss:
--------------------------------------------------------------------------------
1 | $white: #fff;
2 | $white-40: rgba(255, 255, 255, 0.4);
3 | $bg: #28283f;
4 | $sidebar-bg: #2e2e48;
5 | $sidebar-active-bg: rgba(23, 23, 37, 0.8);
6 | $border: #7e73ff;
7 | $transition: all 0.5s ease-in-out;
8 |
--------------------------------------------------------------------------------
/web components/sidebar/sass/style.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 | @import './reset';
3 | @import './mixins';
4 | @import './layout';
--------------------------------------------------------------------------------
/web components/sidebar/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/sidebar/thumbnail.png
--------------------------------------------------------------------------------
/web components/signin/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Sign-In Components Using HTML CSS & Javascript
2 |
3 | [Watch On Youtube](https://youtu.be/BwVVvrY4jpw)
4 |
5 | 
6 |
7 |
8 | ------------------------
9 |
--------------------------------------------------------------------------------
/web components/signin/script.js:
--------------------------------------------------------------------------------
1 | let signin_form = document.querySelector('.signin_form');
2 | let email = document.querySelector('#email');
3 | let email_clear = document.querySelector('.email-clear');
4 | let password = document.querySelector('#password');
5 | let password_toggle = document.querySelector('.password-toggle');
6 |
7 |
8 | email_clear.addEventListener('click', () => {
9 | email.value = '';
10 | });
11 |
12 | password_toggle.addEventListener('click', () => {
13 | if (password_toggle.getAttribute('name') === "eye-off-outline") {
14 | password_toggle.setAttribute('name', 'eye-outline');
15 | password.type = 'text';
16 | } else {
17 | password_toggle.setAttribute('name', 'eye-off-outline');
18 | password.type = 'password';
19 | }
20 | });
21 | signin_form.addEventListener('submit', (e) => {
22 | e.preventDefault();
23 | let form_data = {
24 | Email: email.value,
25 | Password: password.value
26 | }
27 | console.log(form_data);
28 | signin_form.reset();
29 | });
--------------------------------------------------------------------------------
/web components/signin/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/signin/thumbnail.png
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-1/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Infinite Image slider | ( Part 1 ) Javascript
2 | 
3 | [Watch On Youtube](https://youtu.be/DRrH1lskCDA)
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-1/data.md:
--------------------------------------------------------------------------------
1 | ## Web Font
2 | ```html
3 |
4 |
5 | ```
6 | ## reset
7 | ```css
8 | *,
9 | *::after,
10 | *::before {
11 | margin: 0;
12 | padding: 0;
13 | box-sizing: border-box;
14 | }
15 |
16 | :root {
17 | --container: 120rem;
18 | --m-auto: 0 auto;
19 | --white: #fff;
20 | --bg: rgb(238, 238, 241);
21 | --arrow-bg: rgb(254, 254, 254);
22 | }
23 |
24 | html {
25 | font-size: 62.5%;
26 | scroll-behavior: smooth;
27 | }
28 |
29 | body {
30 | background: var(--bg);
31 | font-size: 1.6rem;
32 | }
33 | ```
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-1/images/slide-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-1/images/slide-1.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-1/images/slide-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-1/images/slide-2.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-1/images/slide-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-1/images/slide-3.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-1/images/slide-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-1/images/slide-4.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-1/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-1/thumbnail.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-2/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Infinite Image slider | ( Part 2 ) Javascript
2 | 
3 | [Watch On Youtube](https://youtu.be/RzsvKEF3gSA)
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-2/data.md:
--------------------------------------------------------------------------------
1 | ## Web Font
2 | ```html
3 |
4 |
5 | ```
6 | ## reset
7 | ```css
8 | *,
9 | *::after,
10 | *::before {
11 | margin: 0;
12 | padding: 0;
13 | box-sizing: border-box;
14 | }
15 |
16 | :root {
17 | --container: 120rem;
18 | --m-auto: 0 auto;
19 | --white: #fff;
20 | --bg: rgb(238, 238, 241);
21 | --arrow-bg: rgb(254, 254, 254);
22 | --dot:rgb(231, 225, 225);
23 | --dot-active:rgb(135, 89, 214);
24 | }
25 |
26 | html {
27 | font-size: 62.5%;
28 | scroll-behavior: smooth;
29 | }
30 |
31 | body {
32 | background: var(--bg);
33 | font-size: 1.6rem;
34 | }
35 | ```
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-2/images/slide-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-2/images/slide-1.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-2/images/slide-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-2/images/slide-2.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-2/images/slide-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-2/images/slide-3.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-2/images/slide-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-2/images/slide-4.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-2/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-2/thumbnail.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-3/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Infinite Image slider | ( Part 3 ) Bug Fixing | Javascript
2 | 
3 | [Watch On Youtube](https://youtu.be/fLw4cJjlS1s)
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-3/data.md:
--------------------------------------------------------------------------------
1 | ## Web Font
2 | ```html
3 |
4 |
5 | ```
6 | ## reset
7 | ```css
8 | *,
9 | *::after,
10 | *::before {
11 | margin: 0;
12 | padding: 0;
13 | box-sizing: border-box;
14 | }
15 |
16 | :root {
17 | --container: 120rem;
18 | --m-auto: 0 auto;
19 | --white: #fff;
20 | --bg: rgb(238, 238, 241);
21 | --arrow-bg: rgb(254, 254, 254);
22 | --dot:rgb(231, 225, 225);
23 | --dot-active:rgb(135, 89, 214);
24 | }
25 |
26 | html {
27 | font-size: 62.5%;
28 | scroll-behavior: smooth;
29 | }
30 |
31 | body {
32 | background: var(--bg);
33 | font-size: 1.6rem;
34 | }
35 | ```
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-3/images/slide-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-3/images/slide-1.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-3/images/slide-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-3/images/slide-2.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-3/images/slide-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-3/images/slide-3.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-3/images/slide-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-3/images/slide-4.jpg
--------------------------------------------------------------------------------
/web components/slider/image-slider-part-3/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/slider/image-slider-part-3/thumbnail.jpg
--------------------------------------------------------------------------------
/web components/swiper-app-drawer/README.md:
--------------------------------------------------------------------------------
1 | # How to Implement a Mobile App Drawer using Swiper.js
2 |
3 | [🎬 Watch](https://youtu.be/QdkhtUBKWB0)
4 |
5 | 
6 |
--------------------------------------------------------------------------------
/web components/swiper-app-drawer/script.js:
--------------------------------------------------------------------------------
1 | var menuButton = document.querySelector(".menu-button");
2 | var openMenu = function () {
3 | swiper.slidePrev();
4 | };
5 | var swiper = new Swiper(".swiper", {
6 | slidesPerView: "auto",
7 | initialSlide: 1,
8 | resistanceRatio: 0,
9 | slideToClickedSlide: true,
10 | on: {
11 | slideChangeTransitionStart: function () {
12 | var slider = this;
13 | if (slider.activeIndex === 0) {
14 | menuButton.classList.add("cross");
15 | // required because of slideToClickedSlide
16 | menuButton.removeEventListener("click", openMenu, true);
17 | } else {
18 | menuButton.classList.remove("cross");
19 | }
20 | },
21 | slideChangeTransitionEnd: function () {
22 | var slider = this;
23 | if (slider.activeIndex === 1) {
24 | menuButton.addEventListener("click", openMenu, true);
25 | }
26 | },
27 | },
28 | });
29 |
--------------------------------------------------------------------------------
/web components/swiper-app-drawer/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-app-drawer/thumbnail.png
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/README.md:
--------------------------------------------------------------------------------
1 | ## Effect Cards Swiper Slider | swiper js
2 |
3 | [Watch On Youtube](https://youtu.be/uAslyfU7I40)
4 |
5 | 
6 |
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/images/img_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-effect-cards-slider/images/img_1.jpg
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/images/img_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-effect-cards-slider/images/img_2.jpg
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/images/img_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-effect-cards-slider/images/img_3.jpg
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/images/img_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-effect-cards-slider/images/img_4.jpg
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/images/img_5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-effect-cards-slider/images/img_5.jpg
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/images/img_6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-effect-cards-slider/images/img_6.jpg
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/images/img_7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-effect-cards-slider/images/img_7.jpg
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/script.js:
--------------------------------------------------------------------------------
1 | var swiper = new Swiper('.Slider-container', {
2 | effect: 'cards',
3 | grabCursor: true,
4 | centerdSlides: true,
5 | loop: true,
6 | });
7 | // swiper.changeDirection('vertical');
8 |
--------------------------------------------------------------------------------
/web components/swiper-effect-cards-slider/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/swiper-effect-cards-slider/thumbnail.png
--------------------------------------------------------------------------------
/web components/thumbnail-slider/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Product Thumbnail Slider Using | HTML | CSS & Swiper Js
2 |
3 | [🎬 Watch on Youtube](https://youtu.be/HZuyUKSdJOc)
4 |
5 | 
6 |
--------------------------------------------------------------------------------
/web components/thumbnail-slider/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/thumbnail-slider/images/favicon.png
--------------------------------------------------------------------------------
/web components/thumbnail-slider/images/image-1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/thumbnail-slider/images/image-1.webp
--------------------------------------------------------------------------------
/web components/thumbnail-slider/images/image-2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/thumbnail-slider/images/image-2.webp
--------------------------------------------------------------------------------
/web components/thumbnail-slider/images/image-3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/thumbnail-slider/images/image-3.webp
--------------------------------------------------------------------------------
/web components/thumbnail-slider/images/image-4.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/thumbnail-slider/images/image-4.webp
--------------------------------------------------------------------------------
/web components/thumbnail-slider/images/image-5.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/thumbnail-slider/images/image-5.webp
--------------------------------------------------------------------------------
/web components/thumbnail-slider/images/image-6.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/thumbnail-slider/images/image-6.webp
--------------------------------------------------------------------------------
/web components/thumbnail-slider/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/thumbnail-slider/thumbnail.png
--------------------------------------------------------------------------------
/web components/travel-card-design/README.md:
--------------------------------------------------------------------------------
1 | ## Modern Card Design | Travel | Design Using HTML & CSS
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/FoQagXjMmgQ)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/web components/travel-card-design/images/card-main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/travel-card-design/images/card-main.png
--------------------------------------------------------------------------------
/web components/travel-card-design/images/icon-send.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/web components/travel-card-design/images/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/travel-card-design/images/profile.png
--------------------------------------------------------------------------------
/web components/travel-card-design/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/travel-card-design/thumbnail.jpg
--------------------------------------------------------------------------------
/web components/vision_pro/README.md:
--------------------------------------------------------------------------------
1 | # Apple Vision Pro Sequence Animation Using HTML & CSS and GSAP
2 |
3 | [🎬 Watch on Youtube](https://youtu.be/1bR159flk_0)
4 |
5 | 
6 |
--------------------------------------------------------------------------------
/web components/vision_pro/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Apple Vision Pro
7 |
8 |
9 |
10 |
11 |
12 | Apple Vision Pro
13 |
14 |
17 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/web components/vision_pro/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/web components/vision_pro/thumbnail.png
--------------------------------------------------------------------------------
/website/Hero-Design/Animated ecommerce/README.md:
--------------------------------------------------------------------------------
1 | ## Create Stunning E-commerce Websites with Dynamic Animation | HTML, CSS, JavaScript & GSAP
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/3ncvlaI9PjQ)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/website/Hero-Design/Animated ecommerce/images/hero-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Animated ecommerce/images/hero-image.png
--------------------------------------------------------------------------------
/website/Hero-Design/Banking/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Banking Website Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/o09QhSHzlmI)
4 |
5 | 
6 |
7 | ----------
8 |
--------------------------------------------------------------------------------
/website/Hero-Design/Banking/images/apple.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/website/Hero-Design/Banking/images/google-play.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/website/Hero-Design/Banking/images/hero-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Banking/images/hero-image.png
--------------------------------------------------------------------------------
/website/Hero-Design/Banking/script.js:
--------------------------------------------------------------------------------
1 | let menu_toggle_icon = document.querySelector('.mobile_menu_toggle');
2 | let nav_menu = document.querySelector('.nav_menu');
3 | menu_toggle_icon.addEventListener('click', () => {
4 | nav_menu.classList.toggle('active_menu');
5 | });
--------------------------------------------------------------------------------
/website/Hero-Design/Banking/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Banking/thumbnail.png
--------------------------------------------------------------------------------
/website/Hero-Design/Dlex/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Agency Website Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/23uzhYySQrE)
4 |
5 | 
6 |
7 | ----------
--------------------------------------------------------------------------------
/website/Hero-Design/Dlex/images/favicon.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/website/Hero-Design/Dlex/images/hero-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Dlex/images/hero-img.png
--------------------------------------------------------------------------------
/website/Hero-Design/Dlex/script.js:
--------------------------------------------------------------------------------
1 | let menu = document.querySelector('.nav_menu');
2 | let nav_menu_toggle = document.querySelector('.nav_menu_toggle');
3 | let nav_menu_toggle_icon = document.querySelector('.nav_menu_toggle ion-icon');
4 |
5 | nav_menu_toggle.addEventListener('click', () => {
6 | menu.classList.toggle('active');
7 | nav_menu_toggle_icon.setAttribute('name', menu.classList.contains('active') ? 'close-outline' : 'menu-outline');
8 | });
--------------------------------------------------------------------------------
/website/Hero-Design/Dlex/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Dlex/thumbnail.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Food delivery Website Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/0XKRdm67CuY)
4 |
5 | 
6 |
7 | ----------
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/company-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/company-1.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/company-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/company-2.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/company-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/company-3.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/company-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/company-4.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/company-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/company-5.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/customer-hero-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/customer-hero-1.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/customer-hero-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/customer-hero-2.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/customer-hero-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/customer-hero-3.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/images/hero-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/images/hero-image.png
--------------------------------------------------------------------------------
/website/Hero-Design/Fody/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Fody/thumbnail.png
--------------------------------------------------------------------------------
/website/Hero-Design/Learning Course Platform/README.md:
--------------------------------------------------------------------------------
1 | ### Learning Course Platform Website Using HTML & CSS and Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/6mhtVLFCOHQ)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/website/Hero-Design/Learning Course Platform/images/hero-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Learning Course Platform/images/hero-img.png
--------------------------------------------------------------------------------
/website/Hero-Design/Learning Course Platform/images/icon-check.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/website/Hero-Design/Learning Course Platform/script.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', function() {
2 | let menu_toggle = document.querySelector('.mobile_menu_toggle'),
3 | menu_toggle_icon = document.querySelector('.menu_toggle_icon'),
4 | nav_menu = document.querySelector('.nav_menu');
5 | menu_toggle.addEventListener('click', () => {
6 | nav_menu.classList.toggle('active');
7 | nav_menu.classList.contains('active') ?
8 | menu_toggle_icon.setAttribute('name', 'close-outline') :
9 | menu_toggle_icon.setAttribute('name', 'menu-outline');
10 | });
11 | });
--------------------------------------------------------------------------------
/website/Hero-Design/Learning Course Platform/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Learning Course Platform/thumbnail.png
--------------------------------------------------------------------------------
/website/Hero-Design/NFT-LANDING/data.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/Hero-Design/Organic/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Food Delivery Website Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/aBXRQTDBPY0)
4 |
5 | 
6 |
7 | ----------
--------------------------------------------------------------------------------
/website/Hero-Design/Organic/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Organic/images/favicon.png
--------------------------------------------------------------------------------
/website/Hero-Design/Organic/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Organic/images/logo.png
--------------------------------------------------------------------------------
/website/Hero-Design/Organic/images/slide-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Organic/images/slide-1.png
--------------------------------------------------------------------------------
/website/Hero-Design/Organic/images/slide-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Organic/images/slide-2.png
--------------------------------------------------------------------------------
/website/Hero-Design/Organic/images/slide-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Organic/images/slide-3.png
--------------------------------------------------------------------------------
/website/Hero-Design/Organic/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Organic/thumbnail.png
--------------------------------------------------------------------------------
/website/Hero-Design/Remotely/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Remote Job Website Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/kgk04s142Jo)
4 |
5 | 
6 |
7 | ----------
--------------------------------------------------------------------------------
/website/Hero-Design/Remotely/script.js:
--------------------------------------------------------------------------------
1 | let menu_icon_toggle = document.querySelector('.mobile_menu_toggle');
2 | let nav_menu = document.querySelector('.nav_menu');
3 | menu_icon_toggle.addEventListener('click', () => {
4 | nav_menu.classList.toggle('active_menu');
5 | });
--------------------------------------------------------------------------------
/website/Hero-Design/Remotely/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Remotely/thumbnail.png
--------------------------------------------------------------------------------
/website/Hero-Design/Responsive-Landing-page-video/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Landing Page Design with Animation Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/zYSsXe1wTr4)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/website/Hero-Design/Responsive-Landing-page-video/assets/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Responsive-Landing-page-video/assets/video.mp4
--------------------------------------------------------------------------------
/website/Hero-Design/Responsive-Landing-page-video/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/Responsive-Landing-page-video/thumbnail.png
--------------------------------------------------------------------------------
/website/Hero-Design/business-app/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Business App Website Hero Design Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube]()
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/website/Hero-Design/business-app/images/app-store.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/website/Hero-Design/business-app/images/favicon.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/website/Hero-Design/business-app/images/hero-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/business-app/images/hero-image.png
--------------------------------------------------------------------------------
/website/Hero-Design/business-app/images/menu-close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/Hero-Design/business-app/images/menu-open.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/Hero-Design/business-app/script.js:
--------------------------------------------------------------------------------
1 | let nav_menu = document.querySelector('.nav_menu');
2 | let nav_toggle = document.querySelector('.mobile_toggle');
3 | let toggle_icon = nav_toggle.querySelector('img');
4 |
5 | nav_toggle.addEventListener('click', () => {
6 | nav_menu.classList.toggle('active');
7 | nav_menu.classList.contains('active')
8 | ? toggle_icon.setAttribute('src', 'images/menu-close.svg')
9 | : toggle_icon.setAttribute('src', 'images/menu-open.svg');
10 | });
11 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Camping Website Hero Design Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/JG0Q5ucBdyo)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/images/icon-arrow.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/images/icon-bag.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/images/icon-play.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/images/icon-search.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/images/icon-user.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/images/link-after.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/script.js:
--------------------------------------------------------------------------------
1 | let toogle_btn = document.querySelector('.menu_toggle_btn');
2 | let toogle_icon = document.querySelector('.menu_toggle_btn ion-icon');
3 | let nav_menu = document.querySelector('.nav_menu');
4 | toogle_btn.addEventListener('click', () => {
5 | nav_menu.classList.toggle('active');
6 | nav_menu.classList.contains('active')
7 | ? toogle_icon.setAttribute('name', 'close-outline')
8 | : toogle_icon.setAttribute('name', 'grid-outline');
9 | });
10 |
--------------------------------------------------------------------------------
/website/Hero-Design/camping/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/camping/thumbnail.jpg
--------------------------------------------------------------------------------
/website/Hero-Design/camping/webfont/Gilroy-Heavy.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/camping/webfont/Gilroy-Heavy.woff
--------------------------------------------------------------------------------
/website/Hero-Design/mental-helth/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Mental Helth Website Hero Design Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/V-bALy7SQRw)
4 |
5 | 
6 |
7 | ---
8 |
--------------------------------------------------------------------------------
/website/Hero-Design/mental-helth/images/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/mental-helth/images/bg.png
--------------------------------------------------------------------------------
/website/Hero-Design/mental-helth/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/mental-helth/images/favicon.png
--------------------------------------------------------------------------------
/website/Hero-Design/mental-helth/images/hero-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/mental-helth/images/hero-image.png
--------------------------------------------------------------------------------
/website/Hero-Design/mental-helth/images/icon-arrow.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/Hero-Design/mental-helth/images/icon-play.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/Hero-Design/mental-helth/script.js:
--------------------------------------------------------------------------------
1 | let menu_toggle = document.querySelector('.nav_menu_toggle');
2 | let menu_toggle_icon = document.querySelector('.nav_menu_toggle ion-icon');
3 | let nav_menu = document.querySelector('.nav_menu');
4 |
5 | menu_toggle.addEventListener('click', () => {
6 | nav_menu.classList.toggle('active');
7 | nav_menu.classList.contains('active')
8 | ? menu_toggle_icon.setAttribute('name', 'close-outline')
9 | : menu_toggle_icon.setAttribute('name', 'options-outline');
10 | });
11 |
--------------------------------------------------------------------------------
/website/Hero-Design/mental-helth/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/mental-helth/thumbnail.jpg
--------------------------------------------------------------------------------
/website/Hero-Design/payment system/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Payment System Website Using HTML CSS & Javascript
2 |
3 | ### [⏯ Watch On Youtube](https://youtu.be/bxA41x_0r1Y)
4 |
5 | 
6 |
7 | ----------
--------------------------------------------------------------------------------
/website/Hero-Design/payment system/images/icon-1.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/website/Hero-Design/payment system/images/icon-2.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/website/Hero-Design/payment system/images/section-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/payment system/images/section-image.png
--------------------------------------------------------------------------------
/website/Hero-Design/payment system/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/Hero-Design/payment system/thumbnail.png
--------------------------------------------------------------------------------
/website/fifa-world-cup-2022/part-1/README.md:
--------------------------------------------------------------------------------
1 | # FIFA world cup match schedule website using HTML|CSS|Javascript
2 |
3 | ### [🔗 Visit Live Demo](https://world-cup-matches.codsfli.com/)
4 |
5 | ### [⏯ Watch On Youtube](https://youtu.be/uv9sS-WkZac)
6 |
7 | 
8 |
9 | ---
10 |
--------------------------------------------------------------------------------
/website/fifa-world-cup-2022/part-1/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/fifa-world-cup-2022/part-1/arrow.png
--------------------------------------------------------------------------------
/website/fifa-world-cup-2022/part-1/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/fifa-world-cup-2022/part-1/favicon.png
--------------------------------------------------------------------------------
/website/fifa-world-cup-2022/part-1/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/fifa-world-cup-2022/part-1/thumbnail.png
--------------------------------------------------------------------------------
/website/fifa-world-cup-Hero-Design/README.md:
--------------------------------------------------------------------------------
1 | # QATAR World Cup Website Hero Design using HTML|CSS|Javascript
2 |
3 | ### [🔗 Visit Live Demo](https://qatar-world-cup.codsfli.com/)
4 |
5 | ### [⏯ Watch On Youtube](https://youtu.be/8_wg1Quuo2w)
6 |
7 | ### [⏯ Part 02 Watch On Youtube](https://youtu.be/WQrsUCDFvb0)
8 |
9 | 
10 | 
11 |
12 | ---
13 |
--------------------------------------------------------------------------------
/website/fifa-world-cup-Hero-Design/images/hero-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/fifa-world-cup-Hero-Design/images/hero-image.png
--------------------------------------------------------------------------------
/website/fifa-world-cup-Hero-Design/images/mascot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/fifa-world-cup-Hero-Design/images/mascot.png
--------------------------------------------------------------------------------
/website/fifa-world-cup-Hero-Design/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/fifa-world-cup-Hero-Design/thumbnail.png
--------------------------------------------------------------------------------
/website/fifa-world-cup-Hero-Design/thumbnail01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/fifa-world-cup-Hero-Design/thumbnail01.png
--------------------------------------------------------------------------------
/website/meditation/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Meditation Website Using HTML CSS & Javascript
2 |
3 | ### [🔗 Visit Live Demo](https://cods-medi.netlify.app/)
4 |
5 | ### [⏯ Watch On Youtube](https://youtu.be/NXxGO3g8sNs)
6 |
7 | 
8 |
9 | ----------
--------------------------------------------------------------------------------
/website/meditation/script.js:
--------------------------------------------------------------------------------
1 | let icon = document.querySelector('.mobile_menu_icon');
2 | let icon_toggle = document.querySelector('.mobile_menu_toggle');
3 | let mobile_menu = document.querySelector('.nav_menu');
4 |
5 | icon.addEventListener('click', () => {
6 | icon_toggle.classList.toggle('active');
7 | mobile_menu.classList.toggle('active');
8 | })
--------------------------------------------------------------------------------
/website/meditation/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/meditation/thumbnail.png
--------------------------------------------------------------------------------
/website/portfolio/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/portfolio/README.md
--------------------------------------------------------------------------------
/website/real-estate/README.md:
--------------------------------------------------------------------------------
1 | ## Responsive Real Estate Website Using HTML SASS & Javascript
2 |
3 | ### [🔗 Visit Live Demo](https://cods-besnik.netlify.app/)
4 |
5 | ### [⏯ Watch On Youtube](https://youtu.be/pp1TFz7z_1k)
6 |
7 |
8 | 
9 |
10 | ----------
11 |
--------------------------------------------------------------------------------
/website/real-estate/images/arrow-up-outline.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/real-estate/images/arrow-up.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/real-estate/images/client-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/client-1.png
--------------------------------------------------------------------------------
/website/real-estate/images/client-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/client-2.png
--------------------------------------------------------------------------------
/website/real-estate/images/client-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/client-3.png
--------------------------------------------------------------------------------
/website/real-estate/images/client-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/client-4.png
--------------------------------------------------------------------------------
/website/real-estate/images/client-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/client-5.png
--------------------------------------------------------------------------------
/website/real-estate/images/found.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/found.png
--------------------------------------------------------------------------------
/website/real-estate/images/properties-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/properties-1.png
--------------------------------------------------------------------------------
/website/real-estate/images/properties-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/properties-2.png
--------------------------------------------------------------------------------
/website/real-estate/images/properties-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/images/properties-3.png
--------------------------------------------------------------------------------
/website/real-estate/images/properties-icon-1.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/website/real-estate/images/properties-icon-3.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/website/real-estate/images/social-icon-1.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/real-estate/images/social-icon-2.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/real-estate/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "real-estate",
3 | "description": "description",
4 | "authors": "Cods",
5 | "version": "1.0.0",
6 | "main": "index.html",
7 | "scripts": {
8 | "sass": "sass --no-source-map --watch sass/style.scss css/style.css",
9 | "sass:min": "sass --no-source-map --watch sass/style.scss css/style.min.css --style compressed"
10 | }
11 | }
--------------------------------------------------------------------------------
/website/real-estate/sass/_layout.scss:
--------------------------------------------------------------------------------
1 | @import './components/navigation';
2 | @import './layout/hero';
3 | @import './layout/partner';
4 | @import './layout/hows-it-work';
5 | @import './layout/featured-properties';
6 | @import './layout/feature-two';
7 | @import './layout/newsletter';
8 | @import './layout/footer';
--------------------------------------------------------------------------------
/website/real-estate/sass/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin p($p) {
2 | padding: $p;
3 | }
4 |
5 | @mixin m($m) {
6 | margin: $m;
7 | }
8 |
9 | @mixin media($brakepoint, $size) {
10 | @media (#{$brakepoint}-width:#{$size}px) {
11 | @content;
12 | }
13 | }
--------------------------------------------------------------------------------
/website/real-estate/sass/_variable.scss:
--------------------------------------------------------------------------------
1 | $primary: #0F1B4C;
2 | $secondary: #0689FF;
3 | $text-dark: #000339;
4 | $text-dark-50:#3B3C45;
5 | $text-light: #5A6473;
6 | $text-gray: #7D8589;
7 | $text-hero-title:#687690;
8 | $text-gray-light: #A3A6AB;
9 | $white: #ffffff;
10 | $hero-bg: #E6F0FF;
11 | $properties-bg:#F5FAFE;
12 | $btn-bg: #0F1B4C;
13 | $newsletter-bg:#063183;
14 | $container: 122rem;
15 | $nav-height: 7rem;
16 | $transition:all 0.5s ease-in-out;
--------------------------------------------------------------------------------
/website/real-estate/sass/layout/_hows-it-work.scss:
--------------------------------------------------------------------------------
1 | #hows-it-work {
2 | @include p(4rem 0);
3 | & .container:nth-child(2) {
4 | max-width: 80rem;
5 | }
6 | & .works-heading {
7 | position: relative;
8 | color: $text-dark;
9 | font-size: 3.5rem;
10 | &::before {
11 | position: absolute;
12 | content: '';
13 | left: 50%;
14 | transform: translateX(-50%);
15 | width: 4rem;
16 | height: 0.4rem;
17 | background: $text-dark;
18 | border-radius: 1.2rem;
19 | }
20 | }
21 | & .seller-types {
22 | padding-top: 3rem;
23 | display: grid;
24 | grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
25 | place-items: center;
26 | gap: 2rem;
27 | & .seller-type {
28 | text-align: center;
29 | }
30 | }
31 | }
--------------------------------------------------------------------------------
/website/real-estate/sass/layout/_partner.scss:
--------------------------------------------------------------------------------
1 | #partner {
2 | @include p(4rem 0);
3 | .partner-top {
4 | @include p(4rem 0 7rem 0);
5 | display: flex;
6 | justify-content: space-between;
7 | align-items: center;
8 | flex-wrap: wrap;
9 | & .text-light {
10 | margin-top: 1rem;
11 | color: #7d8589;
12 | }
13 | }
14 | & .partner-bottom {
15 | display: grid;
16 | grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
17 | gap: 2rem;
18 | place-items: center;
19 | place-content: center;
20 | & div {
21 | display: flex;
22 | align-items: center;
23 | @include p(0.8rem);
24 | cursor: pointer;
25 | border-radius: 0.3rem;
26 | & img {
27 | width: 13rem;
28 | height: 3rem;
29 | object-fit: contain;
30 | }
31 | &:hover {
32 | transition: box-shadow 0.5s ease-in-out;
33 | box-shadow: 0 0 0.6rem 0.01rem rgba($text-gray-light, 0.3);
34 | }
35 | }
36 | }
37 | }
--------------------------------------------------------------------------------
/website/real-estate/sass/style.scss:
--------------------------------------------------------------------------------
1 | @import './variable';
2 | @import './mixins';
3 | @import './reset';
4 | @import './layout';
--------------------------------------------------------------------------------
/website/real-estate/starter/images/arrow-up-outline.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/real-estate/starter/images/arrow-up.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/website/real-estate/starter/images/client-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/client-1.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/client-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/client-2.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/client-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/client-3.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/client-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/client-4.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/client-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/client-5.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/found.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/found.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/properties-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/properties-1.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/properties-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/properties-2.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/properties-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/images/properties-3.png
--------------------------------------------------------------------------------
/website/real-estate/starter/images/properties-icon-1.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/website/real-estate/starter/images/properties-icon-3.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/website/real-estate/starter/images/social-icon-1.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/real-estate/starter/images/social-icon-2.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/website/real-estate/starter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "real-estate",
3 | "description": "description",
4 | "authors": "Your Name",
5 | "version": "1.0.0",
6 | "main": "index.html",
7 | "scripts": {
8 | "sass": "sass --no-source-map --watch sass/style.scss css/style.css",
9 | "sass:min": "sass --no-source-map --watch sass/style.scss css/style.min.css --style compressed"
10 | }
11 | }
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/_layout.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/_layout.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/_mixins.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/_mixins.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/_reset.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
2 | *,
3 | *::before,
4 | *::after {
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: border-box;
8 | text-decoration: none;
9 | list-style-type: none;
10 | }
11 |
12 | html {
13 | font-size: 62.5%;
14 | font-family: 'Poppins', sans-serif;
15 | scroll-behavior: smooth;
16 | }
17 |
18 | body {
19 | font-size: 1.6rem;
20 | }
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/_variable.scss:
--------------------------------------------------------------------------------
1 | $primary: #0F1B4C;
2 | $secondary: #0689FF;
3 | $text-dark: #000339;
4 | $text-dark-50:#3B3C45;
5 | $text-light: #5A6473;
6 | $text-gray: #7D8589;
7 | $text-hero-title:#687690;
8 | $text-gray-light: #A3A6AB;
9 | $white: #ffffff;
10 | $hero-bg: #E6F0FF;
11 | $properties-bg:#F5FAFE;
12 | $btn-bg: #0F1B4C;
13 | $newsletter-bg:#063183;
14 | $container: 122rem;
15 | $nav-height: 7rem;
16 | $transition:all 0.5s ease-in-out;
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/components/_navigation.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/components/_navigation.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/layout/_feature-two.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/layout/_feature-two.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/layout/_featured-properties.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/layout/_featured-properties.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/layout/_footer.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/layout/_footer.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/layout/_hero.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/layout/_hero.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/layout/_hows-it-work.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/layout/_hows-it-work.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/layout/_newsletter.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/layout/_newsletter.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/layout/_partner.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/layout/_partner.scss
--------------------------------------------------------------------------------
/website/real-estate/starter/sass/style.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/starter/sass/style.scss
--------------------------------------------------------------------------------
/website/real-estate/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emetdas/Youtube-code/d72e850f9203ba6e27479012da7b5d28b61e195f/website/real-estate/thumbnail.png
--------------------------------------------------------------------------------