最新消息:20210917 已从crifan.com换到crifan.org

【记录】基于Html5模版搭建公司主页官网

工作和技术 crifan 1941浏览 0评论

已经通过:

【整理】用什么技术实现公司网站官网首页H5页面

去找到了大概几个可以用来弄公司网站 官网 主页的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>service@naturling.com</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 &copy; 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"];

}

// EMAIL

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 = "xxx@xxx.com";

// $Subject = "New Message Received";

// $EmailTo = "xxx@xxx.com";

$EmailTo = "xxx@xxx.com";

$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模版搭建公司主页官网

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
90 queries in 0.250 seconds, using 23.52MB memory