greate🥰🥰

Very nice !! And thank you for sharing the code.

how to make that in react js?

Great Work Bro!

Is this an automatic slider?

THANK YOU BROOOOOOOOOOOOOOOOOOOOOO

how to add swiper js like this vide to elementor wordpress ?

Very clear explanation sir

the listStyleType doesnt work with emojis?

Correction: 0.55s - It is multi slide preview (both voice and title copy in preview document)

where is multi slider ???? Are you real Teacher..WTF

<div class="bg-yellow-100 h-screen"> <div class="flex justify-center gap-14 pt-[110px]"> <div class="p-10 w-[20%] rounded-full bg-yellow-500 "></div> <div class="p-10 w-[20%] rounded-full bg-yellow-500 "></div> <div class="p-10 w-[20%] rounded-full bg-yellow-500 "></div> </div> </div> i did like this ... few changes

How to change default navigation buttons(prev, next) on my buttons?

can you add the source code in the description:>

This is my solution. It does not use the linear gradient approach and consequently makes it a bit easier to understand: <div class="cent"> <div class="tri"></div> </div> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { position: relative; display: flex; align-items: center; justify-content: center; background: #DBBA30; } .tri { position: relative; transform: translate(0px , 30px); width: 0px; height: 0px; border-style: solid; border-width: 0 100px 100px 100px; border-color: transparent transparent #DBBA30 transparent; } .cent { width: 200px; height: 60px; background: #A95415; box-shadow: 0px -70px #A95415, 0px 70px #A95415; } </style>

Glad you are enjoying Tailwind Battle!

multi slider kidhar he ek page me???

Thank you for Inspiration Credit! Good work! -KrautGTI

u can remove the #f8B140 in box shadow from all and give color:#f8B140 this will reduce the character

Please keep making more❤❤

Great

thank you

Here is my solution: <div class="trap"> <div class="square"></div> </div> <style> *{ margin:0; padding:0; box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; background: #C31C1D } .trap { width: 240px; height: 160px; transform: translate(0px,70px); clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); background: #660301 } .square { width: 40px; height: 40px; background: #C31C1D; transform: translate( 60px, 120px); box-shadow: 40px 0 #C31C1D, 80px 0 #C31C1D, 40px -40px #C31C1D; } </style> <!-- IMPORTANT: remove the comments before submitting -->

This is my solution, box-shadow and conic-gradient to the rescue: <div class="box box1"></div> <div class="box box2"> <div class="littlebox"></div> </div> <style> *{ margin:0; padding:0; box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; background: #EAEB8D } .box { position: relative; width: 100px; height: 100px; } .littlebox { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background: #EAEB8D; box-shadow: -50px 150px #EAEB8D; } .box1 { background-image: conic-gradient(#F48B26 0deg, #F48B26 90deg, #FECE22 90deg, #FECE22 180deg, #F48B26 180deg, #F48B26 270deg, #F9B125 270deg); transform: translate( -50px , 150px); } .box2{ background-image: conic-gradient(#F9B125 0deg, #F9B125 90deg, #F48B26 90deg, #F48B26 180deg, #F9B125 180deg, #F9B125 270deg, #FECE22 270deg); transform: translate( 50px , -50px) } </style>

Another indian making futile videos and wasting people time!

My solution: <div class="panel leftpanel"></div> <div class="panel rightpanel"></div> <div class="toptriangle"></div> <div class="bottomtriangle"></div> <style> *{ margin:0; padding:0; box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; background: #7E2926 } .panel { width: 75px; height: 300px; } .leftpanel { background: #D2934B; transform: translateX(-38px) } .rightpanel{ background: #DEB365; transform: translate(37px, -300px) } .toptriangle { width: 0px; height: 0px; border-style: solid; border-width: 100px 75px 0 75px; border-color: #FEFF92 transparent transparent transparent; transform: translate(0px, -600px) } .bottomtriangle { width: 0px; height: 0px; border-style: solid; border-width: 0 75px 100px 75px; border-color: transparent transparent #FEFF92 transparent; transform: translate(0px, -500px); } </style>

This was relatively easy. This is my solution: <div class="upper"></div> <div class="lower"></div> <style> *{ margin:0; padding:0; box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; background: #6592CF } .upper { position: relative; width: 200px; height: 250px; border-width: 0px 40px 40px 40px; border-color: #243D83; border-style: solid; border-radius: 0px 0px 100px 100px; background: #6592CF; } .lower { position: relative; width: 40px; height: 170px; border-radius: 40px; background: #243D83; transform: translateY(-100px); } </style>

Thank you bro. 🗿👍🏻

My solution: <div></div> <div class= "rev"></div> <style> *{ margin:0; padding:0; box-sizing: border-box; } :root{ --circ: 620px; } body { background: #611B1A; display: flex; flex-direction: column; align-items: center; } div { width: var(--circ); height: var(--circ); border: solid #F16B4A 40px; border-radius: 48.3% 48.4% 0 0 ; translate: -33.9% -0px; } .rev { translate: 33.8% -100%; } </style>

Code

dont use diff when you are writing code, we cant see whats hapening

wow

hey can you recommend any yt channel to learn javascript I already learnt HTML,CSS and I know basics in C language ,it will be helpful thank you

que le costaba porner el codigo al csm

Nice videos man. I started doing the CSS battles after watching your videos. I really like your solution. Thanks for sharing it

You're amazing💗💗💝💝

Amazing stuff man. Don't know how YT algorithm suggested me. You are so underrated man.

Your explanation is amazing💗💗💗

nice video

Hey, how can i add a link to bootstrap icons?

thanks you helped a lot

nevermind codefy teaches the way i would under stand you do your own

try to use divs and more css please it will help us

bro i suggest you to use a easy method (easy code) and then use your way to get high score, im trying to learn not to compete.

أسلوبك رائع في الحل والشرح و لكن رجاءا لا تضع الموسيقى في نهاية الفيديو ❤❤❤❤🙂🙂

how did u manage to find the polygon values?

I'm copy your code but body tag is not working in css battle what's that problem tell me.

new challange video when? im waiting broo

thank you brother from different mother

Please Explain margin: 90+120;? and what the syntax is <p a> ?