<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> <div class="skill-set__detail"> <div class="skill-set__meta"> <div class="skill-set__name"> <h4 class="small-title small-title--skill">Abstract</h4> <p class="skill-set__year">HALF A YEAR</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/ps.svg" alt="Photoshop"></div> <div class="skill-set__detail"> <div class="skill-set__meta"> <div class="skill-set__name"> <h4 class="small-title small-title--skill">Photoshop</h4> <p class="skill-set__year">3YEARS</p> </div> <p class="small-title small-title--skill">70<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/flinto.png" alt="Flinto for mac"></div> <div class="skill-set__detail"> <div class="skill-set__meta"> <div class="skill-set__name"> <h4 class="small-title small-title--skill">Flinto for mac</h4> <p class="skill-set__year">2MONTHS</p> </div> <p class="small-title small-title--skill">50<span class="skill-set__ratio">%</span></p> </div> </div> </li> </ul> <ul class="skill-set__list"> <li class="skill-set__item"> <div class="skill-set__icon"><img src="http://www.webcoderskull.com/img/icon/html.svg" alt="HTML/CSS"></div> <div class="skill-set__detail"> <div class="skill-set__meta"> <div class="skill-set__name"> <h4 class="small-title small-title--skill">HTML/CSS</h4> <p class="skill-set__year">2YEARS</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/pug.svg" alt="Pug"></div> <div class="skill-set__detail"> <div class="skill-set__meta"> <div class="skill-set__name"> <h4 class="small-title small-title--skill">Pug</h4> <p class="skill-set__year">3MONTHS</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/wp.svg" alt="Wordpress"></div> <div class="skill-set__detail"> <div class="skill-set__meta"> <div class="skill-set__name"> <h4 class="small-title small-title--skill">Wordpress</h4> <p class="skill-set__year">1YEARS</p> </div> <p class="small-title small-title--skill">70<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/sass.svg" alt="Sass"></div> <div class="skill-set__detail"> <div class="skill-set__meta"> <div class="skill-set__name"> <h4 class="small-title small-title--skill">Sass</h4> <p class="skill-set__year">1YEARS</p> </div> <p class="small-title small-title--skill">70<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/js.svg" alt="Javascript"></div> <div class="skill-set__detail"> <div class="skill-set__meta"> <div class="skill-set__name"> <h4 class="small-title small-title--skill">Javascript</h4> <p class="skill-set__year">1YEARS</p> </div> <p class="small-title small-title--skill">60<span class="skill-set__ratio">%</span></p> </div> </div> </li> </ul> </div> </div>

.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; align-self: center; } img { max-width: 100%; height: auto; vertical-align: middle; width: 100%; } .skill-set__detail { width: 85.1063%; } .skill-set__meta { margin-bottom: 0.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .skill-set__name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .small-title { font-size: 2.4rem; color: #072142; letter-spacing: 0.2em; line-height: 1.2; font-family: "futura_de"; } .skill-set__year { font-size: 1.4rem; line-height: 1.2; color: #c0c5ca; margin-left: 0.8rem; letter-spacing: 0.2em; } .skill-set__high { color: #ff4d5a; } .small-title { font-size: 2.4rem; color: #072142; letter-spacing: 0.2em; line-height: 1.2; font-family: "futura_de"; } skill-set__ratio { font-size: 1.6rem; line-height: 1.2; color: #072142; }