限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. html模板
  3. 个人网站

html蓝色风格带个人头像/简历信息的单页模板

所属分类： html模板-个人网站    2023-12-17 03:44:56

 1.6K  1  查看评论 (0)
html蓝色风格带个人头像/简历信息的单页模板 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

html蓝色风格带个人头像/简历信息的单页模板（共3个文件）

    • person.jpg
    • index.html

使用方法

  • code
  • source
  1. * {

  2.   margin: 0;

  3.   padding: 0;

  4.   box-sizing: border-box;

  5.   list-style: none;

  6.   font-family: "Montserrat", sans-serif;

  7. }

  8. 

  9. body {

  10.   background: linear-gradient(to right, #c9d6ff, #e2e2e2) !important;

  11.   font-size: 14px;

  12.   line-height: 22px;

  13.   color: #555555;

  14. }

  15. 

  16. .bold {

  17.   font-weight: 700;

  18.   font-size: 20px;

  19.   text-transform: uppercase;

  20. }

  21. 

  22. .semi-bold {

  23.   font-weight: 500;

  24.   font-size: 16px;

  25. }

  26. 

  27. .resume {

  28.   width: 800px;

  29.   height: auto;

  30.   display: flex;

  31.   margin: 50px auto;

  32. }

  33. 

  34. .resume .resume_left {

  35.   width: 280px;

  36.   background: #0bb5f4;

  37. }

  38. 

  39. .resume .resume_left .resume_profile {

  40.   width: 100%;

  41.   height: 280px;

  42. }

  43. 

  44. .resume .resume_left .resume_profile img {

  45.   width: 100%;

  46.   height: 100%;

  47. }

  48. 

  49. .resume .resume_left .resume_content {

  50.   padding: 0 25px;

  51. }

  52. 

  53. .resume .title {

  54.   margin-bottom: 20px;

  55. }

  56. 

  57. .resume .resume_left .bold {

  58.   color: #fff;

  59. }

  60. 

  61. .resume .resume_left .regular {

  62.   color: #b1eaff;

  63. }

  64. 

  65. .resume .resume_item {

  66.   padding: 25px 0;

  67.   border-bottom: 2px solid #b1eaff;

  68. }

  69. 

  70. .resume .resume_left .resume_item:last-child,

  71. .resume .resume_right .resume_item:last-child {

  72.   border-bottom: 0px;

  73. }

  74. 

  75. .resume .resume_left ul li {

  76.   display: flex;

  77.   margin-bottom: 10px;

  78.   align-items: center;

  79. }

  80. 

  81. .resume .resume_left ul li:last-child {

  82.   margin-bottom: 0;

  83. }

  84. 

  85. .resume .resume_left ul li .icon {

  86.   width: 35px;

  87.   height: 35px;

  88.   background: #fff;

  89.   color: #0bb5f4;

  90.   border-radius: 50%;

  91.   margin-right: 15px;

  92.   font-size: 16px;

  93.   position: relative;

  94. }

  95. 

  96. .resume .icon i,

  97. .resume .resume_right .resume_hobby ul li i {

  98.   position: absolute;

  99.   top: 50%;

  100.   left: 50%;

  101.   transform: translate(-50%, -50%);

  102. }

  103. 

  104. .resume .resume_left ul li .data {

  105.   color: #b1eaff;

  106. }

  107. 

  108. .resume .resume_left .resume_skills ul li {

  109.   display: flex;

  110.   margin-bottom: 10px;

  111.   color: #b1eaff;

  112.   justify-content: space-between;

  113.   align-items: center;

  114. }

  115. 

  116. .resume .resume_left .resume_skills ul li .skill_name {

  117.   width: 25%;

  118. }

  119. 

  120. .resume .resume_left .resume_skills ul li .skill_progress {

  121.   width: 60%;

  122.   margin: 0 5px;

  123.   height: 5px;

  124.   background: #009fd9;

  125.   position: relative;

  126. }

  127. 

  128. .resume .resume_left .resume_skills ul li .skill_per {

  129.   width: 15%;

  130. }

  131. 

  132. .resume .resume_left .resume_skills ul li .skill_progress span {

  133.   position: absolute;

  134.   top: 0;

  135.   left: 0;

  136.   height: 100%;

  137.   background: #fff;

  138. }

  139. 

  140. .resume .resume_left .resume_social .semi-bold {

  141.   color: #fff;

  142.   margin-bottom: 3px;

  143. }

  144. 

  145. .resume .resume_right {

  146.   width: 520px;

  147.   background: #fff;

  148.   padding: 25px;

  149. }

  150. 

  151. .resume .resume_right .bold {

  152.   color: #0bb5f4;

  153. }

  154. 

  155. .resume .resume_right .resume_work ul,

  156. .resume .resume_right .resume_education ul {

  157.   padding-left: 40px;

  158.   overflow: hidden;

  159. }

  160. 

  161. .resume .resume_right ul li {

  162.   position: relative;

  163. }

  164. 

  165. .resume .resume_right ul li .date {

  166.   font-size: 16px;

  167.   font-weight: 500;

  168.   margin-bottom: 15px;

  169. }

  170. 

  171. .resume .resume_right ul li .info {

  172.   margin-bottom: 20px;

  173. }

  174. 

  175. .resume .resume_right ul li:last-child .info {

  176.   margin-bottom: 0;

  177. }

  178. 

  179. .resume .resume_right .resume_work ul li:before,

  180. .resume .resume_right .resume_education ul li:before {

  181.   content: "";

  182.   position: absolute;

  183.   top: 5px;

  184.   left: -25px;

  185.   width: 6px;

  186.   height: 6px;

  187.   border-radius: 50%;

  188.   border: 2px solid #0bb5f4;

  189. }

  190. 

  191. .resume .resume_right .resume_work ul li:after,

  192. .resume .resume_right .resume_education ul li:after {

  193.   content: "";

  194.   position: absolute;

  195.   top: 14px;

  196.   left: -21px;

  197.   width: 2px;

  198.   height: 115px;

  199.   background: #0bb5f4;

  200. }

  201. 

  202. .resume .resume_right .resume_hobby ul {

  203.   display: flex;

  204.   justify-content: space-between;

  205. }

  206. 

  207. .resume .resume_right .resume_hobby ul li {

  208.   width: 80px;

  209.   height: 80px;

  210.   border: 2px solid #0bb5f4;

  211.   border-radius: 50%;

  212.   position: relative;

  213.   color: #0bb5f4;

  214. }

  215. 

  216. .resume .resume_right .resume_hobby ul li i {

  217.   font-size: 30px;

  218. }

  219. 

  220. .resume .resume_right .resume_hobby ul li:before {

  221.   content: "";

  222.   position: absolute;

  223.   top: 40px;

  224.   right: -52px;

  225.   width: 50px;

  226.   height: 2px;

  227.   background: #0bb5f4;

  228. }

  229. 

  230. .resume .resume_right .resume_hobby ul li:last-child:before {

  231.   display: none;

  232. }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: "Montserrat", sans-serif;
}

