Hướng dẫn tạo Profile Card UI Design cho blogspot, thông tin tác giả đẹp hiển thị trên blog của bạn, phù hợp cho blog có thanh sidebar.
Các bước thực hiện như sau:
Bước 1: Thêm Font Awesome nếu blog của bạn có rồi thì bỏ qua bước này.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
Bước 2: Thêm CSS
Chỗ này tùy các bạn chọn, có hoặc không tùy theo từng blog. Nó sẽ bị đụng với css blog của bạn, các bạn lưu ý mục này
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#fff}
CSS chính:
.profile-card,.profile-card .img-area,.social-icons a,.buttons button{background:#ecf0f3;box-shadow:-3px -3px 7px #ffffff,3px 3px 5px #ceced1}
.profile-card{position:relative;width:350px;padding:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.profile-card .icon{font-size:17px;color:#31344b;position:absolute;cursor:pointer;opacity:0.7;top:15px;height:35px;width:35px;text-align:center;line-height:35px;border-radius:50%;font-size:16px}
.profile-card .icon i{position:relative;z-index:9}
.profile-card .icon.arrow{left:15px}
.profile-card .icon.dots{right:15px}
.profile-card .img-area{height:150px;width:150px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.img-area .inner-area{height:calc(100% - 25px);width:calc(100% - 25px);border-radius:50%}
.inner-area img{height:100%;width:100%;border-radius:50%;object-fit:cover}
.profile-card .name{font-size:23px;font-weight:500;color:#31344b;margin:10px 0 5px 0}
.profile-card .about{color:#44476a;font-weight:400;font-size:16px}
.profile-card .social-icons{margin:15px 0 25px 0}
.social-icons a{position:relative;height:40px;width:40px;margin:0 5px;display:inline-flex;text-decoration:none;border-radius:50%}
.social-icons a:hover::before,.profile-card .icon:hover::before,.buttons button:hover:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;border-radius:50%;background:#ecf0f3;box-shadow:inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1}
.buttons button:hover:before{z-index:-1;border-radius:5px}
.social-icons a i{position:relative;z-index:3;text-align:center;width:100%;height:100%;line-height:40px}
.social-icons a.fb i{color:#4267B2}
.social-icons a.twitter i{color:#1DA1F2}
.social-icons a.insta i{color:#E1306C}
.social-icons a.yt i{color:#ff0000}
.profile-card .buttons{display:flex;width:100%;justify-content:space-between}
.buttons button{position:relative;width:100%;border:none;outline:none;padding:12px 0;color:#31344b;font-size:17px;font-weight:400;border-radius:5px;cursor:pointer;z-index:4}
.buttons button:first-child{margin-right:10px}
.buttons button:last-child{margin-left:10px}
.profile-card .social-share{display:flex;width:100%;margin-top:30px;padding:0 5px;justify-content:space-between}
.social-share .row{color:#31344b;font-size:17px;cursor:pointer;position:relative}
.social-share .row::before{position:absolute;content:"";height:100%;width:2px;background:#e0e6eb;margin-left:-25px}
.row:first-child::before{background:none}
.social-share .row i.icon-2{position:absolute;left:0;top:50%;color:#31344b;transform:translateY(-50%);opacity:0;pointer-events:none;transition:all 0.3s ease}
.row:nth-child(1):hover i.fa-heart,.row:nth-child(2):hover i.fa-comment{opacity:1;pointer-events:auto}
Bước 3: Thêm HTML phù hợp ở blog có thanh sidebar
<div class="profile-card">
<div class="img-area">
<div class="inner-area">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceAUaKDKQoSWy60lKb7UDLLPspn2PUdoSuDx7LW6O71iGwOqWOeCU4flkr5ujVUO5zMwGtqveR2TX688U2NPezEGWCYaEaPBc3kfchndb0D9UEcE1CZPSN5YxPxzGuwQ9NruZtA-vg4sm/s16000/images.png" alt="" />
</div>
</div>
<div class="name">Tôi là Hòa Trần</div>
<div class="about">www.giaodien.blog</div>
<div class="social-icons">
<a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="insta"><i class="fab fa-instagram"></i></a>
<a href="#" class="yt"><i class="fab fa-youtube"></i></a>
</div>
<div class="buttons">
<button>Message</button>
<button>Subscribe</button>
</div>
<div class="social-share">
<div class="row">
<i class="far fa-heart"></i>
<i class="icon-2 fas fa-heart"></i>
<span>20.4k</span>
</div>
<div class="row">
<i class="far fa-comment"></i>
<i class="icon-2 fas fa-comment"></i>
<span>14.3k</span>
</div>
<div class="row">
<i class="fas fa-share"></i>
<span>12.8k</span>
</div>
</div>
</div>
Bài viết: Hướng dẫn tạo Profile Card UI Design cho blogspot được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Nhận xét
Đăng nhận xét