add install

index.html

@@ -38,6 +38,27 @@
         </li>
       </ul>
 
+      <div class="install">
+        <code>
+          <a href="https://www.npmjs.com/package/destyle.css">npm</a> install
+          --save destyle.css
+        </code>
+
+        <a
+          class="install-link"
+          href="https://yarnpkg.com/en/package/destyle.css"
+          >CDN</a
+        >
+        <span>–</span>
+        <a
+          class="install-link"
+          href="https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css"
+        >
+          Download
+        </a>
+      </div>
+
+      <div class="actions">
         <a class="btn" href="compare.html">See it in action</a>
         <a
           class="btn btn-outline"
@@ -60,6 +81,7 @@
             >Tweet</a
           >
         </div>
+      </div>
     </main>
 
     <footer class="footer">

style.css

@@ -47,7 +47,7 @@ body {
 }
 
 .features {
-  margin-bottom: 60px;
+  margin-bottom: 50px;
 }
 
 .features li {
@@ -67,6 +67,42 @@ body {
   text-decoration: underline;
 }
 
+.install {
+  margin-bottom: 50px;
+  text-align: right;
+}
+
+.install code {
+  display: block;
+  background-color: #f4f4f4;
+  padding: 10px 15px;
+  margin-bottom: 10px;
+  text-align: left;
+}
+
+.install span,
+.install a {
+  color: dodgerblue;
+}
+
+.install a:active,
+.install a:focus,
+.install a:hover {
+  text-decoration: underline;
+}
+
+.install span,
+.install-link {
+  font-size: 90%;
+}
+
+@media (min-width: 500px) {
+  .actions {
+    display: flex;
+    align-items: center;
+  }
+}
+
 .btn {
   background-color: dodgerblue;
   color: #fff;
@@ -101,9 +137,7 @@ body {
 
 @media (min-width: 500px) {
   .social {
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: 40px;
+    margin-left: auto;
     padding-top: 0;
   }
 }