HTML5系列代码:个人网站-列表

    技术2025-10-23  17

    <!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!--font-family--> <link href="programb" rel="stylesheet"> <link href="programb" rel="stylesheet"> <link href="programb" rel="stylesheet"> <!-- TITLE OF SITE --> <title></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://programb.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"> </head> <body> <!--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 ><a href="team.html">Team</a></li> <li class="active"><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 blog-part"> <div class="container"> <div class="about-part-details text-center"> <h2>blog</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="blog.html">blog</a></li> </ol><!--/.breadcrumb--> </div><!--/.container--> </div><!--/.breadcrumbs--> </div><!--/.about-part-content--> </div><!--/.about-part-details--> </div><!--/.container--> </section><!--/.about-part--> <!--about-part end--> <!--nwes start --> <section class="news"> <div class="container"> <div class="news-details"> <div class="section-header text-center"> <h2>our latest news</h2> <p> Pallamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div><!--/.section-header--> <div class="news-card"> <div class="row"> <div class="col-md-8"> <div class="blog-left"> <div class="col-sm-6"> <div class="single-news-box news-mb-20"> <div class="news-box-bg"> <img src="assets/images/blog/bl2.jpg" alt="blog image"> <div class="isotope-overlay"> <a href="blog_single.html"> <span class="lnr lnr-link"></span> </a> </div> </div><!--/.team-box-bg--> <div class="news-box-inner"> <h3> <a href="blog_single.html"> The Pros and Cons of Starting an Online Consulting Business </a> </h3> <p class="news-meta"> Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span> </p> <!-- <a href="#" class="learn-btn"> learn more </a> --> </div><!--/.news-box-inner--> </div><!--/.single-news-box--> <div class="single-news-box news-mb-20"> <div class="news-box-bg"> <img src="assets/images/blog/bl1.jpg" alt="blog image"> <div class="isotope-overlay"> <a href="blog_single.html"> <span class="lnr lnr-link"></span> </a> </div> </div><!--/.team-box-bg--> <div class="news-box-inner"> <h3> <a href="blog_single.html"> The Pros and Cons of Starting an Online Consulting Business </a> </h3> <p class="news-meta"> Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span> </p> <!-- <a href="#" class="learn-btn"> learn more </a> --> </div><!--/.news-box-inner--> </div><!--/.single-news-box--> <div class="single-news-box news-mb-20"> <div class="news-box-bg"> <img src="assets/images/blog/bl4.jpg" alt="blog image"> <div class="isotope-overlay"> <a href="https://www.programb.com" class="vedio-play-icon mfp-iframe"> <img src="assets/images/blog/play-icon.png" alt="play-icon"> </a> </div> </div><!--/.news-box-bg--> <div class="news-box-inner"> <h3> <a href="#"> The Pros and Cons of Starting an Online Consulting Business </a> </h3> <p class="news-meta"> Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span> </p> <!-- <a href="#" class="learn-btn"> learn more </a> --> </div><!--/.news-box-inner--> </div><!--/.single-news-box--> </div><!--.col--> <div class=" col-sm-6"> <div class="single-news-box news-mb-20"> <div class="news-box-bg"> <img src="assets/images/blog/bl3.jpg" alt="blog image"> <div class="isotope-overlay"> <a href="blog_single.html"> <span class="lnr lnr-link"></span> </a> </div> </div><!--/.team-box-bg--> <div class="news-box-inner"> <h3> <a href="blog_single.html"> The Pros and Cons of Starting an Online Consulting Business </a> </h3> <p class="news-meta"> Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span> </p> <!-- <a href="#" class="learn-btn"> learn more </a> --> </div><!--/.news-box-inner--> </div><!--/.single-news-box--> <div class="single-news-box news-mb-20"> <div class="news-box-bg"> <img src="assets/images/blog/bl5.jpg" alt="blog image"> <div class="isotope-overlay"> <a href="blog_single.html"> <span class="lnr lnr-link"></span> </a> </div> </div><!--/.team-box-bg--> <div class="news-box-inner"> <h3> <a href="blog_single.html"> The Pros and Cons of Starting an Online Consulting Business </a> </h3> <p class="news-meta"> Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span> </p> <!-- <a href="#" class="learn-btn"> learn more </a> --> </div><!--/.news-box-inner--> </div><!--/.single-news-box--> <div class="single-news-box news-mb-20"> <div class="news-box-bg"> <img src="assets/images/blog/bl6.jpg" alt="blog image"> <div class="isotope-overlay"> <a href="blog_single.html"> <span class="lnr lnr-link"></span> </a> </div> </div><!--/.team-box-bg--> <div class="news-box-inner"> <h3> <a href="blog_single.html"> The Pros and Cons of Starting an Online Consulting Business </a> </h3> <p class="news-meta"> Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span> </p> <!-- <a href="#" class="learn-btn"> learn more </a> --> </div><!--/.news-box-inner--> </div><!--/.single-news-box--> </div><!--.col--> <div class="pagination-part text-center"> <ul class="pagination"> <li class="active"><a href="#">1 <span class="sr-only">(current</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#"> Next <span class="fa fa-angle-right"> </span> </a> </li> <li> <a href="#" aria-label="Next"> </a> </li> </ul> </div><!--/.pagination-part(&raquo;)--> </div><!--/.blog-left--> </div><!--/.col--> <div class="col-md-4"> <div class="blog-right"> <div class="blogs-widget"> <form> <input type="text" class="form-control" placeholder="Search"> </form><!--/.form--> <div class="blog-search-icon"> <a href="#"> <span class="lnr lnr-magnifier"> </span> </a> </div><!--/.blog-search-icon--> </div><!--/.blog-widget--> <div class="blogs-widget"> <h2>categories</h2> <div class="blog-categories-list"> <ul> <li><a href="#">all</a></li> <li><a href="#">busisness</a></li> <li><a href="#">consultency</a></li> <li><a href="#">corporate</a></li> <li><a href="#">politics</a></li> <li><a href="#">marketing</a></li> <li><a href="#">lifestyle</a></li> </ul> </div><!--/.blog-categories-list--> </div><!--/.blog-widget--> <div class="blogs-widget"> <h2>related news</h2> <div class="blog-related-news"> <div class="bl-txt wow fadeInUp" data-wow-duration=".7s" data-wow-delay=".7s"> <div class="bl-img"> <a href="#"> <img src="assets/images/blog/rp1.jpg" alt="image" /> </a> </div><!--/.bl-img--> <p> <a href="#"> CFOs focused on retaining key talent </a> <span>25th Feb, 2017</span> </p> </div><!--/.bl-txt--> <div class="bl-txt"> <div class="bl-img"> <a href="#"> <img src="assets/images/blog/rp2.jpg" alt="image" /> </a> </div><!--/.bl-img--> <p> <a href="#"> Accenture acquires for the undisclosed sum </a> <span>25th Feb, 2017</span> </p> </div><!--/.bl-txt--> <div class="bl-txt"> <div class="bl-img"> <a href="#"> <img src="assets/images/blog/rp3.jpg" alt="image" /> </a> </div><!--/.bl-img--> <p> <a href="#"> Startup investments drop on venturing rises </a> <span>25th Feb, 2017</span> </p> </div><!--/.bl-txt--> </div><!--/.blog-related-news--> </div><!--/.blog-widget--> <div class="blogs-widget"> <h2>Archives</h2> <div class="blog-categories-list"> <ul> <li> <a href="#"> <i class="fa fa-angle-right" aria-hidden="true"> </i> November 2017 </a> </li> <li> <a href="#"> <i class="fa fa-angle-right" aria-hidden="true"> </i> October 2017 </a> </li> <li> <a href="#"> <i class="fa fa-angle-right" aria-hidden="true"> </i> September 2017 </a> </li> <li> <a href="#"> <i class="fa fa-angle-right" aria-hidden="true"> </i> August 2017 </a> </li> <li> <a href="#"> <i class="fa fa-angle-right" aria-hidden="true"> </i> July 2017 </a> </li> <li> <a href="#"> <i class="fa fa-angle-right" aria-hidden="true"> </i> June 2017 </a> </li> </ul> </div> </div><!--/.blog-widget--> <div class="blogs-widget "> <h2>popular tags</h2> <div class="blog-tags"> <button type="button" class="btn btn-default">busisness</button> <button type="button" class="btn btn-default">consultency</button> <button type="button" class="btn btn-default">market</button><br /> <button type="button" class="btn btn-default">sales</button> <button type="button" class="btn btn-default">corporate</button> <button type="button" class="btn btn-default">politics</button> </div><!--/.blog-tags--> </div><!--/.blog-widget--> </div><!--/.blog-right--> </div><!--/.col--> </div><!--/.row--> </div><!--/.news-card--> </div><!--/news-details--> </div><!--/.container--> </section><!--/news--> <!--news 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://programb.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://programb.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.014, SQL: 9