Bootstrap Snippet my Skills set in web using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="skill-set container-fluid">
           
            <div class="content content--mlarge skill-set__flex">
              <ul class="skill-set__list">
                <li class="skill-set__item">
                  <div class="skill-set__icon"><img src="http://www.webcoderskull.com/img/icon/ai.svg" alt="Illustrator"></div>
                  <div class="skill-set__detail">
                    <div class="skill-set__meta">
                      <div class="skill-set__name">
                        <h4 class="small-title small-title--skill">Illustrator</h4>
                        <p class="skill-set__year">3YEARS</p>
                      </div>
                      <p class="small-title small-title--skill skill-set__high">90<span class="skill-set__ratio">%</span></p>
                    </div>
                    
                  </div>
                </li>
                <li class="skill-set__item">
                  <div class="skill-set__icon"><img src="http://www.webcoderskull.com/img/icon/sketch.svg" alt="Sketch"></div>
                  <div class="skill-set__detail">
                    <div class="skill-set__meta">
                      <div class="skill-set__name">
                        <h4 class="small-title small-title--skill">Sketch</h4>
                        <p class="skill-set__year">1YEARS</p>
                      </div>
                      <p class="small-title small-title--skill">80<span class="skill-set__ratio">%</span></p>
                    </div>
                  
                  </div>
                </li>
                <li class="skill-set__item">
                  <div class="skill-set__icon"><img src="http://www.webcoderskull.com/img/icon/abstract.svg" alt="Abstract"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.skill-set__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.content {
    width: 80%;
    margin: auto;
}
.skill-set__list {
    width: 47%;
}
ol, ul {
    list-style: none;
}
.skill-set__item {
     margin-top: 1.4rem; 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.skill-set__icon {
    width: 10.6382%;
    -ms-flex-item-align: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"my Skills set in web "
Bootstrap 4.1.1 Snippet by webcoderskull

Related: See More

Questions / Comments:

"my Skills set in web " Bootstrap 4.1.1 Snippet by webcoderskull

Related: See More

Questions / Comments:

"my Skills set in web "
Bootstrap 4.1.1 Snippet by webcoderskull