Responsive Product Card UI Design | Html CSS Responsive Design Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 เม.ย. 2019
  • Enroll My Course : Next Level CSS Animation and Hover Effects
    www.udemy.com/course/css-hove...
    ------------------
    Join Our Channel Membership And Get Source Code Everyday
    Join : / @onlinetutorialsyt
    ------------------
    Please LIKE our Facebook page for daily updates...
    / online-tutorial-html-c...
    ------------------
    Used Image Url :
    store.nike.com/in/en_gb/produ...
    Music Credit
    Track: Jordan Schor & Harley Bird - Home [NCS Release]
    Music provided by NoCopyrightSounds.
    Watch: • Jordan Schor & Harley ...
    Free Download / Stream: ncs.io/HomeYO

ความคิดเห็น • 83

  • @perseyiis
    @perseyiis 4 ปีที่แล้ว +1

    LOL is this kind of tutorials really free? Man You deserve enormous respect. God bless you

  • @scholarbrainxx6602
    @scholarbrainxx6602 5 ปีที่แล้ว +2

    Your instinct and creative concept in coding especially in CSS is just too Brilliant for me to have a glimpse. I've really learnt from you and still learning. i would love to see creative concept in PHP language cause that's my main programming language. God Bless You. Thanks so much.

  • @franciscangco2664
    @franciscangco2664 5 ปีที่แล้ว +3

    Love this tutorial man! This channel just keeps on giving.

  • @pemadechen9901
    @pemadechen9901 5 ปีที่แล้ว

    very beautifully done ..Totally loving it. With so much simplicity and love, u write the code, man u are an inspiration

  • @zahihmi9123
    @zahihmi9123 3 ปีที่แล้ว

    Tnx for teaching me how to make responsive 😍 I’ve done 4my website

  • @oOcitizenOo
    @oOcitizenOo 5 ปีที่แล้ว +1

    Looks stylish! Thanks for tut!

  • @mr.webdev3700
    @mr.webdev3700 5 ปีที่แล้ว +3

    Wow, great design! Thanks for sharing!

  • @boburrafikhjanov9910
    @boburrafikhjanov9910 5 ปีที่แล้ว +1

    Just wonderful!!!

  • @pascalpetrillo7963
    @pascalpetrillo7963 5 ปีที่แล้ว +1

    Love those shoes :p
    Thank you for your time anyway

  • @Vishal-fz8ug
    @Vishal-fz8ug 5 ปีที่แล้ว

    Sir aap bahut bdiya tutorial banate ho aur itni creativity hai aap me

  • @boyjunet8500
    @boyjunet8500 5 ปีที่แล้ว +1

    thank you so much bro!

  • @viroj1
    @viroj1 5 ปีที่แล้ว +3

    Wow... ts so responsive

  • @jesuspereiraoficial
    @jesuspereiraoficial 5 ปีที่แล้ว

    Waooooooo its great. Thanks! Winderfull work. Congratulations.!

  • @venkatachalamsubramanian9045
    @venkatachalamsubramanian9045 5 ปีที่แล้ว

    Nice design, informative

  • @jeetjeet4585
    @jeetjeet4585 5 ปีที่แล้ว +1

    awesome bro

  • @anonymoususer6103
    @anonymoususer6103 5 ปีที่แล้ว +1

    Great !

  • @AsifAli14280
    @AsifAli14280 5 ปีที่แล้ว +2

    Very Niceee Brother😍😍😍💝

  • @viroj1
    @viroj1 5 ปีที่แล้ว +4

    Hey let's raise some more subscribers and lets reach more out there. Its so informative all your videos.

  • @falentinodjoka6732
    @falentinodjoka6732 4 ปีที่แล้ว

    Very usefull tutorial. I very like this channel cause always give me some new ideas .. good channel ..
    From Indonesia ..

  • @creatorsvenue5432
    @creatorsvenue5432 5 ปีที่แล้ว +1

    nice really helpful videos

  • @tejaswianand2519
    @tejaswianand2519 5 ปีที่แล้ว +1

    present sir 🤗

  • @wasiqsohail673
    @wasiqsohail673 5 ปีที่แล้ว +1

    Nice

  • @hughorr
    @hughorr 5 ปีที่แล้ว

    Thank you

  • @shreyasd4663
    @shreyasd4663 5 ปีที่แล้ว +1

    #ONLINE_TUTORIAL BUG(report):- The background letter NIKE should auto resize itself in response to the viewport.
    Awesome Card! (Y)

  • @titogoda
    @titogoda 5 ปีที่แล้ว

    Hey,
    I love your videos soooo much.
    Thanks a million.
    My only request is that you always make the background color at the start dark and we don’t see anything till the end.
    I suggest let the background color be the last thing so we able to see the changes.
    Thanks

  •  4 ปีที่แล้ว

    Thanks!

  • @monsieurkone.
    @monsieurkone. 5 ปีที่แล้ว +3

    MERCI

  • @yonisherer
    @yonisherer 5 ปีที่แล้ว +4

    Can you put this on the app or website they both need updating

  • @SChannel404
    @SChannel404 5 ปีที่แล้ว

    Mantap

  • @user-kh7fv5rn1g
    @user-kh7fv5rn1g 3 ปีที่แล้ว

    follow you 100%

  • @niltoncs7739
    @niltoncs7739 4 ปีที่แล้ว

    Perfeito!

  • @flamethings
    @flamethings 5 ปีที่แล้ว

    Best responsive

  • @r2tecnologiaseg.eletronica878
    @r2tecnologiaseg.eletronica878 5 ปีที่แล้ว

    Bom dia, você poderia estar usando o WeBuilder 2018, assim, veria a transformação imediatamente

  • @yangchun7458
    @yangchun7458 5 ปีที่แล้ว +5

    Actually your css skills made me feel I’m so dumb

  • @oskarolortegui9623
    @oskarolortegui9623 4 ปีที่แล้ว

    Awesome!... eh can someone could explain me why did he use "position relative and display flex" one next to eachother? 2:25

  • @JonathanGomez-nv6ig
    @JonathanGomez-nv6ig 5 ปีที่แล้ว +2

    @import url(fonts.googleapis.com/css?fa ??????????? what code is the following ? please

  • @shtctsauce6273
    @shtctsauce6273 5 ปีที่แล้ว

    what is the image size of the shoe.png? mine really big size image

  • @ericlenesilva7886
    @ericlenesilva7886 5 ปีที่แล้ว +2

    like

  • @rjevangelista9769
    @rjevangelista9769 5 ปีที่แล้ว

    You're really amazing. Is it okay to use your code for commercial project. Because I'm planning to create a landing page for a company.

  • @smileplease4812
    @smileplease4812 5 ปีที่แล้ว +1

    bro i want website view counter code and that is become very attractive....pls upload soon...and very useful for coders

  • @MrXahoiden
    @MrXahoiden 5 ปีที่แล้ว

    hey do you have a link to download your files like shoes?

  • @stephanywanjiru
    @stephanywanjiru 5 ปีที่แล้ว +1

    hi,
    how can I get the actual image?

  • @A_Danni
    @A_Danni 5 ปีที่แล้ว

    it can be used in my projects?

  • @ateeqkhan9832
    @ateeqkhan9832 5 ปีที่แล้ว

    Sir ji mere 2 question the( display:flex),.
    Or. ( flex-wrap: wrap;) kiya hota hai

  • @Coding_Asmr_PraDev
    @Coding_Asmr_PraDev 5 ปีที่แล้ว +1

    Hi bhai

  • @davidkrcmar1470
    @davidkrcmar1470 5 ปีที่แล้ว +2

    what is this programming editor? thank you for answer😊

  • @s4nch3zukr18
    @s4nch3zukr18 5 ปีที่แล้ว +1

    0:21 what's programm? Tell me please, i really need it!

    • @abdulimad9601
      @abdulimad9601 4 ปีที่แล้ว

      open your HTML file in chrome and right-click on the page and click inspect element.

  • @Coding_Asmr_PraDev
    @Coding_Asmr_PraDev 5 ปีที่แล้ว +2

    Do you use PNG of shoe

  • @heyyy4987
    @heyyy4987 4 ปีที่แล้ว

    fucking nice..thanks

  • @raulito1259
    @raulito1259 5 ปีที่แล้ว +1

    what is your github ?

  • @harshagrahari3817
    @harshagrahari3817 5 ปีที่แล้ว

    Can you make responsive filter page?

  • @flashgamers8588
    @flashgamers8588 5 ปีที่แล้ว +2

    aap kahan se hain sir please batao yaa koi jaanta hai wo bhi bta sakta hai please

  • @rasi9031
    @rasi9031 5 ปีที่แล้ว +4

    Game coding's pls.....I am already request them....

    • @lvendrame
      @lvendrame 5 ปีที่แล้ว

      They have it on official Android App
      play.google.com/store/apps/details?id=com.mtz.onlinetutorials

  • @rengoku9530
    @rengoku9530 5 ปีที่แล้ว +1

    Please sir

  • @parshuramjadhav2467
    @parshuramjadhav2467 5 ปีที่แล้ว

    Please give code on description...

  • @karoreno
    @karoreno 5 ปีที่แล้ว

    what is the image size of the shoe.png?

    • @shtctsauce6273
      @shtctsauce6273 5 ปีที่แล้ว +1

      i try 900px and its work good

    • @karoreno
      @karoreno 5 ปีที่แล้ว

      @@shtctsauce6273 thank you sir

  • @kevinz407
    @kevinz407 4 ปีที่แล้ว

    Where can i get the code? Pls

  • @stackdeveloper6614
    @stackdeveloper6614 5 ปีที่แล้ว +1

    Can we achieve this design using bootstrap ?

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  5 ปีที่แล้ว +1

      With bootstrap or without bootstrap both are possible

    • @shreyasd4663
      @shreyasd4663 5 ปีที่แล้ว

      well YES. but probably it's not worth it.

    • @stackdeveloper6614
      @stackdeveloper6614 5 ปีที่แล้ว

      @@shreyasd4663 why

  • @shreeshaaithal-
    @shreeshaaithal- 3 ปีที่แล้ว

    Please please give me the source code please 🙏🙏🙏🙏🙏🙏🙏🙏🙏 it is very nice tooo

  • @charlottekatakuri5534
    @charlottekatakuri5534 5 ปีที่แล้ว

    Image size pls

  • @maximiloi
    @maximiloi 5 ปีที่แล้ว +1

    why !important .details? when work .container .details

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  5 ปีที่แล้ว

      I was try to do without important but its not working...so i used !important...

    • @maximiloi
      @maximiloi 5 ปีที่แล้ว

      ​@@OnlineTutorialsYT you used .container .details for all permissions, and in media expression only .details didn't work

    • @dangy77ify
      @dangy77ify 4 ปีที่แล้ว

      Lol. Amazing. I tried without! Important. Thật is reason why it not working :) thx

  • @BiteUA
    @BiteUA 4 ปีที่แล้ว

    Ну и к чему эта плавная анимация при ресайзе, если пользователи не масштабируют экран, а значит смогут увидеть эффект лишь разработчики?

  • @rohit_singh_096
    @rohit_singh_096 5 ปีที่แล้ว

    Bhai Tera application kab work Karega

  • @rengoku9530
    @rengoku9530 5 ปีที่แล้ว +1

    Please sir