Fantasy earth...
How do I make an fantasy earth...?
Only css.... What is a fantasy earth...? How do you make a fantasy earth...? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.
Fantasy earth... Previews
Fantasy earth... - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fantasy earth...</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circu"> <div class="luna"> </div> <div class="trian"><span class="tri"></span></div> <div class="trian3"><span class="tri3"></span></div> <div class="trian5"><span class="tri5"></span></div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div>
</body>
</html>
Fantasy earth... - Script Codes CSS Codes
body{ background:#241e2a;
}
.circu{ position:relative; width:500px; height:500px; border-radius:100%; border:9px solid #292136; background:#130c21; margin:121px auto;
overflow:hidden;}
.luna{ position:absolute; width:333px; height:333px; border-radius:100%; background: rgba(251,51,94,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(25%, rgba(251,51,94,1)), color-stop(27%, rgba(175,45,78,1)), color-stop(43%, rgba(175,50,77,1)), color-stop(44%, rgba(97,33,59,1)), color-stop(44%, rgba(97,33,59,1)), color-stop(59%, rgba(97,33,59,1)), color-stop(59%, rgba(66,20,55,1)), color-stop(75%, rgba(64,33,57,1)), color-stop(76%, rgba(50,32,51,1)), color-stop(99%, rgba(50,32,51,1)), color-stop(100%, rgba(50,32,51,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: radial-gradient(ellipse at center, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb335e', endColorstr='#322033', GradientType=1 ); margin:35px 85px;
}
.trian{ position:absolute; width: 0; height: 0; border-bottom: 172px solid #ff3360; border-left: 102px solid transparent; margin:212px 80px
}
.trian::before{ content:""; display:block; width: 0; height: 0; border-bottom: 172px solid #c21749; border-right: 102px solid transparent;
}
.trian::after{ content:""; display:block; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 40px solid #421b2b; margin:-172px -25px;
}
.trian3{ position:absolute; width: 0; height: 0; border-bottom: 152px solid #ff3360; border-left: 80px solid transparent; margin:231px 162px
}
.trian3::before{ content:""; display:block; width: 0; height: 0; border-bottom: 152px solid #c21749; border-right: 80px solid transparent;
}
.trian3::after{ content:""; display:block; width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 40px solid #421b2b; margin:-152px -21px;
}
.trian5{ position:absolute; width: 0; height: 0; border-bottom: 192px solid #ff3360; border-left: 102px solid transparent; margin:192px 212px
}
.trian5::before{ content:""; display:block; width: 0; height: 0; border-bottom: 192px solid #c21749; border-right: 102px solid transparent;
}
.trian5::after{ content:""; display:block; width: 0; height: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 40px solid #421b2b; margin:-192px -25px;
}
.tri{ position:absolute; width: 0; height: 0; border-bottom: 40px solid #5e363d; border-left: 24px solid transparent; margin:-172px -25px
}
.tri3{ position:absolute; width: 0; height: 0; border-bottom: 40px solid #5e363d; border-left: 21px solid transparent; margin:-152px -21px
}
.tri5{ position:absolute; width: 0; height: 0; border-bottom: 40px solid #5e363d; border-left: 24px solid transparent; margin:-192px -25px
}
ul{ position:absolute; width:450px; height:132px; list-style:none; margin:373px 30px
}
ul li{ display:block; width:450px; height:21px; border-radius: 12px 0 0 12px; background:#321334; margin:0;
}
ul li:nth-child(1){ margin-left:-12px;
}
ul li:nth-child(1)::before{ content:""; position:absolute; display:block; width:90px; height:3px; background:#621749; margin:9px 90px;
}
ul li:nth-child(1)::after{ content:""; position:absolute; display:block; width:121px; height:3px; background:#621749; margin:9px 231px;
}
ul li:nth-child(2){ margin-left:21px;
}
ul li:nth-child(2)::before{ content:""; position:absolute; display:block; width:192px; height:3px; background:#621749; margin:7px 7px;
}
ul li:nth-child(2)::after{ content:""; position:absolute; display:block; width:70px; height:3px; background:#621749; margin:7px 231px;
}
ul li:nth-child(3){ margin-left:12px;
}
ul li:nth-child(3)::before{ content:""; position:absolute; display:block; width:112px; height:3px; background:#621749; margin:9px 70px;
}
ul li:nth-child(3)::after{ content:""; position:absolute; display:block; width:121px; height:3px; background:#621749; margin:7px 231px;
}
ul li:nth-child(4){ margin-left:43px;
}
ul li:nth-child(4)::before{ content:""; position:absolute; display:block; width:90px; height:3px; background:#621749; margin:9px 90px;
}
ul li:nth-child(4)::after{ content:""; position:absolute; display:block; width:121px; height:3px; background:#621749; margin:9px 231px;
}
ul li:nth-child(5){ margin-left:50px;
}
ul li:nth-child(5)::before{ content:""; position:absolute; display:block; width:231px; height:3px; background:#621749; margin:7px 12px;
}
ul li:nth-child(5)::after{ content:""; position:absolute; display:block; width:70px; height:3px; background:#621749; margin:7px 300px;
}
ul li:nth-child(6){ margin-left:70px;
}
ul li:nth-child(6)::before{ content:""; position:absolute; display:block; width:132px; height:3px; background:#621749; margin:7px 30px;
}
ul li:nth-child(6)::after{ content:""; position:absolute; display:block; width:70px; height:3px; background:#621749; margin:7px 231px;
}
| Developer | Judith Neumann |
| Username | judag |
| Uploaded | October 13, 2022 |
| Rating | 4 |
| Size | 2,403 Kb |
| Views | 18,216 |
Do you need developer help for Fantasy earth...?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Judith Neumann (judag) Script Codes
| Name | Size |
| Little black kittys | 3,437 Kb |
| Colorfull night... | 2,818 Kb |
| Forest | 3,273 Kb |
| Responsive flexbox letters... | 2,002 Kb |
| Antartic day | 3,901 Kb |
| Fairy | 3,452 Kb |
| Snow in town | 3,372 Kb |
| Funny icons... | 4,659 Kb |
| Change your look... | 2,542 Kb |
| Code and view | 3,096 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| CLE_Old_March | Saritaleroux | 6,234 Kb |
| A Pen by Alex Bergin | Abergin | 3,347 Kb |
| Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
| Toggling Divs with jQuery | Yying6 | 1,967 Kb |
| Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
| Hover Animation from UNIQLO | Insprd | 3,772 Kb |
| LeMandinque | Aadesida | 9,046 Kb |
| Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
| CSS Colors | Alexpate | 2,232 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!