纯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 ...
随机推荐
- BurpSuite多重代理的情形
有时候为了隐藏自己的真实IP,访问目标网站需要走代理.比如说,通过代理IP访问目标网站并且代理IP可以随时切换,这样可以避免IP被封堵后无法访问目标网站的尴尬. 一. 首先把代理切换为全局模式 操作步 ...
- Redis实现分布式缓存
Redis 分布式缓存实现(一) 1. 什么是缓存(Cache) 定义:就是计算机内存中的一段数据: 2. 内存中数据特点 a. 读写快 b. 断电立即丢失 3. 缓存解决了什么问题? a. 提 ...
- SpringIOC基础知识总结
目录 1.BeanFactory和ApplicationContext的区别: 2.实例化bean的三种方式: ⽅式⼀:使⽤⽆参构造函数 ⽅式⼆:使⽤静态⽅法创建 ⽅式三:使⽤实例化⽅法创建 3.Be ...
- ifconfig结果说明
- Nginx 解析漏洞复现
一.漏洞描述 该漏洞与nginx.php版本无关,属于用户配置不当造成的解析漏洞 二.漏洞原理 1.由于nginx.conf的如下配置导致nginx把以'.php'结尾的文件交给fastcgi处理,为 ...
- OWASP固件安全性测试指南
OWASP固件安全性测试指南 固件安全评估,英文名称 firmware security testing methodology 简称 FSTM.该指导方法主要是为了安全研究人员.软件开发人员.顾问. ...
- jq判断input 复选框有没有选
选中了返回true ,没选中返回false$("input[type='checkbox']").is(':checked'):
- 深度分析：面试90%被问到的 Session、Cookie、Token，看完这篇你就掌握了！
Cookie 和 Session HTTP 协议是一种无状态协议,即每次服务端接收到客户端的请求时,都是一个全新的请求,服务器并不知道客户端的历史请求记录:Session 和 Cookie 的主要目的 ...
- 如何用EasyRecovery恢复受损的SD卡？
SD卡的主要功能是拓展便携式设备.包括:数据相机.手机及其他的多媒体播放器等的存储空间,缓解设备本身的存储压力.即便是在产品内存已经逐渐增加的情况下,还是拥有一大批的忠实用户. 很多用户反应,SD卡使 ...
- FL Studio中如何使用插件混杂功能中的琶音器
琶音指一串和弦音从低到高或从高到低依次连续奏出,可视为分解和弦的一种.通常作为一种专门的技巧训练用于练习曲中,有时作为短小的连接句或经过句出现在乐曲旋律声部中.在Trance类型电子音乐中,琶音的运用 ...