SHARE WIDGET INFO CỰC CHẤT ĐÃ RESPONSIVE
/ lúc / 3 bình luận
Kết bạn Kiều Gia Huy để cùng trao đổi, học hỏi và nhận nhiều bài viết hay, hữu ích nhé!
Hôm nay vô tình mình qua Đức Huy Blog và thấy có một widget info khá đẹp nên mình đem về edit lại và thêm responsive cho nó.....

CÁCH THỰC HIỆN
Bước 1 : thêm code css vào trước ]]></b:skin>
  #information {    background: linear-gradient(160deg, #3492b5, #0ecf8a);
    height: 250px;position:relative;}
  #information .details-info {max-width:1075px;margin:0 auto;}
  #information:before {content:&#39;&#39;;position:absolute; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.15);}
  .info-cot1, .info-cot2 {display:inline-block;position:relative}
  .info-cot1 {width: 41%;}
  .info-cot2 {    width: 50%;
    top: 39px;
    right: 99px;}
  .profile-img {
    border-radius: 50%;
    width: 183px;
    height: 190px;
    position: absolute;
    top: -41px;
    bottom: 53px;
    left: 26%;}
.profile-img img {width:100%;border-radius:0border:4px solid #fff;    position: absolute;bottom:88px; left:50px;-webkit-transition: .3s;}
  .profile-img img:hover{border-radius:20px 0 0 20px;
}
  .hello {    background: rgba(2102102100.3);
    padding: 15px 25px;
    border-radius: 0 10px 10px 0;
    color: #fff;
    font-size: 15px;
    text-align: justify;
    /* text-shadow: 1px 1px 1px #424242; */}
.hello h2{font: 600 24px Roboto Condensed;
    text-transform: uppercase;
}
.hello a{-webkit-transition: .3s;color:#fff}
.hello a:hover{color:#444}
  @media all and (max-width:885px){
#information {height: auto; }
.info-cot1 {
    width: 22%;
}
.profile-img {
    display: none;}
.info-cot2 {top: 0;
    padding: 25px 0 25px 0px;
    width: 63%;
    right: 5%;
}
.hello {text-align: left;
    background: rgba(2102102100.3);
    padding: 15px 15px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;}
}
 Bước 2: Ta chỉ cần thêm code vào nơi bạn muốn hiển thị là được
<div id='information'>
<div class='details-info'>
<div class='info-cot1'>
<div class='profile-img'>
<imgsrc='https://i.pinimg.com/originals/dd/b0/26/ddb0267bd228fd0f8c356b5670c1eaa8.png'/>
</div>
</div>
<div class='info-cot2'>
<div class='hello'>
<h2> Hồng Hải</h2>
  <b>- Facebook:</b> <a href='https://www.facebook.com/HongHai.H.T.H'target='_blank'>www.facebook.com/HongHai.H.T.H</a>
  <br/>
  <b>- Email:</b> honghai251325@gmail.com
  <br/>
  <b>- Website:</b> HongHaiBlog
  <br/>
  <b>- Số điện thoại:</b> 01682253***
  <br/>
<span>Nỗ lực hết mình trong từng việc làm cho dù có thành công hay không</span>
</div>
</div>
</div>
</div>
 Vậy là xong rồi đó chúc các bạn thành công....

HIỆN ĐANG CÓ 3 bình luận

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.