Web Component
Web Component
  • 35
  • 86 519
Card Hover Effect in HTML and CSS
In this video, we will learn How to create an Card Hover Effect in HTML and CSS | @web.component
Tools: Visual Studio Code, Google Chrome
Source Code: github.com/web-component23/awesome-designs/tree/main/Card%20Hover%20Effect
To know more about ::before Selector:
1. developer.mozilla.org/en-US/docs/Web/CSS/::before
2. www.w3schools.com/cssref/sel_before.php
Card image is generated from: pixlr.com/image-generator/
Subscribe Now: ua-cam.com/channels/Sgvq7zappihcKLxZaA3tVQ.html
Previous Videos:
About Us Page: ua-cam.com/video/8uZgRXg28CU/v-deo.html
Custom Range Slider: ua-cam.com/video/a2-Sdxzw30c/v-deo.html
Contact Us Page: ua-cam.com/video/6WGJCkUid3Y/v-deo.html
Sticky Navbar: ua-cam.com/video/lrbz1Vz9nrQ/v-deo.html
Captcha Generator: ua-cam.com/video/JQAjyjs7nTs/v-deo.html
Parallax Scrolling Website: ua-cam.com/video/dyI8FHQdv3k/v-deo.html
Gradient Text: ua-cam.com/video/GysnhOrJb8E/v-deo.html
Button Hover Effect: ua-cam.com/video/FMd40fU-CCI/v-deo.html
Simple Dropdown List: ua-cam.com/video/_bSL1TTwQdQ/v-deo.html
Toggle Button: ua-cam.com/video/1xE1wMNCX0E/v-deo.html
Loading Spinner: ua-cam.com/video/Sef3VFhDoM4/v-deo.html
Responsive Login Form: ua-cam.com/video/--w61UFvDCA/v-deo.html
Website Home Page: ua-cam.com/video/E751eGWAwDk/v-deo.html
Image slider / Carousel: ua-cam.com/video/-XdMOi5IGZs/v-deo.html
Animated Profile Card: ua-cam.com/video/SWYHRPENVn0/v-deo.html
Website Sidebar Menu: ua-cam.com/video/Y1vjsUU7yDk/v-deo.html
Website Footer: ua-cam.com/video/x7AT4WN1uAk/v-deo.html
Flipkart Login Form: ua-cam.com/video/IObnTmAs48c/v-deo.html
Dropdown Menu: ua-cam.com/video/aTL5aFS8Uj4/v-deo.html
Website Navbar: ua-cam.com/video/cPmd9bEKBo0/v-deo.html
Animated Indian Flag: ua-cam.com/video/Idmyj6a8tS8/v-deo.html
Product Card: ua-cam.com/video/tkxAysxyKRQ/v-deo.html
Profile Card List: ua-cam.com/video/dnaYf_HusL4/v-deo.html
Registration Form: ua-cam.com/video/WIauzAQ0l0Y/v-deo.html
Floating Input: ua-cam.com/video/fMbwcyd5lDQ/v-deo.html
Login Form: ua-cam.com/video/c_J8Oqt7TEo/v-deo.html
Card Hover Effect using HTML and CSS, Card Hover Effect HTML CSS &, Card Hover Effect in HTML and CSS , Card Hover Effect in HTML CSS, Card Hover Effect html css, Card Hover Effect, Card Hover, Card Hover Effect html css, Card Hover HTML CSS.
- Web Component -
#card #hovereffect #html #css #csseffect
#webcomponent
Переглядів: 75

Відео

