Squares | HTML CSS

[@learning-axis]

Follow us on:
Facebook: facebook.com/learningaxis01
Instagram: instagram.com/learningaxis01
TikTok: www.tiktok.com/@learning_axis
LinkedIn: www.linkedin.com/company/learning-axis
If You need Graphic designing and web development services please visit [e-mail]
Source code: learning-axis.com/snippets/

[@MnbvcxzMnbvcxz-im8li]

Ok

[@RRASFF]

App ki name

[@learning-axis]

@@RRASFF sublime text

[@Smokeiziz-it3ru]

This guy demonstrates very advanced css knowledge. This is beyond impressive

[@Florent-zh8px]

Exécuter le code

[@learning-axis]

thank you

[@TomeshKanvar-j5l]

Jf

[@Hacker01388]

@@learning-axis bhai center vala rotate nahi kar raha hai kiu?

[@zivot92]

Not really motivating for someone who just start out😂😢
Phase where you strugle to make underlying text just to get animated

[@Hamza_Bhai.]

body {
margin: 0;
height: 10vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.loader, .loader span {
width: 10em;
height: 10em;
border: 0.25em solid white;
font-size: 10px;
border-radius: 1em;
position: absolute;
mix-blend-mode: screen;
}
.loader {
background-color: gold;
animation: rotating 2s linear infinite;
}
@keyframes rotating{
to {
transfoam: rotate(1turn);
}
}
.loader span{
animation: de-rotating 4s linear infinite;
}
@keyframes de-rotating {
from, to {
transform: rotate(0deg) scale(1.2);
}
50%{
transform: rotate(-180deg) scale(1.2);
}

}
.loader span:nth-child(1){
top: 5rem;
left: 5rem;
background-color: dodgerblue;
}
.loader span:nth-child(2) {
top: -5rem;
left: 5rem;
background-color: hotpink;
}
.loader span:nth-child(3) {
top: 5rem;
left:-5rem;
background-color: mediumpurple;
}
.loader span:nth-child(4) {
top: -5rem;
left: -5rem;
background-color: limegreen
}







these boxes are displaying on top instead of center
while the main box which have class( loader) is not rotating
so any body can give me solution

[@Mirabbxs72]

What Is this program for ?

[@abhishekshakya6668]

body {
margin: 0;
height: 75vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}

[@twizzy6845]

@@Mirabbxs72Sublime Text

[@dominusman382]

Bro trying XSS on UA-cam comment 🤡

[@risalmohamad3933]

Work?

[@Swecchhaa]

Satisfying sound😭

[@SayNOToFAPIndia]

Is hee writing that fast and accurate naturally aur is he used any software

[@IshaXbollywood]

Manna padega skills ko bro ❤

[@ihgamingfun6295]

Yup 👍👍

[@dilsediltakwithsrishtinaid7167]

Not bro she is sis check the folder name seema

[@turabhaider6802]

@@dilsediltakwithsrishtinaid7167 lol she is muslim Cuz her name is seemab not seema

[@pratikmohanty6360]

Fell in love with this Sound 💖

[@AinaMughal-ij4xc]

😂😂😂

[@rajeshkumargh...4040]

😂😂😂😂

[@timserious7678]

Brown/red switch Mechanical keyboard sound

[@whiteangel8722]

here the corrected code buddy

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.loader, .loader span {
width: 10em;
height: 10em;
border: 0.25em solid white;
font-size: 10px;
border-radius: 1em;
position: absolute;
mix-blend-mode: screen;
}
.loader {
background-color: gold;
animation: rotating 2s linear infinite;
}
@keyframes rotating{
to {
transform: rotate(1turn);
}
}
.loader span{
animation: de-rotating 4s linear infinite;
}
@keyframes de-rotating {
from, to {
transform: rotate(0deg) scale(0.5);
}
50%{
transform: rotate(-180deg) scale(1.2);
}

}
.loader span:nth-child(1){
top: 5rem;
left: 5rem;
background-color: dodgerblue;
}
.loader span:nth-child(2) {
top: -5rem;
left: 5rem;
background-color: hotpink;
}
.loader span:nth-child(3) {
top: 5rem;
left:-5rem;
background-color: mediumpurple;
}
.loader span:nth-child(4) {
top: -5rem;
left: -5rem;
background-color: limegreen
}

[@learning-axis]

cool

[@MudassirAnsari-g2i]

Good

[@learning-axis]

@@MudassirAnsari-g2i thnks

[@zentraidee9701]

Super cool and super thanks! That fixes my premonition.

[@learning-axis]

@@zentraidee9701 Glad it helped! You're welcome!

[@arf3433]

I’m a beginner to html and this is amazing! It actually worked!😆

[@namratamishra-y7d]

Really mine didnt😢

[@jkingenglish]

it's different watching this after learning about css and html. I want to type that fast oof

[@ay.jay.09]

Like😅

[@RI9246]

I think he has used auto type feature

[@Micha_Swart]

​@@RI9246and I think it's sped up.

[@RI9246]

See in the top at file name it is written auto type at last

[@lintonx777]

Auto type

[@OluwafemiTheYoung]

you can also make the edges less sharp use
border-radius: 50px;

[@learning-axis]

ok

[@OluwafemiTheYoung]

body {
margin: 0;
height: 100vh;

display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
the height is meant to be 100vh instead of 10vh

[@_Maliha_17]

I've tried this today this is absolutely amazing

[@anjurai7658]

Does it work?

[@GamingX2507]

Not working don't know

[@1141_bloodyLovely-roses]

It doesn't work on mine 😢

[@WvNTED]

I done drifted off mid way until I saw the end 😂

[@ScriptFUN]

Keyboard sound is very perfect!!

[@learning-axis]

thanks

[@Soulfulvibs]

Really impressed

[@learning-axis]

thank you

[@अभयदीप-ज1ग]

Great भारतीय MUST BE TO ALL

[@Uneek_Earnings]

this is really awesome but i don't understand this code because i am beginner 😅

[@learning-axis]

oh soon you will learn it

[@SomayaAsma]

Same 😂😂

[@icandoit4385]

​@@learning-axisaap too yhee kahenge bro😅😢 kyuki hme nhi atta...
but html ko seekhne ka best method btayiye

[@animefanhubsingh]

​@@learning-axismaster aap hi seka do

[@Mohit017]

Same 😂

[@tarun9883]

It's working dude
I loved it ❤️❤️‍🔥

[@learning-axis]

thank you

[@Dixu_kay.]

Every thing goes out of my mind

[@alfredobarrios4017]

Esa cantidad de escriturad que logran buscar cin eso, son codigos establesidos que por regla hay que aprenderlo de memoria si o si Vaya Chevre.

[@Calibre336]

Html is easiest language you can learn within 2 hours.

[@jansikuppusamy5352]

I am like the sound

[@abhaypaswan950]

But upar to likha hai autotype😂😂

[@tegaemmanuel-y4k]

Nice
Thank you so much
I learn so much things in this video

[@dkrogerzin]

Programation is Beatiful

[@learning-axis]

yes, thanks

[@izoo-mm9uk]

To code this just on memory is insane

[@dektra00]

It worked, Amazing

[@learning-axis]

thank you

[@Inform_Boost]

Result is nice ❤

[@zenkaiog]

Dat typing speed tho

[@your-advisor-friend]

really awesome

[@jeelani_shah2258]

ua-cam.com/video/6-le3mupCRM/v-deo.html

[@didosalih1089]

Beautiful 👌🏼

[@learning-axis]

thank you

[@अभयदीप-ज1ग]

OM ॐ नमः शिवाय

[@sound2bell448]

ME WATCHING YOU WRITE CODE
ME:-I KNOW HOW TO WRITE HELLO WORLD CODE😂

[@learning-axis]

😅😅😅😅😅

[@VivekYadav-vv3si]

Background Music + Coding + Coffee ❤

[@learning-axis]

❤

[@WillsOp]

I also tried it in my phone and it happened..
Thanks bro

[@oussamaabouhafs7756]

yeah it's working guys just don't forget to copy the body part span ...

[@ÁnhNguyễn-p8i]

So great

[@learning-axis]

thank you

[@aiideeskitchen7975]

Good job. Keep it up

[@learning-axis]

thank you

[@SunilPal-in9en]

Super bhai ❤

[@learning-axis]

thank you

[@Riyansh-A8]

The fact that you memorize every single function is incredible, I just use the internet to learn the syntax.

[@rah.248]

Dont worry, 90% of developers use google when coding

[@Riyansh-A8]

@@rah.248 ok lol.

[@sarah_ferguson]

This inspires me to get a thocky keyboard, learn how to code, and create coding ASMR (audio & visual)

[@undrathiraviteja7514]

Thank you ❤

[@mahidmunna01]

Just Wow❤

[@learning-axis]

thank you

[@Mindspectrum]

I was really good 10-15 years ago and now I could not understand half of the css code.. So many changes since the good old years of "background-color:.." :D

[@learning-axis]

Things have definitely evolved! CSS has come a long way with features like Flexbox, Grid, and animations. But the basics like `background-color` are still the same-just with more powerful tools now!

[@TechBox2026]

Fantastic

[@learning-axis]

thank you

[@aandresdev]

Very useful! Thank you so much!

[@vanpersiejohntez2728]

tried and partially worked,,, good for a start

[@learning-axis]

cool

[@monikakanojia8350]

I have tried too but nothing displayed except black background
Can you plz help me?

[@learning-axis]

@@monikakanojia8350 I think You have made mistakes in the code.

[@rahulphilip4909]

​@@learning-axistransform: rotate (1turn) isn't working

[@KhoriyohYusri]

Thank you sir this is awesome information news and learning today ❤

[@emmanuelokunola6391]

Wow that's awesome

[@learning-axis]

thank you

[@anthonyamanat674]

Great work

[@UnknownLegenD.123]

Bhai maine kiya bohot beautiful tha thanks🙏🏻

[@nishaanjum4901]

Mind blowing sir!

[@raushankumar-qp3rv]

You have good skills 😮

[@CHAS-fw4qm]

One day 🙏🏾

[@learning-axis]

sure

[@HrythmRajSharma]

Can u please make full tutorial vedio of html ,css,js ...😊

[@ezechimaobi5167]

Internal css

[@SamsungA04e-dp7kj]

ALJABAR ABSTRAK
Prof Dr Indah Emilia Wijayanti SSi MSi
MATEMATIKA F-MIPA UGM

[@OmarSayeed2010]

Impressive

[@learning-axis]

thank you

[@webprogrammingtutorials-alo69]

Excellent

[@TwizzyyyFN]

i just changed my major from mechanical engineering to software engineering bc i want to do front end website development. seeing this honestly has me so scared and overwhelmed

[@learning-axis]

cool you should start learning website development.

[@TwizzyyyFN]

@@learning-axis i started learning html using codecademy earlier today. i got through all of the basic functions okay. i started to struggle a bit on table functions and that’s where i stopped for the day.

[@saquibahmed5929]

@TwizzyyyFN Hey, what’s you are learning now?

[@TwizzyyyFN]

@@saquibahmed5929 i’m doing software engineering with a concentration in cyber security now

[@yasirujayathilaka5963]

Hey bro don't type basic html commands in html file in sublime text. Instead type html and press the Tab button . I think it will usefull 😊

[@ITOKI80]

Thanks

[@_steve323]

Hats of you bro ❤🎉

[@MDSahilAliMolla]

feel like ASMR video

[@khalnayak_adi]

❤❤❤

[@joserodriguesco]

Eu consegui fazer. woowww top

[@learning-axis]

thank you

[@Yash_01580]

This is so advance css coading language 😊😊🎉so amazing 😍🤩🤩

[@bits_butterfly010]

Nice 😮

[@JafarTuychiyev-k7c]

good

[@learning-axis]

thank you

[@MendhiXideas]

Aj again banaya ha ban gaya❤❤❤

[@learning-axis]

great

[@codeitbro]

Amazing!!

[@olayadecharles2537]

How does one get this good?😭😭

[@learning-axis]

do practice.

[@PodNex]

Just press ! And enter

[@ROLEXGOD755]

After output me== tum kahna kya chahe te ho😂😅

[@learning-axis]

😅😅😅😅

[@Irediranokunmakinde]

Love it ❤

[@learning-axis]

thank you

[@osisejeremiah533]

❤❤❤❤❤❤❤❤❤ Good work.

[@mdbappy7580]

ভাইয়া ছোট একটা অনুরধ cyber security শেখার জন্য কোন কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ শিখতে হবে।

[@learning-axis]

If you want to learn cyber security we offer paid course.

[@makansari1425]

lovely

[@el-op1vc]

i have peaked and i understand most of this

[@learning-axis]

That's great to hear! If you have any specific questions or need further clarification on anything, feel free to ask.

[@flourishjames04]

I'm a beginner and I just fall in love with coding again 😂😂

[@learning-axis]

cool

[@magnosantosoficial9378]

Top demais show 🎉

[@user-gq1bs1kn1l]

What is that sound please? I would like a 10 hour loop of it

[@OMGPaneer]

Awesome

[@enter881]

Thankyou this code is really working. I am the beginner, just copy the code and run it. But, please tell me why .loader is used?

[@learning-axis]

.loader is the class assigned to some element

[@learning-axis]

if you want to learn html visit
ua-cam.com/video/8b-rgmbQTfk/v-deo.html

[@cecilcottongin8452]

I’m new, just learning and I only thought I was just getting the hang of it 😅 back to the grind stone I go…

[@learning-axis]

🤣😂

[@checkingme]

Woww

[@learning-axis]

thanks

[@learnbypreet]

informative

[@mehrannaderi3314]

I make like it , that is beautiful

[@learning-axis]

thank you

[@cabecadepedrabr]

Que som satisfatório. Som de água gotejando junto com o som do teclado.

[@learning-axis]

Thank you

[@JosinSaji-y4q]

Which text editor?

[@learning-axis]

sublime text

[@amarsharma4096]

website coding ke liye kaun sa coding tool best hai

[@AayushKingOfficial]

Notepad

[@ecommerce_rrj]

Which video editor you use sir? Please reply how to record the code like this and edit?

[@learning-axis]

I use Active Presenter for editing my videos. To write the code, I use sublime text.

[@ecommerce_rrj]

@@learning-axis can you make the video on how you record and edit your videos as well? Your editing is superb I had also tried but my quality degrade and it becomes blur

[@learning-axis]

@@ecommerce_rrj I cannot make a video on this, but I can teach you personally. Feel free to ask any questions you have about recording and editing videos!

[@AtharvaXD-v1y]

chatgpt be like:meri shaktiyon ka galat estmal ho raha hai😂

[@OkorieAgnes-r8b]

❤wow super fan❤

[@learning-axis]

thank you

[@volcano_ff]

Nice 😊

[@no-brainer627]

From this video i learnt that vscode is way better than sublime. Ofcourse hats off to your skills

[@FrancisInigoSibolinao]

Amazing!🎉

[@madihaiftikhar3850]

Add one more span and set nth child -5 -5

[@learning-axis]

ok

[@lostinownworld-lily]

Fantastic bro
i finally did at 4th time

[@ShrayVasrhney]

Bro I could not even write a line of this extreme level of coding

[@learning-axis]

oooo

[@sharmastyles2749]

It's nor extreme level of coding just learn and practice it like me

[@learning-axis]

cool

[@Abdo_dima_real]

Perfect 🎉❤

[@learnbypreet]

love it!

[@Shadowed_Queen]

Why are there em behind numbers? What do they do?

[@devotiveak4387]

How can we enable auto typer in sublime please tell me

[@vikibhai6]

Please reply bro