HTML5系列代码:个人网站-团队

    技术2025-12-06  15

    <!doctype html> <html class="no-js" lang="en"> <head> <!-- programb --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--font-family--> <link href="programb" rel="stylesheet"> <link href="programb" rel="stylesheet"> <link href="programb" rel="stylesheet"> <!-- TITLE OF SITE --> <title>team</title> <!-- for title img --> <link rel="shortcut icon" type="image/icon" href="assets/images/logo/favicon.png"/> <!--font-awesome.min.css--> <link rel="stylesheet" href="assets/css/font-awesome.min.css"> <!--linear icon css--> <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> <!--animate.css--> <link rel="stylesheet" href="assets/css/animate.css"> <!--hover.css--> <link rel="stylesheet" href="assets/css/hover-min.css"> <!--owl.carousel.css--> <link rel="stylesheet" href="assets/css/owl.carousel.min.css"> <link href="assets/css/owl.theme.default.min.css" rel="stylesheet"/> <!--vedio player css--> <link rel="stylesheet" href="assets/css/magnific-popup.css"> <!--bootstrap.min.css--> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <!-- bootsnav --> <link href="assets/css/bootsnav.css" rel="stylesheet"/> <!--style.css--> <link rel="stylesheet" href="assets/css/style.css"> <!--responsive.css--> <link rel="stylesheet" href="assets/css/responsive.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!--[if lte IE 9]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> <![endif]--> <!--header start--> <section class="header"> <div class="container"> <div class="header-left"> <ul class="pull-left"> <li> <a href="#"> <i class="fa fa-phone" aria-hidden="true"></i> +992 563 542 </a> </li><!--/li--> <li> <a href="#"> <i class="fa fa-envelope" aria-hidden="true"></i>info@mail.com </a> </li><!--/li--> </ul><!--/ul--> </div><!--/.header-left --> <div class="header-right pull-right"> <ul> <li class="reg"> <a href="#" data-toggle="modal" data-target=".bs-example-modal-sm"> Register </a> / <a href="#" data-toggle="modal" data-target=".bs-example-modal-lg"> Log in </a> <!-- small modal --> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> <i class="fa fa-close"></i> </span> </button> <h4 class="modal-title" id="mySmallModalLabel"> Sign In </h4> <form class="sm-frm" style="padding:25px"> <label>Name :</label> <input type="text" class="form-control" placeholder="Enter Email"> <label>Passoward :</label> <input type="text" class="form-control" placeholder="Enter Passoward"> <label><input type="checkbox" name="personality"> Remenber Me</label> <button type="button" class="btn btn-default pull-right">Submit</button> </form> </div> </div> </div> </div> <!-- large modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> <i class="fa fa-close"></i> </span> </button> <h4 class="modal-title" id="myLargeModalLabel">Register</h4> <form class="lg-frm" style="padding:25px"> <label>Name :</label> <input type="text" class="form-control" placeholder="Enter Name"> <label>Email :</label> <input type="text" class="form-control" placeholder="Enter Email"> <label>Passoward :</label> <input type="text" class="form-control" placeholder="Enter Passoward"> <button type="button" class="btn btn-default pull-right">Submit</button> </form> </div> </div> </div> </div> </li><!--/li --> <li> <div class="social-icon"> <ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> </ul><!--/.ul --> </div><!--/.social-icon --> </li><!--/li --> </ul><!--/ul --> </div><!--/.header-right --> </div><!--/.container --> </section><!--/.header--> <!--header end--> <!--menu start--> <section id="menu"> <div class="container"> <div class="menubar"> <nav class="navbar navbar-default"> <!-- 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> <a class="navbar-brand" href="index.html"> <img src="assets/images/logo/logo.png" alt="logo"> </a> </div><!--/.navbar-header --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li ><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li ><a href="service.html">Service</a></li> <li ><a href="project.html">Project</a></li> <li class="active"><a href="team.html">Team</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> <li> <a href="#"> <span class="lnr lnr-cart"></span> </a> </li> <li class="search"> <form action=""> <input type="text" name="search" placeholder="Search...."> <a href="#"> <span class="lnr lnr-magnifier"></span> </a> </form> </li> </ul><!-- / ul --> </div><!-- /.navbar-collapse --> </nav><!--/nav --> </div><!--/.menubar --> </div><!-- /.container --> </section><!--/#menu--> <!--menu end--> <!--about-part start--> <section class="about-part team-part"> <div class="container"> <div class="about-part-details text-center"> <h2>team</h2> <div class="about-part-content "> <div class="breadcrumbs"> <div class="container"> <ol class="breadcrumb"> <li><a href="index.html">home</a><span>//</span></li> <li><a href="team.html">team</a></li> </ol><!--/.breadcrumb--> </div><!--/.container--> </div><!--/.breadcrumbs--> </div><!--/.about-part-content--> </div><!--/.about-part-details--> </div><!--/.container--> </section><!--/.about-part--> <!--about-part end--> <!--team start --> <section id="team" class="team team-main"> <div class="container"> <div class="team-details"> <div class="project-header team-header team-head text-center"> <h2>Our expert team</h2> <p> Pallamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div><!--/.project-header--> <div class="team-card"> <div class="container"> <div class="row"> <div class="owl-carousel team-carousel"> <div class="col-sm-3 col-xs-12"> <div class="single-team-box single-team-card team-box-bg-1"> <div class="team-box-inner"> <h3>tom hanks</h3> <p class="team-meta">Founder & CEO</p> <a href="team.html" class="learn-btn"> learn more </a> </div><!--/.team-box-inner--> </div><!--/.single-team-box--> </div><!--.col--> <div class="col-sm-3 col-xs-12"> <div class="single-team-box single-team-card team-box-bg-2"> <div class="team-box-inner"> <h3>alex browne</h3> <p class="team-meta"> Director, Management & Research </p> <a href="team.html" class="learn-btn"> learn more </a> </div><!--/.team-box-inner--> </div><!--/.single-team-box--> </div><!--.col--> <div class="col-sm-3 col-xs-12"> <div class="single-team-box single-team-card team-box-bg-3"> <div class="team-box-inner"> <h3>darren j. stevens</h3> <p class="team-meta"> Director, Finance Solution </p> <a href="team.html" class="learn-btn"> learn more </a> </div><!--/.team-box-inner--> </div><!--/.single-team-box--> </div><!--.col--> <div class="col-sm-3 col-xs-12"> <div class="single-team-box single-team-card team-box-bg-4"> <div class="team-box-inner"> <h3>kevin thomson</h3> <p class="team-meta"> Head, Legal Advising </p> <a href="team.html" class="learn-btn"> learn more </a> </div><!--/.team-box-inner--> </div><!--/.single-team-box--> </div><!--.col--> </div><!--/.team-carousel--> </div><!--/.row--> </div><!--/.container--> </div><!--/.team-card--> <div class="team-card team-mrt-70"> <div class="container"> <div class="row"> <div class="owl-carousel team-carousel"> <div class="col-sm-3 col-xs-12"> <div class="single-team-box single-team-card team-box-bg-4"> <div class="team-box-inner"> <h3>tom hanks</h3> <p class="team-meta">Founder & CEO</p> <a href="team.html" class="learn-btn"> learn more </a> </div><!--/.team-box-inner--> </div><!--/.single-team-box--> </div><!--.col--> <div class="col-sm-3 col-xs-12"> <div class="single-team-box single-team-card team-box-bg-3"> <div class="team-box-inner"> <h3>alex browne</h3> <p class="team-meta"> Director, Management & Research </p> <a href="team.html" class="learn-btn"> learn more </a> </div><!--/.team-box-inner--> </div><!--/.single-team-box--> </div><!--.col--> <div class="col-sm-3 col-xs-12"> <div class="single-team-box single-team-card team-box-bg-2"> <div class="team-box-inner"> <h3>darren j. stevens</h3> <p class="team-meta"> Director, Finance Solution </p> <a href="team.html" class="learn-btn"> learn more </a> </div><!--/.team-box-inner--> </div><!--/.single-team-box--> </div><!--.col--> <div class="col-sm-3 col-xs-12"> <div class="single-team-box single-team-card team-box-bg-1"> <div class="team-box-inner"> <h3>kevin thomson</h3> <p class="team-meta"> Head, Legal Advising </p> <a href="team.html" class="learn-btn"> learn more </a> </div><!--/.team-box-inner--> </div><!--/.single-team-box--> </div><!--.col--> </div><!--/.team-carousel--> </div><!--/.row--> </div><!--/.container--> </div><!--/.team-card--> </div><!--/.team-details--> </div><!--/.container--> </section><!--/.team--> <!--team end--> <!-- new-project start --> <section class="new-project"> <div class="container"> <div class="new-project-details"> <div class="row"> <div class="col-md-10 col-sm-8"> <div class="single-new-project"> <h3> Want to start a new project with us? Let’s Start! </h3> </div><!-- /.single-new-project--> </div><!-- /.col--> <div class="col-md-2 col-sm-4"> <div class="single-new-project"> <a href="#" class="slide-btn"> start now </a> </div><!-- /.single-new-project--> </div><!-- /.col--> </div><!-- /.row--> </div><!-- /.new-project-details--> </div><!-- /.container--> </section><!-- /.new-project--> <!-- new-project end --> <!--hm-footer start--> <section class="hm-footer"> <div class="container"> <div class="hm-footer-details"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="hm-footer-widget"> <div class="hm-foot-title "> <div class="logo"> <a href="index.html"> <img src="assets/images/logo/logo.png" alt="logo" /> </a> </div><!-- /.logo--> </div><!--/.hm-foot-title--> <div class="hm-foot-para"> <p> Lorem ipsum dolor sit amt conetur adcing elit. Sed do eiusod tempor utslr. Ut laboris nisi ut aute irure dolor in rein velit esse. </p> </div><!--/.hm-foot-para--> <div class="hm-foot-icon"> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li><!--/li--> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li><!--/li--> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li><!--/li--> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li><!--/li--> </ul><!--/ul--> </div><!--/.hm-foot-icon--> </div><!--/.hm-footer-widget--> </div><!--/.col--> <div class=" col-md-2 col-sm-6 col-xs-12"> <div class="hm-footer-widget"> <div class="hm-foot-title"> <h4>Useful Links</h4> </div><!--/.hm-foot-title--> <div class="footer-menu "> <ul class=""> <li><a href="index.html" >Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Service</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div><!-- /.footer-menu--> </div><!--/.hm-footer-widget--> </div><!--/.col--> <div class=" col-md-3 col-sm-6 col-xs-12"> <div class="hm-footer-widget"> <div class="hm-foot-title"> <h4>from the news</h4> </div><!--/.hm-foot-title--> <div class="hm-para-news"> <a href="blog_single.html"> The Pros and Cons of Starting an Online Business. </a> <span>12th June 2017</span> </div><!--/.hm-para-news--> <div class="footer-line"> <div class="border-bottom"></div> </div> <div class="hm-para-news"> <a href="blog_single.html"> The Pros and Cons of Starting an Online Business. </a> <span>12th June 2017</span> </div><!--/.hm-para-news--> </div><!--/.hm-footer-widget--> </div><!--/.col--> <div class=" col-md-3 col-sm-6 col-xs-12"> <div class="hm-footer-widget"> <div class="hm-foot-title"> <h4> Our Newsletter</h4> </div><!--/.hm-foot-title--> <div class="hm-foot-para"> <p class="para-news"> Subscribe to our newsletter to get the latest News and offers.. </p> </div><!--/.hm-foot-para--> <div class="hm-foot-email"> <div class="foot-email-box"> <input type="text" class="form-control" placeholder="Email Address"> </div><!--/.foot-email-box--> <div class="foot-email-subscribe"> <button type="button" >go</button> </div><!--/.foot-email-icon--> </div><!--/.hm-foot-email--> </div><!--/.hm-footer-widget--> </div><!--/.col--> </div><!--/.row--> </div><!--/.hm-footer-details--> </div><!--/.container--> </section><!--/.hm-footer-details--> <!--hm-footer end--> <!-- footer-copyright start --> <footer class="footer-copyright"> <div class="container"> <div class="row"> <div class="col-sm-7"> <div class="foot-copyright pull-left"> <p> Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p> </div><!--/.foot-copyright--> </div><!--/.col--> <div class="col-sm-5"> <div class="foot-menu pull-right "> <ul> <li ><a href="#">legal</a></li> <li ><a href="#">sitemap</a></li> <li ><a href="#">privacy policy</a></li> </ul> </div><!-- /.foot-menu--> </div><!--/.col--> </div><!--/.row--> <div id="scroll-Top"> <i class="fa fa-angle-double-up return-to-top" id="scroll-top" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i> </div><!--/.scroll-Top--> </div><!-- /.container--> </footer><!-- /.footer-copyright--> <!-- footer-copyright end --> <!-- jaquery link --> <script src="assets/js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!--modernizr.min.js--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <!--bootstrap.min.js--> <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> <!-- bootsnav js --> <script src="assets/js/bootsnav.js"></script> <!-- for manu --> <script src="assets/js/jquery.hc-sticky.min.js" type="text/javascript"></script> <!-- vedio player js --> <script src="assets/js/jquery.magnific-popup.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> <!--owl.carousel.js--> <script type="text/javascript" src="assets/js/owl.carousel.min.js"></script> <!-- counter js --> <script src="assets/js/jquery.counterup.min.js"></script> <script src="assets/js/waypoints.min.js"></script> <!--Custom JS--> <script type="text/javascript" src="assets/js/jak-menusearch.js"></script> <script type="text/javascript" src="assets/js/custom.js"></script> </body> </html>

    Processed: 0.009, SQL: 9