Add Open Graph and Twitter Card images (#131)

* Added image for Open Graph and Twitter

* Make favicon transparent

src/html/index.html

@@ -4,8 +4,18 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>30 Seconds of CSS</title>
-    <meta name="description" content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. From foundational elements such as clearfix to gradient text color and gradient cursor tracking to CSS easing and far beyond.">
     <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+    <meta name="description" content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. From foundational elements such as clearfix to gradient text color and gradient cursor tracking to CSS easing and far beyond.">
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://30-seconds.github.io/30-seconds-of-css/">
+    <meta property="twitter:title" content="30 Seconds of CSS - Useful CSS snippets">
+    <meta property="twitter:description" content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. ">
+    <meta property="twitter:image" content="../img/opengraph.png">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://30-seconds.github.io/30-seconds-of-css/">
+    <meta property="og:title" content="30 Seconds of CSS - Useful CSS snippets">
+    <meta property="og:description" content="A curated collection of useful CSS snippets you can understand in 30 seconds or less.">
+    <meta property="og:image" content="../img/opengraph.png">
     <script src="./src/js/index.js" defer=""></script>
     <script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
   </head>