<div class="col-md-6">
<div class="main-container">
<nav>
<div class="dropdown">
<button class="btn btn-default btn-sm dropdown-toggle btn-over btn-override" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars" id="menu-icon"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item bold" href="#"><strong>Share Profile</strong></a></li>
<li role="separator" class="divider"></li>
<li><a class="dropdown-item" href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
<li><a class="dropdown-item" href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
<li><a class="dropdown-item" href="#"><i class="fa fa-github"></i> Github</a></li>
<li><a class="dropdown-item" href="#"><i class="fa fa-codepen"></i> Codepen</a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-2"><div class="user-img"></div></div>
<div class="col-md-10">
<h1 class="user-name">S. N. Goenka</h1>
<h4 class="user-title">Teacher of Vipassanā meditation</h4>
<div class="row">
<div class="col-md-6 sm-top-bot-pad"><i class="fa fa-phone-square"></i> Contact: 1+ 987-576-4321</div>
<div class="col-md-6 sm-top-bot-pad"><i class="fa fa-envelope"></i> Email: sn.goenka@vipassana.com</div>
<div class="col-md-6 sm-top-bot-pad"><i class="fa fa-map-marker"></i> Address: 123 Fairview Way </div>
<div class="col-md-6 sm-top-bot-pad"><i class="fa fa-building"></i> Country: Burma</div>
</div>
<div class="row med-top-bot-pad">
<button type="button" class="btn btn-default btn-xs rt-mar"><i class="fa fa-heart"></i> Button Information</button>
<button type="button" class="btn btn-default btn-xs rt-mar"><i class="fa fa-paper-plane"></i> Button Information</button>
<button type="button" class="btn btn-info btn-xs"><i class="fa fa-star"></i> Button Information</button>
</div>
</div>
</div>
</div>
<div class="skill-container">
<h4>Skills</h4>
<div id="flex-layout">
<section>
<div class="flex-container">
<ul>
<li class="skill-item">
<span class="divot"><i class="fa fa-pencil"></i></span>
<h4>Photoshop</h4>
<p>Add your experience plus more information.</p>
</li>
<li class="skill-item">
<span class="divot"><i class="fa fa-pencil"></i></span>
<h4>HTML5</h4>
<p>Add your experience plus more information.</p>
</li>
<li class="skill-item">
<span class="divot"><i class="fa fa-pencil"></i></span>
<h4>CSS3</h4>
<p>Add your experience plus more information.</p>
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
@import "compass/css3";
body {
padding: 2em;
background-color: #e1e1e1;
font-family: Open Sans;
color: #666 !important;
}
.main-container {
background-color: #fff;
.user-title {
width: 90%;
padding-bottom: 1em;
border-bottom: 1px solid #999;
}
}
.dropdown-item {
color: #333 !important;
i { text-align: center; }
&.bold {
font-weight: 700;
padding-bottom: 0;
&:hover{ background: transparent; cursor: default; }
}
}
nav {
float: right;
.btn-override {
background: #f2f2f2;
border: 0 !important;
border-radius: 0 !important;
}
#menu-icon {
color: #aaa;
font-size: 2em !important;
padding: .5em .4em;
}
}
// I am aware some of these overrides may not be necessary.
// As I get more acquainted with bootstrap docs, I am sure I would find
// a more structured convention to control padding and margin.
.row {
margin: 0 !important;
padding: 0 !important;
}
.btn-default { color: #666 !important; }
.sm-top-bot-pad { padding: .3em 0; }
.med-top-bot-pad { padding: 1.3em 0 !important; }
.med-top-pad { padding-top: 1em; }
.med-pad-all { padding: 1em 0 1.5em !important; }
.rt-mar { margin-right: 2em; }
.col-md-6 i { width: 1.5em; text-align: center; }
.col-md-6:nth-of-type(4) i { padding-left: 1px } // TODO: I've notice quite a few font-awesome icons do line up horizontally, even with text align.
.user-name { margin-top: 0 !important; }
.user-img {
-webkit-clip-path: circle(40px at center);
clip-path: circle(40px at center);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/7/79/SNG.gif);
background-postition: left -20px top -20px;;
background-size: 98%;
background-repeat: no-repeat;
height: 90px;
width: 90px;
margin: 4em 0 0 5px
}
.skill-container {
@extend .main-container;
background-color: transparent;
h4 { padding-left: .5em; }
}
.skill-item {
position: relative;
padding: 2em;
h4 { padding-left: 0 !important; font-weight: 700; }
p { font-size: .9em; }
.divot {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-right: 60px solid #f1f1f1;
border-bottom: 60px solid transparent;
transition: border-color .2s;
&:hover {
border-right-color: #ccc;
cursor: pointer;
i { opacity: 9; } }
i {
position: absolute;
font-size: 20px;
margin: 7px 0 0 30px;
float: right;
color: #337ab7;
opacity: .7;
}
}
}
// Flex Styles:
#flex-layout {
@include display-flex;
@include flex-wrap(wrap);
section{
@include flex(1 0 100%);
}
div.flex-container {
$flex-legacy-enabled: true;
ul {
padding: 0;
margin: -.5em;
min-width: 100%; /* fix for old Firefox */
@include display-flex(flex);
}
li {
background: #fff;
margin: .5em;
display: inline-block; /* non-flexbox browsers */
@include flex(1 1 30%);
}
$flex-legacy-enabled: false;
}
}
View Compiled