Bootstrap snippet: work

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<div class="row"> <div class="col-md-6 col-sm-6"> <div class=" well-work"> <div class="row"> <div class="col-md-6 col-sm-6"><center> <img class="img-circle img-thumbnail img-responsive" width="200" height="200" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </center> </div> <div class="col-md-6 col-sm-6"> <div class="media-body"><center><hr /> <h4><p></p>Антон Гуревич</p> <p><span class="text-muted small">Веб-мастер</span></p></h4> <hr /> Мои страницы в соцсетях <br> <br> <a target="_blank" title="Facebook" href="http://www.facebook.com/groups/cherry.cherkassy" class="knopka">Facebook</a> <a target="_blank" title="Google+" href="http://plus.google.com/u/1/b/111669018634682741133/111669018634682741133/about" class="knopka">Google+</a> <a target="_blank" title="Odnoklassniki" href="http://ok.ru/group/57678593785892" class="knopka">Odnoklassniki</a> <a target="_blank" title="Instagram" href="http://instagram.com/cherry.ck.ua" class="knopka">Instagram</a> </center> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class=" well-work"> <div class="row"> <div class="col-md-6 col-sm-6"><center> <img class="img-circle img-thumbnail img-responsive" width="200" height="200" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </center> </div> <div class="col-md-6 col-sm-6"> <div class="media-body"><center><hr /> <h4><p></p>Антон Гуревич</p> <p><span class="text-muted small">Веб-мастер</span></p></h4> <hr /> Мои страницы в соцсетях <br> <br> <a target="_blank" title="Facebook" href="http://www.facebook.com/groups/cherry.cherkassy" class="knopka">Facebook</a> <a target="_blank" title="Google+" href="http://plus.google.com/u/1/b/111669018634682741133/111669018634682741133/about" class="knopka">Google+</a> <a target="_blank" title="Odnoklassniki" href="http://ok.ru/group/57678593785892" class="knopka">Odnoklassniki</a> <a target="_blank" title="Instagram" href="http://instagram.com/cherry.ck.ua" class="knopka">Instagram</a> </center> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class=" well-work"> <div class="row"> <div class="col-md-6 col-sm-6"><center> <img class="img-circle img-thumbnail img-responsive" width="200" height="200" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </center> </div> <div class="col-md-6 col-sm-6"> <div class="media-body"><center><hr /> <h4><p></p>Антон Гуревич</p> <p><span class="text-muted small">Веб-мастер</span></p></h4> <hr /> Мои страницы в соцсетях <br> <br> <a target="_blank" title="Facebook" href="http://www.facebook.com/groups/cherry.cherkassy" class="knopka">Facebook</a> <a target="_blank" title="Google+" href="http://plus.google.com/u/1/b/111669018634682741133/111669018634682741133/about" class="knopka">Google+</a> <a target="_blank" title="Odnoklassniki" href="http://ok.ru/group/57678593785892" class="knopka">Odnoklassniki</a> <a target="_blank" title="Instagram" href="http://instagram.com/cherry.ck.ua" class="knopka">Instagram</a> </center> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class=" well-work"> <div class="row"> <div class="col-md-6 col-sm-6"><center> <img class="img-circle img-thumbnail img-responsive" width="200" height="200" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </center> </div> <div class="col-md-6 col-sm-6"> <div class="media-body"><center><hr /> <h4><p></p>Антон Гуревич</p> <p><span class="text-muted small">Веб-мастер</span></p></h4> <hr /> Мои страницы в соцсетях <br> <br> <a target="_blank" title="Facebook" href="http://www.facebook.com/groups/cherry.cherkassy" class="knopka">Facebook</a> <a target="_blank" title="Google+" href="http://plus.google.com/u/1/b/111669018634682741133/111669018634682741133/about" class="knopka">Google+</a> <a target="_blank" title="Odnoklassniki" href="http://ok.ru/group/57678593785892" class="knopka">Odnoklassniki</a> <a target="_blank" title="Instagram" href="http://instagram.com/cherry.ck.ua" class="knopka">Instagram</a> </center> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class=" well-work"> <div class="row"> <div class="col-md-6 col-sm-6"><center> <img class="img-circle img-thumbnail img-responsive" width="200" height="200" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </center> </div> <div class="col-md-6 col-sm-6"> <div class="media-body"><center><hr /> <h4><p></p>Антон Гуревич</p> <p><span class="text-muted small">Веб-мастер</span></p></h4> <hr /> Мои страницы в соцсетях <br> <br> <a target="_blank" title="Facebook" href="http://www.facebook.com/groups/cherry.cherkassy" class="knopka">Facebook</a> <a target="_blank" title="Google+" href="http://plus.google.com/u/1/b/111669018634682741133/111669018634682741133/about" class="knopka">Google+</a> <a target="_blank" title="Odnoklassniki" href="http://ok.ru/group/57678593785892" class="knopka">Odnoklassniki</a> <a target="_blank" title="Instagram" href="http://instagram.com/cherry.ck.ua" class="knopka">Instagram</a> </center> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class=" well-work"> <div class="row"> <div class="col-md-6 col-sm-6"><center> <img class="img-circle img-thumbnail img-responsive" width="200" height="200" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </center> </div> <div class="col-md-6 col-sm-6"> <div class="media-body"><center><hr /> <h4><p></p>Антон Гуревич</p> <p><span class="text-muted small">Веб-мастер</span></p></h4> <hr /> Мои страницы в соцсетях <br> <br> <a target="_blank" title="Facebook" href="http://www.facebook.com/groups/cherry.cherkassy" class="knopka">Facebook</a> <a target="_blank" title="Google+" href="http://plus.google.com/u/1/b/111669018634682741133/111669018634682741133/about" class="knopka">Google+</a> <a target="_blank" title="Odnoklassniki" href="http://ok.ru/group/57678593785892" class="knopka">Odnoklassniki</a> <a target="_blank" title="Instagram" href="http://instagram.com/cherry.ck.ua" class="knopka">Instagram</a> </center> </div> </div> </div> </div> </div> </div>
.well-work { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: whitesmoke; border: 1px solid #e3e3e3; border-radius: 0px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05); } .knopka { -moz-user-select: none; border: 1px solid #dadada; border-radius: 0; color: #777777; cursor: pointer; display: inline-block; font-size: 100%; font-weight: normal; line-height: 16px; margin: 0 3px 6px 0; padding: 2px 6px 3px 6px; text-align: justify; text-decoration: none; vertical-align: baseline; white-space: nowrap; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .knopka:focus { outline: none!important; text-decoration: none; outline-offset: -2px; } .knopka:hover, .knopka:focus { background: #444444; color: white; text-decoration: none; border-color: #444444; outline: 0; } .knopka:active, .knopka.active { background: #444444; color: white; border-color: #444444; }
Zhenja

work

Zhenja
  Apr 3rd, 08:09
98 Views