About Us Page in HTML and CSS16:25About Us Page in HTML and CSS
About Us Page in HTML and CSS
Переглядів 835 місяців тому
In this video, we will learn How to create an About Us Page in HTML and CSS | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/About Us Page Card images are generated from: pixlr.com/image-generator/ Cover photo: stock.adobe.com/in/search?k=about us&continue-checkout=1&asset_id=133066505 Subscribe Now: ua-cam.com/channels/...
Custom Range Slider in HTML, CSS & Javascript11:07Custom Range Slider in HTML, CSS & Javascript
Custom Range Slider in HTML, CSS & Javascript
Переглядів 1225 місяців тому
In this video, we will learn How to create a Custom Range Slider in HTML and CSS & Javascript | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Custom Range Slider Subscribe Now: ua-cam.com/channels/Sgvq7zappihcKLxZaA3tVQ.html Previous Videos: Contact Us Page: ua-cam.com/video/6WGJCkUid3Y/v-deo.html Sticky Navbar: ua-cam....
Contact Us Page in HTML and CSS10:00Contact Us Page in HTML and CSS
Contact Us Page in HTML and CSS
Переглядів 1,5 тис.9 місяців тому
In this video, we will learn How to create a Contact Us Page (Form) in HTML and CSS | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Contact Us Page Icon used: fonts.google.com/icons?selected=Material Symbols Rounded:arrow_right_alt:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=arrow&icon.style=Rounded Subscribe Now: ua-cam....
Sticky Navbar in HTML and CSS8:54Sticky Navbar in HTML and CSS
Sticky Navbar in HTML and CSS
Переглядів 979 місяців тому
In this video, we will learn How to create Sticky Navbar in HTML and CSS | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Sticky Navbar Subscribe Now: ua-cam.com/channels/Sgvq7zappihcKLxZaA3tVQ.html Previous Videos: Captcha Generator: ua-cam.com/video/JQAjyjs7nTs/v-deo.html Parallax Scrolling Website: ua-cam.com/video/dy...
Captcha Generator in HTML, CSS & JavaScript | Create Captcha with Validation in JavaScript18:07Captcha Generator in HTML, CSS & JavaScript | Create Captcha with Validation in JavaScript
Captcha Generator in HTML, CSS & JavaScript | Create Captcha with Validation in JavaScript
Переглядів 20711 місяців тому
In this video, we will learn How to create Captcha Generator with validation in HTML, CSS & JavaScript | Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Captcha Generator Icon used: fonts.google.com/icons?selected=Material Symbols Outlined:autorenew:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=refresh Subscribe Now: ua-cam.com/channels/Sgv...
Parallax Scrolling Website | How to Make Parallax Website using HTML and CSS13:52Parallax Scrolling Website | How to Make Parallax Website using HTML and CSS
Parallax Scrolling Website | How to Make Parallax Website using HTML and CSS
Переглядів 47611 місяців тому
In this video, we will learn How to create Parallax Website in HTML & CSS (using Pure HTML and CSS) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/web-component23-patch-21/Parallax Website Images are taken from unsplash.com/ Images used: 1. images.unsplash.com/photo-1509664158680-07c5032b51e5?q=80&w=2070&auto=format&fit=cro...
Gradient Text using Html and CSS4:32Gradient Text using Html and CSS
Gradient Text using Html and CSS
Переглядів 351Рік тому
In this video, we will learn How to create Gradient Text effect in HTML & CSS (using Pure HTML and CSS) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Gradient Text The CSS background-clip: text (and/or -webkit-background-clip:text ) property should cause the background to show through only the text itself. Subscribe N...
Button Hover Effect in HTML and CSS6:29Button Hover Effect in HTML and CSS
Button Hover Effect in HTML and CSS
Переглядів 344Рік тому
In this video, we will learn How to create Button Hover Effect in HTML & CSS (using Pure HTML and CSS) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Button Hover Effect Subscribe Now: ua-cam.com/channels/Sgvq7zappihcKLxZaA3tVQ.html Previous Videos: Simple Dropdown List: ua-cam.com/video/_bSL1TTwQdQ/v-deo.html Toggle B...
How to create simple Dropdown Menu in HTML & CSS9:07How to create simple Dropdown Menu in HTML & CSS
How to create simple Dropdown Menu in HTML & CSS
Переглядів 293Рік тому
In this video, we will learn How to create Dropdown Menu (Dropdown list) in HTML & CSS (using Pure HTML and CSS) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Dropdown List Menu Icons: fonts.google.com/icons?icon.set=Material Icons How to integrate in HTML? developers.google.com/fonts/docs/material_icons#icon_font_for...
Toggle Button in HTML & CSS7:09Toggle Button in HTML & CSS
Toggle Button in HTML & CSS
Переглядів 623Рік тому
In this video, we will learn How to create a Toggle Button (Toggle Switch) in HTML and CSS (using Pure HTML & CSS) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Toggle Button Subscribe Now: ua-cam.com/channels/Sgvq7zappihcKLxZaA3tVQ.html ' ' selector: The “ ” selector is used to select the elements that are placed imm...
Loading Page in HTML and CSS5:04Loading Page in HTML and CSS
Loading Page in HTML and CSS
Переглядів 367Рік тому
In this video, we will learn How to create a Loading Page(Loading Spinner) in HTML and CSS (using Pure HTML & CSS) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Loader Subscribe Now: ua-cam.com/channels/Sgvq7zappihcKLxZaA3tVQ.html Previous Videos: Responsive Login Form: ua-cam.com/video/ w61UFvDCA/v-deo.html Website H...
Responsive Login Form in HTML & CSS14:14Responsive Login Form in HTML & CSS
Responsive Login Form in HTML & CSS
Переглядів 470Рік тому
Responsive Login Form using HTML and CSS, Login Page HTML CSS, Login Form in HTML and CSS, Login Form HTML CSS, Login Form CSS, Responsive Login Form in HTML and CSS. In this video, we will learn How to create a Responsive Login Page in HTML and CSS (using Pure HTML & CSS) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main...
How to create a Website Home Page in HTML & CSS14:43How to create a Website Home Page in HTML & CSS
How to create a Website Home Page in HTML & CSS
Переглядів 393Рік тому
In this video, we will learn How to create a Website Home Page in HTML and CSS (using Pure HTML & CSS) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Home Page Photo is taken from: Unsplash: unsplash.com/ Subscribe Now: ua-cam.com/channels/Sgvq7zappihcKLxZaA3tVQ.html Previous Videos: Image slider / Carousel: ua-cam.com...
Image slider in HTML CSS & Javascript | Carousel HTML, CSS & JavaScript11:34Image slider in HTML CSS & Javascript | Carousel HTML, CSS & JavaScript
Image slider in HTML CSS & Javascript | Carousel HTML, CSS & JavaScript
Переглядів 258Рік тому
In this video, we will learn How to create a Image slider in HTML CSS & Javascript (using Pure HTML CSS & Javascript) | @web.component Tools: Visual Studio Code, Google Chrome Source Code: github.com/web-component23/awesome-designs/tree/main/Image Carousel Photos are taken from: Unsplash: unsplash.com/ Subscribe Now: ua-cam.com/channels/Sgvq7zappihcKLxZaA3tVQ.html Previous Videos: Animated Prof...
Animated Profile Card in HTML and CSS12:42Animated Profile Card in HTML and CSS
Animated Profile Card in HTML and CSS
Переглядів 355Рік тому
Animated Profile Card in HTML and CSS
How to create Website Sidebar Menu in HTML & CSS9:54How to create Website Sidebar Menu in HTML & CSS
How to create Website Sidebar Menu in HTML & CSS
Переглядів 1,1 тис.Рік тому
How to create Website Sidebar Menu in HTML & CSS
How to create Website Footer in HTML & CSS13:45How to create Website Footer in HTML & CSS
How to create Website Footer in HTML & CSS
Переглядів 1 тис.Рік тому
How to create Website Footer in HTML & CSS
Flipkart Login Form in HTML and CSS13:57Flipkart Login Form in HTML and CSS
Flipkart Login Form in HTML and CSS
Переглядів 4,3 тис.Рік тому
Flipkart Login Form in HTML and CSS
How to create Dropdown Menu in HTML & CSS9:24How to create Dropdown Menu in HTML & CSS
How to create Dropdown Menu in HTML & CSS
Переглядів 62 тис.Рік тому
How to create Dropdown Menu in HTML & CSS
How to Create Navbar in HTML and CSS13:16How to Create Navbar in HTML and CSS
How to Create Navbar in HTML and CSS
Переглядів 2,4 тис.Рік тому
How to Create Navbar in HTML and CSS
Login Form in HTML & CSS15:19Login Form in HTML & CSS
Login Form in HTML & CSS
Переглядів 3,6 тис.Рік тому
Login Form in HTML & CSS
Animated Indian Flag design using HTML & CSS | @web.component​9:29Animated Indian Flag design using HTML & CSS | @web.component​
Animated Indian Flag design using HTML & CSS | @web.component​
Переглядів 233Рік тому
Animated Indian Flag design using HTML & CSS | @web.component​
Product Card UI design | E-commerce card using HTML & CSS | @web.component18:47Product Card UI design | E-commerce card using HTML & CSS | @web.component
Product Card UI design | E-commerce card using HTML & CSS | @web.component
Переглядів 333Рік тому
Product Card UI design | E-commerce card using HTML & CSS | @web.component
Create User Profile List using HTML & CSS | Pure HTML & CSS | @web.component15:34Create User Profile List using HTML & CSS | Pure HTML & CSS | @web.component
Create User Profile List using HTML & CSS | Pure HTML & CSS | @web.component
Переглядів 328Рік тому
Create User Profile List using HTML & CSS | Pure HTML & CSS | @web.component
Registration Form using HTML & CSS | Without Bootstrap, pure HTML & CSS | @web.component26:31Registration Form using HTML & CSS | Without Bootstrap, pure HTML & CSS | @web.component
Registration Form using HTML & CSS | Without Bootstrap, pure HTML & CSS | @web.component
Переглядів 1 тис.Рік тому
Registration Form using HTML & CSS | Without Bootstrap, pure HTML & CSS | @web.component
Floating Label Input using HTML & CSS | Without Bootstrap, pure HTML & CSS11:01Floating Label Input using HTML & CSS | Without Bootstrap, pure HTML & CSS
Floating Label Input using HTML & CSS | Without Bootstrap, pure HTML & CSS
Переглядів 410Рік тому
Floating Label Input using HTML & CSS | Without Bootstrap, pure HTML & CSS
Login Form Using Pure HTML & CSS20:22Login Form Using Pure HTML & CSS
Login Form Using Pure HTML & CSS
Переглядів 340Рік тому
Login Form Using Pure HTML & CSS

