Hello các bạn, để tiếp tục chuyên mục chia sẻ code HTML/CSS/JS trong bài viết hôm nay mình sẽ chia sẻ cho các bạn code của trang Profile 6.0 mình đã chia sẻ trong bài viết trước.
|
| Share code HTML, CSS và JS trang Profile 6.0 - My Info |
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
rel="stylesheet"
/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<title>My info</title>
</head>
<body>
<div class="wrapper">
<div class="main">
<!-- Main page -->
<div class="profile-slice home">
<div class="profile">
<div class="profile-above">
<div class="avatar">
<!-- Link avatar -->
<img src="" />
</div>
<div class="info ms-4">
<h2>Phạm Văn Linh</h2>
<div class="info-maxim"><i class="fad fa-comment-lines"></i> No pain, no gain!</div>
</div>
</div>
<div class="profile-below mt-4">
<h1>Chào Các Bạn,</h1>
<p>Sau đây tôi xin nói qua đôi chút về bản thân mình.</p>
<p>
Tôi là <b>Văn Linh</b>, một cậu sinh viên ngành <b>Khoa học máy tính</b> với ước mơ trở thành một
Developer chuyên nghiệp, tôi thích khám phá, tìm tòi, học hỏi những điều thú vị trên mạng Internet. Biết
đôi chút về HTML, CSS, JS, NodeJS, ReactJS,...
</p>
<p>Dưới đây là một vài đường link của tôi.</p>
<ul class="link ps-0 mt-3">
<li class="link-fb">
<!-- Link facebook -->
<a href="https://www.facebook.com/KuLihhh/" target="blank" title="Facebook"
><i class="fab fa-facebook-square"></i
></a>
</li>
<li class="link-ins">
<!-- Link instagram -->
<a href="https://www.instagram.com/kulih_latoi/" target="blank" title="Instagram"
><i class="fab fa-instagram"></i
></a>
</li>
<li class="link-blog">
<!-- Link blog -->
<a href="https://www.phamvanlinh.xyz/" target="blank" title="Blog"><i class="fab fa-blogger"></i></a>
</li>
<li class="link-git">
<!-- Link github -->
<a href="https://github.com/phamvanlinhxyz" target="blank" title="Github"
><i class="fab fa-github"></i
></a>
</li>
<li class="link-mail">
<!-- Link mail -->
<a href="mailto:https://phamvanlinh1151@gmail.com" target="blank" title="Mail"
><i class="fas fa-envelope"></i
></a>
</li>
</ul>
</div>
</div>
</div>
<div class="profile-slice fb">
<div class="profile p-0">
<div class="fb-cover">
<!-- Link cover facebook -->
<img id="coverImg" class="cover-img" src="" alt="facebook-cover" />
<input type="file" id="addCover" hidden="hidden" />
<label class="add-cover btn btn-sm btn-secondary" for="addCover"><i class="fal fa-camera"></i></label>
</div>
<div class="fb-bottom p-3">
<div class="fb-avatar">
<!-- Link avatar facebook -->
<img class="avatar-img" src="" alt="facebook-avatar" />
</div>
<div class="fb-name">
<h1>Phạm Văn Linh</h1>
<span>729 Bạn bè</span>
</div>
<div class="fb-btn mb-4">
<!-- Link messenger -->
<a class="btn btn-primary mt-2 mx-1" href="https://www.messenger.com/t/100030924163397" target="_blank">
<i class="fab fa-facebook-messenger"></i> Nhắn tin
</a>
<!-- Link facebook -->
<a class="btn btn-secondary mt-2 mx-1" href="https://www.facebook.com/hnilnavmahp.ku/" target="_blank">
<i class="fas fa-rss"></i> Theo dõi
</a>
</div>
<div class="intro">
<p>
<i class="fas fa-graduation-cap"></i>Học tại
<b>Đại học Bách Khoa Hà Nội</b>
</p>
<p>
<i class="fas fa-graduation-cap"></i>Đã học tại
<b>THPT Vân Nội</b>
</p>
<p><i class="fas fa-map-marker-alt"></i>Đến từ <b>Hà Nội</b></p>
<p class="mb-0"><i class="fas fa-rss"></i>Có 2000 người theo dõi</p>
</div>
</div>
</div>
</div>
<div class="profile-slice ins">
<div class="profile">
<div class="ins">
<div class="ins-header">
<div class="left">
<h2 class="mb-3"><i class="far fa-long-arrow-left me-3"></i> kulih_latoi</h2>
</div>
<div class="right">
<h2><i class="far fa-bell"></i><i class="far fa-ellipsis-v ms-3"></i></h2>
</div>
</div>
<div class="ins-avatar">
<!-- Link avatar instagram -->
<img class="ins-avatar-image" src="" alt="instagram-avatar" />
<div class="ins-info d-flex ms-3">
<div class="count">
<h5>0</h5>
<span>Bài viết</span>
</div>
<div class="count">
<h5>66</h5>
<span>Người theo dõi</span>
</div>
<div class="count">
<h5>104</h5>
<span>Đang theo dõi</span>
</div>
</div>
</div>
<div class="ins-name mt-3">
<h3 class="mb-1">Phạm Văn Linh</h3>
<a href="https://www.phamvanlinh.xyz/" target="_blank">phamvanlinh.xyz/</a>
</div>
<div class="ins-btn mt-3">
<!-- Link instagram -->
<a class="btn btn-sm btn-primary px-5" href="https://www.instagram.com/kulih_latoi/" target="_blank">
Theo dõi
</a>
<!-- Link instagram -->
<a class="btn btn-sm btn-message px-3" href="https://www.instagram.com/kulih_latoi/" target="_blank">
Nhắn tin
</a>
<!-- Link instagram -->
<a class="btn btn-sm btn-follow" href="https://www.instagram.com/kulih_latoi/" target="_blank">
<i class="fas fa-user-plus"></i>
</a>
</div>
<div class="ins-body">
<i class="fal fa-camera"></i>
</div>
</div>
</div>
</div>
<div class="profile-slice blog">
<div class="profile">
<div class="blog-header">
<div class="left">
<!-- Link blog -->
<a href="https://www.phamvanlinh.xyz/" target="_blank">
<h2 class="mb-3"><i class="fal fa-bars me-1"></i> Văn Linh</h2>
</a>
</div>
<div class="right d-flex">
<!-- Form search blog -->
<form class="search-form" action="https://www.phamvanlinh.xyz/search" target="_blank">
<input type="text" class="search-input" name="q" autocomplete="off" placeholder="Tìm kiếm" required />
<span class="search-icon"><i class="fal fa-search"></i></span>
</form>
</div>
</div>
<div class="blog-body">
<h5>Latest Post</h5>
<div class="post pt-3">
<!-- Link post blog -->
<a
href="https://www.phamvanlinh.xyz/2022/02/share-template-profile-gioi-thieu-ban.html"
target="_blank"
>
<!-- Link thumbnail -->
<img class="mb-3" src="" alt="blog-post-thumbnail" />
</a>
<span class="post-label"
>in
<!-- Link label -->
<a href="https://www.phamvanlinh.xyz/search/label/Free" target="_blank">Free</a>
/
<!-- Link label -->
<a href="https://www.phamvanlinh.xyz/search/label/Template" target="_blank">Template</a></span
>
<!-- Link post blog -->
<a
href="https://www.phamvanlinh.xyz/2022/02/share-template-profile-gioi-thieu-ban.html"
target="_blank"
>
<h5 class="mt-2 mb-3">Share template giới thiệu bản thân - About Me 6.0</h5>
</a>
<p>H ế lô mọi người, chào mừng các bạn đã đến với bài viết của mình. Hôm nay mình sẽ chia sẻ...</p>
<p>Jan 21, 2022</p>
</div>
</div>
</div>
</div>
<div class="profile-slice git">
<div class="profile">
<div class="git-avatar d-flex">
<!-- Link avatar git -->
<img class="git-avatar-img" src="" alt="github-avatar" />
<div class="ms-3">
<h1 class="mb-0">Pham Van Linh</h1>
<span>phamvanlinhxyz</span>
</div>
</div>
<div class="mt-3">
💪 No pain, no gain! <br />
<i class="fal fa-link"></i
><a href="https://www.phamvanlinh.xyz/" target="_blank">https://www.phamvanlinh.xyz/</a><br />
<!-- Link github -->
<a class="btn btn-sm btn-follow w-100 mt-3" href="https://github.com/phamvanlinhxyz" target="_blank"
>Follow</a
>
</div>
<div class="git-repo px-3 py-2 mt-3">
<span class="git-repo-name">phamvanlinhxyz/README.md</span>
<h1 class="text-center mt-3 pb-2">Hi 👋, I'm @phamvanlinhxyz</h1>
</div>
<div class="git-repo px-3 py-2 mt-3">
<div class="repo-header">
<!-- Link repo -->
<a href="https://github.com/phamvanlinhxyz/Profile-6.0" target="_blank"><b>Profile-6.0</b></a>
<span class="badge rounded-pill bg-git">Public</span>
</div>
<p class="git-desc mt-2">
Profile 6.0 được phát triển dựa trên ý tưởng của Profile 4.0 và một số mạng xã hội khác.
</p>
<div class="language">
<span class="language-color"></span>
<span class="language-name">HTML</span>
</div>
</div>
</div>
</div>
</div>
<div class="dark-switch"></div>
<div class="play-btn"></div>
<audio class="music-audio">
<!-- Link mp3 -->
<source src="" type="audio/mpeg" />
</audio>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.2/jquery-migrate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
body{background:linear-gradient(-25deg,#224572,#e23550,#e7aa5f) no-repeat fixed top right;font-family:"Open Sans",sans-serif!important;margin:0;font-size:15px!important;color:#fff!important}
html,body{cursor:url("../img/pointer.png"),auto}
a:hover{cursor:url("../img/cursor.png"),auto}
h1,h2,h3,h4,h5,h6{font-weight:600!important}
h1{font-size:25px!important;margin-bottom:10px}
h2{font-size:22px!important;margin-bottom:10px}
h3{font-size:20px!important}
a{color:#fff!important;text-decoration:none!important}
i{width:25px;text-align:center}
.profile{width:350px!important;height:540px!important;background-color:rgba(255,255,255,0.1);border-radius:12px;margin:3rem auto;padding:1.5rem;font-weight:400;box-shadow:0 8px 20px -10px rgba(36,36,36,0.6)}
.profile-above{display:flex;align-items:center}
.avatar img{height:100px;width:100px;border-radius:100rem;box-shadow:0 5px 20px 0 #27aaff,0px 0 0 5px #27aaff}
.info-maxim{color:rgb(0 114 255)!important}
.profile-above p{margin-top:0}
.profile-below .link{display:flex;list-style:none;justify-content:center;flex-wrap:wrap}
.profile-below .link li a{font-size:20px;margin:5px;height:40px;width:40px;display:flex;align-items:center;border-radius:100rem;justify-content:center}
.profile-below .link li a:hover{opacity:0.7;transition:all 0.3s;transform:scale(1.05)}
.profile-below .link li.link-fb a{background:linear-gradient(10deg,#2b5adf,#45aaff);box-shadow:0 4px 20px rgb(35 93 211 / 70%)}
.profile-below .link li.link-fb a:hover{box-shadow:0 4px 20px rgb(35 93 211 / 70%)}
.profile-below .link li.link-ins a{background:linear-gradient(20deg,#ffc050,#ff593f,#cf3a97,#7841ca);box-shadow:0 4px 20px rgb(211 67 35 / 70%)}
.profile-below .link li.link-ins a:hover{box-shadow:0 4px 20px rgb(211 67 35 / 70%)}
.profile-below .link li.link-blog a{background:#ebad20;box-shadow:0 4px 20px rgb(211 165 35 / 70%)}
.profile-below .link li.link-blog a:hover{box-shadow:0 4px 20px rgb(211 165 35 / 70%)}
.profile-below .link li.link-git a{background:#000;box-shadow:0 4px 20px rgb(28 28 28 / 70%)}
.profile-below .link li.link-git a:hover{box-shadow:0 4px 20px rgb(28 28 28 / 70%)}
.profile-below .link li.link-mail a{background:#ee3737;box-shadow:0 4px 20px rgb(255 118 118 / 70%)}
.profile-below .link li.link-mail a:hover{box-shadow:0 4px 20px rgb(255 118 118 / 70%)}
.slick-dots{display:flex;padding:0;justify-content:center}
.slick-dots li{list-style:none}
.slick-dots button{background-color:rgba(255,255,255,0.2);margin:0 5px;font-size:0;width:15px;height:15px;border-radius:100rem;border:none;outline:none;transition:all 0.3s linear}
.slick-dots .slick-active button{width:45px;background-color:rgba(255,255,255,0.4)}
.slick-dots{position:relative}
.slick-dots li:before{font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands";font-size:25px;color:rgba(255,255,255,0.4);position:absolute;bottom:5px;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);opacity:0;transition:all 0.3s linear}
.slick-dots li:nth-child(1):before{content:"\f015"}
.slick-dots li:nth-child(2):before{content:"\f082"}
.slick-dots li:nth-child(3):before{content:"\f16d"}
.slick-dots li:nth-child(4):before{content:"\f37c"}
.slick-dots li:nth-child(5):before{content:"\f09b"}
.slick-dots li.slick-active:before{opacity:1}
.dark-switch:before{position:fixed;font-size:40px;bottom:1rem;right:2rem;cursor:pointer;color:rgba(255,255,255,0.4);content:"\f186";font-family:"Font Awesome 5 Pro"}
.dark-switch:after{position:fixed;font-size:18px;font-weight:600;bottom:2.5rem;right:2rem;color:rgba(255,255,255,0.4);content:"Dark";opacity:0;transition:0.3s ease}
.dark-switch:hover:after{bottom:4.5rem;opacity:1}
.play-btn:before{position:fixed;font-size:40px;bottom:1rem;left:2rem;cursor:pointer;color:rgba(255,255,255,0.4);content:"\f04b";font-family:"Font Awesome 5 Pro"}
.play-btn.play:before{content:"\f04c"}
.play-btn:after{position:fixed;font-size:18px;font-weight:600;bottom:2.5rem;left:2rem;color:rgba(255,255,255,0.4);content:"Play";opacity:0;transition:0.3s ease}
.play-btn.play:after{left:1.5rem;content:"Pause"}
.play-btn:hover:after{bottom:4.5rem;opacity:1}
@media (max-height:660px){
.profile{margin:1.5em auto 3rem}
}
.fb-cover{position:relative}
.cover-img{flex-shrink:0;width:100%;height:180px;object-fit:cover;border-radius:12px 12px 6px 6px}
.add-cover{position:absolute;bottom:15px;right:15px}
.fb-avatar{position:relative}
.avatar-img{width:140px;height:140px;border-radius:100rem;position:absolute;top:-25px;left:50%;transform:translate(-50%,-50%)}
.fb-name{text-align:center;margin-top:55px}
.fb-btn{text-align:center}
.ins{height:100%;display:flex;flex-direction:column}
.ins-header{display:flex;justify-content:space-between}
.ins-avatar{display:flex;align-items:center}
.ins-avatar-image{width:90px;height:90px;border-radius:50%;flex-shrink:0}
.ins-info{flex:1}
.count{width:33.3333%;display:flex;align-items:center;flex-direction:column}
.count span{text-align:center;width:66px;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis}
.ins-name a{color:rgb(0 114 255)!important}
.ins-btn{display:flex;justify-content:space-between}
.btn-message,.btn-follow{border:1px solid #fff!important;color:#fff!important}
.ins-body{flex:1;display:flex;align-items:center;justify-content:center}
.ins-body i{font-size:50px;height:50px;width:50px}
.git-avatar-img{width:60px;height:60px;border-radius:50%}
.git-avatar span{font-size:17px;font-weight:300;opacity:0.8}
.git-repo{border:1px solid rgb(207,207,207);border-radius:8px}
.git-repo a{color:rgb(0 114 255)!important}
.git-repo-name{font-size:12px;opacity:0.8}
.bg-git{border-radius:100rem!important;border:1px solid rgb(207,207,207)!important;font-weight:500!important}
.repo-header{display:flex;justify-content:space-between;align-items:center}
.git-desc,.language-name{font-size:14px;opacity:0.8}
.language-color{display:inline-block;width:12px;height:12px;background-color:#e34c26;border-radius:100rem}
.blog-header{display:flex;justify-content:space-between}
.blog-header .right{position:relative;flex:1}
.blog-header .left{padding-top:2px;flex:1}
.search-input{color:rgb(255 255 255);width:100%;border:0;outline:0;border-radius:6px;background-color:rgba(255,255,255,0.2);margin:0 0 12px;padding:4px 10px 4px 30px}
.search-icon{position:absolute;left:3px;top:4px;opacity:0.6}
.blog-body a:hover{color:rgb(30 131 255)!important}
.blog-body .post img{width:100%;border-radius:8px}
.post-label:not(a){opacity:0.8}
.dark-mode .profile,.dark-mode .slick-dots button,.dark-mode .slick-dots .slick-active button{background-color:rgba(0,0,0,0.4)}
.dark-mode .slick-dots li:before,.dark-mode .dark-switch:before,.dark-mode .dark-switch:after,.dark-mode .play-btn:before,.dark-mode .play-btn:after{color:rgba(0,0,0,0.4)}
.dark-mode .dark-switch:before{content:"\f185"}
.dark-mode .dark-switch:after{content:"Light"}
.dark-mode .search-input{background-color:rgba(0,0,0,0.2)}
$(document).ready(() => {
// Slick slide
$(".main").slick({
dots: true,
arrows: false,
infinite: true,
speed: 600,
slidesToShow: 1,
adaptiveHeight: true,
});
const page = localStorage.getItem("page") || 0;
$(".main").slick("slickGoTo", page);
$(".main").on("beforeChange", (event, slick, currentSlide, nextSlide) => {
localStorage.setItem("page", nextSlide);
});
// Change facebook cover
$("#addCover").change((e) => {
const file = e.target.files[0];
const coverElm = $("#coverImg");
URL.revokeObjectURL(coverElm.attr("src"));
coverImg.src = URL.createObjectURL(file);
e.target.value = null;
});
// Dark switch
const body = $(document.body);
localStorage.getItem("mode") == "dark" && body.addClass("dark-mode");
$(".dark-switch").click(() => {
localStorage.getItem("mode") == "dark"
? localStorage.setItem("mode", "light")
: localStorage.setItem("mode", "dark");
body.toggleClass("dark-mode");
});
// Play music
localStorage.setItem("music", "pause");
$(".play-btn").click(() => {
if (localStorage.getItem("music") == "play") {
$(".music-audio").trigger("pause");
$(".play-btn").removeClass("play");
localStorage.setItem("music", "pause");
} else {
$(".music-audio").trigger("play");
$(".play-btn").addClass("play");
localStorage.setItem("music", "play");
}
});
$(".music-audio").on("ended", () => {
$(".play-btn").removeClass("play");
localStorage.setItem("music", "pause");
});
});
Lời kết
Trên đây là toàn bộ code của trang Profile 6.0 - My Info, nếu có bất cứ thắc mắc gì hãy để lại comment ở bên dưới! Chúc các bạn một ngày học tập và làm việc hiệu quả!
Copyright © Phạm Văn Linh
Đánh Giá Bài Viết: