总体预览：

材料：背景图与头像.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. Linux bash反弹shell原理引起的一点思考

        最近,一起做安全测试的兄弟问我:Linux反弹shell的命令是什么,我毫不犹豫地在笔记中找到发给了他,可是脑海中突然闪过有个疑问,为啥这样能反弹shell呢,用了那么多次却从来没有想过这个问 ...

  2. MySQL如何实现万亿级数据存储？

    前言 业界对系统的高可用有着基本的要求,简单的说,这些要求可以总结为如下所示. 系统架构中不存在单点问题. 可以最大限度的保障服务的可用性. 一般情况下系统的高可用可以用几个9来评估.所谓的几个9就是 ...

  3. CorelDRAW快速去除图片背景颜色

    当我们需要从网上借助一些素材图片在CorelDRAW中运用时,往往需要去掉图片的背景颜色.本文小编分享CDR中如何快速去除图片背景颜色的方法,通过此方法可以做简单的照片抠图.合成. 1. 打开Core ...

  4. L-Rui

    <!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="shortcu ...

  5. Vue—新版本router-view 与 keep-alive 的互动

    1. <keep-alive> 直接嵌套到 <router-view> 上会失效,正确写法: <router-view #="{ Component }&quo ...

  6. Django的model.py

    什么是ORM? 对象关系映射 类 >>> 表 对象 >>> 表记录 对象的属性 >>> 一条记录某个字段对应的值 django的orm不能够自动帮 ...

  7. Java MQTT 客户端之 Paho

    Paho 自动重连后订阅的主题会清空,所以需要实现 MqttCallbackExtended 接口,在 connectComplete 方法添加订阅主题:而不是实现 MqttCallback 接口 一 ...

  8. moviepy音视频剪辑：与大小相关的视频变换函数crop、even_size、margin、resize介绍

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>介绍了剪辑基类的fl.fl_time.fx方法,在<movi ...

  9. PyQt（Python+Qt）学习随笔：QScrollArea的alignment属性不起作用的原因

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Scroll Area滚动区域提供了一个呈现在其他部件上的可滚动区域视图,对应类为QScrollAr ...

  10. 第8章 Python类中常用的特殊变量和方法目录

    第8章 Python类中常用的特殊变量和方法 第8.1节 Python类的构造方法__init__深入剖析:语法释义 第8.2节 Python类的__init__方法深入剖析:构造方法案例详解 第8. ...