КОМЕНТАРІ

  • @akibknowsit8030
    @akibknowsit8030 19 днів тому

    Responsive nehi hai bhai

  • @CandianAvgeek
    @CandianAvgeek 2 місяці тому

    How does the link work with the drop down menu because I linked the dropdown buttons to go to a site and it doesn’t work, do you know why that could be?😊

  • @PietroBuzzini
    @PietroBuzzini 2 місяці тому

    someone can give me the code in html and css in text please. I need to do a work, thank you

  • @BhargaviTanneru
    @BhargaviTanneru 3 місяці тому

    thank you

  • @saeedanvari91
    @saeedanvari91 3 місяці тому

    beautiful 👍👍👍👍👍👍👍👍

  • @dananavineeth4776
    @dananavineeth4776 4 місяці тому

    Thank yu

  • @mantsnba
    @mantsnba 5 місяців тому

    HI what to do to make working theese menu? i mean if i click a button from menu it should teleport me to this section

    • @web.component
      @web.component 4 місяці тому

      Hi, You can add click events on the menu items using JavaScript. Thanks

  • @AHSANHABIBMUAZ
    @AHSANHABIBMUAZ 5 місяців тому

    OMG, Great broooh

  • @Yourschayanika
    @Yourschayanika 5 місяців тому

    After a long days brother

  • @Md_Yasin-9.8
    @Md_Yasin-9.8 5 місяців тому

    just wow..& so much helpful...we want more & more videos..please upload more & more videos

  • @Yourschayanika
    @Yourschayanika 5 місяців тому

    After long days mr.webcomponent

  • @Yourschayanika
    @Yourschayanika 6 місяців тому

    Where is your new video?

  • @thiskarolek3086
    @thiskarolek3086 7 місяців тому

    good :)

  • @camille7576
    @camille7576 7 місяців тому

    Hello ! Can you tell me what is written after « Segoe UI, … » please !!

    • @web.component
      @web.component 7 місяців тому

      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  • @ShivamKumar-rz7uv
    @ShivamKumar-rz7uv 8 місяців тому

    html tag ( select , option)

  • @creatorfrendly9408
    @creatorfrendly9408 8 місяців тому

    This is speedrunning

  • @박공부-m5h
    @박공부-m5h 8 місяців тому

    좋은 강의 올려주셔서 감사합니다

  • @SunzuChris
    @SunzuChris 9 місяців тому

    great video

  • @dragansimeunovic4176
    @dragansimeunovic4176 9 місяців тому

    Unfortunately, the quality of the video is poor, the letters are blurry and unreadable!

    • @web.component
      @web.component 9 місяців тому

      will try to fix in upcoming videos. Thanks

  • @Yourschayanika
    @Yourschayanika 9 місяців тому

    I like your videos mr.web component

  • @dragansimeunovic4176
    @dragansimeunovic4176 9 місяців тому

    Very nice and useful, thank you !

  • @demo1905
    @demo1905 9 місяців тому

    Looking good

  • @demo1905
    @demo1905 9 місяців тому

    This is good do you use frameworks or just html,css?

  • @demo1905
    @demo1905 9 місяців тому

    Nice keep it up

  • @l4fd145
    @l4fd145 11 місяців тому

    Thank you for sharing, very good video!

  • @JonnakutiKiranBabuBVCE
    @JonnakutiKiranBabuBVCE 11 місяців тому

    Awesome brother Excellent

  • @brightasinde7034
    @brightasinde7034 11 місяців тому

    Please your contact menu is empty How can you add register or login form as contact submenue

    • @web.component
      @web.component 11 місяців тому

      Yes you can add form similarly like services(in the video) in contact submenu

  • @abduljayconteh1858
    @abduljayconteh1858 Рік тому

    Good wan

  • @Yourschayanika
    @Yourschayanika Рік тому

    Very beautiful.. mr.web component

  • @Yourschayanika
    @Yourschayanika Рік тому

    Good going.mr web component 🙂

  • @najninsayat5389
    @najninsayat5389 Рік тому

    Nice ☺

  • @acctualy4073
    @acctualy4073 Рік тому

    good video helped a lot

  • @jayesh4937
    @jayesh4937 Рік тому

    Nice one thanks, how do I actually make them work?

    • @web.component
      @web.component Рік тому

      Thanks. By adding javascript you can make it functional.

  • @Yourschayanika
    @Yourschayanika Рік тому

    Wow 😮

  • @harmin1
    @harmin1 Рік тому

    Good navigation bar😊

  • @LukeDorny
    @LukeDorny Рік тому

    Those dropdown list-items should be anchors.

  • @HDmovieG
    @HDmovieG Рік тому

    Sir great learning but i stucked to add logo element before the home tab within tha same nav bar as you are not using bootstrap here so please explain me how to control the size of logo

    • @web.component
      @web.component Рік тому

      Please try to add width or height to the Logo. You can refer to this video: ua-cam.com/video/cPmd9bEKBo0/v-deo.htmlsi=Npbrq7jcP_joi6Zv Thanks.

    • @HDmovieG
      @HDmovieG Рік тому

      🙏 thanks

  • @poweredbygowtham2344
    @poweredbygowtham2344 Рік тому

    ❤ Mastered!

  • @shahabhosseiniashna1710
    @shahabhosseiniashna1710 Рік тому

    thanks🙏🙏

  • @Lazimjr
    @Lazimjr Рік тому

    your different, keep doing❤

  • @AbulKashem-wk5pw
    @AbulKashem-wk5pw Рік тому

    Excellent Brother. Thanks

  • @WebDesigner5322
    @WebDesigner5322 Рік тому

    excellent

  • @bkishwarchavan7787
    @bkishwarchavan7787 Рік тому

    Very eady to understand ....thanks❤

  • @shaikhdanish8428
    @shaikhdanish8428 Рік тому

    Big fan of uh❤❤❤

  • @shaikhdanish8428
    @shaikhdanish8428 Рік тому

    Awesome ❤❤👍👍 sir please make more videos about navigation bar

  • @shaikhdanish8428
    @shaikhdanish8428 Рік тому

    Sir make video about basics of javascript

    • @web.component
      @web.component Рік тому

      Will definitely try to cover these basics in future.

  • @opiirix3302
    @opiirix3302 Рік тому

    This is nice

  • @JonnakutiKiranBabuBVCE
    @JonnakutiKiranBabuBVCE Рік тому

    Amazing Bro Best Design ever I Seen Super Brother Keep Rocking

  • @CamaguNcoso
    @CamaguNcoso Рік тому

    I'm learning frontend development in freecodecamp and I want to advance my skill. This will help me a lot

  • @agsanjayram
    @agsanjayram Рік тому

    i am newbie to css , let me know how you mastered the css like this? any suggestions

    • @web.component
      @web.component Рік тому

      Do practice, that's what I do, try out some designs/effect which you would like to do.

    • @agsanjayram
      @agsanjayram Рік тому

      @@web.component thanks bro