HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XXX的个人简历</title>
<meta name="theme-color" content="#ffc91d"/>
<link rel="icon" href="picture/avatar.jpg" sizes="32x32"/>
<link rel="icon" href="picture/avatar.jpg" sizes="192x192"/>
<link href="css/kico.css" rel="stylesheet" type="text/css"/>
<link href="css/moreduo.css" rel="stylesheet" type="text/css"/>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
</head>
<body>
<aside class="sidebar">
<div class="avatar">
<img src="picture/avatar.jpg" title="保罗酱"/>
</div>
<nav class="nav">
<a href="#info">资料</a>
<a href="#skills">技能</a>
<a href="#works">作品</a>
<a href="#story">经历</a>
<a href="#team">团队</a>
</nav>
</aside>
<main>
<section id="info">
<div class="wrap">
<h2 class="title">个人资料</h2>
<div class="row">
<div class="col-l-4">
<p>姓名：XXX</p>
<p>性别：男</p>
<p>年龄：48</p>
<p>英文名：Moreduo</p>
<p>学历：博士后</p>
</div>
<div class="col-l-4">
<p>QQ：XXX</p>
<p>GitHub：<a href="/">Moreduo</a></p>
<p>博客：<a href="XXX">XXX</a></p>
<p>邮箱：<a href="mailto:XXX@qq.com">XXX@qq.com</a></p>
</div>
<div class="col-l-4">
<p>我是一个热爱钻研计算机技术的青少年，从小开始对计算机有极大的兴趣。目前我专注网站开发领域。我还自己发起建立了一个制作游戏的团队，希望能和大家合作，一同创造出属于我们自己的原创作品。</p>
</div>
</div>
</div>
</section>
<section id="skills">
<div class="wrap">
<h2 class="title">掌握的技能</h2>
<div class="row scrollable">
<div class="col-s-6 col-m-4 center-fixed">
<div class="skills-icon">
<i class="fa fa-html5"></i>
</div>
<div class="skills-title">
<h3>HTML 5</h3>
<p>熟悉 HTML5 网站的架构和开发</p>
</div>
</div>
<div class="col-s-6 col-m-4 center-fixed">
<div class="skills-icon">
<i class="fa fa-css3"></i>
</div>
<div class="skills-title">
<h3>CSS3</h3>
<p>熟悉使用 CSS3 写响应式网站、动画等</p>
</div>
</div>
<div class="col-s-6 col-m-4 center-fixed">
<div class="skills-icon">
<i class="fa fa-code"></i>
</div>
<div class="skills-title">
<h3>JavaScript</h3>
<p>能使用 JS 制作简单的程序、交互与特效</p>
</div>
</div>
</div>
</div>
</section>
<section id="works">
<div class="wrap">
<h2 class="title">个人作品</h2>
<div class="row">
<div class="col-s-6">
<div class="works-item">
<img src="picture/binkic-2017.jpg"/>
<p>缤奇团队 2017 官网</p>
</div>
</div>
<div class="col-s-6">
<div class="works-item">
<img src="picture/space.jpg"/>
<p>个人博客</p>
</div>
</div>
<div class="col-s-6">
<div class="works-item">
<img src="picture/dream.jpg"/>
<p>梦想主题班会</p>
</div>
</div>
<div class="col-s-6">
<div class="works-item">
<img src="picture/kico-style.jpg"/>
<p>Kico Style 响应式框架</p>
</div>
</div>
<div class="col-s-6">
<div class="works-item">
<img src="picture/robots.jpg"/>
<p>小缤机器人</p>
</div>
</div>
<div class="col-s-6">
<div class="works-item">
<img src="picture/single.jpg"/>
<p>Single 博客主题</p>
</div>
</div>
<div class="col-s-6">
<div class="works-item">
<img src="picture/kico-player.jpg"/>
<p>Kico Player 播放器</p>
</div>
</div>
<div class="col-s-6">
<div class="works-item">
<img src="picture/sweet.jpg"/>
<p>个人主页 Sweet</p>
</div>
</div>
<div class="col-s-6">
<div class="works-item">
<img src="picture/binkic-2018.jpg"/>
<p>缤奇团队 2018 官网</p>
</div>
</div>
</div>
</div>
</section>
<section id="story">
<div class="wrap">
<h2 class="title">个人经历</h2>
<div class="row">
<div class="col-m-8">
<ul class="timeline">
<li>2016.07.03：创立缤奇（Binkic）团队</li>
<li>2016.12.20：仿照某动漫官网编写模板，并搭建运营了一个动漫型社区</li>
<li>2017.05.30：带领团队进行招新，并发起了首个游戏项目：<a>色块冲刺</a></li>
<li>2017.08.17：为团队制作了首部宣传片：<a href="javascript:;" target="_blank">创意可以改变什么</a></li>
<li>2017.12.08：个人编写的前端响应式框架 <a href="javascript:;" target="_blank">Kico Style</a> 初现雏形</li>
<li>2018.03.01：基于 Kico Style 的第一个原创 <a href="javascript:;" target="_blank">缤奇团队官网</a> 正式上线</li>
<li>2018.04.27：使用前端技术编写的 <a href="javascript:;" target="_blank">梦想晨会</a> 制作完成</li>
<li>2018.06.07：参加“众创杯”创业大赛校园选拔赛，团队项目荣获三等奖</li>
<li>2018.06.17：动漫门户网站制作完成，内含一个自己设计的简单音乐播放器</li>
<li>2018.06.25：参加全国中职信息技术技能大赛微网站项目，荣获一等奖</li>
<li>2018.08.03：原创博客主题 <a href="javascript:;" target="_blank">Single</a> 发布，截至 2 月共有 66 Stars</li>
<li>2018.09.19：个人编写的播放器 <a href="javascript:;" target="_blank">Kico Player</a> 发布测试版</li>
<li>2018.12.12：基于 ES6 的时钟小工具 <a href="javascript:;" target="_blank">Kico Tools</a> 发布测试版</li>
<li>2018.12.18：第一个基于 PHP 的个人首页 <a href="javascript:;" target="_blank">Sweet</a> 发布正式版</li>
<li>2019.01.01：缤奇团队新<a href="javascript:;" target="_blank">官网</a>正式上线，后端采用 Typecho 驱动</li>
<li>2019.02.16：结合前后端制作了一个春节的<a href="javascript:;" target="_blank">问答红包</a>，使用正则判断答案</li>
</ul>
</div>
<div class="col-m-4 center-fixed">
<img src="picture/story.png"/>
</div>
</div>
</div>
</section>
<section class="content-d" id="team">
<div class="wrap">
<h2 class="title">我的团队</h2>
<div class="row">
<div class="col-m-6">
<p>我的团队 - 缤奇团队由一群热爱科技创新的年轻人所组成，做到了“实际”与“创新”的结合。奇思妙想不乏真正落实。集思广益，生动有趣的创意，尽在缤奇。缤奇团队如今有超过30名成员，各个部门互帮互助，同为一个目标而努力进取着。</p>
<p>缤奇团队致力于开发原创游戏、动漫等项目。目前我们已完成项目有手机游戏“色块冲刺”、聊天娱乐项目“小缤机器人”等。正在创作项目有解密游戏“月亮湖的秘密”、VR 项目“梦想码头”等。缤奇官网 & 社区已陆续开放。网站采用团队成员自主编写的 CSS3 自适应框架，针对移动设备有布局优化，缤奇团队有着丰富的网站建设技术能力、有独立的画师以及文编。</p>
<p>团队官网：<a href="XXX">XXX</a></p>
</div>
<div class="col-m-6 center">
<img src="picture/team.png"/>
</div>
</div>
</div>
</section>
<footer>
<p>© 2020.</p>
</footer>
</main>
<script src="js/kico.js"></script>
<script src="js/moreduo.js"></script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
