<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="prflpg" align="center"><img alt="" src="https://yt3.ggpht.com/-KAW-Ma7ETqU/AAAAAAAAAAI/AAAAAAAAAAA/gJVH28o-_Vg/s100-c-k-no/photo.jpg"></div>
<ul class="bmenu">
<li><a href="#">Adobe Photoshop</a></li>
<li><a href="#">HTML, HTML5</a></li>
<li><a href="#">CSS, CSS3</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Javascript, Jquery</a></li>
<li><a href="#">Flash, Action Script 2.0</a></li>
<li><a href="#">Adobe Premier</a></li>
<li><a href="#">Adobe Illustrator</a></li>
<li><a href="#">Coral Draw</a></li>
</ul>
</div>
</div>
body {background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #D9D9D9)); /* safari4+,chrome */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* ie10+ */
background: radial-gradient(ellipse at center, #ffffff 0%, #D9D9D9 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#D9D9D9',GradientType=1 ); /* ie6-9 */}
.bmenu{
padding:30px; border:#FFF solid 20px;
margin: 0 0 10px 0;
position: relative;
}
.prflpg {padding:10px; background:#fff;}
.bmenu li{
font-size: 40px;
display: block;
}
.bmenu li a{ text-decoration:none;
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
color: #005E84;
padding: 5px 20px;
margin: 2px;
background: rgba(255,255,255,0.1);
letter-spacing: 1px;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-o-transform: skew(-12deg);
-ms-transform: skew(-12deg);
transform: skew(-12deg);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bmenu:hover li a{
color: transparent;
text-shadow: 0px 0px 10px #fff;
background: rgba(0,94,132,0.2);
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
-ms-transform: skew(0deg);
transform: skew(0deg);
}
.bmenu li a:hover{
background: #005E84;
text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
color: #C8EFFF;
}
