Merge pull request #7 from EDMdesigner/cards-comicify

Cards comicify
EDMdesigner · Oct 10, 2022 · b96f145 · b96f145
2 parents c8ab766 + 8b99bf9
commit b96f145
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 5 deletions.
diff --git a/analytics-annie.html b/analytics-annie.html
@@ -0,0 +1,35 @@
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
+
+        <style>
+            body {
+                font-family: 'Bangers', cursive;
+                letter-spacing: 1px;
+            }
+            p {
+                margin: 0;
+            }
+        </style>
+
+	</head>
+    <body>
+        <div style="margin-left: 249px; height: 325px; width: 300px; background-size: 100%; background-repeat: no-repeat; background-image: url('./assets/bubbles/bubble-2.png')">
+            <div style="padding: 73px 40px; font-size: 20px; text-align: center;">
+                <p>Tracking and ads</p>
+                <p>should be </p>
+                <p>automagically</p>
+                <p>added to your emails.</p>
+            </div>
+        </div>
+        <div>
+            <img style="width: 300px; padding-left:116px; margin-top: -71px;" src="./assets/hero-4.png"/>
+            <p style="padding-left:205px;">Analytics Annie</p>
+        </div>
+	</body>
+</html>
diff --git a/analytics-annie.png b/analytics-annie.png
diff --git a/assets/bubbles/bubble-1.png b/assets/bubbles/bubble-1.png
diff --git a/assets/bubbles/bubble-2.png b/assets/bubbles/bubble-2.png
diff --git a/assets/bubbles/bubble-3.png b/assets/bubbles/bubble-3.png
diff --git a/assets/emailhero-share-2.png b/assets/emailhero-share-2.png
diff --git a/assets/emailhero-share.jpg b/assets/emailhero-share.jpg
diff --git a/designer-dan.html b/designer-dan.html
@@ -0,0 +1,35 @@
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
+
+        <style>
+            body {
+                font-family: 'Bangers', cursive;
+                letter-spacing: 1px;
+            }
+            p {
+                margin: 0;
+            }
+        </style>
+
+	</head>
+    <body>
+        <div style="height: 300px; width: 300px; background-size: 100%; background-repeat: no-repeat; background-image: url('./assets/bubbles/bubble-1.png')">
+            <div style="padding: 80px 40px; font-size: 20px; text-align: center;">
+                <p>A well-crafted,</p>
+                <p>modular design system</p>
+                <p>helps your newsletters</p>
+                <p>to stay on-brand.</p>
+            </div>
+        </div>
+        <div>
+            <img style="width: 300px; padding-left:116px; margin-top: -71px;" src="./assets/hero-1.png"/>
+            <p style="padding-left:239px;">Designer Dan</p>
+        </div>
+	</body>
+</html>
diff --git a/designer-dan.png b/designer-dan.png
diff --git a/error-proof-emma.html b/error-proof-emma.html
@@ -0,0 +1,35 @@
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
+
+        <style>
+            body {
+                font-family: 'Bangers', cursive;
+                letter-spacing: 1px;
+            }
+            p {
+                margin: 0;
+            }
+        </style>
+
+	</head>
+    <body>
+        <div style="margin-left: 10px; height: 325px; width: 300px; background-size: 100%; background-repeat: no-repeat; background-image: url('./assets/bubbles/bubble-3.png')">
+            <div style="padding: 25px 49px; padding-left: 30px; font-size: 20px; text-align: center;">
+                <p>A misspelled merge tag</p>
+                <p>can ruin your newsletter.</p>
+                <p>I won't let you</p>
+                <p>send broken emails.</p>  
+            </div>
+        </div>
+        <div>
+            <img style="width: 300px; padding-left:193px; margin-top: -294px;" src="./assets/hero-2.png"/>
+            <p style="padding-left:281px;">Error-proof Emma</p>
+        </div>
+	</body>
+</html>
diff --git a/error-proof-emma.png b/error-proof-emma.png
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 		<link rel="icon" href="assets/favicon.ico">
 
 		<title>Email Hero saves Emailville | An email superhero game</title>
