Changed colors and font.

evoluteur · Oct 14, 2020 · 5d7d639 · 5d7d639
1 parent fd2091c
commit 5d7d639
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 30 deletions.
diff --git a/index-javascript.html b/index-javascript.html
@@ -5,28 +5,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Bouncing ball in Javascript</title> 
     <meta name="description" content="Bouncing ball in Javascript">
-    <meta name="keywords" content="bouncing ball javascript animated animation transition">
+    <meta name="keywords" content="bouncing ball javascript animated animation transition fullscreen">
     <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Overpass">
 	<style>
-		html{
-			background-image: url("bg.gif");
-            font-family: Arial, Helvetica, sans-serif;
-            color: #0d0d0d;
+        body {
+            padding: 10px 20px;
+            font-family: 'Overpass', serif;
+            font-size: 20px;
         }
+		html{
+            color: white;
+			background-color: #0288d1;
+		}
         a,a:visited{
-            color: #0099cc;
+            color: #ffb74d;
+            text-decoration: none;
         }
         a:hover{
-            color: #23527c;
-        }
-        .content{
-            background-color: white;
-            border: solid 1px silver;
-            padding: 10px 20px;
+            color: #ffcc80;
+            text-decoration: underline;
         }
+
 		#ball{
 			position: absolute;
-			background-color: #007bb2;
+			background-color: black;
 			height:50px;
 			width:50px;
 			border-radius: 50%;
@@ -74,10 +78,10 @@
 
 <body onresize="setDim()" onload="startBouncing()"> 
     <div class="content">
-        <h1>Bouncing ball in Javascript or <a href="./">CSS</a></h1>
+        <h1>Bouncing ball in Javascript <a href="./">or CSS</a></h1>
 
         <p>Javascript animation for a bouncing ball.</p>
-        <p>Code: <a href="https://github.com/evoluteur/bouncing-ball">bouncing-ball</a> at GitHub.</p>
+        <p>Code: <a href="https://github.com/evoluteur/bouncing-ball">evoluteur/bouncing-ball</a> at GitHub.</p>
 
         <div id="ball"></div>
 

diff --git a/index.html b/index.html
@@ -5,23 +5,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Bouncing ball in CSS</title> 
     <meta name="description" content="Bouncing ball in CSS">
-    <meta name="keywords" content="bouncing ball CSS animated animation transition">
+    <meta name="keywords" content="bouncing ball CSS animated animation transition fullscreen">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-	<style>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Overpass">
+    <style>
+        body {
+            padding: 10px 20px;
+            font-family: 'Overpass', serif;
+            font-size: 20px;
+        }
 		html{
-			background-image: url("bg.gif");
-	        font-family: Arial, Helvetica, sans-serif;
+            color: white;
+			background-color: #0288d1;
 		}
         a,a:visited{
-            color: #0099cc;
+            color: #ffb74d;
+            text-decoration: none;
         }
         a:hover{
-            color: #23527c;
-        }
-        .content{
-            background-color: white;
-            border: solid 1px silver;
-            padding: 10px 20px;
+            color: #ffcc80;
+            text-decoration: underline;
         }
 
 		/* based off https://www.the-art-of-web.com/css/bouncing-ball-animation/ */
@@ -63,7 +67,7 @@
 			width: 50px;
 			height: 50px;
 			border-radius: 50%;
-			background-color: #007bb2;
+			background-color: black;
 
 			animation-name: bounce;
 			animation-iteration-count: infinite;
@@ -74,13 +78,14 @@
 
 <body> 
     <div class="content">
-        <h1>Bouncing ball in CSS or <a href="index-javascript.html">JavaScript</a></h1>
-
         <div id="traveler">
             <div id="bouncer"></div>
         </div>
+
+        <h1>Bouncing ball in CSS <a href="index-javascript.html">or JavaScript</a></h1>
+
         <p>CSS animation for a bouncing ball (based on <a href="https://www.the-art-of-web.com/css/bouncing-ball-animation/" rel="noopener" target="_blank">article</a> from The Art of Web).</p>
-        <p>Code: <a href="https://github.com/evoluteur/bouncing-ball">bouncing-ball</a> at GitHub.</p>
+        <p>Code: <a href="https://github.com/evoluteur/bouncing-ball">evoluteur/bouncing-ball</a> at GitHub.</p>
 
         <p><br/>&#169; 2020 <a href="https://evoluteur.github.io/">Olivier Giulieri</a></p>
     </div>

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "bouncing",
     "ball",
     "animation",
+    "fullscreen",
     "css",
     "javascript"
   ]