Pure CSS Tabs with Slide Indicator | Tabs using only HTML & CSS

Поделиться
HTML-код
  • Опубликовано: 25 ноя 2020
  • Pure CSS Tabs with Slide Indicator | Tabs using only HTML & CSS
    Short Definition:
    A tabbed interface or simply a tab is a graphical control element one can use to contain multiple panels or documents onto a single window for users to access.
    Download Codes From Here - www.codingnepalweb.com/2020/1...
    Second Channel - bit.ly/3aHNkru
    My Code Editor - • Best Text Editor for H...
    Facebook - / coding.np
    Instagram - / coding.np
    Music Credit:
    Track: Ikson - Last Summer
    ➤ Watch: • Ikson - Last Summer
    Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
    ➤ Watch: • Jimmy Hardwind - Want ...
    Track: Lost Sky - Vision [NCS Release]
    Music provided by NoCopyrightSounds.
    ➤ Watch: • Lost Sky - Vision | Du...

Комментарии • 78

  • @CodingNepal
    @CodingNepal  3 года назад +12

    Remember to Subscribe... We're too close of 50k.

  • @photoinshot1355
    @photoinshot1355 Год назад +2

    Fantastic design and a great tutorial. I normally don't watch tutorials without voiced explanation, but this was very well explained without commentary, thanks. Would be really interesting to see how you would make the design concept responsive.

  • @katarozi
    @katarozi Год назад

    Thanks very much. I need more knowledge. Your method is very nice and simple, no need for any heavy and complicated slider library. It has helped me a lot. One more time thank you very much!

  • @tuongvi5392
    @tuongvi5392 2 года назад

    thank you so much. Hope you always be happy and healthy

  • @giridharan07
    @giridharan07 3 года назад

    Your approach is nice...👍

  • @checkmate8015
    @checkmate8015 2 года назад

    At first i was hesitant to follow along but wow i dont regret this helped me, thank you

  • @victorbabalola6094
    @victorbabalola6094 8 месяцев назад

    Thank you for the tutorial, i'm having a problem , im working in a website that uses multiple tabs. the solution work for my first and last webpages. but wen i do the same for my second webpage it doesn't work. when do display none it works but, when i set it to display contents, it doesn't display and i dont know why this soluton is not working for this page . i deleted the whole page and re-wrote the html and css but it still didn't work

  • @checkmate8015
    @checkmate8015 2 года назад

    i just realised that when i refresh my app, the first tab is not selected so the slider sits on top of of the first tab, not only that, the tab content does not show, how can i fix this, also when i try to fix this by adding the "checked" key word it confuses my app coz when i click a tab it sometimes makes it unclickable or i have to click more than once, is it because im using react js? pls help, i just want it to show the content of the first tab when i refresh

  • @igorbueno1856
    @igorbueno1856 2 года назад

    Thank u very much!!!!!

  • @knig8t
    @knig8t 2 года назад

    love your work sir, really brilliant.

  • @rishabhgupta0507
    @rishabhgupta0507 3 года назад +4

    Amazing man...... I'll also try to make one inspired by your code. Thanks for Sharing this :)

  • @parthgupta4850
    @parthgupta4850 3 года назад +4

    Awesome!

  • @romdanatuljannah5244
    @romdanatuljannah5244 Год назад

    Great sir

  • @smithrockford-dv1nb
    @smithrockford-dv1nb 4 месяца назад

    Won't it hurt accessibility due to the ratio being there?

  • @yubiroaster6285
    @yubiroaster6285 3 года назад +5

    No any word for you🤐🤐....... Just awesome ❤️...... Love you brother ❤️ 🤗 ✌️ 🌹🇳🇵

  • @kenangandigital6949
    @kenangandigital6949 Год назад

    Nice info mr, always success

  • @ankitneupane7774
    @ankitneupane7774 3 года назад +2

    I found what I need Thank U very much ☺😄

    • @CodingNepal
      @CodingNepal  3 года назад +1

      You're welcome and don't forget to visit this channel for more awesome and helpful content.

    • @ankitneupane7774
      @ankitneupane7774 3 года назад

      @@CodingNepal Can You Please make responsive tabs using just HTML & CSS

  • @hlfkiller007
    @hlfkiller007 3 года назад +2

    Just Love it

  • @dangminhkhai
    @dangminhkhai 3 года назад +2

    tabs using beautiful. thanks you

  • @pranavchanpara3576
    @pranavchanpara3576 3 года назад +1

    Amezing work👍

  • @lovnyweb7482
    @lovnyweb7482 3 года назад +1

    thank you for your videos 🙏 thanks to you I created my first youtube channel in html and css only 😀.

    • @CodingNepal
      @CodingNepal  3 года назад +1

      Thank you and best luck for your channel 💙

    • @lovnyweb7482
      @lovnyweb7482 3 года назад

      @@CodingNepal Thank you

  • @xander3295
    @xander3295 3 года назад +1

    Wow this is amazing

  • @FRONTRUS
    @FRONTRUS 3 года назад +1

    Awesome 😊

  • @jish194
    @jish194 3 года назад +1

    Hey, alls have ive been doing is watching your vids! For some reason, my slider buttons sit slightly off to one side? any suggestions. Thank you

    • @CodingNepal
      @CodingNepal  3 года назад

      Please check your for attribute value of label tag and id value of input tag. Remember it is must be same

    • @jish194
      @jish194 3 года назад

      @@CodingNepal Thankyou dude/ette!

  • @jessicarodrigues640
    @jessicarodrigues640 2 года назад

    Thank you so much ♥

  • @22sd33sd44ss
    @22sd33sd44ss 3 года назад +1

    You are very crative 👍❤️

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 3 года назад +2

    Wonderful Lovely Excellent

  • @SayemTutorial
    @SayemTutorial 3 года назад +2

    keep up brother

  • @patronpatron2251
    @patronpatron2251 3 года назад +2

    Thank you

  • @user-mSm95
    @user-mSm95 2 года назад +1

    very good

  • @ManiBssProduction
    @ManiBssProduction 3 года назад +2

    Hello, thank you for your tutorial frankly your tutorial its very very clear and useful, I toured your site and I really like your site, please, is it possible to have tutorials of this kind of nav bar that you did for your site? with your search button that does not move jadore and in addition these very responsible

    • @ManiBssProduction
      @ManiBssProduction 3 года назад +2

      I really love your site with your hover system on your navbar

    • @CodingNepal
      @CodingNepal  3 года назад

      Here is the video of that navigation bar - ruclips.net/video/Mn32KmgiFH8/видео.html

  • @ankitneupane7774
    @ankitneupane7774 3 года назад +1

    Please make a video on carousel with indicators using HTML and CSS

    • @CodingNepal
      @CodingNepal  3 года назад

      Here is the video - ruclips.net/video/YunLfczBbkY/видео.html

    • @ankitneupane7774
      @ankitneupane7774 3 года назад

      @@CodingNepal Thank You☺😄

  • @mdyousufislam5812
    @mdyousufislam5812 3 года назад +1

    wow nice

  • @programmer7896
    @programmer7896 2 года назад

    salom I am Uzbek

  • @list2543
    @list2543 2 года назад

    Is this responsive? Please can you give me responsive codes?

  • @asmitatimilsena2886
    @asmitatimilsena2886 3 года назад +2

    🙏👍👍 nice 😅

  • @peressonpaul3303
    @peressonpaul3303 3 года назад +1

    I like the last song played

    • @CodingNepal
      @CodingNepal  3 года назад +1

      Song link in the description

  • @youssradebbali7726
    @youssradebbali7726 2 года назад

    🙋‍♀️❤🤗💐👏

  • @amritpaudel8204
    @amritpaudel8204 3 года назад

    Who are you bro, can't we connect in insta 🤔🤔

    • @CodingNepal
      @CodingNepal  3 года назад +2

      Yes we can connect in insta.

  • @baurny7762
    @baurny7762 Год назад

    in mobile version looking just sucks

  • @prabhakaran5153
    @prabhakaran5153 3 года назад +1

    I pinged you on instagram bro..pls reply

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r 2 года назад

    please buid project oop with js