Overlapping Layout With CSS Flex Box

Подписаться 57 тыс.

Просмотров 94 тыс.

50% 1

Today we are going to create an overlapping layout with CSS FlexBox. This is a popular layout that you might see on many website & today we're going to see how you can do that. Hope you will like it.
🔔subscribe and turn on the notification bell.
👉 source code: codepen.io/Web_Cifar/pen/dyXNVep
✨ Like our works and want to support us? 🚀
We'd really appreciate a coffee: www.buymeacoffee.com/shaifarf...
▶ Also Watch :
Make a full website with HTML & CSS: • One Page Full Website ...
HTML & CSS Landing Page : • HTML & CSS Website Lan...
Mini Project for HTML & CSS : • Responsive Website Wit...
How To Make A WordPress website: • How To Make A Professi...
▶ Some useful Playlist :
HTML & CSS: • HTML & CSS
Vanilla JavaScript : • Vanilla JavaScript
Frontend Mentor Challenges: • Frontend Mentor Challe...
30days30submits Challenge: • 30days30submits
🌐 Join The Community :
Our website : webcifar.com/
Facebook Page : / webcifar
Facebook group : bit.ly/fb-group-webcifar
Instagram : / web_cifar
twitter : / webcifar
Github: github.com/WebCifar
#webCifar #overlappingLayout #CSS

Наука

Опубликовано:

25 окт 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 96

@webcifar 3 года назад

🔔subscribe and turn on the notification bell. 👉 source code: codepen.io/Web_Cifar/pen/dyXNVep 👉 Facebook group : bit.ly/fb-group-webcifar

@mdshiponahammed1074 2 года назад

@dylansalvador6782 2 года назад

instablaster...

@JaneDoe-sw4wz 3 года назад

THIS TUTORIAL WAS EXACTLY WHAT WAS IN MY MIND AND I WOULDNT DONE IT WITHOUT YOU TYSMM!!

@lifeisbeautiful4491 3 года назад

Hello, Just wanna say that your videos are really helping me a lot. Just keep on doing the thing. Hope to get more videos on coming days.

@samuelqz2471 Год назад

What a video bro! Can't thank you enough! Thank you so much you made life so much easier!

@saucedbenny 3 года назад

I’ll save everyone 18 minutes: negative margin

@yusufhassan3055 Год назад

Bro ur helping me add to my skillset may god bless you. U even got me through a couple of projects

@captaineliasplayz8824 3 года назад

Amazing tutorial clear, fast and amazing!

@jess.777 8 месяцев назад

This is exactly what I was looking for!! 🤩

@colindante5164 2 года назад

Thanks and you did an amazing job explaining this to us folks. )))

@_blackmesa 2 года назад

wow! great video. you make it look so easy. I'll be on the lookout for z-index and container videos.

@joshuajaydan 2 года назад

Using your code from the codepen, the contents of the h1 are in a single row. I think you need to add 'flex-direction: column;' to get them to stack.

@lavglidesgh6266 Год назад

Thanks for the simplicity I did have to add display:flex to the left class before the right came to the center

@siddharth.ingale 3 года назад

Thanks for making the tutorial video about Overlapped Layout. I kinda needed it. 😍

@webcifar 3 года назад

Glad to hear that! ✌🐱‍🏍

@geraldnoah9927 2 года назад

This is beautiful! ty you man! followed ya on twitter already!

@eichan3180 Год назад

Thank you very much. Your guided is really support to improve in this way. Really thank you.

@sindyospina8214 3 года назад

Thank you, very useful! :)

@hassenhamrouni2147 3 года назад

Awesome , MAN . I love your creativity and your way of building web components . I'd love if you do a video on a responsive megamenu using html pure css and js with a search box, even a simple one . much respect !

@webcifar 3 года назад

Noted

@ashrafulrahmansakil9612 2 года назад

it's a very helpfull video .thanks , you remove my tension.

@sylvanusjoseph1140 2 года назад

Thank You. Great Tutorial.

@astha2827 Год назад

thank you SO much you saved my life

@harshneerajan4011 2 года назад

I did this and I added some sections after this overlap section - but then the below added sections are hidden under the div(which contains the overlap elements).

@_iLoveCoding Год назад

