HTML5 final assignment: game website design - CCG game website introduction (6 pages) high quality HTML+CSS+JavaScript
Common web design topics include individuals, food, companies, schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers, gifts Car, other web design topics, A + level homework, can meet the web design needs of College Students' Web homework, and those who like can be downloaded!
Introduction to works
1. Introduction to web works: HTML final college students' web design homework A + level, you can download what you like, and the article page supports mobile PC responsive layout.
2. Web page work editing: after downloading the work, you can use any HTML editing software (such as DW, HBuilder, Notepad, vscade, Sublime, Webstorm, Notepad + +, etc.) to edit and modify the web page.
3. Web work technology: Div+CSS, mouse over effect, Table, navigation bar effect, banner, form, secondary and tertiary pages, video, audio elements, Flash, logo (source file) is designed, and the knowledge points required for basic final homework are fully covered.
1, Work display
2, File directory
3, Code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Kids Video Game Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--// css -->
<!-- font -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,100,100italic,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- //font -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!-- Header -->
<div class="header">
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Switch navigation<</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html"><h1>CCG <img src="images/c1.png" alt=" " /> game</h1></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hover-effect"><a href="index.html">home page</a></li>
<li class="hover-effect"><a href="about.html">about</a></li>
<li class="hover-effect"><a href="games.html">game</a></li>
<li class="hover-effect"><a href="news.html">Journalism</a></li>
<li class="hover-effect"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- //Navbar -->
<!-- Slider -->
<div class="slider">
<ul class="rslides" id="slider">
<li>
<img src="images/banner1.jpg" alt="" />
</li>
<li>
<img src="images/banner2.jpg" alt="" />
</li>
<li>
<img src="images/banner3.jpg" alt="" />
</li>
</ul>
</div>
<!-- //Slider -->
</div>
<!-- Banner-Slider-JavaScript -->
<script src="js/responsiveslides.min.js"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
nav: true,
speed: 800,
namespace: "callbacks",
pager: true,
});
});
</script>
<!-- //Banner-Slider-JavaScript -->
<!-- //Header -->
<!-- trend -->
<div class="trend-w3layouts">
<div class="container">
<h2>Trend games</h2>
<ul id="flexiselDemo1">
<li>
<div class="trend-grid">
<h4>Racing game</h4>
<img src="images/tg1.jpg" alt=" " class="img-responsive" />
</div>
</li>
<li>
<div class="trend-grid">
<h4>3D game</h4>
<img src="images/tg2.jpg" alt=" " class="img-responsive" />
</div>
</li>
<li>
<div class="trend-grid">
<h4>Action game</h4>
<img src="images/tg3.jpg" alt=" " class="img-responsive" />
</div>
</li>
<li>
<div class="trend-grid">
<h4>Toy Games</h4>
<img src="images/tg4.jpg" alt=" " class="img-responsive" />
</div>
</li>
</ul>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").flexisel({
visibleItems: 4,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 2
},
landscape: {
changePoint:640,
visibleItems:3
},
tablet: {
changePoint:768,
visibleItems: 4
}
}
});
});
</script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
</div>
</div>
<!-- //trend -->
<!-- services-->
<div class="services-agileits-w3layouts">
<div class="container">
<h3>service</h3>
<div class="col-md-3 service-grid-agileits service-grid-agileits-top">
<span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
<h4>download</h4>
<p>Game download</p>
<a href="single.html">more</a>
</div>
<div class="col-md-3 service-grid-agileits">
<span class="glyphicon glyphicon-random" aria-hidden="true"></span>
<h4>share</h4>
<p>Game sharing</p>
<a href="single.html">more</a>
</div>
<div class="col-md-3 service-grid-agileits service-grid-agileits-bottom">
<span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
<h4>transaction</h4>
<p>Game recharge</p>
<a href="single.html">more</a>
</div>
<div class="col-md-3 service-grid-agileits service-grid-agileits-bottom">
<span class="glyphicon glyphicon-object-align-right" aria-hidden="true"></span>
<h4>Personal Center</h4>
<p>Personal Center</p>
<a href="single.html">more</a>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- //services-->
<!-- new games -->
<div class="new-w3-agile">
<div class="container">
<h3>New game</h3>
<div class="col-md-3 new-grid-w3l view view-eighth">
<img src="images/ng1.jpg" alt=" " />
<div class="mask">
<a href="single.html"><h4>click here </h4></a>
<p>Learn more about this</p>
</div>
</div>
<div class="col-md-3 new-grid-w3l view view-eighth">
<img src="images/ng2.jpg" alt=" " />
<div class="mask">
<a href="single.html"><h4>click here </h4></a>
<p>Learn more about this</p>
</div>
</div>
<div class="col-md-3 new-grid-w3l view view-eighth">
<img src="images/ng3.jpg" alt=" " />
<div class="mask">
<a href="single.html"><h4>click here </h4></a>
<p>Learn more about this</p>
</div>
</div>
<div class="col-md-3 new-grid-w3l view view-eighth">
<img src="images/ng4.jpg" alt=" " />
<div class="mask">
<a href="single.html"><h4>click here </h4></a>
<p>Learn more about this</p>
</div>
</div>
<div class="col-md-3 new-grid-agile view view-eighth">
<img src="images/ng5.jpg" alt=" " />
<div class="mask">
<a href="single.html"><h4>click here </h4></a>
<p>Learn more about this</p>
</div>
</div>
<div class="col-md-3 new-grid-agile view view-eighth">
<img src="images/ng6.jpg" alt=" " />
<div class="mask">
<a href="single.html"><h4>click here </h4></a>
<p>Learn more about this</p>
</div>
</div>
<div class="col-md-3 new-grid-agile view view-eighth">
<img src="images/ng7.jpg" alt=" " />
<div class="mask">
<a href="single.html"><h4>click here </h4></a>
<p>Learn more about this</p>
</div>
</div>
<div class="col-md-3 new-grid-agile view view-eighth">
<img src="images/ng8.jpg" alt=" " />
<div class="mask">
<a href="single.html"><h4>click here </h4></a>
<p>Learn more about this</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- //new games-->
<div class="services-bottom-w3-agileits">
<div class="container">
<div class="wthree_info">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="wthree_info_grid">
<h3> Death chanter</h3>
<p>At the end of a song, the flowers are scattered, the Iraqi is gone, and there is only an empty sigh.</p>
<a href="single.html" class="learn">Learn more</a>
</div>
</li>
<li>
<div class="wthree_info_grid">
<h3>Trickery witch</h3>
<p>When the black roses bloom quietly, in addition to the mirror, who can understand my heart?</p>
<a href="single.html" class="learn">Learn more</a>
</div>
</li>
<li>
<div class="wthree_info_grid">
<h3>Arrow of punishment</h3>
<p>For your body that falls into hell and is stained with evil power, your face that has been corroded by dark toxins. Everything is just revenge for you.</p>
<a href="single.html" class="learn">Learn more</a>
</div>
</li>
</ul>
</div>
</section>
<!-- flexSlider -->
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!-- //flexSlider -->
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="col-md-3 footer-left-w3">
<h4>Contact</h4>
<ul>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></li>
<li><a href="mailto:example@mail.com"><h6></h6></a></li>
</ul>
<ul>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></li>
</ul>
<ul>
<li><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></li>
<li><h6></h6></li>
</ul>
<ul>
<li><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></li>
</ul>
</div>
<div class="col-md-5 footer-middle-w3">
<h4>Latest games</h4>
<div class="col-md-3 img-w3-agile">
<a href="single.html"><img src="images/ng1.jpg" alt=" " /></a>
</div>
<div class="col-md-3 img-w3-agile">
<a href="single.html"><img src="images/ng2.jpg" alt=" " /></a>
</div>
<div class="col-md-3 img-w3-agile">
<a href="single.html"><img src="images/ng3.jpg" alt=" " /></a>
</div>
<div class="col-md-3 img-w3-agile">
<a href="single.html"><img src="images/ng4.jpg" alt=" " /></a>
</div>
<div class="col-md-3 img-w3-agile footer-middle-wthree">
<a href="single.html"><img src="images/ng5.jpg" alt=" " /></a>
</div>
<div class="col-md-3 img-w3-agile footer-middle-wthree">
<a href="single.html"><img src="images/ng6.jpg" alt=" " /></a>
</div>
<div class="col-md-3 img-w3-agile footer-middle-wthree">
<a href="single.html"><img src="images/ng7.jpg" alt=" " /></a>
</div>
<div class="col-md-3 img-w3-agile footer-middle-wthree">
<a href="single.html"><img src="images/ng8.jpg" alt=" " /></a>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-4 footer-right-w3">
<a href="index.html"><h4>CCG <img src="images/f1.png" alt=" " /> game</h4></a>
<p>CCG Play your game paradise.</p>
<p class="agileinfo">Thank you for your choice CCG game.</p>
</div>
<div class="clearfix"></div>
<div class="copyright">
<p>CCG All rights reserved</p>
</div>
</div>
</div>
<!-- //footer -->
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>
</html>
4, Get more source code
~Pay attention to me and praise the blog ~ bring you up knowledge every day!
Relevant issues can be learned from each other. You can pay attention to ↓ public Z to get more source code!
5, Learning materials
A complete set of web front-end zero foundation - Introduction to advanced (Video + source code + development software + learning materials + interview questions) (Tutorial)
Suitable for entry-level to advanced children's shoes ~ send 1000 sets of HTML+CSS+JavaScript template websites
6, More source code
HTML5 final assessment homework source code * includes individuals, food, companies, schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers Gifts, cars and others can meet the web design needs of College Students' Web homework. You can download what you like!
