纯HTML + CSS制作个人资料卡
总体预览：
材料：背景图与头像.jpg
IDE：VS Code
外部链接：CDN加速的font-awesome图标
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>about</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="css/about.css">
</head>
<body>
<div class="profile-card">
<div class="card-header">
<div class="pic">
<img src="data:images/pic.jpg" alt="">
</div>
<div class="name">RioTian</div>
<div class="desc">Student & Pokémon Trainer</div>
<div class="sm">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-github"></a>
<a href="#" class="fab fa-youtube"></a>
</div>
<a href="#" class="contract-btn">Contact Me</a>
</div>
<div class="card-footer">
<div class="numbers">
<div class="item">
<span>120</span>
posts
</div>
<div class="border"></div>
<div class="item">
<span>127</span>
Following
</div>
<div class="border"></div>
<div class="item">
<span>120K</span>
Followers
</div>
</div>
</div>
</div>
</body>
</html>
CSS部分：
/* Google fonts */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
body {
height: 100vh;
background: url(../images/bg.jpg) no-repeat center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.profile-card {
width: 400px;
text-align: center;
border-radius: 8px;
overflow: hidden;
}
.card-header {
background: #2c3a47;
padding: 60px 40px;
}
.pic {
display: inline-block;
padding: 8px;
background: linear-gradient(130deg, #74b9ff, #e66767);
margin: auto;
border-radius: 50%;
background-size: 200% 200%;
animation: animated-gradient 2s linear infinite;
}
@keyframes animated-gradient {
25% {
background-position: left bottom;
}
50% {
background-position: right bottom;
}
25% {
background-position: right top;
}
50% {
background-position: left top;
}
}
.pic img {
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
.name {
color: #f2f2f2;
font-size: 28px;
font-weight: 600;
margin: 10px 0;
}
.desc {
font-size: 18px;
color: #e66767;
}
.sm {
display: flex;
justify-content: center;
margin: 20px 0;
}
.sm a {
color: #f2f2f2;
width: 57px;
font-size: 22px;
transition: .3s linear;
}
.sm a:hover {
color: #e66767;
}
.contract-btn {
display: inline-block;
padding: 12px 50px;
color: #e66767;
border: 2px solid #e66767;
border-radius: 6px;
margin-top: 16px;
transition: .3s linear;
}
.contract-btn:hover {
background: #e66767;
color: #f2f2f2;
}
.card-footer {
background: #f4f4f4;
padding: 60px 10px;
}
.numbers {
display: flex;
align-items: center;
}
.item {
flex: 1;
text-transform: uppercase;
font-size: 13px;
color: #e66767;
}
.item span {
display: block;
color: #2c3a47;
font-size: 30px;
}
.border {
width: 1px;
height: 30px;
background: #bbb;
}
纯HTML + CSS制作个人资料卡的更多相关文章
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- 纯div+css制作的弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS制作三角（转）
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
随机推荐
- TypeScript 引入第三方包，报无法找到模块错误
以 react-router-dom 模块为例 1. npm加上 @types/ 根据报错提示尝试安装该库的TypeScript版本 (该库的 ts 声明文件),也就是在该库的名称前加上 @types ...
- My SQL的基本操作（总结）
My SQL的基本操作(总结) 因为本人目前是学生,前一段时间因为一些原因没有按时更新博客,今天我来总结一下My SQL的基本操作. 一.下载与安装 windows版本MySQL下载地址: http: ...
- Linux Shell 错误： $'\r': command not found错误解决
在Linux下执行程序最省事的方式就是将系统的执行流程封装成一个shell脚本,上传到linux环境中后就可以直接执行了,但是今天在具体实施的时候出现了错误 $'\r': command not fo ...
- pandas 生成html文档，支持可添加多个表
如何通过pandas生成html格式?如何通过pandas生成html文件文件中包含多个表单Balance_64_data = pd.read_sql(Balance_64_sql,engine)df ...
- 如何在IDM中设置代理服务器？
很多时候,大家下载文件都是在国外的一些网站上进行下载,这样不可免会受到自身国内网络的限制,另一方面下载源为避免服务器带宽占用过多而限制下载速率,这就会导致文件下载极慢,甚至几KB每秒. 这种情况是不是 ...
- CDR征稿-CorelDRAW征文活动开始啦！
学习平面设计的小伙伴对CorelDRAW一定不陌生,CorelDRAW和Photoshop.illustrator以及 InDesign是做设计必备的四款工具.如果您是CorelDRAW专家.培训讲师 ...
- 怎么用iMindMap思维导图做自我介绍
相信大家在工作生活当中对于自我介绍这件事情都很是头疼的.太简单的介绍重点不突出,太冗长的介绍又会让人没印象.这一切都跟我们大脑水平.散乱的思维模式有关,因此想要自我介绍在众人中脱颖而出,让人印象深刻, ...
- Java基础教程——方法引用
方法引用 Lambda表达式的代码,是否可以再简洁?--方法引用 对象/类名::方法名 参数都不用写明. import java.util.function.Consumer; public clas ...
- Java集合【3】-- iterable接口超级详细解析
目录 iterable接口 1. 内部定义的方法 1.1 iterator()方法 1.2 forEach()方法 1.3 spliterator()方法 总结 iterable接口 整个接口框架关系 ...
- 现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...