فطر سعيد

by Abbas Jaber

HTML

<!DOCTYPE html>
<html >
<head>
<title>فطر سعيد </title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<h1 class="text" data-text="فطر سعيد" > فطر سعيد</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<p class="credits" data-text="عباس جابر | 2018" > عباس جابر | 2018</p>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Changa');

body
{
	margin :0;
	padding :0;
	background-color:black;
	font-family: 'Changa', sans-serif;

	
	
}
.credits {
	position:absolute;
	top:85%;
	left:50%;
	transform : translate(-50%,-50%);
	margin:0;
	padding : 0 20px;
	font-size: 2em;
	color:#fff;
	text-shadow:0 0 20px #cddc39;
	
	
	
	
}
.text {
	position:absolute;
	top:50%;
	left:50%;
	transform : translate(-50%,-50%);
	margin:0;
	padding : 0 20px;
	font-size: 6em;
	color:#fff;
	text-shadow:0 0 20px #cddc39;
	
	
	
	
}
.text:after
{
	content: attr(data-text);
	position:absolute;
	top:0;
	left:0;
	padding: 0 20px;
	z-index: -1;
	color : #cddc39;
	filter :blur(15px);
}
.text:before
{
	content: attr(data-text);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: -2;
	background : #cddc39;
	filter :blur(140px);
	opacity:0.75;
}

ul {
	position:absolute;
	top : 75%;
	left:50%;
		transform : translate(-50%,-50%);
		margin:0;
		padding:0;
		display:flex;
}

ul li {
	background:#fff;
	list-style:none;
	width:40px;
	height:40px;
	border-radius:50%;
	animation:animate 1.6s ease-in-out infinite;
	
}
@keyframes animate
{
	0%,40%,100%
	{
		transform:scale(0.2);
	}
	20%
	{
		transform:scale(1);
	}
}
ul li:nth-child(1)
{
	animation-delay:-1.4s;
	background#ffff00;
	box-shadow: 0 0 50px #ffff00;
	
	
	
}ul li:nth-child(2)
{
	animation-delay:-1.2s;
	background:#ff7043;
	box-shadow: 0 0 50px #ff7043;
	
	
	
}ul li:nth-child(3)
{
	animation-delay:-1.0s;
	background:#d4e157;
	box-shadow: 0 0 50px #d4e157;
	
	
	
}ul li:nth-child(4)
{
	animation-delay:-0.8s;
	background:#66bb6a;
	box-shadow: 0 0 50px #66bb6a;
	
	
	
}ul li:nth-child(5)
{
	animation-delay:-0.6s;
	background#ffff00;
	box-shadow: 0 0 50px #ffff00;
	
	
	
}ul li:nth-child(6)
{
	animation-delay:-0.4s;
	background:#5c6bc0;
	box-shadow: 0 0 50px #5c6bc0;
	
	
	
}ul li:nth-child(7)
{
	animation-delay:-0.2s;
	background:#9c27b0;
	box-shadow: 0 0 50px #9c27b0;
	
	
	
}ul...