web123456

Html+Css+javascript based web production for sophomore students - Responsive website template for animation design company (10 pages)

<!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>YuanDong official website-Home</title> <link rel="stylesheet" type="text/css" href="css/" /> <link rel="stylesheet" type="text/css" href="css/" /> <link rel="stylesheet" type="text/css" href="css/" /> <link rel="stylesheet" type="text/css" href="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/" 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"> in</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="">home page (of a website)</a></li> <li><a href="">Showcase</a></li> <li><a href="">invite the talented and call the valorous (idiom); recruit talent</a></li> <li><a href="">Contact Us</a></li> <li><a href="">About the Company</a></li> <li class="lang"> <a class="active">center</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/)" ></div> <div class="swiper-slide" style="background-image: url(img/)" ></div> <div class="swiper-slide" style="background-image: url(img/)" ></div> <div class="swiper-slide" style="background-image: url(img/)" ></div> <div class="swiper-slide" style="background-image: url(img/)" ></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-image rotation -->! <div class="lunbo"> <div class="title wow bounceInUp">Projects we are involved in</div> <div class="picScroll"> <ul> <li> <a target="_blank" href="###"> <img _src="img/" src="img/" /> <div class="img-text">The large-scale naval battlefield "Dragon's Abyss" has been launched, and all the people are going to war!</div> </a> </li> <li> <a target="_blank" href="###"> <img _src="img/" src="img/" /> <div class="img-text"> Heavenly sword mocking heavenly palace "one man war" video debut album of the same name shelves QQ music </div> </a> </li> <li> <a target="_blank" href="###" ><img _src="img/" src="img/" /> <div class="img-text">Lazy Raiders How to Finish a Week of Winning and Losing Orders</div> </a> </li> <li> <a target="_blank" href="###" ><img _src="img/" src="img/" /> <div class="img-text"> The King's Glory" magic H5 on line, five armies duel waiting for you to fight </div> </a> </li> <li> <a target="_blank" href="###" ><img _src="img/" src="img/" /> <div class="img-text"> Super High Expectations! Gamer Cosplayer's Work Receives Official Praise from "Jedi Survival All Out </div> </a> </li> <li> <a target="_blank" href="###" ><img _src="img/" src="img/" /> <div class="img-text">Opening Battle RNG vs. IG LPL Spring Season officially kicks off on Jan. 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 Yuan Dynamic Animation Design Co. (ART), is committed to CG art concept design and 3D visual development and production for film, television and games.</span > <span >The team now consists of founder Yuan Jie, together with renowned CG artist Xiao Zhuangyue, and XRCGTEAM (<a href="" ></a >) members and senior artists in the game, film, television, and animation industries.</span > <span >We provide high-quality outsourcing services for many projects at home and abroad, such as concept design, original painting setting, art illustration, next-generation 3D, GUI, action effects, and so on.</span > <span >Has participated in the "Starcraft", "The Elder Scrolls", "League of Legends", "God of War", "Three Kingdoms", "Fantasy Journey to the West", "LOC", "Ghost Blown *", "The Great Wall" and other domestic and international large-scale game film and television project visual art development and production.</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> workers </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> our customers </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> sports event </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> annual </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 We Do->! <div class="wedo"> <div class="wrap"> <div class="title wow bounceInUp">What we do.</div> <div class="text wow slideInDown"> <span class="ccf0f32 f18">ACG field visual art outsourcing solution expert</span> <span >We provide 2D, 3D and next-generation game art outsourcing services, 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" />handheld game </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" />web browser </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-to-end game </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 and television </div> </a> </div> <div class="text-list wow bounceInDown"> <ul> <li> <a href="###">Character design</a> <a href="###">Scenario design</a> <a href="###">UI design</a> </li> <li> <a href="###">Portrait Drawing</a> <a href="###">Props Painting</a> <a href="###">Icon Drawing</a> </li> <li> <a href="###">Maxxuan (brand)</a> <a href="###">CARD DRAWING</a> <a href="###">2D scene integration</a> </li> <li> <a href="###">3DMAX character model</a> <a href="###">3DMAX Scene Model</a> <a href="###">Next Generation Models, Mapping</a> </li> <li> <a href="###">3DMAX animation</a> <a href="###">3DMAX effects</a> <a href="###">3 to 2 drawing</a> </li> </ul> </div> </div> </div> <!--footer--> <div class="footer"> <img src="img/foot_logo.png" /> </div> </body> <script src="js/" type="text/javascript" charset="utf-8" ></script> <script src="js/" type="text/javascript" charset="utf-8" ></script> <script type="text/javascript" src="js/.2."></script> <script src="js/" type="text/javascript" charset="utf-8"></script> <script src="js/" type="text/javascript" charset="utf-8" ></script> <script type="text/javascript" src="js/"></script> <script type="text/javascript"> //Multiple image 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 effects new WOW().init(); </script> </html>