HTML炫酷PJAX引导单页
- 2019 年 12 月 13 日
- 筆記
官方演示： https://dwq.im 本地演示版本: https://www.weidro.cn 来源： https://dwq.im
源码奉上
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>钻芒控i - ZMKI.CN</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://a-oss.zmki.cn/img/5c86fcfc8fe5b.css" rel="stylesheet" type="text/css" media="screen and (min-width:769px)"> <link rel="stylesheet" href="https://cdn.webfont.youziku.com/webfonts/nomal/128084/47844/5c83cf49f629d806a46ebcba.css"> <link rel="stylesheet" href="https://cdn.webfont.youziku.com/webfonts/nomal/128084/28621/5c844ee0f629d804346ff9ed.css"> <link rel="stylesheet" href="https://a-oss.zmki.cn/img/5c864c1c53b90.css"> <link href='https://cdn.webfont.youziku.com/webfonts/nomal/128124/28595/5c86fa42f629d80398467484.css' rel='stylesheet' type='text/css' /> <link href='https://cdn.webfont.youziku.com/webfonts/nomal/128124/41243/5c86fa46f629d80398467485.css' rel='stylesheet' type='text/css' /> <link href='https://cdn.webfont.youziku.com/webfonts/nomal/128124/28595/5c86fa42f629d80398467484.css' rel='stylesheet' type='text/css' /> <!--[if lt IE 9]> <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="shortcut icon" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico"> <link rel="apple-touch-icon" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico"> <link rel="apple-touch-icon" sizes="72x72" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico"> <link rel="apple-touch-icon" sizes="114x114" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico"> <link rel="bookmark" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico"> <link rel="icon" href="https://a-oss.zmki.cn/img/5c864cc07d831.ico" type="image/x-icon"> </head> <body class="start" id="body"> <div id="awd-site-wrap" class="bg bg-home"> <div id="bg"> <div id="overlay"> <div class="awd-site-bg bg-home active" style="left:735px;top:15px"> </div> <div class="awd-site-bg bg-subscribe" style="left:816px;top:15px"> </div> <div class="awd-site-bg bg-about"> </div> <div class="awd-site-bg bg-contact"> </div> <div class="awd-site-bg bg-services"> </div> </div> <canvas id="awd-site-canvas" width="1203" height="890"></canvas> </div> <header id="awd-site-header"> <div id="awd-site-logo" class="animated fadeInDown visible" data-animation="fadeInDown" data-animation-delay="500"> <h1 style="font-family:'ActionJackson'; font-size: 42px;margin-top: 6px;"><a class="go-slide" data-slide="home"><span>zmki</span><span></span><span></span></a></h1> </div> <button class="menu-toggle animated fadeInDown visible" data-animation="fadeInDown" data-animation-delay="500" data-role="toggle"><span></span><span></span><span></span></button><nav id="awd-site-nav" class="navigation animated fadeInDown visible" data-animation="fadeInDown" data-animation-delay="500"> <div class="nav-container"> <ul> <li><a href="https://www.zmki.cn/" data-slide="home" class="active">首页</a></li> <li><a href="https://www.zmki.cn/" data-slide="subscribe" class="">订阅</a></li> <li><a href="https://www.zmki.cn/" data-slide="about">关于</a></li> <li><a href="https://www.zmki.cn/" data-slide="services">服务</a></li> <li><a href="https://www.zmki.cn/" data-slide="contact">联系我们</a></li> </ul> </div> <p class="mbbq" id="zt" style="margin-top: -100px;font-family:'Jackey_HandWrite';font-size: 32px;">© 2019 ZMKI.CN/p> </nav></header><main id="awd-site-main"><section id="awd-site-content"> <div class="sections-block ps-container" data-ps-id="0048d35c-c355-f2d9-50fd-ee4ed9e0992c"> <div class="slides"> <div class="slides-wrap"> <div class="slide-item active" data-slide-id="home"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="slide-content"> <div class="row"> <div class="col-lg-6 col-md-6 svm"> </div> <div class="col-lg-5 col-lg-offset-1 col-md-6 svm"> <div class="section-info text-right"> <h2 class="section-title text-default animated fadeIn visible" data-animation="fadeIn" data-animation-delay="50">Hey Guys!<br> 我们即将上线啦...</h2> <p class="animated fadeIn visible" data-animation="fadeIn" data-animation-delay="55"> 我们的网站正在建设。<br> 它将是非常棒的网站。 </p> <a href="https://www.zmki.cn/" class="btn go-slide animated fadeIn visible" data-animation="fadeIn" data-animation-delay="60" data-slide="about">更多资料</a> <a href="https://www.zmki.cn/gaunyvliuyanban" class="btn btn-inverse go-slide animated fadeIn visible" data-animation="fadeIn" data-animation-delay="60" data-slide="contact">联系我们!</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="slide-item" data-slide-id="subscribe"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="slide-content"> <div class="row"> <div class="col-lg-5 col-lg-offset-2 col-md-6 col-md-offset-1 col-md-push-5 svm"> <div class="section-info text-right"> <h2 class="section-title text-default animated" data-animation="fadeIn" data-animation-delay="60">订阅<br> 我们的通讯</h2> <p class="animated" data-animation="fadeIn" data-animation-delay="100"> 加入我们的邮件通讯. <strong>它的快速和容易.</strong><br> 你将成为第一个知道<br> 我们项目启动的人. </p> </div> </div> <div class="col-md-5 col-md-pull-7 svm"> <div class="section-info text-left"> <p> <strong>别忘了</strong>点击确认电子邮件,您将会收到以<strong>激活</strong>您的订阅。 </p> <div class="row"> <div class="col-md-12 col-md-offset-0 col-sm-8 col-sm-offset-2"> <form id="subscribe-form" class="subscribe-form" method="post" novalidate> <input type="email" id="subscribe-email" name="EMAIL" placeholder="请留下你的邮箱地址"><button type="submit" id="subscribe-submit" class="btn btn-inverse"><span>订阅</span><i class="fa fa-envelope"></i></button> <div class="form-notice subscribe-notice"> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="slide-item" data-slide-id="about"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="slide-content"> <div class="row"> <div class="col-lg-5 col-lg-offset-2 col-md-6 col-md-offset-1 col-md-push-5 svm"> <div class="section-info text-right"> <h2 class="section-title text-default animated" data-animation="fadeIn" data-animation-delay="60">关于我们</h2> <p class="animated" data-animation="fadeIn" data-animation-delay="100"> 公司致力于为客户提供专业的电信增值服务，帮助企业便捷接入验证码短信、短信通知、语音验证码、国际验证码、短信公众号、短信营销、彩信营销、数字奖励营销、手机话费充值、手机流量充值等电信增值服务，满足企业运营、营销推广多场景需要。 </p> </div> </div> <div class="col-md-5 col-md-pull-7 svm"> <div class="section-info text-left"> <div class="features-list"> <div class="featured-item animated" data-animation="fadeIn" data-animation-delay="150"> <div class="featured-text"> <h3><i class="fa fa-rocket"></i> 安全高效</h3> <p> 多年的技术积累与创新，树立在该领域的标杆地位。业务平台及软件全部自主研发，且都通过了国家知识产权认定。 </p> </div> </div> <div class="featured-item"> <div class="featured-item animated" data-animation="fadeIn" data-animation-delay="150"> <div class="featured-text"> <h3><i class="icon-paint"></i> 高性能、高并发</h3> <p> 在互联网及通讯行业有十几年的技术研发和运营维护经验，掌握高性能、高并发、大数据处理技术。 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="slide-item" data-slide-id="services"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="slide-content"> <div class="row"> <div class="col-lg-5 col-lg-offset-2 col-md-6 col-md-offset-1 col-md-push-5 svm"> <div class="section-info text-right"> <h2 class="section-title text-default animated" data-animation="fadeIn">我们的服务</h2> <p class="animated" data-animation="fadeIn" data-animation-delay="100"> 若您的账号未经过六个鸡实名认证，请根据提示完成认证。若您的账号已完成认证，请直接填写入驻信息。通过六个鸡个人认证的用户入驻完成后成为个人开发者，通过六个鸡企业认证的用户入驻完成后成为企业开发者。 </p> </div> </div> <div class="col-md-5 col-md-pull-7 svm"> <div class="section-info text-left"> <div class="service animated" data-animation="fadeIn" data-animation-delay="150"> <h3>短信通知</h3> <p> 3秒可达，三网合一专属通道，与工信部携号转网平台实时互联.99%到达率，短信结合语音验证，服务100%,专线机房，支持大容量、高并发、电信级运维保障，实时监控自动切换 </p> </div> <div class="service animated" data-animation="fadeIn" data-animation-delay="150"> <h3>语音通知</h3> <p> 灵活，支持带入变量，动态语音内容灵活支持业务场景；安全，语音验证难窃取，安全有保障；可靠，支持大容量，高并发，稳定可靠 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="slide-item" data-slide-id="contact"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="slide-content"> <div class="row"> <div class="col-lg-5 col-lg-offset-1 col-md-6 col-md-push-6 svm"> <div class="section-info text-right"> <h2 class="section-title text-default animated" data-animation="fadeIn">联系我们</h2> <div class="contact-info"> <p class="contact-item"> <i class="fa fa-phone"></i> 手机(PHONE)：1388888888 </p> <p class="contact-item"> <i class="fa fa-envelope"></i>邮箱(Email)：<a href="mailto:[email protected]" title="Send an email" class="icon fa-envelope-o11">[email protected]</a> </p> <p class="contact-item"> <i class="fa fa-map-marker"></i> 中国●河南 </p> </div> <p class="animated" data-animation="fadeIn" data-animation-delay="100"> </p> <h3>通信能力创新 让通讯更简单</h3> <h5>优质便捷的云通信服务平台</h5> <p> </p> </div> </div> <div class="col-lg-6 col-md-6 col-md-pull-6 svm"> <div class="section-info text-left" id="zt"> <form id="contact-form" class="contact-form" id="zt"> <div class="row"> <div class="col-lg-4 col-md-6 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200" id="zt"> <input type="text" name="contact-name" placeholder="真实姓名" class="contact-form-name required" id="zt"> </div> <div class="col-lg-4 col-md-6 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200"> <input type="email" name="contact-email" placeholder="电子邮箱" class="contact-form-email required"> </div> <div class="col-lg-4 col-md-12 animated" data-animation="fadeIn" data-animation-delay="200"> <input type="text" name="contact-subject" placeholder="从事行业" class="contact-form-subject required"> </div> <div class="col-md-12 animated" data-animation="fadeIn" data-animation-delay="150"> <textarea name="contact-message" placeholder="说两句吧..." class="contact-form-message required" rows="4"></textarea><button class="btn btn-block" type="submit" id="submit" name="submit"><span>提交留言</span><i class="fa fa-send"></i></button> </div> </div> <div class="contact-notice"> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="ps-scrollbar-x-rail" style="left:0;bottom:3px"> <div class="ps-scrollbar-x" style="left:0;width:0"> </div> </div> <div class="ps-scrollbar-y-rail" style="top:0;right:3px"> <div class="ps-scrollbar-y" style="top:0;height:0"> </div> </div> </div> </section></main><footer id="awd-site-footer"> <div class="copyright animated fadeInUp visible" data-animation="fadeInUp" data-animation-delay="500"> <p class="pcbq" id="zt" style="font-family:'Jackey_HandWrite';font-size: 32px;">© 2019 ZMKI.CN</p> </div> </footer> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://a-oss.zmki.cn/img/5c864e42e2a64.js"></script> <script type="text/javascript" src="https://a-oss.zmki.cn/img/5c864e599a7ea.js"></script> <script type="text/javascript" src="https://a-oss.zmki.cn/img/5c864e7053ea4.js"></script> </div> </body> </html>
End.
