diff --git a/css/brands-extended.css b/css/brands-extended.css
index 6f2f035..787a15f 100644
--- a/css/brands-extended.css
+++ b/css/brands-extended.css
@@ -84,6 +84,26 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Behance */
+.button.button-behance {
+  color: #1769ff;
+  background-color: #ffff;
+}
+.button.button-behance:hover,
+.button.button-behance:focus {
+  filter: brightness(90%);
+}
+
+/* Codepen */
+.button.button-codepen {
+  color: #0000;
+  background-color: #ffff;
+}
+.button.button-codepen:hover,
+.button.button-codepen:focus {
+  filter: brightness(90%);
+}
+
 /* Devpost */
 .button.button-devpost {
   color: #ffffff;
@@ -104,6 +124,26 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Hackerearth */
+.button.button-hackerearth {
+  color: #fff;
+  background-color: #2b3352;
+}
+.button.button-hackerearth:hover,
+.button.button-hackerearth:focus {
+  filter: brightness(90%);
+}
+
+/* Hackerrank */
+.button.button-hackerrank {
+  color: #0000;
+  background-color: #ffff;
+}
+.button.button-hackerrank:hover,
+.button.button-hackerrank:focus {
+  filter: brightness(90%);
+}
+
 /* Micro.blog */
 .button.button-microblog {
   color: #FFFFFF;
diff --git a/images/icons-extended/behance.svg b/images/icons-extended/behance.svg
new file mode 100644
index 0000000..5bd4cfc
--- /dev/null
+++ b/images/icons-extended/behance.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="1573" viewBox="0 0 199.859 125.785"><path fill="#1769FF" d="M59.193 0c5.99 0 11.451.528 16.384 1.586 4.933 1.057 9.161 2.791 12.684 5.196 3.523 2.408 6.254 5.609 8.192 9.603 1.938 3.994 2.907 8.926 2.907 14.798 0 6.343-1.439 11.628-4.316 15.855-2.879 4.228-7.135 7.692-12.772 10.394 7.751 2.232 13.535 6.139 17.353 11.715 3.814 5.58 5.727 12.305 5.727 20.172 0 6.342-1.233 11.834-3.701 16.474-2.465 4.641-5.785 8.428-9.952 11.36-4.17 2.938-8.927 5.109-14.27 6.521a64.387 64.387 0 0 1-16.472 2.112H0V0h59.193zM55.67 50.915c4.933 0 8.984-1.174 12.156-3.524 3.171-2.348 4.756-6.166 4.756-11.451 0-2.935-.528-5.344-1.585-7.223-1.057-1.878-2.466-3.349-4.228-4.404-1.762-1.058-3.788-1.789-6.078-2.203a40.436 40.436 0 0 0-7.135-.616H27.659v29.422H55.67zm1.585 53.378c2.7 0 5.285-.265 7.751-.793 2.466-.529 4.638-1.41 6.519-2.644 1.877-1.231 3.375-2.906 4.492-5.021 1.115-2.113 1.673-4.814 1.673-8.104 0-6.457-1.822-11.067-5.461-13.828-3.642-2.76-8.457-4.141-14.446-4.141H27.659v34.529l29.596.002zM140.159 101.651c3.758 3.644 9.161 5.461 16.208 5.461 5.048 0 9.395-1.26 13.035-3.787 3.641-2.522 5.873-5.196 6.695-8.016h22.021c-3.522 10.922-8.927 18.734-16.207 23.43-7.284 4.699-16.093 7.047-26.427 7.047-7.164 0-13.625-1.145-19.379-3.436-5.756-2.289-10.631-5.549-14.621-9.777-3.994-4.227-7.077-9.274-9.25-15.149-2.174-5.871-3.258-12.332-3.258-19.379 0-6.81 1.113-13.152 3.347-19.025 2.229-5.871 5.399-10.951 9.514-15.24 4.108-4.285 9.013-7.662 14.71-10.129 5.695-2.467 12.008-3.699 18.938-3.699 7.752 0 14.504 1.497 20.261 4.492 5.753 2.994 10.481 7.021 14.182 12.067 3.699 5.051 6.369 10.807 8.017 17.264 1.644 6.461 2.229 13.213 1.762 20.26h-65.712c.351 8.102 2.403 13.977 6.164 17.616zm28.275-47.918c-2.994-3.287-7.547-4.933-13.652-4.933-3.994 0-7.311.677-9.953 2.026-2.643 1.353-4.758 3.023-6.344 5.021-1.584 1.998-2.702 4.113-3.346 6.342-.647 2.232-1.029 4.229-1.146 5.99h40.695c-1.174-6.343-3.258-11.157-6.254-14.446zM129.721 6.387h50.846v14.098h-50.846z"/></svg>
diff --git a/images/icons-extended/codepen.svg b/images/icons-extended/codepen.svg
new file mode 100644
index 0000000..de8331c
--- /dev/null
+++ b/images/icons-extended/codepen.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g transform="matrix(1 0 0 -1 0 1008)"><path d="M989,664.5c0-0.6,0.2-1,0.5-1c0.3,0,0.5-0.3,0.5-1v-4.9V358.3v-4.9c0-0.6-0.2-1-0.5-1c-0.3,0-0.5-0.3-0.5-1v-3.9c-0.6,0-1-0.6-1-1.9c-0.6-0.6-1-1.6-1-2.9c-0.6-0.6-1-1.3-1-1.9l-1-1c-0.6-0.6-1-1.3-1-1.9c0-0.6-0.2-1-0.5-1c-0.3,0-0.5-0.3-0.5-1l-1-1c0-1.3-0.3-1.9-1-1.9l-1-1c-1.3-1.3-1.9-2.3-1.9-2.9c-1.3,0-1.9-0.6-1.9-1.9c-0.6,0-1.6-0.6-2.9-1.9c-0.6-0.6-1.3-1-1.9-1v-1L523.3,24.8c-6.5-4.5-14.3-6.8-23.3-6.8c-9.1,0-16.9,2.3-23.3,6.8L28.5,323.3v1l-1.9,1c-1.3,1.3-2.3,1.9-2.9,1.9c0,1.3-0.6,1.9-1.9,1.9c0,0.6-0.6,1.6-1.9,2.9l-1,1c-0.6,0-1,0.3-1,1c0,0.6-0.3,1.3-1,1.9c0,0.6-0.2,1-0.5,1s-0.5,0.3-0.5,1c0,0.6-0.3,1-1,1l-1,1.9c0,0.6-0.3,1.3-1,1.9c0,1.3-0.3,2.3-1,2.9c0,1.3-0.3,1.9-1,1.9v3.9c0,0.6-0.2,1-0.5,1c-0.3,0-0.5,0.3-0.5,1v4.9v299.4v4.9c0,0.6,0.2,1,0.5,1c0.3,0,0.5,0.3,0.5,1v3.9c0.6,0,1,0.6,1,1.9c0.6,0.6,1,1.6,1,2.9c0.6,0.6,1,1.3,1,1.9l1,1c0.6,0.6,1,1.3,1,1.9c0,0.6,0.2,1,0.5,1s0.5,0.3,0.5,1l1,1c0,1.3,0.3,1.9,1,1.9l1,1c1.3,1.3,1.9,2.3,1.9,2.9c1.3,0,1.9,0.6,1.9,1.9c0.6,0,1.6,0.6,2.9,1.9c0.6,0.6,1.3,1,1.9,1v1l448.2,298.5c15.6,9.1,31.1,9.1,46.7,0l448.2-298.5v-1l1.9-1c1.3-1.3,2.3-1.9,2.9-1.9c0-1.3,0.6-1.9,1.9-1.9c0-0.6,0.6-1.6,1.9-2.9l1-1c0.6,0,1-0.3,1-1c0-0.6,0.3-1.3,1-1.9c0-0.6,0.2-1,0.5-1c0.3,0,0.5-0.3,0.5-1c0-0.6,0.3-1,1-1l1-1.9c0-0.6,0.3-1.3,1-1.9c0-1.3,0.3-2.3,1-2.9c0-1.3,0.3-1.9,1-1.9V664.5z M500,408.8L648.8,508L500,607.2L351.2,508L500,408.8z M458.2,681.1v196.4L127.6,657.7l147.8-99.2L458.2,681.1z M199.6,508l-105,70V438L199.6,508z M275.4,457.4l-147.8-99.2l330.6-219.7v196.4L275.4,457.4z M541.8,334.9V138.6l330.6,219.7l-147.8,99.2L541.8,334.9z M800.4,508l105-70v140L800.4,508z M724.6,558.6l147.8,99.2L541.8,877.4V681.1L724.6,558.6z"/></g></g>
+</svg>
\ No newline at end of file
diff --git a/images/icons-extended/hackerearth.svg b/images/icons-extended/hackerearth.svg
new file mode 100644
index 0000000..5761a56
--- /dev/null
+++ b/images/icons-extended/hackerearth.svg
@@ -0,0 +1 @@
+<svg style="color: white" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>HackerEarth</title><path d="M18.447 20.936H5.553V19.66h12.894zM20.973 0H9.511v6.51h.104c.986-1.276 2.206-1.4 3.538-1.306 1.967.117 3.89 1.346 4.017 5.169v7.322c0 .089-.05.177-.138.177h-2.29c-.09 0-.253-.082-.253-.177V10.6c0-1.783-.58-3.115-2.341-3.115-1.282 0-2.637.892-2.637 2.77v7.417c0 .089-.008.072-.102.072h-2.29c-.09 0-.29.022-.29-.072V0H3.178c-.843 0-1.581.673-1.581 1.515v20.996c0 .843.738 1.489 1.58 1.489h17.797c.843 0 1.431-.646 1.431-1.489V1.515c0-.842-.588-1.515-1.43-1.515" fill="white"></path></svg>
diff --git a/images/icons-extended/hackerrank.svg b/images/icons-extended/hackerrank.svg
new file mode 100644
index 0000000..990c8e7
--- /dev/null
+++ b/images/icons-extended/hackerrank.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path d="M256,0C221,0,49.9,98.1,32.6,128.1c-17.3,30-17.3,226,0,255.9C50,413.9,221.1,512,256,512c34.7,0,205.9-98.1,223.3-128
+		c17.5-30,17.5-226.2,0-256.1v0C461.7,98,290.6,0,256,0z M255.9,39.6c33.4,7,165.8,82.8,189,108.3c10.6,32.3,10.6,183.8,0,216.2
+		c-23,25.4-155.6,101.4-189,108.3C222.5,465.5,90,389.6,67,364.1c-10.5-32.5-10.5-183.8,0-216.2C90,122.4,222.5,46.5,255.9,39.6z
+		 M196.9,118.2l-39.4,39.4h19.7v196.9h39.4v-78.8h78.8v78.8h-19.7l39.4,39.4l39.4-39.4h-19.7V177.2h-39.4v59.1h-78.8v-78.8h19.7
+		L196.9,118.2z"/>
+</g>
+</svg>
diff --git a/preview.html b/preview.html
index ec516de..2aa2a40 100644
--- a/preview.html
+++ b/preview.html
@@ -97,6 +97,16 @@
 
         -->
 
+        <!-- Behance -->
+        <a class="button button-behance" href="#" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons-extended/behance.svg" alt="Behance Logo">Behance</a>
+        <br>
+
+        <!-- Codepen -->
+        <a class="button button-behance" href="#" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons-extended/odepen.svg" alt="Codepen Logo">Codepen</a>
+        <br>
+
         <!-- Devpost -->
         <a class="button button-devpost" href="#" target="_blank" rel="noopener">
             <img class="icon icon-invert" src="images/icons-extended/devpost.svg" alt="Devpost Logo">Devpost</a>
@@ -107,6 +117,16 @@
             <img class="icon" src="images/icons/distiller.svg" alt="Distiller Logo">Distiller</a>
         <br>
 
+      <!-- Hackerearth -->
+      <a class="button button-hackerearth" href="#" target="_blank" rel="noopener">
+        <img class="icon" src="images/icons/hackerearth.svg" alt="HackerRank Logo">HackerEarth</a>
+      <br>
+
+        <!-- Hackerrank -->
+        <a class="button button-hackerrank" href="#" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/hackerrank.svg" alt="HackerRank Logo">HackerRank</a>
+        <br>
+
         <!-- MicroBlog -->
         <a class="button button-microblog" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons-extended/microblog.svg" alt="MicroBlog Logo">MicroBlog</a>