总体预览：

材料：背景图与头像.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. 免费|申请谷歌云服务器|msf安装

    apt-get install -y wget 参考链接 知乎-免费|申请谷歌云服务器 知乎-免费|申请谷歌云服务器 cnblogs-debian.ubuntu安装metasploit通用方法 谷歌云 ...

  2. 新鲜出炉！面试90%会被问到的Java多线程面试题，史上最全系列！

    前言 最近很多粉丝朋友私聊我说能不能给整理出一份多线程面试题出来,说自己在最近的面试中老是被问到这一块的问题被问的很烦躁,前一段时间比较忙没时间回私信,前两天看到私信我也是赶紧花了两天给大家整理出这一 ...

  3. Java学习之Swing Gui编程

    Java学习之Swing Gui编程 0x00 前言 前面的使用的Gui是基于Awt 去进行实现,但是在现实写Gui中 AWT实际运用会比较少. 0x01 Swing 概述 AWT 和Swing 区别 ...

  4. ABBYY FineReader 15 PDF文档编辑功能详解

    ABBYY FineReader 15(Windows系统)OCR文字识别软件作为一款通用 PDF 工具,能轻松有效地对各种 PDF文档和纸质文档,进行数字化.检索.编辑.转换.包含.分享和合作,而其 ...

  5. Mac小白用户都能体验Windows应用的轻量级软件

    近期,苹果在WWDC大会上表示Mac电脑将转向ARM架构,这意味着为iPhone手机.iPad平板和Mac电脑应用APP提供了统一的可能性.也就是说,iPhone手机.iPad平板电脑的应用可能在Ma ...

  6. 关于ABBYY的常见问题与解答

    问:ABBYY的版本那么多,我不知道哪款是我需要的.可不可以帮助我选择? 答:您可在此查看不同版本的功能介绍与版本对比,选择适合自己的版本即可. 查看ABBYY FineReader 15功能:查看A ...

  7. Anno微服务引擎与传统应用相融合

    1.Anno是什么? Anno是一个微服务引擎.在此之前我们通过 Viper项目对Anno有一个基本的认识,并且Viper也受到的很多朋友的喜欢,截止发稿前Viper在GitHub收获了300多个星. ...

  8. 关于Java中的内存屏障

    如何打破双亲委派机制 继承ClassLoader类后重写loadClass方法 如何指定自定义ClassLoader中的parent 默认parent是appClassLoader,可以通过Class ...

  9. Ajax原理与图解

    Ajax原理 Ajax 的全称是Asynchronous JavaScript and XML. Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后 ...

  10. 「刷题笔记」DP优化-状压-EX

    棋盘 需要注意的几点: 题面编号都是从0开始的,所以第1行实际指的是中间那行 对\(2^{32}\)取模,其实就是\(unsigned\ int\),直接自然溢出啥事没有 棋子攻击范围不会旋转 首先, ...