总体预览：

材料：背景图与头像.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. appium -- Xpath定位元素

    如文章<Appium基于安卓的各种FindElement的控件定位方法实践>所述,Appium拥有众多获取控件的方法.其中一种就是根据控件所在页面的XPATH来定位控件. 本文就是尝试通过 ...

  2. day95:flask:SQLAlchemy数据库查询进阶&关联查询

    目录 1.数据库查询-进阶 1.常用的SQLAlchemy查询过滤器 2.常用的SQLAlchemy查询结果的方法 3.filter 4.order_by 5.count 6.limit&of ...

  3. SpringIOC的高级特性

    目录 1. lazy-Init延迟加载 1.1 XML方式开启延迟加载: 1.2 注解开启延迟加载: 1.3全局配置--default-lazy-init="": 应用场景: 2. ...

  4. 如何在Vegas中安装激活Continuum插件

    视频剪辑插件Boris FX Continuum安装程序包含了多达250种插件.而视频剪辑软件Vegas Pro 18 Suite中提供了Boris FX Continuum Film Style U ...

  5. FL Studio入门：如何使用Layer插件叠加音色

    Layer控制器也是FL Studio中一个特别有用的插件,主要用来叠加音色,以及通过Layer通道来控制多个打击乐通道. 下面我们一起来看看叠加音色是怎么做出来的. 1.新建一个空白工程,插入3个3 ...

  6. guitar pro 系列教程（十七）：Guitar Pro怎么导入音色库？

    前面的章节讲述了关于Guitar Pro相关功能的介绍以及使用,其中也有提到音色库,玩音乐的朋友都知道,音色库是一个乐器的必备,今天小编要跟大家讲的就是关于Guitar Pro音色库是如何导入进去的, ...

  7. 使用Camtasia来消除视频中的声音

    大多数情况下,我们在录制电脑屏幕的时候都会把音频输出也一起录制下来,但也会有时候要后期进行重新配音,需要把事先一同录制的音频消除掉,今天小编来给大家说一说如何消除这种的视频声音. 首先打开Camtas ...

  8. Nginx搭建文件共享服务器

    前言 Nginx除了做正反向代理和负载均衡,还能做动静分离服务器,如此便可以当作文件共享服务器使用. 环境 WIN 10 Vmware Workstation 15 Player CentOS Lin ...

  9. guava中的SettableFuture分析

    当缓存中没有要找的数据时,则要从数据库中去查询,而当并发量比较大时可能会击穿数据库,所以guava cache对同一值的查询做了合并请求的处理.其中就用到了SettableFuture,类似一把锁,只 ...

  10. MiniUI日期选择框MonthPicker英文修改为中文

    一.详细内容及解决方案 正常MIniUI的MonthPicker中的月份和星期默认是英文的,我百度搜索关于这个问题的博客少之又少,下面说下解决办法,非常简单. <input id="d ...