docs: add placeholder

Author: marionebl

docs/README.md

@@ -1,13 +1,29 @@
 > Lint commit messages
 
-![commitlint demo](./assets/commitlint.svg)
+<div class="sequence">
+    <svg class="placeholder" width="832" height="517">
+        <style>
+            .tuohi3 {fill: #50b3dd}
+            .tZ1XQohX {fill: #d4d6d6}
+            .t1b70aa {fill: #1d262b}
+            .tZLMqtg {fill: #9fcc4e}
+        </style>
+        <circle cx="18" cy="18" r="7.5" fill="#999"></circle>
+        <circle cx="42" cy="18" r="7.5" fill="#999"></circle>
+        <circle cx="65" cy="18" r="7.5" fill="#999"></circle>
+        <svg x="15" y="50">
+            <rect class="text tuohi3" x="0" y="0" width="250" height="14"/>
+            <rect class="text t1b70aa" x="255" y="0" width="68" height="14"/>
+            <rect class="text tZLMqtg" x="0" y="19" width="10" height="14"/>
+        </svg>
+    </svg>
+    <img src="./assets/commitlint.svg"/>
+</div>
 
 # commitlint
 
 [![npm latest][2]][3] [![npm next][10]][3] [![Travis branch][4]][5] [![AppVeyor branch][6]][7]
 
-
-
 `commitlint` helps your team adhereing to a commit convention. By supporting npm-installed configurations it makes sharing of commit conventions easy.
 
 # Getting started

docs/assets/commitlint.svg

@@ -55,6 +55,26 @@
 		.search.search .matching-post:last-child {
 			border: 1px solid rgba(255, 255, 255, 0.1);
 		}
+		.sequence {
+			position: relative;
+			margin: 30px auto;
+		}
+		.sequence:before {
+			display: block;
+			background: #000000;
+			content: '';
+			width: 100%;
+			padding-top: 56%;
+			border-radius: 5px;
+		}
+		.sequence img,
+		.sequence .placeholder {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+		}
 	</style>
 </head>