diff --git a/css/styles.css b/css/styles.css
index 981861a..febd6d9 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -19,7 +19,71 @@ a {
   text-decoration: none;
   color: #fff;
 }
+@keyframes load{
+  from {
+    width: 0%
+  }
+}
+@-webkit-keyframes load{
+  from {
+    width: 0%
+  }
+}
+@-moz-keyframes load{
+  from {
+    width: 0%
+  }
+}
+@-o-keyframes load{
+  from {
+    width: 0%
+  }
+}
+
+.bar{
+  background-color: #EEE;
+  padding: 2px;
+  border-radius: 15px;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #FFF;
+  font-weight: bold;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+}
+.bar::before{
+  content:  attr(data-skill);
+  background-color: #f3b0ff;
+  display: inline-block;
+  padding: 5px 0 5px 10px;
+  border-radius: inherit;
+  animation: load 2s 0s;
+  -webkit-animation: load 2s 0s;
+  -moz-animation: load 2s 0s;
+  -o-animation: load 2s 0s;
+}
+
+.bar.front::before{
+  background-color: #ffcc33;
+}
+.bar.back::before{
+  background-color: #a6cfe3;
+}
 
+.bar.learning::before{
+  width: calc(20% - 10px);
+}
+.bar.basic::before{
+  width: calc(40% - 10px);
+}
+.bar.intermediate::before{
+  width: calc(60% - 10px);
+}
+.bar.advanced::before{
+  width: calc(80% - 10px);
+}
+.bar.expert::before{
+  width: calc(100% - 10px);
+}
 /* Icons */
 .fa.fa-twitter,
 .fa.fa-codepen,
diff --git a/index.html b/index.html
index 2f66c39..0fdde7e 100644
--- a/index.html
+++ b/index.html
@@ -115,6 +115,19 @@ <h1 class="about__title">Get to know me<span class="about__title__dot"></span></
         </div>
       </div>
     </section>
+    <!-- Skills -->
+    <section id="skills" class="portfolio">
+      <h1 class="portfolio__title">Skills<span class="portfolio__title__dot"></span></h1>
+      <div style="width: 50%; margin: 0 auto;">
+        <div class="bar front expert" data-skill="HTML5"></div>
+        <div class="bar front advanced" data-skill="CSS3" style="margin-top: 5px;"></div>
+        <div class="bar learning" data-skill="TDD" style="margin-top: 5px;"></div>
+        <div class="bar back basic" data-skill="Python" style="margin-top: 5px;"></div>
+        <div class="bar back intermediate" data-skill="C#" style="margin-top: 5px;"></div>
+        
+          
+      </div>
+    </section>
     <!-- Portfolio -->
     <section id="portfolio" class="portfolio">
       <h1 class="portfolio__title">Portfolio<span class="portfolio__title__dot"></span></h1>