cards/Animation.html at master · Alchemist7534/cards · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!Doctype html>
<html>
<head>
<meta charset="utf-8"name="viewport" width="device-width initial-scale=1.0">
<title>Mage man</title>
<style type="text/css">
	a {
		color: black;
		text-decoration: none;
	}
/*	div.mage {
		height: 100px;
		width: 100px;
		position: relative;
		left: 0;
		top: 0;
		border-radius: 8px;
		text-align: center;
		padding: auto;
		background-color: #0000ff;
		color: #fffffd;
		animation-name: example;
		animation-duration: 10s;
		animation-iteration-count: 12;
		animation-delay: 2s;
		animation-direction: alternate;
		animation-timing-function: linear;
	}
	@keyframes example {
		0% {
			background-color: blue;
			color: #fffffd;
			left: 0;
			top: 0;
		}
		25% {
			background-color: yellow;
			left: 0px;
			top: 200px;
		}
		50% {
			background-color: green;
			left: 200px;
			top: 200px;
		}
		75% {
			background-color: purple;
			left: 200px;
			top: 0px;
		}
		100% {
			background-color: red;
			left: 0px;
			top: 0px;
		}
	}
	div.container {
		width: 80%;
	}
	.container img {
		width: 100%;
	}
	div.supertext {
	text-align: center;
		padding: 0 6px;
	}*/
	div.card {
		margin: auto;
		border-radius: 8px;
		background: #ffffff;
		box-shadow: 0 4px 8px 0 silver, 0 6px 20px 0 silver;
		height: ;
		width: 80%
	}
	.card img {
		height: auto;
		width: 100%;
		border: 2px solid silver;
		border-radius: 8px;
	}
	.cardtext {
	padding: auto;
	text-align: center;
	font-weight: bold;
	}
</style>
<script type="text/script">

</script>
</head>
<body>
<!--<div class="mage">
	<p><a href="anim.html">click here</a></p>
</div>-->
<!--<div class="container">
	<img src="Alchemist.jpg" alt="my picture">
	<div class="supertext">
		<p>Serious mood time yah.</p>
	</div>
</div>-->
<div class="card">
<a href="easter.jpg" target="_blank"><img src="easter.jpg" alt="easter picture"></a>
		<div class="cardtext">
			<p>This is the beautiful season of easter. A remembrance of what God has done for us, What power is at work in us and Eternal life afterwards.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus rutrum tellus pellentesque eu. Tortor at risus viverra adipiscing at.</p>
			</div>
</div>
</body>
</html>