Bootstrap Snippet candidato verificado using HTML CSS Bootstrap jQuery

.square, .btn { border-radius: 0px!important; } /* -- color classes -- */ .coralbg { background-color: #FA396F; } .coral { color: #FA396f; } .turqbg { background-color: #46D8D2; } .turq { color: #46D8D2; } .white { color: #fff!important; } /* -- The "User's Menu Container" specific elements. Custom container for the snippet -- */ div.user-menu-container { z-index: 10; background-color: #fff; margin-top: 20px; background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } div.user-menu-container .btn-lg { padding: 0px 12px; } div.user-menu-container h4 { font-weight: 300; color: #8b8b8b; } div.user-menu-container a, div.user-menu-container .btn { transition: 1s ease; } div.user-menu-container .thumbnail { width:100%; min-height:200px; border: 0px!important; padding: 0px; border-radius: 0; border: 0px!important; } /* -- Vertical Button Group -- */ div.user-menu-container .btn-group-vertical { display: block; } div.user-menu-container .btn-group-vertical>a { padding: 20px 25px; background-color: #46D8D2; color: white; border-color: #fff; } div.btn-group-vertical>a:hover { color: white; border-color: white; } div.btn-group-vertical>a.active { background: #FA396F; box-shadow: none; color: white; } /* -- Individual button styles of vertical btn group -- */ div.user-menu-btns { padding-right: 0; padding-left: 0; padding-bottom: 0; } div.user-menu-btns div.btn-group-vertical>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #46D8D2; } /* -- The main tab & content styling of the vertical buttons info-- */ div.user-menu-content { color: #323232; } ul.user-menu-list { list-style: none; margin-top: 20px; margin-bottom: 0; padding: 10px; border: 1px solid #eee; } ul.user-menu-list>li { padding-bottom: 8px; text-align: center; } div.user-menu div.user-menu-content:not(.active){ display: none; } /* -- The btn stylings for the btn icons -- */ .btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;} .btn-labeled {padding-top: 0;padding-bottom: 0;} /* -- Custom classes for the snippet, won't effect any existing bootstrap classes of your site, but can be reused. -- */ .user-pad { padding: 20px 25px; } .no-pad { padding-right: 0; padding-left: 0; padding-bottom: 0; } .user-details { background: #eee; min-height: 333px; } .user-image { max-height:200px; overflow:hidden; } .overview h3 { font-weight: 300; margin-top: 15px; margin: 10px 0 0 0; } .overview h4 { font-weight: bold!important; font-size: 40px; margin-top: 0; } .view { position:relative; overflow:hidden; margin-top: 10px; } .view p { margin-top: 20px; margin-bottom: 0; } .caption { position:absolute; top:0; right:0; background: rgba(70, 216, 210, 0.44); width:100%; height:100%; padding:2%; display: none; text-align:center; color:#fff !important; z-index:2; } .caption a { padding-right: 10px; color: #fff; } .info { display: block; padding: 10px; background: #eee; text-transform: uppercase; font-weight: 300; text-align: right; } .info p, .stats p { margin-bottom: 0; } .stats { display: block; padding: 10px; color: white; } .share-links { border: 1px solid #eee; padding: 15px; margin-top: 15px; } .square, .btn { border-radius: 0px!important; } /* -- media query for user profile image -- */ @media (max-width: 767px) { .user-image { max-height: 400px; } } .mobile-social-share { background: none repeat scroll 0 0 #EEEEEE; display: block !important; min-height: 70px !important; margin: 50px 0; } body { color: #777777; font-family: "Lato","Helvetica Neue","Arial","Helvetica",sans-serif; font-size: 13px; line-height: 19.5px; } .mobile-social-share h3 { color: inherit; float: left; font-size: 15px; line-height: 20px; margin: 25px 25px 0 25px; } .share-group { float: right; margin: 18px 25px 0 0; } .btn-group { display: inline-block; font-size: 0; position: relative; vertical-align: middle; white-space: nowrap; } .mobile-social-share ul { float: right; list-style: none outside none; margin: 0; min-width: 61px; padding: 0; } .share { min-width: 17px; } .mobile-social-share li { display: block; font-size: 18px; list-style: none outside none; margin-bottom: 3px; margin-left: 4px; margin-top: 3px; } .btn-share { background-color: #BEBEBE; border-color: #CCCCCC; color: #333333; } .btn-twitter { background-color: #3399CC !important; width: 51px; color:#FFFFFF!important; } .btn-facebook { background-color: #3D5B96 !important; width: 51px; color:#FFFFFF!important; } .btn-facebook { background-color: #3D5B96 !important; width: 51px; color:#FFFFFF!important; } .btn-telefono { background-color: #CC1E2D !important; width: 51px; color:#FFFFFF!important; } .btn-mail { background-color: #FFC90E !important; width: 51px; color:#FFFFFF!important; } .caret { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; display: inline-block; height: 0; margin-left: 2px; vertical-align: middle; width: 0; } #socialShare { max-width:20px; margin-bottom:18px; } #socialShare > a{ padding: 6px 10px 6px 10px; } @media (max-width : 320px) { #socialHolder{ padding-left:5px; padding-right:5px; } .mobile-social-share h3 { margin-left: 0; margin-right: 0; } #socialShare{ margin-left:5px; margin-right:5px; } .mobile-social-share h3 { font-size: 15px; } } @media (max-width : 238px) { .mobile-social-share h3 { font-size: 12px; } } /* Ref: Thanks to: http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html */ body { background-color:#eee; } #pinBoot { position: relative; max-width: 100%; width: 100%; } img { width: 100%; max-width: 100%; height: auto; } .white-panel { position: absolute; background: white; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); padding: 10px; } /* stylize any heading tags withing white-panel below */ .white-panel h1 { font-size: 1em; } .white-panel h1 a { color: #A92733; } .white-panel:hover { box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); margin-top: -5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } :focus { outline: none; } .row { margin-right: 0; margin-left: 0; } /* Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality A quick fix is to change .side-menu to -> position:absolute and uncomment the code below. You also need to uncomment -> <div class="absolute-wrapper"> </div> in the html file you also need to tweek the animation. Just uncomment the code in that section -------------------------------------------------------------------------------------------------------------------- If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/ This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large */ /*.absolute-wrapper{ position: fixed; width: 300px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; }*/ .side-menu { position: fixed; width: 300px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; } .side-menu .navbar { border: none; } .side-menu .navbar-header { width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav .active a { background-color: transparent; margin-right: -1px; border-right: 5px solid #e7e7e7; } .side-menu .navbar-nav li { display: block; width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav li a { padding: 15px; } .side-menu .navbar-nav li a .glyphicon { padding-right: 10px; } .side-menu #dropdown { border: 0; margin-bottom: 0; border-radius: 0; background-color: transparent; box-shadow: none; } .side-menu #dropdown .caret { float: right; margin: 9px 5px 0; } .side-menu #dropdown .indicator { float: right; } .side-menu #dropdown > a { border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body { padding: 0; background-color: #f3f3f3; } .side-menu #dropdown .panel-body .navbar-nav { width: 100%; } .side-menu #dropdown .panel-body .navbar-nav li { padding-left: 15px; border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body .navbar-nav li:last-child { border-bottom: none; } .side-menu #dropdown .panel-body .panel > a { margin-left: -20px; padding-left: 35px; } .side-menu #dropdown .panel-body .panel-body { margin-left: -15px; } .side-menu #dropdown .panel-body .panel-body li { padding-left: 30px; } .side-menu #dropdown .panel-body .panel-body li:last-child { border-bottom: 1px solid #e7e7e7; } .side-menu #search-trigger { background-color: #f3f3f3; border: 0; border-radius: 0; position: absolute; top: 0; right: 0; padding: 15px 18px; } .side-menu .brand-name-wrapper { min-height: 50px; } .side-menu .brand-name-wrapper .navbar-brand { display: block; } .side-menu #search { position: relative; z-index: 1000; } .side-menu #search .panel-body { padding: 0; } .side-menu #search .panel-body .navbar-form { padding: 0; padding-right: 50px; width: 100%; margin: 0; position: relative; border-top: 1px solid #e7e7e7; } .side-menu #search .panel-body .navbar-form .form-group { width: 100%; position: relative; } .side-menu #search .panel-body .navbar-form input { border: 0; border-radius: 0; box-shadow: none; width: 100%; height: 50px; } .side-menu #search .panel-body .navbar-form .btn { position: absolute; right: 0; top: 0; border: 0; border-radius: 0; background-color: #f3f3f3; padding: 15px 18px; } /* Main body section */ .side-body { margin-left: 310px; } /* small screen */ @media (max-width: 768px) { .side-menu { position: relative; width: 100%; height: 0; border-right: 0; border-bottom: 1px solid #e7e7e7; } .side-menu .brand-name-wrapper .navbar-brand { display: inline-block; } /* Slide in animation */ @-moz-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-webkit-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-moz-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @-webkit-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } /* Slide side menu*/ /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */ .side-menu-container > .navbar-nav.slide-in { -moz-animation: slidein 300ms forwards; -o-animation: slidein 300ms forwards; -webkit-animation: slidein 300ms forwards; animation: slidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .side-menu-container > .navbar-nav { /* Add position:absolute for scrollable menu -> see top comment */ position: fixed; left: -300px; width: 300px; top: 43px; height: 100%; border-right: 1px solid #e7e7e7; background-color: #f8f8f8; -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Uncomment for scrollable menu -> see top comment */ /*.absolute-wrapper{ width:285px; -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }*/ @-moz-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-webkit-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-moz-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @-webkit-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } /* Slide side body*/ .side-body { margin-left: 5px; margin-top: 70px; position: relative; -moz-animation: bodyslideout 300ms forwards; -o-animation: bodyslideout 300ms forwards; -webkit-animation: bodyslideout 300ms forwards; animation: bodyslideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .body-slide-in { -moz-animation: bodyslidein 300ms forwards; -o-animation: bodyslidein 300ms forwards; -webkit-animation: bodyslidein 300ms forwards; animation: bodyslidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Hamburger */ .navbar-toggle { border: 0; float: left; padding: 18px; margin: 0; border-radius: 0; background-color: #f3f3f3; } /* Search */ #search .panel-body .navbar-form { border-bottom: 0; } #search .panel-body .navbar-form .form-group { margin: 0; } .navbar-header { /* this is probably redundant */ position: fixed; z-index: 3; background-color: #f8f8f8; } /* Dropdown tweek */ #dropdown .panel-body .navbar-nav { margin: 0; } }

$(document).ready(function() { var $btnSets = $('#responsive'), $btnLinks = $btnSets.find('a'); $btnLinks.click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.user-menu>div.user-menu-content").removeClass("active"); $("div.user-menu>div.user-menu-content").eq(index).addClass("active"); }); }); $( document ).ready(function() { $("[rel='tooltip']").tooltip(); $('.view').hover( function(){ $(this).find('.caption').slideDown(250); //.fadeIn(250) }, function(){ $(this).find('.caption').slideUp(250); //.fadeOut(205) } ); }); $(document).ready(function() { $('#pinBoot').pinterest_grid({ no_columns: 4, padding_x: 10, padding_y: 10, margin_bottom: 50, single_column_breakpoint: 700 }); }); /* Ref: Thanks to: http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html */ /* Pinterest Grid Plugin Copyright 2014 Mediademons @author smm 16/04/2014 usage: $(document).ready(function() { $('#blog-landing').pinterest_grid({ no_columns: 4 }); }); */ ;(function ($, window, document, undefined) { var pluginName = 'pinterest_grid', defaults = { padding_x: 10, padding_y: 10, no_columns: 3, margin_bottom: 50, single_column_breakpoint: 700 }, columns, $article, article_width; function Plugin(element, options) { this.element = element; this.options = $.extend({}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype.init = function () { var self = this, resize_finish; $(window).resize(function() { clearTimeout(resize_finish); resize_finish = setTimeout( function () { self.make_layout_change(self); }, 11); }); self.make_layout_change(self); setTimeout(function() { $(window).resize(); }, 500); }; Plugin.prototype.calculate = function (single_column_mode) { var self = this, tallest = 0, row = 0, $container = $(this.element), container_width = $container.width(); $article = $(this.element).children(); if(single_column_mode === true) { article_width = $container.width() - self.options.padding_x; } else { article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns; } $article.each(function() { $(this).css('width', article_width); }); columns = self.options.no_columns; $article.each(function(index) { var current_column, left_out = 0, top = 0, $this = $(this), prevAll = $this.prevAll(), tallest = 0; if(single_column_mode === false) { current_column = (index % columns); } else { current_column = 0; } for(var t = 0; t < columns; t++) { $this.removeClass('c'+t); } if(index % columns === 0) { row++; } $this.addClass('c' + current_column); $this.addClass('r' + row); prevAll.each(function(index) { if($(this).hasClass('c' + current_column)) { top += $(this).outerHeight() + self.options.padding_y; } }); if(single_column_mode === true) { left_out = 0; } else { left_out = (index % columns) * (article_width + self.options.padding_x); } $this.css({ 'left': left_out, 'top' : top }); }); this.tallest($container); $(window).resize(); }; Plugin.prototype.tallest = function (_container) { var column_heights = [], largest = 0; for(var z = 0; z < columns; z++) { var temp_height = 0; _container.find('.c'+z).each(function() { temp_height += $(this).outerHeight(); }); column_heights[z] = temp_height; } largest = Math.max.apply(Math, column_heights); _container.css('height', largest + (this.options.padding_y + this.options.margin_bottom)); }; Plugin.prototype.make_layout_change = function (_self) { if($(window).width() < _self.options.single_column_breakpoint) { _self.calculate(true); } else { _self.calculate(false); } }; $.fn[pluginName] = function (options) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); } }); } })(jQuery, window, document); $(function () { $('.navbar-toggle').click(function () { $('.navbar-nav').toggleClass('slide-in'); $('.side-body').toggleClass('body-slide-in'); $('#search').removeClass('in').addClass('collapse').slideUp(200); /// uncomment code for absolute positioning tweek see top comment in css //$('.absolute-wrapper').toggleClass('slide-in'); }); // Remove menu for searching $('#search-trigger').click(function () { $('.navbar-nav').removeClass('slide-in'); $('.side-body').removeClass('body-slide-in'); /// uncomment code for absolute positioning tweek see top comment in css //$('.absolute-wrapper').removeClass('slide-in'); }); });

"candidato verificado"
Bootstrap 3.3.0 Snippet by matiasg1989

Related: See More

Questions / Comments:

"candidato verificado" Bootstrap 3.3.0 Snippet by matiasg1989

Related: See More

Questions / Comments:

"candidato verificado"
Bootstrap 3.3.0 Snippet by matiasg1989