已经通过：
去找到了大概几个可以用来弄公司网站 官网 主页的html模版 H5模版了
现在就可以去弄试试了。
暂定去用：
Mate – Parallax Website Template
去下载：
Mate – Free One Page Template Download and Review
最后用：
<!DOCTYPE html>
<html lang="en">
<head>
<!– Required meta tags –>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="Naturling, 睿小麟, 教育科技, AI, 人工智能">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="author" content="Naturling.com">
<title>Naturling 教育科技</title>
<!– Bootstrap CSS –>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/line-icons.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/slicknav.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!– Header Section Start –>
<header id="hero-area" data-stellar-background-ratio="0.5">
<!– Navbar Start –>
<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar-header">
<a href="index.html" class="navbar-brand"><img class="img-fulid" src="img/logo_709x620.jpg" width="60" height="52" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="lnr lnr-menu"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav mr-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link page-scroll" href="#hero-area">主页</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#company">公司</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#team">团队</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#product">产品</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">联系我们</a>
</li>
</ul>
</div>
</div>
<!– Mobile Menu Start –>
<ul class="mobile-menu">
<li>
<a class="page-scroll" href="#hero-area">主页</a>
</li>
<li>
<a class="page-scroll" href="#company">公司</a>
</li>
<li>
<a class="page-scroll" href="#team">团队</a>
</li>
<li >
<a class="page-scroll" href="#product">产品</a>
</li>
<li>
<a class="page-scroll" href="#contact">联系我们</a>
</li>
</ul>
<!– Mobile Menu End –>
</nav>
<!– Navbar End –>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-10">
<div class="contents text-center">
<h1 class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="0.3s">让语言学习回归本源</h1>
<p class="lead wow fadeIn" data-wow-duration="1000ms" data-wow-delay="400ms">让我们想想，在我们的孩童时期， 从牙牙学语到熟练地使用中文，这好像是世间最自然的事情， 没有人告诉我们什么是语法，什么是单词， 只要让我们处在这丰富的语言环境里， 我们就自然地获取了语言这样一门精妙无比的技能。</p>
</div>
</div>
</div>
</div>
</header>
<!– Header Section End –>
<!– Company Section Start –>
<section id="company" class="section">
<div class="container">
<div class="section-header">
<h2 class="section-title wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s">关于公司</h2>
<hr class="lines wow zoomIn" data-wow-delay="0.3s">
<!– <p class="section-subtitle wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s">NaturLing通过结合认知领域最前沿科研成果和人工智能领域最前沿技术，<br />
打造面向儿童的交互系统，为儿童创造自然的英语语言场景，<br />
以符合儿童认知的方法来帮助儿童学习英语，致力于提升幼儿英语学习效率。<br />
团队汇集多年海外科研背景的认知科学和人工智能科学家，<br />
从事英语教育行业多年的世界五百强高管，清华北大的少年天才，<br />
以及来自哈佛/斯坦福/洪堡/北大的顶级科学顾问</p> –>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="item-boxes wow fadeInDown" data-wow-delay="0.2s">
<div class="icon">
<i class="lnr lnr-pencil"></i>
</div>
<h4>人工智能+教育</h4>
<p>NaturLing通过结合认知领域最前沿科研成果和人工智能领域最前沿技术，
打造面向儿童的交互系统，为儿童创造自然的英语语言场景，</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item-boxes wow fadeInDown" data-wow-delay="0.8s">
<div class="icon">
<i class="lnr lnr-code"></i>
</div>
<h4>符合儿童认知</h4>
<p>以符合儿童认知的方法来帮助儿童学习英语，
致力于提升幼儿英语学习效率。</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item-boxes wow fadeInDown" data-wow-delay="1.2s">
<div class="icon">
<i class="lnr lnr-mustache"></i>
</div>
<h4>精英团队</h4>
<p>团队汇集多年海外科研背景的认知科学和人工智能科学家，
从事英语教育行业多年的世界五百强高管，清华北大的少年天才，
以及来自哈佛/斯坦福/洪堡/北大的顶级科学顾问</p>
</div>
</div>
</div>
</div>
</section>
<!– Services Section End –>
<!– Team section Start –>
<section id="team" class="section">
<div class="container">
<div class="section-header">
<h2 class="section-title">我们的团队</h2>
<hr class="lines">
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="single-team">
<img src="img/team/team1.png" alt="">
<div class="team-details">
<div class="team-inner">
<h4 class="team-title">张璐</h4>
<p>创始人 – 产品</p>
<p>德国洪堡大学认知和脑科学中心研究员，心理语言学博士，数十年语言认知研究经验</p>
</div>
</div>
</div>
</div>
…
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="single-team">
<img class="img-fulid" src="img/team/team4.jpg" alt="">
<div class="team-details">
<div class="team-inner">
<h4 class="team-title">期待您的加入</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!– Team section End –>
<!– Product Section –>
<section id="product" class="section">
<!– Container Starts –>
<div class="container">
<div class="section-header">
<h2 class="section-title">我们的产品：睿小麟儿童教育机器人</h2>
<hr class="lines">
<p class="section-subtitle">我们的英语教育机器人<b>睿小麟</b>可以将孩子在英语环境中的时间比率足足提升7倍，从而极大地降低孩子学习英语的经济成本和时间成本，并且显著增加学习效果。</p>
</div>
</div>
</section>
<!– Product Section End –>
<!– Contact Section Start –>
<section id="contact" class="section" data-stellar-background-ratio="-0.2">
<div class="contact-form">
<div class="container">
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="contact-us">
<h3>与我们联系</h3>
<h6>如果您已经迫不及待的想要使用我们的产品，欢迎加入<b>小麟club</b>~~~</h6>
<hr class="lines">
<div class="contact-address">
<p class="address">地址📍: <span>苏州工业园区星湖街328号创意产业园5栋A1F同程众创空间</span></p>
<p class="phone">电话📱: <span>0512-65201342</span></p>
<p class="email">邮箱📮: <span>[email protected]</span></p>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="contact-block">
<form id="contactForm">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="名字" required data-error="请输入你的名字">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" id="email" name="name" placeholder="邮箱" required data-error="请输入邮箱">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" id="message" placeholder="请填写你的想法、意见、建议等" rows="8" data-error="请填写你想说的话" required></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-button text-center">
<button class="btn btn-common" id="submit" type="submit">联系我们</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!– Contact Section End –>
<!– Footer Section Start –>
<footer>
<div class="container">
<div class="row">
<!– Footer Links –>
<div class="col-lg-6 col-sm-6 col-xs-12">
<ul class="footer-links">
<li>
<a href="#">主页</a>
</li>
<li>
<a href="#company">公司</a>
</li>
<li>
<a href="#team">团队</a>
</li>
<li>
<a href="#product">产品</a>
</li>
<li>
<a href="#contact">联系我们</a>
</li>
</ul>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="copyright">
<p>苏州睿小麟教育科技有限公司 All copyrights reserved © 2018</p>
</div>
</div>
</div>
</div>
</footer>
<!– Footer Section End –>
<!– Go To Top Link –>
<a href="#" class="back-to-top">
<i class="lnr lnr-arrow-up"></i>
</a>
<div id="loader">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!– jQuery first, then Tether, then Bootstrap JS. –>
<script src="js/jquery-min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.mixitup.js"></script>
<script src="js/nivo-lightbox.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.vide.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/form-validator.min.js"></script>
<script src="js/contact-form-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
和：
naturling.com/js/contact-form-script.js
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
// var msg_subject = $("#msg_subject").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
// data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message,
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
naturling.com/php/form-process.php
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// // MSG SUBJECT
// if (empty($_POST["msg_subject"])) {
// $errorMSG .= "Subject is required ";
// } else {
// $msg_subject = $_POST["msg_subject"];
// }
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
// $EmailTo = "x[email protected]";
// $Subject = "New Message Received";
// $EmailTo = "[email protected]";
$EmailTo = "[email protected]";
$Subject = $name . " " . $email . " " . "希望联系睿小麟";
// echo "errorMSG:" . $errorMSG . " Subject:" . $Subject."\r\n";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Subject: ";
// $Body .= $msg_subject;
$Body .= $Subject;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
$mailError = error_get_last()[‘message’];
echo "Send mail fail: " . $mailError;
// print_r(error_get_last());
} else {
echo $errorMSG;
}
}
?>
效果：
效果看起来还不错。
转载请注明：在路上 » 【记录】基于Html5模版搭建公司主页官网