-		<meta name="description" content="Villains have come to Emailville. Can you figure out what powers EmailHero has to beat them? Help Emailhero find his powers, and uncover all his secrets!">
+		<meta name="description" content="Villains have come to Emailville. Can you figure out what powers Email Hero has to beat them? Help Email Hero find his powers, and uncover all his secrets!">
 
 		<!-- schema rich snippets -->
 		<!-- Facebook Meta Tags -->
@@ -453,7 +453,7 @@
 						<tr>
 							<td>
 								<h1>A new hero is coming to town!</h1>
-								<p>Our hero is still quite secretive, but their sidekicks created an <strong>interactive email puzzle</strong> that gives you clues about how Email Hero is going to save Emailville!</p>
+								<p>Our hero is still quite secretive, but his sidekicks created an <strong>interactive email puzzle</strong> that gives you clues about how Email Hero is going to save Emailville!</p>
 								<p>Can you guess how? Tweet your guess using the #SaveEmailVille hashtag to have the chance to win a custom Email Hero cape!</p>
 								<p><strong>You can be an Email Hero as well!</strong></p>
 								<label for="start" class="button"><strong>START THE PUZZLE!</strong></label>
@@ -639,7 +639,7 @@ <h1>A new hero is coming to town!</h1>
 				</table>
 			</label>
 			<label class="reset-3" for="reset">
-				<p class="bubble" style="padding-top: 19px; padding-bottom: 11px;">EMAIL HERO HAS MULTIPLE GLANDS TO CONNECT SIMULTANEOUSLY WITH DIFFERENT REMOTE SYSTEMS OF YOURS: CMS, CDN, ESP, SAML - ALL ARE CONNECTED TO THEIR BRAIN CONSTANTLY.</p>
+				<p class="bubble" style="padding-top: 19px; padding-bottom: 11px;">EMAIL HERO HAS MULTIPLE GLANDS TO CONNECT SIMULTANEOUSLY WITH DIFFERENT REMOTE SYSTEMS OF YOURS: CMS, CDN, ESP, SAML - ALL ARE CONNECTED TO HIS BRAIN CONSTANTLY.</p>
 
 				<img width="150" valign="top" src="./assets/hero-3.png" />
 				<img width="150" valign="top" src="./assets/card-cloud.png"/>
@@ -671,7 +671,7 @@ <h1>A new hero is coming to town!</h1>
 				</table>
 			</label>
 			<label class="reset-4" for="reset">
-				<p class="bubble" style="padding-top: 30px; padding-bottom: 0;">EMAIL HERO HAS THE POWER TO ATTACH ADS AND ANALYTICS LINKS/TAGS TO THEIR PROPER PLACE IN EMAIL NEWSLETTERS. NO STAT OR REVENUE GOES MISSING ON THEIR WATCH.</p>
+				<p class="bubble" style="padding-top: 30px; padding-bottom: 0;">EMAIL HERO HAS THE POWER TO ATTACH ADS AND ANALYTICS LINKS/TAGS TO THEIR PROPER PLACE IN EMAIL NEWSLETTERS. NO STAT OR REVENUE GOES MISSING ON HIS WATCH.</p>
 
 				<img width="150" valign="top" src="./assets/hero-4.png" />
 				<img width="150" valign="top" src="./assets/card-ads.png"/>
@@ -735,7 +735,7 @@ <h1>A new hero is coming to town!</h1>
 				</table>
 			</label>
 			<label class="reset-6" for="reset">
-				<p class="bubble" style="padding-top: 19px; padding-bottom: 11px;">EMAIL HERO’S NO1. SUPER POWER: JOURNALIST AT NIGHT, HERO UNDER DAYLIGHT. HE IS AN ACE KID IN EDITORIAL TEAMS AND SAVES THE DAY WHEN NEWS ALERTS IMMEDIATELY NEED TO BE SENT.</p>
+				<p class="bubble" style="padding-top: 19px; padding-bottom: 11px;">EMAIL HERO’S NO1. SUPERPOWER: JOURNALIST AT NIGHT, HERO UNDER DAYLIGHT. HE IS AN ACE KID IN EDITORIAL TEAMS AND SAVES THE DAY WHEN NEWS ALERTS IMMEDIATELY NEED TO BE SENT.</p>
 
 				<img width="150" valign="top" src="./assets/hero-6.png" />
 				<img width="150" valign="top" src="./assets/card-news.png"/>