总体预览：

材料：背景图与头像.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. kail下安装RsaCtfTool

    最近做了一些RSA的ctf题目,感觉在RsaCtfTool是很麻烦的事,但是发现在kali上安装下载非常简便,所以找一了一些教程,总结一下 参考链接:http://www.sohu.com/a/257 ...

  2. 硕思logo设计师注册码去哪里找，文末附链接

    硕思logo设计师注册码去哪里找呢?当然是硕思logo设计师官网啦! 最近小编总是会被网友们咨询关于logo设计的问题,其中很多网友并不是专业的设计人员,特别是一些设计公司面对新手设计时,往往会不知所 ...

  3. 「CSP-S 2020」动物园

    description luogu loj(暂无数据) solution 这道题作为T2,对选手们考试开始后先通看一遍所有题目的好习惯,以及判断究竟谁才是真正的签到题的重要能力进行了较好的锻炼, 特别 ...

  4. 基于Vue、Springboot网站实现第三方登录之QQ登录，以及邮件发送

    基于Vue.Springboot实现第三方登录之QQ登录 前言 一.前提(准备) 二.QQ登录实现 1.前端 2.后端 1.application.yml 和工具类QQHttpClient 2.QQL ...

  5. 一分钟了解 sync、fsync、fdatasync 系统调用

    目录 一.缓冲 二.延迟写的优缺点 三.sync.fsync.fdatasync 关注送书!<Netty实战>(今晚开奖) Hi,大家好!我是白日梦. 今天我要跟你分享的话题是:" ...

  6. 《高并发下的.NET》第2季 - 《memcached连接暴增案》第1集：问题表现

    在<.NET 5.0 背锅案>第7集-大结局之后,园子和 .NET 继续过上了幸福生活...剧情很美好,现实很残酷...现实是旧案刚结,新案立至,而且新案与旧案有关联,被迫继续拍剧,并对该 ...

  7. Educational Codeforces Round 96 (Rated for Div. 2) E. String Reversal 题解（思维+逆序对）

    题目链接 题目大意 给你一个长度为n的字符串,可以交换相邻两个元素,使得这个字符串翻转,求最少多少种次数改变 题目思路 如果要求数组排序所需要的冒泡次数,那其实就是逆序对 这个也差不多,但是如果是相同 ...

  8. python模块wifi使用小记

    安装命令 pip install wifi 连接命令 sudo wifi connect --add-hoc ssid,使用该命令会修改/etc/network/interfaces配置文件,导致启动 ...

  9. 关于Python链式赋值的赋值顺序问题

    在<第4.7节 Python特色的序列解包.链式赋值.链式比较>一文中,老猿这样介绍的: 链式赋值是用一行语句将多个变量赋值为同一个值,语法如下: 变量1=变量2=变量n=赋值表达式 该语 ...

  10. Nday漏洞组合拳修改全校师生密码

    很久以前写的文章了,发一下:) 本文是我真实的挖洞经历.撰写本文时相关学校已修复漏洞,相关漏洞也提交给了教育漏洞平台.纯粹是挖洞经验的总结和技术分享,由于敏感信息比较多,所以文章里面很多图片已经面目全 ...