nigerian-flag-css/index.html at master · Developerayo/nigerian-flag-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Nigerian Flag</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>

html,
body {
  height: 100%;
  margin-top: 100px;
  text-align: center;
  -webkit-animation: background 2s cubic-bezier(,0,0,1) infinite;
  animation: background 2s cubic-bezier(1,0,0,1) infinite;
}
@-webkit-keyframes background {
  0% { background-color: #8FBC8F; }
  33% { background-color:#3CB371; }
  67% { background-color: #6B8E23; }
  100% { background-color:  #9ACD32; }
}

@keyframes background {
  0% { background-color: #8FBC8F; }
  33% { background-color: #3CB371; }
  67% { background-color: #6B8E23; }
  100% { background-color:  #9ACD32; }
}

.nigerian-flag{
  width: 13em;
  height: 8em;
  border: 1px;
  display: inline-block;
  margin: 2em;
  box-shadow: none;
  transition: width 1.5s, height 1.5s, transform 1.5s;
}

.nigerian-flag {
  content: attr(class);
  line-height: 18.75em;
}

.nigerian-flag:hover {
  width: 20em;
  height: 15em;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);

}

.nigerian-flag {
  background: linear-gradient(90deg, #008651 33.3%, white 33.3%, white 66.6%, #008651 66.6%);
  border-radius: 10px;
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<h1>Nigerian Flag in CSS</h1>
<div class="nigerian-flag"></div>
</body>
</html>