Syria flag animation fixed logo #css, #html

In this example below you will see how to do a Syria flag animation fixed logo #css, #html with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by khaled3afan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright khaled3afan ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Syria flag animation fixed logo #css, #html</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="contain">
<div class="logo">
<a href="/">
<div class="top">&nbsp</div>
<div class="ask">A &nbspS &nbsp K</div>
<div class="black">&nbsp</div>
<div class="yellow"></div>

</a>
</div>
  </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/khaled3afan/syria-flag-animation-fixed-logo-css-html-Ojjdrx */
/* Logo Start Here */
div#contain{
  height:1000px;}
a{text-decoration: none;}
.logo{
	position:fixed;
	left:-68px;
	top:-12px;
	width:200px;
	text-align:center;
	transform:rotate(-45deg);
	z-index:998;
	padding:1px 0px;
}

.logo div{
	padding:5px;
}


.logo .top {
	background:#269F38;
	 animation: tored 5s infinite ease alternate; 
	 } 
@keyframes tored { 
from { background-color:#269F38; } 
to {background-color:#E90F0F; }
 }

.logo .ask{
	font-weight:bold;
	word-spacing:5px;
	background:#fff;
	color:#269F38;
	animation: togreen 5s infinite ease alternate; 
	} 
@keyframes togreen { 
from {color:#E90F0F; } 
to {color:#269F38; }
 }
.logo .black{
	background:#4D4848;
	color:#E44141;
}
.logo .yellow{
	background:#DCE94E;
	padding:0px;
	border-bottom:2px dashed #C2D761;
}

/* Logo Style End*/

Comments