body {
  background: linear-gradient(to right, #c9d6ff, #e2e2e2) !important;
  font-size: 14px;
  line-height: 22px;
  color: #555555;
}

.bold {
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}

.semi-bold {
  font-weight: 500;
  font-size: 16px;
}

.resume {
  width: 800px;
  height: auto;
  display: flex;
  margin: 50px auto;
}

.resume .resume_left {
  width: 280px;
  background: #0bb5f4;
}

.resume .resume_left .resume_profile {
  width: 100%;
  height: 280px;
}

.resume .resume_left .resume_profile img {
  width: 100%;
  height: 100%;
}

.resume .resume_left .resume_content {
  padding: 0 25px;
}

.resume .title {
  margin-bottom: 20px;
}

.resume .resume_left .bold {
  color: #fff;
}

.resume .resume_left .regular {
  color: #b1eaff;
}

.resume .resume_item {
  padding: 25px 0;
  border-bottom: 2px solid #b1eaff;
}

.resume .resume_left .resume_item:last-child,
.resume .resume_right .resume_item:last-child {
  border-bottom: 0px;
}

.resume .resume_left ul li {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.resume .resume_left ul li:last-child {
  margin-bottom: 0;
}

.resume .resume_left ul li .icon {
  width: 35px;
  height: 35px;
  background: #fff;
  color: #0bb5f4;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 16px;
  position: relative;
}

.resume .icon i,
.resume .resume_right .resume_hobby ul li i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.resume .resume_left ul li .data {
  color: #b1eaff;
}

.resume .resume_left .resume_skills ul li {
  display: flex;
  margin-bottom: 10px;
  color: #b1eaff;
  justify-content: space-between;
  align-items: center;
}

.resume .resume_left .resume_skills ul li .skill_name {
  width: 25%;
}

.resume .resume_left .resume_skills ul li .skill_progress {
  width: 60%;
  margin: 0 5px;
  height: 5px;
  background: #009fd9;
  position: relative;
}

.resume .resume_left .resume_skills ul li .skill_per {
  width: 15%;
}

.resume .resume_left .resume_skills ul li .skill_progress span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #fff;
}

.resume .resume_left .resume_social .semi-bold {
  color: #fff;
  margin-bottom: 3px;
}

.resume .resume_right {
  width: 520px;
  background: #fff;
  padding: 25px;
}

.resume .resume_right .bold {
  color: #0bb5f4;
}

.resume .resume_right .resume_work ul,
.resume .resume_right .resume_education ul {
  padding-left: 40px;
  overflow: hidden;
}

.resume .resume_right ul li {
  position: relative;
}

.resume .resume_right ul li .date {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.resume .resume_right ul li .info {
  margin-bottom: 20px;
}

.resume .resume_right ul li:last-child .info {
  margin-bottom: 0;
}

.resume .resume_right .resume_work ul li:before,
.resume .resume_right .resume_education ul li:before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid #0bb5f4;
}

.resume .resume_right .resume_work ul li:after,
.resume .resume_right .resume_education ul li:after {
  content: "";
  position: absolute;
  top: 14px;
  left: -21px;
  width: 2px;
  height: 115px;
  background: #0bb5f4;
}

.resume .resume_right .resume_hobby ul {
  display: flex;
  justify-content: space-between;
}

.resume .resume_right .resume_hobby ul li {
  width: 80px;
  height: 80px;
  border: 2px solid #0bb5f4;
  border-radius: 50%;
  position: relative;
  color: #0bb5f4;
}

.resume .resume_right .resume_hobby ul li i {
  font-size: 30px;
}

.resume .resume_right .resume_hobby ul li:before {
  content: "";
  position: absolute;
  top: 40px;
  right: -52px;
  width: 50px;
  height: 2px;
  background: #0bb5f4;
}

.resume .resume_right .resume_hobby ul li:last-child:before {
  display: none;
}

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 个人网站单页模板蓝色博客简历模板html模板时间轴时间线进度条
相关资源 / 个人网站
查看更多

html5个人摄影网站纯css响应式博客html模板

 一款极简风格的个人博客自适应模板，没有花里胡哨的元素，非常的漂亮！
  个人网站
 9948  0

html5响应式个人简历博客类网页模板

 一款黑色风格个人博客单页模板，集成了超多的CSS3动画、弹出层放大图片、在线留言表单提交等。
  个人网站
 5214  0

响应式个人博客网站单页html5模板

 一款黑色系个人网站模板，点击所有导航菜单都为弹出层展示。
  个人网站
 2478  0

html5响应式全屏大气个人生活博客网站模板

 一款个人博客网站模板，共包含5个html页面，适用于旅行旅游生活记录博客网站，设计风格非常漂亮。
  个人网站
 3529  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论