Thanks man this is very helpful, I tried to follow every step but on the mobile screen, I'm not getting the empty margin top and bottom! any help please

@tonytony-fc6gq 2 года назад

thanks very much i spent hours trying to do this layout , never thought of using negative margins

@ivanalvarado3646 Год назад

Mate I had no idea negative margins were even possible until today. I'm learning and him using a negative margin changed everything.

@joannamatanga233 3 года назад

Thank you SOOOOO much!

@rexism886 3 года назад

thanks man i really appreiacte

@mervyndeanhilary2831 2 года назад

you are a good teacher...

@majgajsek7818 2 года назад

Cifar this was a great vide :D

@trishaseal7782 Год назад

Thanks a lot!

@servantofthesupremeallah2895 Год назад

Tnx a lot u solved a problem of mine

@mervyndeanhilary2831 2 года назад

if i want to make my images or the container section have some padding at the top, how do i?...

@ipsitsaha 2 года назад

Can you make it with 3 divs ? Like in center we can have conten.. then left and right .. bottom and upper corner two pics..

@aagamvora699 3 года назад

Thank you .. Keep making these kind of short videos ..😍❤

@webcifar 3 года назад

Sure 😊

@soniadarshsuresh8240 2 года назад

how to solve the problem of overlapping of image slider on navigation bar. Because When I created my Image slider it is not compatible with my Navigation bar as the Image is Overlapping on the Navigation bar and creating problem for the Navigation bar.

@mervyndeanhilary2831 2 года назад

Today we are going to create a overlapping layout wit CSS FlexBox. This is a popular layout that you might 'saw' on many website.... please edit your description to 'might see'

@webcifar 2 года назад

Thank You

@davidbugatti2159 3 года назад

Hi Cifar, excellent video. But I have one question, do you use rem and em instead of pixel for responsive design? I see that you use px in this video, thanks..

@webcifar 3 года назад

Yes, correct. I use usually use rem for the font and for the spacing i use em. But in this video it's just a web component, so i just used px.

@mariselaespinoza4112 3 года назад

You did a great job explaining everything! Thank you =]

@webcifar 3 года назад

Glad it was helpful!

@sawalikorde2722 3 года назад

perfectly explained.

@neeshsamsi 3 года назад

Love the content keep it up 😁

@webcifar 3 года назад

Thanks! Will do!

@harshbundela9403 2 года назад

Thank you so much sir

@SAL73VFX 2 года назад

Excellent tutorial, it did help me a lot, thanks!

@webcifar 2 года назад

Glad it helped!

@felix_codes 2 года назад

Good tutorial!

@sawalikorde2722 3 года назад

awesomeeee

@user-yf6rp4rm8e 3 года назад

Thx!this turtorial! could you teach Overlapping Layout one page use flexbox turtorial? thx you~

@nagpalnirmal 2 года назад

Thanks Sir

@Khaenman1 2 года назад

Thanks for sharing!

@webcifar 2 года назад

Our pleasure!

@TenoriGaby 2 года назад

Excelent video it helped me a lot!

@webcifar 2 года назад

Glad to hear it!

@snapattack13 3 года назад

Thx a lot very useful video

@webcifar 3 года назад

Welcome ✌

@millermcdonell291 2 года назад

Thanks a lot, helped me so much. ☺☺

@webcifar 2 года назад

Glad it helped!

@stf8375 3 года назад

Great tutorial !

@webcifar 3 года назад

Thank you!

@FransixWeb 3 года назад

Nice one

@webcifar 3 года назад

Thanks 🔥

@touseefibnkhaleel3643 3 года назад

beautiful

@webcifar 3 года назад

Thanks

@sully9832 Год назад

9:46 is when he actually shows you how to over lay (it just a negative margin), you're welcome.

@alitopedits 2 года назад

Thanks 👍👍👍

@webcifar 2 года назад

Welcome 👍

@mariakausar2477 Год назад

💯👍

@Miguel-vk4dn Год назад

Thank u so much!!!

@debrad.castleberry2457 3 года назад

Amazing

@webcifar 3 года назад

Thank you! Cheers!

@manishabhumi2357 3 года назад

❤️

@emiralic3355 3 года назад

Great video, thank you! But i got one problem, my image in css does not work, just did what you did and just dont get it. i have tried many ways to solve this.