Squares | HTML CSS

Показать описание

#shorts #html #css #tutorials #trending

Sound effects from Pixabay.

Learning Axis

Рекомендации по теме

Комментарии

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

Smokeiziz-itru

<!DOCTYPE html>
<head>
<style>
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
}
</style>
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>

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

Hamza_Bhai.

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

jkingenglish

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

arf

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

WvNTED

Why is nobody caring about his typing speed?

riddleforasec

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

wunsznv

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

Uneek_Earnings

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

WillsOp

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

sarah_ferguson

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

ranch-xX

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

tarun

Bhai maine kiya bohot beautiful tha thanks🙏🏻

UnknownLegenD.

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

HrythmRajSharma

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

xiznlyo

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.

BKM

I've tried this today this is absolutely amazing

_Maliha_

Squares | HTML CSS

Squares | HTML CSS

Squares | HTML CSS

The Joy of CSS Grid - Build 3 Beautifully Simple Responsive Layouts

Solar System | HTML CSS

Flexbox in CSS | display flex property in CSS | Use flex property

Moving Squares | HTML CSS

How to create a square in CSS/HTML

Squares | HTML CSS

Learn Flexbox CSS in 8 minutes

Make Two Divs Side by Side with CSS

A Grid of Squares

Circle Animation Made with Squares | HTML SASS #shorts

Colorful Rotating Squares CSS Animation Effect | Html CSS

How to Code a Square in HTML only (1 Minute Tutorial)

Squares | HTML CSS

Squares | HTML CSS #coding #webdevelopment #htmlcss #website

Squares #html #css #htmlcssjavascript #webdesign

Circle Animation | HTML CSS

CSS Only Animated Background Effects | Html CSS Animation

Squares HTML CSS

2 pattern squares | HTML CSS JavaScript | ThinhPhamVN #shorts

Html, Css and JavaScript. Random Squares

Squares | HTML CSS #html #css #javascript

How to Create squares, rectangles, circles and triangles | HTML CSS