总体预览：

材料：背景图与头像.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制作个人资料卡的更多相关文章

  1. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  2. 纯div+css制作的弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  4. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  5. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  7. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  8. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  9. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

随机推荐

  1. 《Spring Boot 实战纪实》之需求管理

    目录 前言 (思维篇)人人都是产品经理 1.需求文档 1.1 需求管理 1.2 如何攥写需求文档 1.3 需求关键点文档 2 原型设计 2.1 缺失的逻辑 2.2 让想法跃然纸上 3 开发设计文档 3 ...

  2. 你真的能分清putc()函数和fputc()函数吗？

    最近小编在讲关于C语言文件部分内容,讲到了fputc()函数.前面在讲字符串的时候,我们还学习过putc()函数,我们知道,putc()函数一般用于标准输出,fputc()函数一般用于文件读写.刚才呢 ...

  3. 莫小安 Linux下Redis的安装与配置

    转载自--Linux下Redis的安装与配置 redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了 memcached的不足,它 ...

  4. 利用分块传输绕WAF

    分块传输原理介绍 背景 HTTP Connection有两种连接方式:短连接和长连接: 短连接即一次请求对应一次TCP连接的建立和销毁过程. 长连接是多个请求共用同一个连接这样可以节省大量连接建立时间 ...

  5. msfvenom制作payload

    windows msfvenom -a x86 --platform Windows -p windows/meterpreter/reverse_tcp LHOST=攻击机IP LPORT=攻击机端 ...

  6. day01-系统基础信息模块

    前言:2015年,由于大规模采用云平台虚拟机部署应用,每套应用系统的MySQl.接口机.WEB服务器.文件服务器需要经常进行版本升级.配置更新.安全补丁加固.iptables调整.配置核实,大量的手工 ...

  7. java后端开发三年！你还不了解Spring 依赖注入，凭什么给你涨薪

    前言 前两天和一个同学吃饭的时候同学跟我说了一件事,说他公司有个做了两年的人向他提出要涨薪资,他就顺口问了一个问题关于spring依赖注入的,那个要求涨薪的同学居然被问懵了...事后回家想了想这一块确 ...

  8. 深度分析：mybatis的底层实现原理，看完你学会了吗？

    前言 最近在和粉丝聊天的时候被粉丝问到jdbc和mybatis底层实现这一块的问题,而且还不止一个小伙伴问到,于是我似乎认识到了问题的严重性,我花了两天时间整理了一下自己的认识和网上查阅的资料写了这篇 ...

  9. 轻松将CAD文件转为加密的PDF文件

    对于从事设计相关工作的朋友来说,CAD肯定再熟悉不过了.一些有特殊要求的CAD文件,需要将其转换成为PDF文件以方便保存.传输.打印,同时还得保证设计图稿的安全性,所以将CAD文件直接转为加密的PDF ...

  10. 下载并破解IntelliJ IDEA（2017）

    idea的下载:https://www.jetbrains.com/idea/download/#section=windows 破解链接:http://blog.csdn.net/nn_jbrs/a ...