HTML final homework course design animation theme html5 web page ~ animation official website HTML template (HTML+CSS) ~ personal design web front-end homework
Near the end of the term, you are still designing your final homework for HTML web pages. Do you feel the teacher's homework requirements are great? Can't you do HTML web homework? The total number of pages required is too much? No suitable template? And so on. The problems you want to solve can basically meet your needs in this blog post~
Original HTML+CSS page design, web college students' web design homework source code, ~ this is a good web page production, smart screen, very suitable for beginners to learn and use.
Introduction to works
About the realization of the final course of HTML web design, the big homework A + level ~, including the home page work display, and the recruiters contact us on five big pages about the company
This work is the subject matter of student's personal home page design. The code is simple student level html+css layout. After downloading the work, you can use any HTML editing software (for example, DW, HBuilder, Notepad, and all editors of vscade)
In terms of the layout of web works: the overall layout of the web page is LOGO, navigation, rotation map and main content layout. There are many layouts of sub pages. The contents of interests and hobbies use the layout of picture list. The table is inserted into the score page. Contact us to set the left alignment using the picture alignment.
In terms of web page work technology: CSS is used to make web page background, mouse passing, selected navigation color change effect, underline, etc. A message form is made on the home page, and a form judgment is made simply using JavaScript (the form cannot be empty when submitted)
(empty)
1, Work demonstration
1. Home page
2. Exhibition of works
3. Recruit talents
4. Contact us
5. About the company
2, Code directory
3, Code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Animation official website-home page</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
</head>
<body>
<!--Top-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid wrap">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--logo-->
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt=""/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--<ul class="language navbar-right">
<li><a href="#"Class =" active "> medium</a></li>
<li>|</li>
<li><a href="#">EN</a></li>
</ul>-->
<ul class="nav navbar-nav main-nav navbar-right">
<li class="active"><a href="index.html">home page</a></li>
<li><a href="worksShow.html">Work display</a></li>
<li><a href="recruit.html">invite to one 's side men of wisdom and valor</a></li>
<li><a href="contract.html">contact us</a></li>
<li><a href="about.html">About the company</a></li>
<li class="lang"><a class="active">in</a>|<a href="en_index.html">EN</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
<div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
<div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
<div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
<div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<!--Multi graph rotation-->
<div class="lunbo">
<div class="title wow bounceInUp">Projects we participate in</div>
<div class="picScroll">
<ul>
<li>
<a target="_blank" href="###">
<img _src="img/lunbo1.png" src="img/lunbo1.png" />
<div class="img-text">The "Hidden Dragon abyss" of the large-scale naval battle battlefield is online, and the whole people go to war!</div>
</a>
</li>
<li>
<a target="_blank" href="###">
<img _src="img/lunbo2.png" src="img/lunbo2.png" />
<div class="img-text">Tiandao mocks Tiangong's "one man's war" video debut album of the same name on the shelves QQ music</div>
</a>
</li>
<li>
<a target="_blank" href="###"><img _src="img/lunbo3.png" src="img/lunbo3.png" />
<div class="img-text">Lazy strategy how to brush the victory and defeat order of a week</div>
</a>
</li>
<li>
<a target="_blank" href="###"><img _src="img/lunbo4.png" src="img/lunbo4.png" />
<div class="img-text"><The glory of the king H5 Online, five armies duel, waiting for you to fight</div>
</a>
</li>
<li>
<a target="_blank" href="###"><img _src="img/lunbo5.png" src="img/lunbo5.png" />
<div class="img-text">Super high expectation! game player Coser His work won the official praise of Jedi survival and the whole army attack</div>
</a>
</li>
<li>
<a target="_blank" href="###"><img _src="img/lunbo6.png" src="img/lunbo6.png" />
<div class="img-text">Opening battle RNGvsIG LPL The spring competition officially starts on January 15</div>
</a>
</li>
</ul>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<a href="###"> < div class =" more "> more works < / div ></a>
</div>
<!--About us-->
<div class="aboutUs">
<div class="wrap">
<div class="title wow bounceInUp">About us</div>
<div class="text wow slideInDown">
<span class="ccf0f32">Guangzhou Yuandong Animation Design Co., Ltd( YD ART)，betake CG Art concept design and 3D video game visual development and production</span>
<span>Its team is now jointly established by its founder Yuan Jie CG Artist Xiao ZHUANGYUE and XRCGTEAM(<a href="http://www.xrcgteam. com"> http://www.xrcgteam.com < / a >) members and senior artists in the game, film and television and animation industries</span>
<span>Provide high-quality conceptual design, original painting setting, meixuan illustration and next generation 3 for many projects at home and abroad D,GUI,Action effects and other outsourcing services.</span>
<span>He has participated in StarCraft, scroll of ancient times, League of heroes, God of war, unparalleled Three Kingdoms and dream journey to the West< LOC><Development and production of visual arts for large-scale game film and television projects at home and abroad, such as ghost blowing lamp and Great Wall</span>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="">
<h3 class="timer count-title" id="count-number" data-to="150" data-speed="1500"></h3>staff
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="">
<h3 class="timer count-title" id="count-number" data-to="100" data-speed="1500"></h3>customer
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="">
<h3 class="timer count-title" id="count-number" data-to="200" data-speed="1500"></h3>project
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="">
<h3 class="timer count-title" id="count-number" data-to="6" data-speed="1500"></h3>anniversary
</div>
</div>
</div>
</div>
</div>
<!--They trust us-->
<div class="believe">
<div class="wrap">
<div class="title wow bounceInUp">They trust us</div>
<div class="partnerList">
<ul>
<a href="###">
<li>
<img src="img/about_01.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_02.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_03.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_04.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_05.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_06.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_07.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_08.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_09.jpg"/>
</li>
</a>
<a href="###">
<li>
<img src="img/about_10.jpg"/>
</li>
</a>
</ul>
</div>
</div>
</div>
<!--What do we do-->
<div class="wedo">
<div class="wrap">
<div class="title wow bounceInUp">What do we do</div>
<div class="text wow slideInDown">
<span class="ccf0f32 f18">ACG Domain visual art outsourcing solution expert</span>
<span>We offer 2 D,3D,The whole process outsourcing service of next generation game art, including art style pre research, whole package customization, art consulting and other services</span>
</div>
<div class="row dolist">
<a href="###">
<div class="col-xs-6 col-sm-4 col-md-2 wow bounceInLeft" data-wow-delay="1.5s">
<img src="img/doimg_1.png"/>Mobile Games
</div>
</a>
<a href="###">
<div class="col-xs-6 col-sm-4 col-md-2 wow bounceInLeft " data-wow-delay="1s">
<img src="img/doimg_2.png"/>Webpage Game
</div>
</a>
<a href="###">
<div class="col-xs-6 col-sm-4 col-md-2 wow bounceInLeft " data-wow-delay="0.5s">
<img src="img/doimg_3.png"/>End swim
</div>
</a>
<a href="###">
<div class="col-xs-6 col-sm-4 col-md-2 wow bounceInRight " data-wow-delay="0.5s">
<img src="img/doimg_4.png"/>Next generation
</div>
</a>
<a href="###">
<div class="col-xs-6 col-sm-4 col-md-2 wow bounceInRight " data-wow-delay="1s">
<img src="img/doimg_5.png"/>stand-alone
</div>
</a>
<a href="###">
<div class="col-xs-6 col-sm-4 col-md-2 wow bounceInRight " data-wow-delay="1.5s">
<img src="img/doimg_6.png"/>Movies
</div>
</a>
</div>
<div class="text-list wow bounceInDown">
<ul>
<li>
<a href="###"> character original design</a>
<a href="###"> original scene design</a>
<a href="###"> UI design</a>
</li>
<li>
<a href="###"> Portrait Painting</a>
<a href="###"> prop drawing</a>
<a href="###"> icon drawing</a>
</li>
<li>
<a href="###"> meixuan</a>
<a href="###"> card drawing</a>
<a href="###"> 2D scene integration</a>
</li>
<li>
<a href="###"> 3DMAX role model</a>
<a href="###"> 3DMAX scene model</a>
<a href="###"> next generation models, maps</a>
</li>
<li>
<a href="###"> 3DMAX animation</a>
<a href="###"> 3DMAX special effects</a>
<a href="###"> 3 turns 2 drawing</a>
</li>
</ul>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<img src="img/foot_logo.png"/>
Copyright © 2016 XRCG. All Rights Reserved
</div>
</body>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
<script src="js/numberAdd.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
//Multi graph rotation
jQuery(".picScroll").slide({ mainCell:"ul", effect:"leftLoop", vis:6, scroll:1, autoPage:true, switchLoad:"_src",autoPlay:true});
//banner rotation
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
// effect: 'fade',
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
//Mouse scrolling effect
new WOW().init();
</script>
</html>
4, A complete set of front-end zero basic 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
❉1. See here, with the support of [praise + praise + collection] three companies, your "praise, praise and collection" is the driving force of my creation.
❉ 2. Pay attention to me ~ take you to learn every day: various front-end plug-ins, 3D cool effects, picture display, text effects, as well as the whole station template, college student graduation template, final assignment template, etc! "There are many front-end developers here to discuss front-end Node knowledge and learn from each other"!
❉3. You can learn from each other about the above technical issues. You can pay attention to ↓ Gong Z to get more source code!
6, More HTML final assignment articles
5.HTML final assignment ~ design and implementation of tourism website based on HTML+CSS+JavaScript
7.HTML final assignment ~ imitation Xiaomi mall web design template (HTML+CSS+JavaScript)
8.HTML final assignment ~ catering culture student web design assignment (HTML+CSS+JavaScript)
11.HTML web design and production homework - making cartoon web design 6 pages (HTML+CSS+JavaScript)
14. Final assignment ~ hotel website template (HTML+CSS+JavaScript)
16.HTML Olympic web page 5 page culture ~ sports student web page design homework
17.HTML my hometown Hangzhou web design source code (div+css)
21. A complete set of static HTML web page templates (including 38 independent HTML)
27. Final HTML assignment ~ finished maldives tourism web design assignment
29. Final HTML assignment ~ finished Fengyang tourism web design assignment (HTML+CSS+JavaScript)