纯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 ...
随机推荐
- 还是畅通工程(最小生成树 并查集 Prim Kruskal)
Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府"畅通工程"的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只 ...
- 你了解JWT吗？
1. 什么是JWT JWT简称 JSON Web Token,也就是通过 JSON 形式作为 Web 应用中的令牌,用于在各方之间安全地将信息作为 JSON 对象传输.在数据传输过程中还可以完成数据加 ...
- php 把一个数随机分成n份
$money_total=100; $personal_num=10; $min_money=0.01; $money_right=$money_total; $randMoney=[]; for($ ...
- webug第九关:URL跳转
第九关:URL跳转 不太明白,看源码 接受了一个URL的参数
- 使用python统计《三国演义》小说里人物出现次数前十名，并实现可视化。
一.安装所需要的第三方库 jieba (jieba是优秀的中文分词第三分库) pyecharts (一个优秀的数据可视化库) <三国演义>.txt下载地址(提取码:kist ) 使用pyc ...
- Pinpoint 设置微信或者钉钉预警
本文基于 Pinpoint 2.1.0 版本 本文大部分内容来自:侠梦的开发笔记 ,但是原文的版本和我的不一致,放在2.1.0是跑不起来的,但是大概逻辑和思路基本一致. 目录 一.接入预警大概思路 二 ...
- 总结MathType中输入小于号的方法
作为一款专业的公式编辑软件,MathType可谓是非常强大,先不说其编辑公式是多么的方便.迅速,但就打开软件界面,看到不可估算的数学符号有那么多,你就会感叹它的强大,竟然能把绝大部分的数学符号都汇聚于 ...
- 怎么用MindManager自带的模板和设计画思维导图
小编知道大家平时工作学习都很忙,思维导图能完成的效率越高越好.所以今天,小编就为大家介绍两个能高效使用思维导图软件完成制作思维导图的小技巧.保证内容充实美观,还不费时间. 一.使用模板 打开MindM ...
- 浅谈 van Emde Boas 树——从 u 到 log log u 的蜕变
本文参考算法导论完成. 模板题在此 QwQ 优化的过程比较长,还请读者耐心阅读,认真理解. 最初的想法 我会暴力! 用一个 \(size\) 数组维护每个元素出现的次数. 不细讲,时间复杂度 \(O( ...
- 【P1588】丢失的牛——区间dp/bfs
(题面来自Luogu) 题目描述 FJ丢失了他的一头牛,他决定追回他的牛.已知FJ和牛在一条直线上,初始位置分别为x和y,假定牛在原地不动.FJ的行走方式很特别:他每一次可以前进一步.后退一步或者直接 ...