robmc.github.io/card.html at master · robmc/robmc.github.io · 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
109
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Card</title>
		<link href='https://fonts.googleapis.com/css?family=Anuphan' rel='stylesheet'>
		<style type="text/css">
			body {
			    font-family: 'Anuphan';font-size: 22px;
			}

			h1 {
				text-align: center;
			}

			.center {
			  margin: auto;
			  top: 50%;
			  left: 50%;
			  border-radius: 25px;
			  border: 2px solid #DEDEDE;
			  height: 300px;
			  width: 200px;
			  overflow: hidden;
			}

			.center:hover {
				box-shadow: 0px 1px 6px rgba(0,0,0, 0.4);
			}

			#card-title {
				font-weight: 800;
				font-size: 23px;
				text-align: center;
			}

			#card-image {
				margin-top: 10px;
				margin-left: auto;
				margin-right: auto;
				width: 170px;
			}

			#card-image img {
				width: 170px;
			}

			#card-text {
				font-size: 16px;
				display: block;
				width: 180px;
				text-align: center;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
		<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
	</head>
	<body>
		<h1>Card</h1>
		<div id="card" class="center">
			<div id="card-front" tabindex="0" role="button" class="front" aria-labelledby="card-front front-text">
				<div id="card-image">
					<img src="/images/robert_mccaffery.PNG" alt="Robert McCaffery" />
				</div>
				<div id="card-title">
					<div>Sample Title</div>
				</div>
				<div id="card-text">
					<div>This is some sample text. Click the card to see more info.</div>
				</div>
			</div>
			<div id="card-back" tabindex="0" role="button" class="back" aria-labelledby="card-back back-text" style="display: none;">
				<p>This is some more text for testing.<p>
			</div>
		</div>
		<footer style="font-size: 16px;">
			<a href="http://robertjmccaffery.com/examples.html">Back to Examples</a> | <a href="http://robertjmccaffery.com/">Home</a>
		</footer>
		<div id="front-text" style="display: none;">Front of Card</div>
		<div id="back-text" style="display: none;">Back of Card</div>
		<script>
/*			$( ".front" ).on( "click", function() {
			  $( "#card-front" ).slideToggle( "slow" );
			  $( "#card-back" ).slideToggle( "slow" );
			});

			$( ".back" ).on( "click", function() {
			  $( "#card-front" ).slideToggle( "slow" );
			  $( "#card-back" ).slideToggle( "slow" );
			});*/

			var callback = function() {
			  $( "#card-front" ).slideToggle( "slow" );
			  $( "#card-back" ).slideToggle( "slow" );
			};

			$("#card").keypress(function() {
			    if (event.which == 13 || 32) callback();
			});

			$('#card').click(callback);
		</script>
	</body>
</html>