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

[@Kitty_Aella]

Same

[@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

[@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

[@Cold_guide]

My satisfaction level after i saw this video 📈📈📈

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

Great भारतीय MUST BE TO ALL

[@OluwafemiTheYoung]

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

[@learning-axis]

ok

[@ScriptFUN]

Keyboard sound is very perfect!!

[@learning-axis]

thanks

[@WvNTED]

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

[@_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 😢

[@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 😂

[@tegaemmanuel-y4k]

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

[@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.

[@Inform_Boost]

Result is nice ❤

[@WillsOp]

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

[@jansikuppusamy5352]

I am like the sound

[@abhaypaswan950]

But upar to likha hai autotype😂😂

[@izoo-mm9uk]

To code this just on memory is insane

[@Man_Sullai]

Love it.. so easy

[@learning-axis]

thank you

[@sound2bell448]

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

[@learning-axis]

😅😅😅😅😅

[@dkrogerzin]

Programation is Beatiful

[@learning-axis]

yes, thanks

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

OM ॐ नमः शिवाय

[@Soulfulvibs]

Really impressed

[@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.

[@VivekYadav-vv3si]

Background Music + Coding + Coffee ❤

[@learning-axis]

❤

bro is the machine.

[@tarun9883]

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

[@learning-axis]

thank you

[@didosalih1089]

Beautiful 👌🏼

[@learning-axis]

thank you

[@KareemEltigany]

Thanks alot ❤❤❤

[@learning-axis]

you welcome

[@KhoriyohYusri]

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

[@zenkaiog]

Dat typing speed tho

[@UnknownLegenD.123]

Bhai maine kiya bohot beautiful tha thanks🙏🏻

[@flourishjames04]

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

[@learning-axis]

cool

[@Yash_01580]

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

[@HrythmRajSharma]

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

[@ezechimaobi5167]

Internal css

[@your-advisor-friend]

really awesome

[@jeelani_shah2258]

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

[@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!

[@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 😊

[@dektra00]

It worked, Amazing

[@learning-axis]

thank you

[@aiideeskitchen7975]

Good job. Keep it up

[@learning-axis]

thank you

[@oussamaabouhafs7756]

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

[@mahidmunna01]

Just Wow❤

[@learning-axis]

thank you

[@SunilPal-in9en]

Super bhai ❤

[@learning-axis]

thank you

[@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

[@ÁnhNguyễn-p8i]

So great

[@learning-axis]

thank you

[@devotiveak4387]

How can we enable auto typer in sublime please tell me

[@vikibhai6]

Please reply bro

[@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

[@sarah_ferguson]

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

[@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.

[@TechBox2026]

Fantastic

[@learning-axis]

thank you

[@mdbappy7580]

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

[@learning-axis]

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

[@aandresdev]

Very useful! Thank you so much!

[@emmanuelokunola6391]

Wow that's awesome

[@learning-axis]

thank you

[@undrathiraviteja7514]

Thank you ❤

[@nishaanjum4901]

Mind blowing sir!

[@bits_butterfly010]

Nice 😮

[@webprogrammingtutorials-alo69]

Excellent

[@magnosantosoficial9378]

Top demais show 🎉

[@ROLEXGOD755]

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

[@learning-axis]

😅😅😅😅

[@raushankumar-qp3rv]

You have good skills 😮

[@codeitbro]

Amazing!!

[@osisejeremiah533]

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

[@no-brainer627]

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

[@anthonyamanat674]

Great work

[@Irediranokunmakinde]

Love it ❤

[@learning-axis]

thank you

[@AtharvaXD-v1y]

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

[@olayadecharles2537]

How does one get this good?😭😭

[@learning-axis]

do practice.

[@GriffithEditz]

There was literally written ".auto-type" in the app title am i only the one able to see that

[@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!

[@BKM333]

Tap on a clip to paste it in the text box.Welcome to Gboard clipboard, any text that you copy will be saved here.Use the edit icon to pin, add or delete clips.Touch and hold a clip to pin it. Unpinned clips will be deleted after 1 hour.

[@SamsungA04e-dp7kj]

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

[@riddleforasec]

Why is nobody caring about his typing speed?

[@yuuser1]

3x speed

[@Apeski101]

Impressive

[@learning-axis]

thank you

[@OMGPaneer]

Awesome

[@user-gq1bs1kn1l]

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

[@makansari1425]

lovely

[@JafarTuychiyev-k7c]

good

[@learning-axis]

thank you

[@ITOKI80]

Thanks

[@FrancisInigoSibolinao]

Amazing!🎉

[@joserodriguesco]

Eu consegui fazer. woowww top

[@learning-axis]

thank you

[@learnbypreet]

love it!

[@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

[@learnbypreet]

informative

[@oluwasesanibrahim2061]

which software are yiu using please?
Am a beginner,
i need to download one on my window 10. which one will work properly

[@learning-axis]

sublime text
but Vs code is best

[@OkorieAgnes-r8b]

❤wow super fan❤

[@learning-axis]

thank you

[@MDSahilAliMolla]

feel like ASMR video

[@Collision-n1k]

Can I do it in notepad?

[@learning-axis]

yes you can

[@opatoyinbotaiwo]

I just want to start please any one here to learn me how to pull up 🙏

[@learning-axis]

you can start learning from this link
learning-axis.com/html/

[@skellingaming]

I'm new to this, could you please tell me the name of the app it?

[@learning-axis]

Sublime text

[@skellingaming]

@@learning-axis, thank you very much, bro. 😊👍

[@learning-axis]

@@skellingaming you welcome

[@lostinownworld-lily]

Fantastic bro
i finally did at 4th time

[@Java735]

How much time did it take to learn the skills f

[@learning-axis]

minimum 6 months

[@_steve323]

Hats of you bro ❤🎉

[@OluwafemiTheYoung]

spininggg

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: 25px;
position: absolute;
mix-blend-mode: screen;
}
.loader {
background-color: gold;
animation: rotating 2s linear infinite;
position: relative;
}
@keyframes rotating {
to {
transform: rotate(1turn); /* Full rotation */
}
}
.loader span {
animation: de-rotating 4s linear infinite, change-color 4s linear infinite;
}
@keyframes de-rotating {
from, to {
transform: rotate(0deg) scale(1.2);
}
50% {
transform: rotate(-180deg) scale(1.2);
}
}
/* Keyframes to change color while rotating */
@keyframes change-color {
0% { background-color: dodgerblue; }
25% { background-color: hotpink; }
50% { background-color: mediumpurple; }
75% { background-color: limegreen; }
100% { background-color: dodgerblue; }
}
.loader span:nth-child(1) {
top: 5rem;
left: 5rem;
}
.loader span:nth-child(2) {
top: -5rem;
left: 5rem;
}
.loader span:nth-child(3) {
top: 5rem;
left:-5rem;
}
.loader span:nth-child(4) {
top: -5rem;
left: -5rem;
}
/* Styling for the spinning name in the middle */
.loader .center-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
color: white;
font-family: Arial, sans-serif;
animation: spin-text 4s linear infinite;
}
/* Keyframes to spin the name */
@keyframes spin-text {
to {
transform: translate(-50%, -50%) rotate(1turn); /* Full rotation */
}
}







KingCyfa

ENJOYYYY

[@MendhiXideas]

Aj again banaya ha ban gaya❤❤❤

[@learning-axis]

great

[@srajanpoojary2677]

can we also put something like login kind of interface if its yes then how?

[@khalnayak_adi]

❤❤❤