Skip to content

Commit

Permalink
create-game
Browse files Browse the repository at this point in the history
  • Loading branch information
wuyouhua committed Apr 24, 2018
1 parent 72fcab8 commit e1f8f7a
Show file tree
Hide file tree
Showing 23 changed files with 321 additions and 5 deletions.
2 changes: 1 addition & 1 deletion css/component/nav.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ html {

.nav-scroll {
background-color: #555;

z-index: 1;
}

.nav .logo,
Expand Down
56 changes: 56 additions & 0 deletions css/page/game.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
.nav .navbar .game {
color: rgb(255, 102, 0);
}

.main-content {
margin-top: 144px;
margin-bottom: 40px;
}

.main-content .content {
padding: 20px 0;
}

.main-content .content .content-side {
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: 0;
}

.main-content .content .content-side .list {
width: 50%;
font-size: 1rem;
transition: all 0.3s ease-out;
cursor: pointer;
}

.main-content .content .content-side .list:hover {
background-color: rgba(246, 246, 246, 0.8);
box-shadow: #aaa 0px 0px 10px;
}

.main-content .content .content-side .list h2 {
text-align: center;
}

.main-content .content .content-side .list .game-pic {
padding: 0px 70px;
padding-top: 40px;
}

.main-content .content .content-side .list img {
width: 500px;
transition: all 0.4s ease-out;
}

.main-content .content .content-side .list img:hover {
transform: scale(1.1);
}

.main-content .content .content-side .list .game-desc {
padding: 0 40px;
margin-bottom: 40px;
color: #333;
}
Binary file added img/game/Call of Duty13.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/Final Fantasy15.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/LOL.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/Mass Effect.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/Rainbow.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/StarCraft2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/cike.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/csgo.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/darksoul3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/dog2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/halo.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/moshou.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/nier2b.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/ow.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/pubg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/wicth3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/game/zelda.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@
<img src="img/logo.png" alt="">
</div>
<div class="navbar">
<a href="" class="navlink home">
<a href="index.html" class="navlink home">
<i class="fa fa-home"></i>Home</a>
<a href="" class="navlink library">
<i class="fa fa-book"></i>Library</a>
<a href="view/page/movie.html" class="navlink movie">
<i class="fa fa-tv"></i>TV</a>
<a href="" class="navlink game">
<a href="view/page/game.html" class="navlink game">
<i class="fa fa-gamepad"></i>Games</a>
<a href="view/page/music.html" class="navlink music">
<i class="fa fa-music"></i>Music</a>
Expand Down
260 changes: 260 additions & 0 deletions view/page/game.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="../../img/bitbug_favicon.ico">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../css/lib/normalize.css">
<link rel="stylesheet" href="../../css/commom/global.css">
<link rel="stylesheet" href="../../css/component/nav.css">
<link rel="stylesheet" href="../../css/page/game.css">
<title>Games</title>
</head>

<body>
<!-- 导航栏 -->
<div class="nav" id="nav">
<div class="container">
<div class="logo fl">
<img src="../../img/logo.png" alt="">
</div>
<div class="navbar">
<a href="../../index.html" class="navlink home">
<i class="fa fa-home"></i>Home</a>
<a href="" class="navlink library">
<i class="fa fa-book"></i>Library</a>
<a href="movie.html" class="navlink movie">
<i class="fa fa-tv"></i>TV</a>
<a href="game.html" class="navlink game">
<i class="fa fa-gamepad"></i>Games</a>
<a href="music.html" class="navlink music">
<i class="fa fa-music"></i>Music</a>
<a href="" class="navlink aboutme" id="aboutme">
<i class="fa fa-user-circle"></i>About me</a>
</div>
<div class="aboutme-content" id="aboutme_content" hidden>
<button id="aboutme_close" class="close-side">Collapse
<i class="fa fa-chevron-circle-right"></i>
</button>
<div class="me-pic">
<img src="../../img/avatar.jpg">
</div>
<div class="person-info">
<p>
<i class="fa fa-user-circle-o"></i>wuyouhua</p>
<p>
<i class="fa fa-envelope-o"></i>123456789@163.com</p>
<p>
<i class="fa fa-phone"></i>12345678901</p>
<p>
<i class="fa fa-address-book-o"></i>beijing</p>
<p>
<i class="fa fa-qq"></i>1234567</p>
</div>
<div class="qrcode">
<img src="../../img/QRcode.jpg">
</div>
<p class="motto">The world is hard,strruggle is the only way out.</p>
</div>
</div>
</div>
<!-- 内容区 -->
<div class="main-content">
<div class="container">
<div class="content">
<div class="cotent-nav">

</div>
<div class="content-side">
<div class="list">
<div class="game-pic">
<img src="../../img/game/pubg.jpg" title="绝地求生大逃杀">
</div>
<h2>
<a href="">Pubg(绝地求生大逃杀)</a>
</h2>
<div class="game-desc">
<p>《绝地求生》(PUBG) 是一款突破性的战术竞技类游戏，凭借其独特创新的玩法模式，写实风格带来的代入感和沉浸感深受玩家喜爱；得益于其极佳的观赏性，迅速在直播平台爆红并风靡全球。除获得G-STAR奖项总统奖以及其他五项大奖，还打破了7项吉尼斯纪录。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/csgo.jpg" title="反恐精英：全球攻势">
</div>
<h2>
<a href="">Counter-Strike：Global Offensive(反恐精英：全球攻势)</a>
</h2>
<div class="game-desc">
<p>CS:GO是以1999年的“Counter Strike”为原型制作的新作，该作在团队竞技游戏模式的基础上加以开发。游戏将玩家分为CT与T营两队，每个队伍必须在一个地图上进行多回合的战斗。赢得回合的方法是达到该地图要求的目标，或者是完全消灭敌方玩家。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/Rainbow.jpg" title="彩虹六号">
</div>
<h2>
<a href="">Rainbow Six(彩虹六号)</a>
</h2>
<div class="game-desc">
<p>《彩虹六号》描述和扮演的是一支名为“彩虹”的多国合作反恐特种部队，随着他们的视角执行各种相应的作战任务，打击恐怖主义对世界的危害。“彩虹六号”这个名字本身根据原著小说的描述是“彩虹”小队的创立者约翰·克拉克（John Clark）的代号。</p>
</div>

</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/zelda.jpg" title="塞尔达传说">
</div>
<h2>
<a href="">Zelda(塞尔达传说)</a>
</h2>
<div class="game-desc">
<p>《塞尔达传说：旷野之息》，是任天堂游戏公司出版发行的开放世界动作冒险游戏。2017年3月3日登陆NS平台为其首发护航，同日登陆Wii U。本作由任天堂与Monolith Soft协力开发，制作团队达300人，耗时4年为系列之最。</p>
</div>

</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/LOL.jpg" title="英雄联盟">
</div>
<h2>
<a href="">LOL(英雄联盟)</a>
</h2>
<div class="game-desc">
<p>符文之地有数块大陆，不过所有的生命都集中在最大魔法大陆——瓦罗兰。瓦罗兰大陆居于符文之地中心，是符文之地面积最大的大陆。符文之地的中心区域集中了数量巨大的源生态魔法能量，这些地方都是水晶枢纽的理想位置。</p>
</div>

</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/halo.jpg" title="光环5">
</div>
<h2>
<a href="">Halo5(光环5)</a>
</h2>
<div class="game-desc">
<p>接续《光环4》的结尾在《光环5》中回归。在这一段故事中，士官长开始怀疑自己之前所有的信念，并且在“下一个72小时”事件之后消失了。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/Call of Duty13.jpg" title="使命召唤13">
</div>
<h2>
<a href="">Call of Duty13(使命召唤13)</a>
</h2>
<div class="game-desc">
<p>玩家将扮演一名叫Reyes的队长，也是一名Tier 1特殊行动的飞行员，玩家将驾驶地球上最后一个仅存的战舰“惩罚者”号。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/darksoul3.jpg" title="暗黑之魂13">
</div>
<h2>
<a href="">DarkSoul13(暗黑之魂13)</a>
</h2>
<div class="game-desc">
<p>《黑暗之魂》 以“探索迷宫的紧张感”、“遭遇敌人的恐怖感”、“新发现的喜悦感”一直到“存活到最后的达成感”为诉求，是款高难度的硬派动作游戏。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/dog2.jpg" title="看门狗2">
</div>
<h2>
<a href="">Watch_Dogs 2(看门狗2)</a>
</h2>
<div class="game-desc">
<p>游戏背景设定在未来的旧金山，玩家需要扮演年轻的聪明黑客马可仕．哈洛威，来到技术革命的起源地：旧金山湾区。加入最恶名昭彰的黑客团体 DedSec，执行史上最大规模的黑客行动，彻底消灭犯罪首脑用来大规模监视操控市民的侵入性运作系统 ctOS 2.0。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/Mass Effect.jpg" title="质量效应:仙女座">
</div>
<h2>
<a href="">Mass Effect:Andromeda(质量效应:仙女座)</a>
</h2>
<div class="game-desc">
<p>游戏故事发生在仙女座星系的赫利俄斯星群，玩家扮演被称为“探路者”的探险家，为了寻找人类的新家而进行远征。在求生存的殖民过程中将会遭遇各种各样的战斗。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/moshou.jpg" title="魔兽世界">
</div>
<h2>
<a href="">World of Warcraft(魔兽世界)</a>
</h2>
<div class="game-desc">
<p>魔兽世界》是由著名游戏公司暴雪娱乐所制作的第一款网络游戏，属于大型多人在线角色扮演游戏。游戏以该公司出品的即时战略游戏《魔兽争霸》的剧情为历史背景，依托魔兽争霸的历史事件和英雄人物，魔兽世界有着完整的历史背景时间线。
玩家在魔兽世界中冒险、完成任务、新的历险、探索未知的世界、征服怪物等。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/nier2b.jpg" title="尼尔:机械纪元">
</div>
<h2>
<a href="">NieR:Automata(尼尔:机械纪元)</a>
</h2>
<div class="game-desc">
<p>《尼尔：机械纪元》故事背景设定在遥远的未来，讲述在被摧毁的地球上由人类的敌人外星人派来的机械生命体与人类方派出的人造人“尤尔哈”部队进行战斗的故事</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/ow.jpg" title="守望先锋">
</div>
<h2>
<a href="">Over Watch(守望先锋)</a>
</h2>
<div class="game-desc">
<p>游戏以未来地球为背景，讲述人类、守望先锋成员和智能机械的恩怨纠葛。游戏现有27位英雄(截止到2018年3月3日)，每一位英雄都有各自标志性的武器和技能。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/wicth3.jpg" title="巫师3：狂猎">
</div>
<h2>
<a href="">The Witcher 3: Wild Hunt(巫师3：狂猎)</a>
</h2>
<div class="game-desc">
<p>巫师世界和其他世界（不仅仅是狂猎所在的世界，还有无数其他世界）发生了交汇，即为“天球交汇”。“天球交汇”可以理解为两个平行世界之间打开了通道。</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/cike.jpg" title="刺客信条">
</div>
<h2>
<a href="">Assassin's Creed(刺客信条)</a>
</h2>
<div class="game-desc">
<p>《刺客信条》系列游戏是根据历史改编而成，历经几个世纪，从欧洲黑暗十字军到文艺复兴，再到英法夺取殖民地的战争，再到圣殿骑士</p>
</div>
</div>
<div class="list">
<div class="game-pic">
<img src="../../img/game/StarCraft2.jpg" title="星际争霸2">
</div>
<h2>
<a href="">StarCraft2(星际争霸2)</a>
</h2>
<div class="game-desc">
<p>《星际争霸》提供了一个游戏战场，用以玩家之间进行对抗。这也是该游戏以及所有即时战略游戏的核心内容。在这个游戏战场中，玩家可以操纵任何一个种族，在特定的地图上采集资源，生产兵力，并摧毁对手的所有建筑取得胜利。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../js/main.js"></script>
<!-- <script src="../../js/music/checked.js"></script> -->

</html>
2 changes: 1 addition & 1 deletion view/page/movie.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<i class="fa fa-book"></i>Library</a>
<a href="movie.html" class="navlink movie">
<i class="fa fa-tv"></i>TV</a>
<a href="" class="navlink game">
<a href="game.html" class="navlink game">
<i class="fa fa-gamepad"></i>Games</a>
<a href="music.html" class="navlink music">
<i class="fa fa-music"></i>Music</a>
Expand Down
2 changes: 1 addition & 1 deletion view/page/music.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<i class="fa fa-book"></i>Library</a>
<a href="movie.html" class="navlink movie">
<i class="fa fa-tv"></i>TV</a>
<a href="" class="navlink game">
<a href="game.html" class="navlink game">
<i class="fa fa-gamepad"></i>Games</a>
<a href="music.html" class="navlink music">
<i class="fa fa-music"></i>Music</a>
Expand Down

0 comments on commit e1f8f7a

Please sign in to comment.