Chia sẻ intro profile cá nhân giống BEATVN có edit | RIUSGREY

Quản trị viên February 22, 2019 #Blogger

Hôm nay mình xin giới thiệu đến các bạn intro profile giống BEATVN. 

Hình Minh Hoạ

Live demo

Cách làm:

Các bạn copy code phía dưới và dán chỗ phù hợp ( thường là trên bài viết )

<style>
/* css còn thừa không rảnh xóa ae thông cảm */
.col-3 {
    width: 16%;
}
.col-2, .col-3 {
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 6px;
    padding-right: 6px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16 {
    float: left;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16 {
    position: relative;
    min-height: 1px;
    padding-left: 6px;
    padding-right: 6px;
}
.col-13{
  width: 81.25%;
}
.b-cover{height:155px;background-repeat:no-repeat;background-size:cover;background-position:50%;background-color:#1c1e21}
.page-profile .b-sidebar-left{position:static}
.b-profile-cover-riusgrey{background-color:#fff;-webkit-box-shadow:0 1px 3px 0 rgba(26,26,26,.1);box-shadow:0 1px 3px 0 rgba(26,26,26,.1);border-radius:3px;margin-bottom:24px;overflow:hidden}
.b-profile-cover-riusgrey .upload-overlay{position:absolute;top:4px;right:4px;bottom:4px;left:4px;margin:auto;background-color:rgba(0,0,0,.3);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;text-align:center;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.b-profile-cover-riusgrey .upload-overlay:hover{opacity:.8}
.b-profile-cover-riusgrey .upload-overlay .text{margin:14px 0 0;font-size:14px;font-weight:600;color:#fff}
.profile-cover{position:relative}
.profile-cover .upload-overlay{width:180px;height:80px;border-radius:4px}
.profile-block .avatar-container{margin-top:-52px;padding:15px}
.profile-block .avatar-container .avatar{border-radius:3px;overflow:hidden;-webkit-box-shadow:0 1px 3px 0 rgba(26,26,26,.1);box-shadow:0 1px 3px 0 rgba(26,26,26,.1);position:relative}
.profile-block .avatar-container .avatar .image-avatar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}
.profile-block .avatar-container .avatar .image-avatar,.profile-block .avatar-container .avatar img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;border:4px solid #fff;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:scale-down;vertical-align:middle;-ms-flex-pack:center;justify-content:center}
.profile-block .info{position:relative;padding-top:16px}
.profile-block .cover-title{display:inline-block;float:left;color:#e70000}
.profile-block .cover-title .subtitle{margin:0;font-weight:700;font-size:13px}
.profile-block .cover-title .title{margin:0;font-weight:700;font-size:24px;line-height:32px;max-width:300px;color:#222}
.profile-block .cover-title .title&gt;a{-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;display:block;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;color:#1a1a1a}
.profile-block .cover-title .title&gt;a:hover{opacity:.8;color:#e70000}
.profile-block .cover-tab{margin-top:5px}
.profile-block .cover-title .title&gt;p{text-transform:capitalize;font-size:16px;font-weight:400}
.profile-block .cover-tab&gt;li&gt;a:after{left:16px;right:16px}
.profile-block .col-left{float:left;width:120px}
.profile-block .col-left .avatar-container{margin-top:-48px}
.profile-block .col-right{float:right;width:calc(100% - 120px);width:-webkit-calc(100% - 120px)}
.profile-block .col-right .cover-action{top:12px}
.profile-block .col-full{clear:both;display:block;width:100%}
.profile-block .col-full .info{padding:15px 15px 0}
.profile-block .col-full .cover-tab{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-align:center;align-items:center;-webkit-align-items:center;list-style:none;overflow:hidden;overflow-x:auto;white-space:nowrap}
.profile-block .col-full .cover-tab::-webkit-scrollbar,.profile-block .col-full .cover-tab ::-webkit-scrollbar{display:none;width:0;background:transparent;overflow:-moz-scrollbars-none}
.profile-block .col-full .cover-tab li{float:left;text-align:center;-ms-flex:1;flex:1 1;-webkit-flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%}
.group-cover-info .row-eq-height,.profile-block .col-full .cover-tab li{-ms-flex-align:center;align-items:center}
.group-cover-info .row-eq-height div{-ms-flex-pack:start;justify-content:flex-start}
.group-cover-info .post-actions{display:inline-block}
.group-cover-info .post-actions .post-reaction{display:-ms-flexbox;display:flex}
.group-cover-info .post-actions .post-reaction&gt;li{display:-ms-flexbox;display:flex;padding:9px 2px;margin-right:16px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a{position:relative;line-height:32px;display:block;text-align:left;width:100%;border-radius:3px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;color:#8590a6;font-weight:700;font-size:12px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .b-icon{position:relative;margin-right:6px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-like{top:3px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-angry{top:5px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-share{top:3px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-comment,.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-more-lg{top:4px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active{color:#e70000}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active .icon-like{background-image:url(/static/media/like-active.efada8e0.svg)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active .icon-angry{background-image:url(/static/media/angry-active.42d26955.svg)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like{text-align:left}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .b-icon-like{width:42px;display:inline-block}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .icon-like{background-image:url(https://beat.vn/static/media/heart.e56d04a7.png);background-position:0}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like.active .icon-like,.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .icon-like{position:absolute;background-repeat:no-repeat;background-size:2900%;height:50px;width:50px;left:25px;top:50%;-ms-transform:translate(-50%,-47.5%);-webkit-transform:translate(-50%,-47.5%);transform:translate(-50%,-47.5%)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like.active .icon-like{background-image:url(https://beat.vn/static/media/heart.e56d04a7.png);background-position:100%;-webkit-animation-timing-function:steps(28);animation-timing-function:steps(28);-webkit-animation-name:heart-burst;animation-name:heart-burst;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:1;animation-iteration-count:1;display:inline-block}
.group-cover-info .post-actions .post-reaction&gt;li .b-btn-more .icon-more-lg{top:8px}
.group-cover-info .col-left{float:left;width:120px}
.group-cover-info .col-left .avatar-container{margin-top:-48px}
.group-cover-info .col-right{float:right;width:calc(100% - 120px);width:-webkit-calc(100% - 120px)}
.group-cover-info .col-right .cover-action{top:12px}
.group-cover-info .col-full{clear:both;display:block;width:100%}
.group-cover-info .col-full .info{padding:0 15px}
.group-cover-info .col-full .group-cover-overview{text-align:center;padding:0 24px}
.group-cover-info .col-full .group-cover-overview .actions{margin:0}
.group-cover-info .col-full .cover-tab{margin-top:8px}
.group-cover-info .col-full .cover-tab&gt;li&gt;a:after{left:16px;right:16px}
.group-cover-info .col-full .cover-tab{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-align:center;align-items:center;-webkit-align-items:center;list-style:none;overflow:hidden;overflow-x:auto;white-space:nowrap}
.group-cover-info .col-full .cover-tab::-webkit-scrollbar,.group-cover-info .col-full .cover-tab ::-webkit-scrollbar{display:none;width:0;background:transparent;overflow:-moz-scrollbars-none}
.group-cover-info .col-full .cover-tab li{float:left;text-align:center;-ms-flex:1;flex:1 1;-webkit-flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%}
.page-mobile .b-group-cover,.page-mobile .b-profile-cover-riusgrey{margin-bottom:12px;border-radius:0;-webkit-box-shadow:0 0 3px 0 rgba(26,26,26,.1);box-shadow:0 0 3px 0 rgba(26,26,26,.1)}
.card-update-profile{padding:24px 0}
.card-update-profile button[type=submit]{min-width:250px;font-weight:600}
.card-update-profile .btn-group{border-radius:3px;background-color:#f6f6f6;border:1px solid #ebebeb;width:100%;display:-ms-flexbox;display:flex}
.card-update-profile .btn-group .btn{-ms-flex:1;flex:1 1;background:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;font-weight:500}
.card-update-profile .btn-group .btn:hover{opacity:.8}
.card-update-profile .btn-group .btn.active{background-color:#000;border-color:#000;color:#fff}
.page-mobile .card-update-profile{padding:24px}
.b-featured{height:308px}
.b-featured.b-featured-video,.b-featured.b-featured-video .thumbnail{height:460px!important}
.b-video .video-list{margin-bottom:-12px;overflow:hidden}
.b-video .video-list.list-2col{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:wrap}
.b-video .b-card-header{position:relative}
.b-video .b-card-header .btn{position:absolute;right:12px;top:8px;font-size:11px;font-weight:500;text-transform:uppercase;padding:5px 12px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.b-video .b-card-header .btn:hover{opacity:.8}
.b-video .b-card-header .btn .b-icon{position:relative;top:1px;margin-left:4px}
.b-video .b-video-item{border-radius:3px}
.b-video .b-video-item .thumbnail{margin:0}
.b-video .b-video-item .info{padding:10px 0;min-height:64px}
.b-video .b-video-item .info .b-sm-title{display:-moz-box;display:-webkit-box;-webkit-line-clamp:2;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;word-break:break-word;margin-bottom:8px}
.b-video .b-video-header{border-radius:3px}
.b-video .b-video-header .thumbnail{margin:0}
.b-video .b-video-header .info{padding:10px 0;min-height:64px}
.b-video .b-video-header .info .b-sm-title{display:-moz-box;display:-webkit-box;-webkit-line-clamp:2;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;word-break:break-word;margin-bottom:8px}
.b-video .actions .next,.b-video .actions .prev{padding:14px 7px;border-radius:3px;-webkit-box-shadow:0 0 3px 0 rgba(26,26,26,.1);box-shadow:0 0 3px 0 rgba(26,26,26,.1);background-color:#fff;border:1px solid rgba(0,0,0,.1);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);margin:auto;cursor:pointer;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.b-video .actions .next:hover,.b-video .actions .prev:hover{opacity:.8}
.b-video .actions .next .b-icon,.b-video .actions .prev .b-icon{float:left}
.b-video .actions .prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.b-video .actions .next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.page-mobile .b-featured{height:200px}
.page-mobile .b-featured.b-featured-video,.page-mobile .b-featured.b-featured-video .thumbnail{height:200px!important}
.page-mobile .b-featured .item .thumbnail .b-icon.icon-play{width:48px;height:48px}
.page-mobile .b-featured .item .info .b-title,.page-mobile .b-featured .item .info .b-title a,.page-mobile .b-featured .item .info .title,.page-mobile .b-featured .item .info .title a{font-weight:600;font-size:16px;line-height:20px}
.page-mobile .b-featured .item .info .metadata{margin:0;font-size:13px}
.b-hot-list{border-radius:3px;overflow:hidden;background-color:#000;font-size:13px}
.b-hot-list .col-4,.b-hot-list .col-6{padding:0}
.b-hot-list .row.no-gutter{margin-left:0;margin-right:0}
.b-hot-list .item{margin-bottom:20px}
.b-hot-list .img-container{display:block;position:relative}
.b-hot-list .title{display:block;text-decoration:none}
.b-hot-list .title h2,.b-hot-list .title h2 a{margin:0;font-size:13px;font-weight:700;color:#555;display:-moz-box;display:-webkit-box;-webkit-line-clamp:2;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;word-break:break-word}
.b-hot-list .title small{font-size:.65em}
.b-hot-list .title p{color:#000;margin-bottom:0}
.b-hot-list .meta{color:#999;font-size:.9em}
.b-hot-list .meta p{margin:0}
.b-hot-list .meta a{color:#999;text-decoration:none}
.b-hot-list .meta a:hover{color:#000}
.b-hot-list.cover .item{position:relative;margin-bottom:0;border-right:1px solid #000;border-bottom:1px solid #000}
.b-hot-list.cover .item:hover .img-shadow{opacity:.8}
.b-hot-list.cover .info{position:absolute;bottom:0;left:0;color:#fff;padding:12px;cursor:pointer}
.b-hot-list.cover .info .title,.b-hot-list.cover .info p{color:#fff}
.b-hot-list .img-container .img-shadow{background-image:-webkit-linear-gradient(-90deg,rgba(0,0,0,.3),#000);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.3)),to(#000));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.3),#000);background-image:-o-linear-gradient(top,rgba(0,0,0,.3) 0,#000 100%);background-image:linear-gradient(180deg,rgba(0,0,0,.3),#000);width:100%;height:100%;position:absolute;top:0;left:0;opacity:.5;-webkit-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}
.page-group .b-sidebar-left{position:static}
.b-group-cover{background-color:#fff;-webkit-box-shadow:0 1px 3px 0 rgba(26,26,26,.1);box-shadow:0 1px 3px 0 rgba(26,26,26,.1);border-radius:3px;margin-bottom:24px;overflow:hidden}
.group-cover-overview{padding:12px 24px}
.group-cover-overview&gt;.title{font-weight:700;font-size:26px;line-height:32px;margin:16px 0 4px}
.group-cover-overview&gt;.actions{margin:12px 0}
.group-cover-overview&gt;.actions&gt;.btn{margin-right:12px;font-weight:700;text-transform:uppercase}
.group-cover-overview&gt;.actions&gt;.btn .b-icon{margin-right:6px;position:relative;top:1px}
.group-cover-overview&gt;.actions&gt;.btn .icon-verify{top:2px}
.group-cover-overview&gt;.actions&gt;.btn .icon-share-active{width:17px;height:12px}
.group-cover-overview&gt;.actions&gt;.btn:last-child{margin-right:0}
.group-cover-stats{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;padding:12px 24px}
.group-cover-stats .item{-ms-flex:1;flex:1 1;text-align:center}
.group-cover-stats .item:last-child{border-left:1px solid #ebebeb}
.group-cover-stats .item-value{font-size:20px;font-weight:600;line-height:24px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}
.group-cover-stats .item-label{text-transform:uppercase;font-size:11px;line-height:15px}
.b-beaters&gt;.info{padding:24px 12px}
.b-beaters&gt;.info .title{margin:0 0 4px;font-size:26px;line-height:32px;font-weight:700}
.b-notification-groups&gt;li .header{text-transform:uppercase;background-color:#f6f6f6;-webkit-box-shadow:0 -.5px 0 0 rgba(26,26,26,.1),0 .5px 0 0 rgba(0,0,0,.1);box-shadow:0 -.5px 0 0 rgba(26,26,26,.1),0 .5px 0 0 rgba(0,0,0,.1);color:#8590a6;font-weight:700;font-size:11px;padding:7px 12px}
.b-notification-list&gt;li{padding:12px;border-bottom:1px solid rgba(131,144,158,.15)}
.b-notification-list&gt;li.active{background-color:#f6f6f6}
.b-notification-list&gt;li:first-child{border-top:1px solid rgba(131,144,158,.15)}
.b-notification-list&gt;li .avatar{width:32px;height:32px;float:left}
.b-notification-list&gt;li .content{overflow:hidden;padding-left:12px;padding-right:76px;position:relative}
.b-notification-list&gt;li .content .icon-reply{position:relative;top:2px}
.b-notification-list&gt;li .description{margin-top:6px;margin-bottom:8px}
.b-notification-list&gt;li .overview{width:64px;border-radius:3px;position:absolute;top:0;right:0}
.b-notification-list&gt;li .activity{padding:12px 124px 12px 12px;background-color:#f6f6f6;border:1px solid #ebebeb;position:relative;min-height:124px}
.b-notification-list&gt;li .activity .title{margin-bottom:5px}
.b-notification-list&gt;li .activity .metadata{margin-top:12px}
.b-notification-list&gt;li .activity .thumbnail{position:absolute;right:12px;top:12px;width:100px}
.b-post-container{height:100%;background-color:#fff}
.b-post-container&gt;.row{height:100%;width:100%;margin:0;padding:0}
.b-post-container&gt;.row&gt;.col-9,.b-post-container&gt;.row&gt;.col-10{width:calc(100% - 436px - 48px);width:-webkit-calc(100% - 436px - 48px);margin:0;padding:0;-ms-flex:1;flex:1 1;height:100%}
.b-post-container&gt;.row&gt;.col-6,.b-post-container&gt;.row&gt;.col-7{width:436px;margin:0;padding:0;-ms-flex:1;flex:1 1;max-width:436px;height:100%}
.b-post-container .b-post-item{margin:0}
.b-post-container .b-featured{border-radius:0}
.b-post-content{position:relative;height:100%;width:100%;padding:12px;background-color:#000}
.b-post-content .d-show-tag{-ms-flex:1 1 0;flex:1 1;height:100%}
.b-post-content .d-show-tag,.b-post-content .d-show-tag .d-show-tag-inner{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}
.b-post-content .d-show-tag .d-show-tag-inner{max-width:100%;max-height:100%}
.b-post-content .d-show-tag .d-show-tag-inner .d-show-tag-img{position:relative;display:block}
.b-post-content img{position:absolute;top:12px;right:12px;left:12px;bottom:12px;margin:auto;max-width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:scale-down;vertical-align:middle;-ms-flex-pack:center;justify-content:center}
.b-new-post-modal{overflow:hidden;overflow-y:scroll}
.modal-right{width:100%;height:100%;position:relative}
.modal-right .overflow{overflow:auto;height:100%;width:100%}
.modal-right .post-header .actions{display:none}
.modal-right .related-list{padding-top:12px}
.modal-right .b-related-item .info{-ms-flex-line-pack:center;align-content:center;min-height:120px}
.modal-right .post-actions{padding-right:0}
.modal-right .post-actions .actions{display:none}
.btn{outline:none;display:inline-block;margin-bottom:0;font-weight:500;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:8px 12px;font-size:13px;line-height:1.15384615;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.btn.focus,.btn:focus,.btn:hover{color:#1a1a1a;text-decoration:none}
.btn.active,.btn:active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:none;opacity:.65;-webkit-box-shadow:none;box-shadow:none}
a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}
.btn-primary2{color:#fff;background-color:#3578e5;border-color:#3578e5;border-radius:20px;margin-bottom:10px;margin-left:-10px;
padding:3px 10px 3px 10px}
.btn-primary2.focus,.btn-primary2:focus{color:#fff;background-color:#ff1b1b;border-color:#ff6868}
.btn-primary2.active,.btn-primary2:active,.btn-primary2:hover,.open&gt;.btn-primary2.dropdown-toggle{color:#fff;background-color:#e50914;border-color:#3578e5}
.btn-primary2.active.focus,.btn-primary2.active:focus,.btn-primary2.active:hover,.btn-primary2:active.focus,.btn-primary2:active:focus,.btn-primary2:active:hover,.open&gt;.btn-primary2.dropdown-toggle.focus,.open&gt;.btn-primary2.dropdown-toggle:focus,.open&gt;.btn-primary2.dropdown-toggle:hover{color:#fff;background-color:#ff3f3f;border-color:#ff6868}
.btn-primary2.active,.btn-primary2:active,.open&gt;.btn-primary2.dropdown-toggle{background-image:none}
.btn-primary2.disabled.focus,.btn-primary2.disabled:focus,.btn-primary2.disabled:hover,.btn-primary2[disabled].focus,.btn-primary2[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary2:focus,fieldset[disabled] .btn-primary2:hover{background-color:#e70000;border-color:#e70000}
.btn-primary2 .badge{color:#e70000;background-color:#fff}


.btn-primary{color:#fff;background-color:#e70000;border-color:#e70000}
.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#ff1b1b;border-color:#ff6868}
.btn-primary.active,.btn-primary:active,.btn-primary:hover,.open&gt;.btn-primary.dropdown-toggle{color:#fff;background-color:#ff1b1b;border-color:#ff2525}
.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open&gt;.btn-primary.dropdown-toggle.focus,.open&gt;.btn-primary.dropdown-toggle:focus,.open&gt;.btn-primary.dropdown-toggle:hover{color:#fff;background-color:#ff3f3f;border-color:#ff6868}
.btn-primary.active,.btn-primary:active,.open&gt;.btn-primary.dropdown-toggle{background-image:none}
.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#e70000;border-color:#e70000}
.btn-primary .badge{color:#e70000;background-color:#fff}
.btn-white,.btn-white.active,.btn-white.active.focus,.btn-white.active:focus,.btn-white.active:hover,.btn-white.focus,.btn-white:active,.btn-white:active.focus,.btn-white:active:focus,.btn-white:active:hover,.btn-white:focus,.btn-white:hover,.open&gt;.btn-white.dropdown-toggle,.open&gt;.btn-white.dropdown-toggle.focus,.open&gt;.btn-white.dropdown-toggle:focus,.open&gt;.btn-white.dropdown-toggle:hover{color:#1a1a1a;background-color:#fff;border-color:#fff}
.btn-white.active,.btn-white:active,.open&gt;.btn-white.dropdown-toggle{background-image:none}
.btn-white.disabled.focus,.btn-white.disabled:focus,.btn-white.disabled:hover,.btn-white[disabled].focus,.btn-white[disabled]:focus,.btn-white[disabled]:hover,fieldset[disabled] .btn-white.focus,fieldset[disabled] .btn-white:focus,fieldset[disabled] .btn-white:hover{background-color:#fff;border-color:#fff}
.btn-white .badge{color:#fff;background-color:#1a1a1a}
.btn-gray,.btn-gray.active,.btn-gray.active.focus,.btn-gray.active:focus,.btn-gray.active:hover,.btn-gray.focus,.btn-gray:active,.btn-gray:active.focus,.btn-gray:active:focus,.btn-gray:active:hover,.btn-gray:focus,.btn-gray:hover,.open&gt;.btn-gray.dropdown-toggle,.open&gt;.btn-gray.dropdown-toggle.focus,.open&gt;.btn-gray.dropdown-toggle:focus,.open&gt;.btn-gray.dropdown-toggle:hover{color:#8590a6;background-color:#fff;border-color:#fff}
.btn-gray.active,.btn-gray:active,.open&gt;.btn-gray.dropdown-toggle{background-image:none}
.btn-gray.disabled.focus,.btn-gray.disabled:focus,.btn-gray.disabled:hover,.btn-gray[disabled].focus,.btn-gray[disabled]:focus,.btn-gray[disabled]:hover,fieldset[disabled] .btn-gray.focus,fieldset[disabled] .btn-gray:focus,fieldset[disabled] .btn-gray:hover{background-color:#fff;border-color:#fff}
.btn-gray .badge{color:#fff;background-color:#8590a6}
.btn-link,.btn-link.active,.btn-link.active.focus,.btn-link.active:focus,.btn-link.active:hover,.btn-link.focus,.btn-link:active,.btn-link:active.focus,.btn-link:active:focus,.btn-link:active:hover,.btn-link:focus,.btn-link:hover,.open&gt;.btn-link.dropdown-toggle,.open&gt;.btn-link.dropdown-toggle.focus,.open&gt;.btn-link.dropdown-toggle:focus,.open&gt;.btn-link.dropdown-toggle:hover{color:#e70000;background-color:#fff;border-color:#fff}
.profile-cover{position:relative}
.profile-cover .upload-overlay{width:180px;height:80px;border-radius:4px}
.profile-block .cover-mood{position:relative;display:inline-block;float:left;max-width:400px;padding:6px 12px 6px 6px;background-color:#f6f6f6;border:1px solid #ebebeb;color:#8590a6;text-align:center;line-height:18px;border-radius:3px;margin-left:24px}
.profile-block .cover-mood&gt;.content{font-size:13px;margin-top:0}
.profile-block .cover-mood:before{content:&quot;&quot;;position:absolute;left:-8px;border:6px solid transparent;border-right-width:8px;border-left:0;border-right-color:#f6f6f6;height:10px;top:0;bottom:0;margin:auto;z-index:1}
.profile-block .cover-mood:after{content:&quot;&quot;;position:absolute;left:-10px;border:8px solid transparent;border-left:0;border-right-width:10px;border-right-color:#ebebeb;height:12px;top:0;bottom:0;margin:auto}
.profile-block .cover-action{position:absolute;top:16px;right:16px}
.profile-block .cover-action .btn{float:right;margin-left:8px}
.profile-block .cover-action .btn .b-icon{margin-right:6px;position:relative;top:1px}
.profile-block .cover-action .btn .b-icon.icon-edit{background-image:url(https://beat.vn/static/media/profile.3815765d.svg);width:14px;height:14px;float:left}
.profile-block .col-left{float:left;width:120px}
.profile-block .col-left .avatar-container{margin-top:-48px}
.profile-block .col-right{float:right;width:calc(100% - 120px);width:-webkit-calc(100% - 120px)}
.profile-block .col-right .cover-action{top:12px}
.profile-block .col-full{clear:both;display:block;width:100%}
.profile-block .col-full .info{padding:15px 15px 0}
.profile-block .col-full .cover-tab{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-align:center;align-items:center;-webkit-align-items:center;list-style:none;overflow:hidden;overflow-x:auto;white-space:nowrap}
.profile-block .col-full .cover-tab::-webkit-scrollbar,.profile-block .col-full .cover-tab ::-webkit-scrollbar{display:none;width:0;background:transparent;overflow:-moz-scrollbars-none}
.profile-block .col-full .cover-tab li{float:left;text-align:center;-ms-flex:1;flex:1 1;-webkit-flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%}
.group-cover-info .row-eq-height,.profile-block .col-full .cover-tab li{-ms-flex-align:center;align-items:center}
.group-cover-info .row-eq-height div{-ms-flex-pack:start;justify-content:flex-start}
.group-cover-info .post-actions{display:inline-block}
.group-cover-info .post-actions .post-reaction{display:-ms-flexbox;display:flex}
.group-cover-info .post-actions .post-reaction&gt;li{display:-ms-flexbox;display:flex;padding:9px 2px;margin-right:16px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a{position:relative;line-height:32px;display:block;text-align:left;width:100%;border-radius:3px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;color:#8590a6;font-weight:700;font-size:12px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .b-icon{position:relative;margin-right:6px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-like{top:3px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-angry{top:5px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-share{top:3px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-comment,.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-more-lg{top:4px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active{color:#e70000}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active .icon-like{background-image:url(https://beat.vn/static/media/like-active.efada8e0.svg)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active .icon-angry{background-image:url(https://beat.vn/static/media/angry-active.42d26955.svg)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like{text-align:left}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .b-icon-like{width:42px;display:inline-block}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .icon-like{background-image:url(https://beat.vn/static/media/heart.e56d04a7.png);background-position:0}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like.active .icon-like,.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .icon-like{position:absolute;background-repeat:no-repeat;background-size:2900%;height:50px;width:50px;left:25px;top:50%;-ms-transform:translate(-50%,-47.5%);-webkit-transform:translate(-50%,-47.5%);transform:translate(-50%,-47.5%)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like.active .icon-like{background-image:url(https://beat.vn/static/media/heart.e56d04a7.png);background-position:100%;-webkit-animation-timing-function:steps(28);animation-timing-function:steps(28);-webkit-animation-name:heart-burst;animation-name:heart-burst;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:1;animation-iteration-count:1;display:inline-block}
.group-cover-info .post-actions .post-reaction&gt;li .b-btn-more .icon-more-lg{top:8px}
.group-cover-info .col-left{float:left;width:120px}
.group-cover-info .col-left .avatar-container{margin-top:-48px}
.group-cover-info .col-right{float:right;width:calc(100% - 120px);width:-webkit-calc(100% - 120px)}
.group-cover-info .col-right .cover-action{top:12px}
.group-cover-info .col-full{clear:both;display:block;width:100%}
.group-cover-info .col-full .info{padding:0 15px}
.group-cover-info .col-full .group-cover-overview{text-align:center;padding:0 24px}
.group-cover-info .col-full .group-cover-overview .actions{margin:0}
.group-cover-info .col-full .cover-tab{margin-top:8px}
.group-cover-info .col-full .cover-tab&gt;li&gt;a:after{left:16px;right:16px}
.group-cover-info .col-full .cover-tab{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-align:center;align-items:center;-webkit-align-items:center;list-style:none;overflow:hidden;overflow-x:auto;white-space:nowrap}
.group-cover-info .col-full .cover-tab::-webkit-scrollbar,.group-cover-info .col-full .cover-tab ::-webkit-scrollbar{display:none;width:0;background:transparent;overflow:-moz-scrollbars-none}
.group-cover-info .col-full .cover-tab li{float:left;text-align:center;-ms-flex:1;flex:1 1;-webkit-flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%}
.b-thumbnail{position:relative;display:block;background-size:cover;background-repeat:no-repeat;background-position:50%;background-color:#f6f6f6}
.b-thumbnail:before{content:&quot;&quot;;display:block}
.b-thumbnail-1x1:before{padding-top:100%}
@media screen and (max-width: 980px) {
.b-profile-cover-riusgrey .col-3{width:50%;height:50%;margin:0 auto;float:none}
.b-profile-cover-riusgrey .col-13{width:100%}
.profile-block .cover-title,.profile-block .cover-title .title{display:block;float:none;text-align:center;margin:0 auto}
.profile-block .cover-mood{float:none;display:block;margin:10px auto}
.profile-block .cover-action{position:initial}
.profile-block .cover-action .btn{float:none;text-align:center;margin:0 auto;display:table;margin-bottom:15px}
.profile-block .cover-mood:after{top:-13px;transform:rotate(90deg);bottom:inherit;left:inherit}
.profile-block .cover-mood:before{top:-9.8px;transform:rotate(90deg);bottom:inherit;left:inherit;margin:0 1px}
}
.profile_img img{transition:.3s;width:150px;height:150px;object-fit:cover;border-radius:50%;background:#fff1;padding:6px;;position:absolute;bottom:-90px;left:15px;z-index:1;background:#fff;box-shadow: 0px 1px 1px 1px rgba(0,0,0,.24), 0 1px 1px 1px rgba(0,0,0,.2);}
.profile_img img:hover{border-radius:0%;background:#fff}
</style>
<div class='b-profile-cover-riusgrey'>
<div class='profile-cover b-cover'>
</div>
<div class='row profile-block'>
<div class='col-3'>
<div class='avatar-container'>
<div class='profile_img'>
<img src='https://instagram.fhan2-3.fna.fbcdn.net/vp/340171bb6e71f0f433c67fc1e0a24cc8/5CF6AABA/t51.2885-19/s150x150/52165319_967287836807109_5132926599544438784_n.jpg?_nc_ht=instagram.fhan2-3.fna.fbcdn.net'/>
  </div>
</div>
</div>
<div class='col-13'>
<div class='info'>
<div class='cover-title'>
<h3 class='subtitle'>Tưởng nhớ</h3>
<h1 class='title'><a>Vũ Minh Thịnh <img alt='verify' data-original-title='Trang cá nhân đã xác minh Tokenne đã xác nhận đây là trang cá nhân thật của người của công chúng này.' data-toggle='tooltip' src='https://pbs.twimg.com/media/DLMfcJwX0AAauDp.png' style='width:23px;height:23px;top:3px;left:0px' title='cc'/> </a>
<p>(RIUS GREY)</p>
</h1>
<a class='btn btn-primary2' href='https://www.blogger.com/follow.g?blogID=2016773409250385719' target='_blank'><i class=''/><img alt='verify' data-original-title='Trang cá nhân đã xác minh Tokenne đã xác nhận đây là trang cá nhân thật của người của công chúng này.' data-toggle='tooltip' src='https://i.imgur.com/IRRMg3V.png' style='width:11px;height:15px;top:3px;right:2px' title='cc'/> Trang cá nhân này bị khóa</a>
</div>

</div>
<div class='clear'/>
<div class='cover-action'>
<a class='btn btn-primary' href='https://www.blogger.com/follow.g?blogID=2016773409250385719' target='_blank'><i class=''/> &#8226;&#8226;&#8226;</a>
<a class='btn btn-primary' href='https://www.messenger.com/login.php?next=https%3A%2F%2Fwww.messenger.com%2Ft%2F100013576989756%2F' target='_blank'><i class='fas fa-comment-alt-lines'/> Nhắn tin</a>
<a class='btn btn-primary' href='https://www.blogger.com/follow.g?blogID=2016773409250385719' target='_blank'><i class='fas fa-rss'/> Theo dõi</a>

</div>
</div>
</div>
</div>

6 bình luận

Chia sẻ