LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

My Skills

HTML

CSS

JavaScript

PHP

MySQL

Python

WordPress

BootStrap

JQuery

PhotoShop

Data
structure

Algorithms

CSS
.skills {
    width: 100%;
    background-color: rgba(27, 0, 0, 0.79);
    height: 520px;
    margin-top: -20px;
    box-shadow: 0 0 3px #350707 inset,
                0 0 3px #350707 inset,
                0 0 3px #350707 inset,
                0 0 3px #350707 inset;
}
.skills h2 {
    color: #ecf0f1;
    padding-top: 40px;
    margin-bottom: 45px;
    letter-spacing: 4px;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    text-shadow: 0 2px 4px #222
}
.skills .S-box {
    width: 100%;
    text-align: center;
    padding: 0 0% 0 5%;
}
.skills .progress-radial {
    float: left;
    margin-right: 3%;
    position: relative;
    width: 20%;
    border-radius: 50%;
    margin-bottom: 30px
}
.progress-radial .overlay {
    position: absolute;
    width: 85%;
    background-color: rgba(241, 196, 15, 0.95);
    border-radius: 50%;
    font-size: 14px;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.progress-radial .overlay p{
    position: absolute;
    line-height: 40px;
    text-align: center;
    width: 100%;
    top:50%;
    margin-top: -20px;
    font-size: 20px;
    letter-spacing: 1px;
    color: #34495e;
    text-shadow: 0 0 2px #583737
}
.progress-radial .overlay p.ds {
    margin-top: -23px;
    line-height: 23px;
}
/* percentage of Skills for every 5% increase */
.progress-5 {
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(342deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-10 {
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(324deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-15 {
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(306deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-20 {
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(288deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-25 {
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-30 {
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(252deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-35 {
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(234deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-40 {
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(216deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-45 {
  background-color: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(198deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-50 {
  background-image: -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(-90deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-55 {
  background-image: -webkit-linear-gradient(162deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(-72deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-60 {
  background-image: -webkit-linear-gradient(144deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(-54deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-65 {
  background-image: -webkit-linear-gradient(126deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(-36deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-70 {
  background-image: -webkit-linear-gradient(108deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(-18deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-75 {
  background-image: -webkit-linear-gradient(90deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(0deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-80 {
  background-image: -webkit-linear-gradient(72deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(18deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-85 {
  background-image: -webkit-linear-gradient(54deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(36deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-90 {
  background-image: -webkit-linear-gradient(36deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(54deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-95 {
  background-image: -webkit-linear-gradient(18deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(72deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
.progress-100 {
  background-image: -webkit-linear-gradient(0deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
  background-image: linear-gradient(90deg, rgba(211, 84, 0,1.0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(211, 84, 0,1.0) 50%, transparent 50%, transparent);
}
JS
$(document).ready(function () {
    'use strict';
    $(".setsize").each(function () {
        $(this).height($(this).width());
    });
    $(window).on('resize', function () {
        $(".setsize").each(function () {
            $(this).height($(this).width());
        });
    });
});
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv