Christ the Redeemer

Developer
Prashant Sani
Size
2,208 Kb
Views
8,096
  1. Christ the Redeemer Previews
  2. Christ the Redeemer HTML Codes
  3. Christ the Redeemer CSS Codes

How do I make an christ the redeemer?

What is a christ the redeemer? How do you make a christ the redeemer? This script and codes were developed by Prashant Sani on 15 November 2022, Tuesday.

Christ the Redeemer Previews
IQ Test

Christ the Redeemer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Christ the Redeemer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="contain"> <div class="jesus"></div> <div class="rayContain"> <div></div> <div></div> </div>
</div>
</body>
</html>

Christ the Redeemer - Script Codes CSS Codes

*{margin: 0;padding: 0}	html, body{	position: relative;	overflow: hidden;	background: rgb(51,181,221); /* Old browsers */	background: -moz-linear-gradient(top, rgba(51,181,221,1) 1%, rgba(124,212,239,1) 26%, rgba(223,242,162,1) 79%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(51,181,221,1)), color-stop(26%,rgba(124,212,239,1)), color-stop(79%,rgba(223,242,162,1))); /* Chrome,Safari4+ */	background: -webkit-linear-gradient(top, rgba(51,181,221,1) 1%,rgba(124,212,239,1) 26%,rgba(223,242,162,1) 79%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top, rgba(51,181,221,1) 1%,rgba(124,212,239,1) 26%,rgba(223,242,162,1) 79%); /* Opera 11.10+ */	background: -ms-linear-gradient(top, rgba(51,181,221,1) 1%,rgba(124,212,239,1) 26%,rgba(223,242,162,1) 79%); /* IE10+ */	background: linear-gradient(to bottom, rgba(51,181,221,1) 1%,rgba(124,212,239,1) 26%,rgba(223,242,162,1) 79%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33b5dd', endColorstr='#dff2a2',GradientType=0 ); /* IE6-9 */	}	html,body,	.rayContain,	.jesus{	width: 100%;	height: 100%;	}	.jesus,	.rayContain{	position: absolute;	}	.jesus{	background: url(https://prashantsani.com/Misc/jesus_white.svg) center bottom no-repeat;	z-index: 10;	left: 0;	bottom: 0;	}	.rayContain{	z-index: 0;	left: 3px;	top: -135px;	margin-top: -245px;	bottom: auto;	}	.rayContain div{	background: url(https://prashantsani.com/Misc/glow.png) center center no-repeat;	width: 159px;	height: 163px;	position: absolute;	left: 50%;	margin: 0 0 0 -79.5px;	bottom: 0;	}	@-webkit-keyframes raysAnim {	0% { -webkit-transform: rotate(0) scale(0.5); }	100% { -webkit-transform: rotate(10deg) scale(1);}	}	@-moz-keyframes raysAnim {	0% { -moz-transform: rotate(0) scale(0.2); }	100% { -moz-transform: rotate(10deg) scale(1);}	}	@-o-keyframes raysAnim {	0% { -o-transform: rotate(0) scale(0.2); }	100% { -o-transform: rotate(10deg) scale(1);}	}	@-ms-keyframes raysAnim {	0% { -ms-transform: rotate(0) scale(0.2); }	100% { -ms-transform: rotate(10deg) scale(1);}	}	@keyframes raysAnim {	0% { transform: rotate(0) scale(0.2); }	100% { transform: rotate(10deg) scale(1);}	}	.rayContain div:nth-child(1){	-webkit-animation: raysAnim 2s alternate infinite ease-out; -moz-animation: raysAnim 2s alternate infinite ease-out;	-ms-animation: raysAnim 2s alternate infinite ease-out; -o-animation: raysAnim 2s alternate infinite ease-out;	animation: raysAnim 2s alternate infinite ease-out;	}	@-webkit-keyframes rays2Anim {	0% { -webkit-transform: rotate(-10deg) scale(1);}	100% { -webkit-transform: rotate(0) scale(0.5); }	}	@-moz-keyframes rays2Anim {	0% { -moz-transform: rotate(-10deg) scale(1);}	100% { -moz-transform: rotate(0) scale(0.2); }	}	@-o-keyframes rays2Anim {	0% { -o-transform: rotate(-10deg) scale(1);}	100% { -o-transform: rotate(0) scale(0.2); }	}	@-ms-keyframes rays2Anim {	0% { -ms-transform: rotate(-10deg) scale(1);}	100% { -ms-transform: rotate(0) scale(0.2); }	}	@keyframes rays2Anim {	0% { transform: rotate(-10deg) scale(1);}	100% { transform: rotate(0) scale(0.2); }	}	.rayContain div:nth-child(2){	-webkit-animation: rays2Anim 2s alternate infinite ease-in; -moz-animation: rays2Anim 2s alternate infinite ease-in;	-ms-animation: rays2Anim 2s alternate infinite ease-in; -o-animation: rays2Anim 2s alternate infinite ease-in;	animation: rays2Anim 2s alternate infinite ease-in;	}
Christ the Redeemer - Script Codes
Christ the Redeemer - Script Codes
Home Page Home
Developer Prashant Sani
Username Prashantsani
Uploaded November 15, 2022
Rating 3
Size 2,208 Kb
Views 8,096
Do you need developer help for Christ the Redeemer?

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!

Prashant Sani (Prashantsani) Script Codes
Name
Digital Christmas Tree
A Pen by Prashant Sani
Flower Petal Animation
CSS Off Entry
CSS3 Animating Analogue Tower
Vintage Television Set Noise Effect in CSS3
CSS3 Jack in a Box
Create amazing blog posts 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!