前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML炫酷PJAX引导单页

HTML炫酷PJAX引导单页

作者头像
AlexTao
发布2019-12-13 14:21:02
3.5K0
发布2019-12-13 14:21:02
举报
文章被收录于专栏:钻芒博客钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客
HTML炫酷PJAX引导单页-钻芒博客

官方演示: https://dwq.im 本地演示版本: https://www.weidro.cn 来源: https://dwq.im

源码奉上

代码语言:javascript
复制
<!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:cpol@qq.com" title="Send an email" class="icon fa-envelope-o11">cpol@qq.com</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.

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-03-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 源码奉上
相关产品与服务
短信
腾讯云短信(Short Message Service,SMS)可为广大企业级用户提供稳定可靠,安全合规的短信触达服务。用户可快速接入,调用 API / SDK 或者通过控制台即可发送,支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达,99%到达率;国际/港澳台短信覆盖全球200+国家/地区,全球多服务站点,稳定可靠。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档