本帖最后由 qbwww 于 2022-1-9 21:27 编辑
#申请原创# @21小跑堂 用Quark开发板做一个网站服务器
大家好，我是qbwww。
先看看效果图。
年前的时候呢，得到一个夸克（Quark）的开发板，此板是由稚晖君设计制作的。传说中的最小开发板。今天刚好有时间，我就来熟悉一下开发板。今天的目标呢，就是用这个开发板来做一个网站服务器。
先来看一下开发板，开发板的配置还是蛮高的。权志H3的CPU，512M的运行内存，16G的存储空间，支持WiFi和蓝牙。有两个USB A的接口，type-c接口用来供电。
好，下面我们开始制作镜像，我们先把系统镜像和烧写软件下载好。
下载地址：https://www.balena.io/etcher/，开发板资料：https://wiki.seeedstudio.com/cn/ ... ux-Development-Kit/
我们点我同意就可以直接把烧写软件安装好。
找一个32G以上的SD卡和读卡器，插在电脑上，烧写镜像。
选择好镜像和sd卡就直接开始烧录。第1次失败了。我把优盘做成fat32格式的再重新写一下，看能不能成功。
解决烧写失败的问题用了很长时间，好在最后烧写成功了，烧写时SD卡的文件格式很重要，要用fat32的，不然会失败。
烧写好SD卡，把SD卡插到开发板上，我们可以看到小屏幕上的日志消息。我用键盘连接其中的USB口，以方便下面的配置。
系统启动完成呢，我们首先要进行的就是WiFi网络的连接，连接好网络后我们才可以方便的进行其它操作。具体步骤如下。
切换到root用户:
开启Wi-Fi：
扫描附近的Wi-Fi:
连接到特定的Wi-Fi:
nmcli dev wifi connect"SSID"password"PASSWORD"ifname wlan0
重启网卡设备
sudo ifconfig wlan0 down
sudo ifconfig wlan0 up
这样就连接好WiFi了。
连接完成后，可以去路由器看一下开发板的IP地址。我这个地址是192.168.123.18。
我们打开sheel工具。新建一个ssh链接，连接到开发板。
这样我们就可以在电脑上来对此开发板进行远程操作了。
这款开发板还带一个xrdp远程桌面功能。我们也来试一下远程桌面。和刚刚的操作一样，只是链接我们建一个远程桌面连接用rpg模式。
至此呢，我们的开发版的操作系统就安装完成了。这套操作系统是基于乌班图的。系统里面已经安装好了ngix。也就是网站服务器。我们打开开发板的域名。就会看到我们的网页了。网页是hello world。
下面做一个简单的静态网页。
静态网页代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>参加创作打卡挑战赛，瓜分万元现金大奖</title>
<!--Usefull Meta-->
<meta name="description" content="A slick, customizable CV, Resume or Portfolio template, perfect for photographers, freelancers or designers.">
<meta name="keywords" content="angus, resume, cv, vCard, portfolio, html template, template, responsive">
<!--Google Fonts-->
<link href="static/css/css2.css" rel="stylesheet">
<link href="static/css/css21.css" rel="stylesheet">
<!--AOS Animation Stylesheet-->
<link rel="stylesheet" href="static/css/aos.css">
<!--Font Awesome-->
<link rel="stylesheet" href="static/css/all.min.css">
<!--Magnific Popup-->
<link rel="stylesheet" href="static/css/magnific-popup.css">
<!--OWL Carousel-->
<link rel="stylesheet" href="static/css/owl.carousel.min.css">
<!--Keyden Styelsheet with Bootstrap 5-->
<link rel="stylesheet" href="static/css/kayden_1.css">
</head>
<body data-offset="102">
<!--PRELOADER START-->
<div id="preloader">
<div class="text-center w-100">
<div class="loader"></div>
</div>
</div>
<!--PRELOADER END-->
<!--Header START-->
<header class="kayden-header sticky-top">
<div class="header-inside transparent_header">
<div class="d-flex flex-row justify-content-between align-items-center">
<!--Header Toggler START-->
<div class="kayden-menu-toggler"><a class="kayden-toggler text-reset" data-bs-toggle="offcanvas" href="#kaydenOffCanvas" role="button" aria-controls="kaydenOffCanvas">
<div class="kt-r"><span></span><span></span><span></span></div>
<div class="kt-t">目录 </div>
</a></div>
<!--Header Toggler END--><!--Header ** START-->
<div class="kayden-**"><a href="#"><img src="static/picture/**1.png" height="30" alt="kayden"></a></div>
<!--Header ** END--><!--Header Info START-->
<div class="kayden-nav-meta fs-5 fw-bold d-none d-sm-block text-end"><a href="#" class="text-reset">010-82168451</a></div>
<!--Header Info END--></div>
</div>
</header>
<!--Header END--><!--Off Canvas START-->
<div class="offcanvas offcanvas-start" id="kaydenOffCanvas">
<!--Off Canvas Header START-->
<div class="offcanvas-header">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><i class="fas fa-times"></i></button>
</div>
<!--Off Canvas Header END--><!--Off Canvas Body START-->
<div class="offcanvas-body">
<div class="kayden-offcanvas-nav-container d-flex flex-column justify-content-center align-items-center"><!--Off Canvas Navigation START-->
<ul class="kayden-offcanvas-nav list-inline">
<li class="py-3"><a href="#home" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Home</a></li>
<li class="py-3"><a href="#about" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">About</a></li>
<li class="py-3"><a href="#portfolio" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Portfolio</a></li>
<li class="py-3"><a href="#faq" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">FAQ</a></li>
<li class="py-3"><a href="#contact" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Contact</a></li>
</ul>
<!--Off Canvas Navigation END-->
</div>
</div>
<!--Off Canvas Body END-->
</div>
<!--Off Canvas END--><!--Home Section START-->
<section id="home" class="home vh-100"><!--Home Background START-->
<div class="home-background position-absolute top-0 start-0 w-100 h-100"><img src="static/picture/home.jpg" data-aos="fade-up" data-aos-duration="1000" alt="home" class="w-100 h-100 fit-cover fit-left-top"></div>
<!--Home Background END--><!--Home Container START-->
<div class="container h-100 position-relative">
<div class="home-details text-center text-sm-end w-100 h-100 d-flex align-items-center">
<div class="home-details-inner w-100">
<p class="welcome_text fs-4" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500"><span class="typed_text" data-options="分享原创内容,完成打卡任务,赢取现金大奖"></span></p>
<h1 class="fs-1 fw-bold kayden-underline-center kayden-underline-sm-right kayden-underline-big d-inline-block" data-aos="fade-up" data-aos-duration="800" data-aos-delay="800">参加创作打卡挑战赛，瓜分万元现金大奖</h1>
</div>
</div>
</div>
<!--Home Container END-->
<!--Scroll Down START-->
<div class="scroll-down"> <a href="#about" class="kayden_scrollspy scroll-down-link text-center">
<div class="scroll-title">向下滚动</div>
<div class="scroll-mouse">
<div class="whell"></div>
</div>
</a> </div>
<!--Scroll Down END-->
</section>
<!--Home Section END-->
<!--About Section START-->
<section id="about" class="min-vh-100">
<div class="container h-100">
<div class="about_inside w-100 h-100 d-flex justify-content-center align-items-center">
<div class="row w-100">
<!--About Section Picture START-->
<div class="offset-md-1 col-md-4">
<div class="about-image w-100"> <img src="static/picture/about.jpg" class="kayden-shadow rounded-3 w-100" alt="kayden Picture" data-aos="zoom-in" data-aos-duration="800"> </div>
</div>
<!--About Section Picture END-->
<!--About Section Details START-->
<div class="offset-md-1 col-md-6 mt-5 mt-md-0">
<div class="h-100 d-flex align-items-center justify-content-center">
<div class="about-details">
<h2 class="fs-3 fw-bold mb-5">I'm Kayden Morris</h2>
<p class="text-secondary mb-5">Hi!There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomised words which don't look even slightly believable.</p>
<!--Social Links START-->
<ul class="social-links list-inline mb-5">
<li class="list-inline-item"> <a href="#" title="facebook"> <i class="fab fa-facebook-f"></i> </a> </li>
<li class="list-inline-item"> <a href="#" title="linkedin"> <i class="fab fa-linkedin-in"></i> </a> </li>
<li class="list-inline-item"> <a href="#" title="pinterest"> <i class="fab fa-pinterest-p"></i> </a> </li>
<li class="list-inline-item"> <a href="#" title="git"> <i class="fab fa-git"></i> </a> </li>
</ul>
<!--Social Links END-->
<a href="#" class="btn btn-outline-primary" title="Download CV">Download CV</a> </div>
</div>
</div>
<!--About Section Details END-->
</div>
</div>
</div>
</section>
<!--About Section END-->
<!--Services Section START-->
<section id="services">
<div class="container">
<!--Section Heading START-->
<div class="heading text-center mb-5">
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Services</h2>
</div>
<!--Section Heading END-->
<!--Section Body START-->
<div class="section-body">
<!--Gradient Grid START-->
<div class="kayden-gradient-grid">
<!--Gradient Grid ROW START-->
<div class="row g-0">
<!--Gradient Grid Item START-->
<div class="col-lg-4 text-center">
<div class="p-5">
<div class="fs-2 mb-3"> <i class="fas fa-server"></i> </div>
<h4 class="mb-3">Development</h4>
<p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<!--Gradient Grid Item END-->
<!--Gradient Grid Item START-->
<div class="col-lg-4 text-center">
<div class="p-5">
<div class="fs-2 mb-3"> <i class="fas fa-mobile-alt"></i> </div>
<h4 class="mb-3">Responsive</h4>
<p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<!--Gradient Grid Item END-->
<!--Gradient Grid Item START-->
<div class="col-lg-4 text-center">
<div class="p-5">
<div class="fs-2 mb-3"> <i class="fas fa-mug-hot"></i> </div>
<h4 class="mb-3">UX / UI Design</h4>
<p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<!--Gradient Grid Item END-->
</div>
<!--Gradient Grid ROW END-->
<!--Gradient Grid ROW START-->
<div class="row g-0">
<!--Gradient Grid Item START-->
<div class="col-lg-4 text-center">
<div class="p-5">
<div class="fs-2 mb-3"> <i class="far fa-clone"></i> </div>
<h4 class="mb-3">User Friendly</h4>
<p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<!--Gradient Grid Item END-->
<!--Gradient Grid Item START-->
<div class="col-lg-4 text-center">
<div class="p-5">
<div class="fs-2 mb-3"> <i class="far fa-heart"></i> </div>
<h4 class="mb-3">Lovely</h4>
<p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<!--Gradient Grid Item END-->
<!--Gradient Grid Item START-->
<div class="col-lg-4 text-center">
<div class="p-5">
<div class="fs-2 mb-3"> <i class="fas fa-rocket"></i> </div>
<h4 class="mb-3">Bootstrap 5</h4>
<p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<!--Gradient Grid Item END-->
</div>
<!--Gradient Grid ROW END-->
</div>
<!--Gradient Grid END-->
</div>
<!--Section Body END-->
</div>
</section>
<!--Services Section END-->
<!--Facts Section START-->
<section id="facts">
<!--Section Body START-->
<div class="section-body">
<div class="container">
<div class="row gy-5">
<div class="col-md-6">
<div class="row gx-3 gy-5">
<div class="col-6">
<!--Facts Item START-->
<div class="fact d-flex flex-column align-items-center align-items-md-start">
<h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="9" data-speed="1500">0</span><sup>+</sup></h3>
<p class="fs-4 d-inline-block text-center text-md-left">Years Experience</p>
</div>
<!--Facts Item END-->
</div>
<div class="col-6">
<!--Facts Item START-->
<div class="fact d-flex flex-column align-items-center align-items-md-start">
<h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="100" data-speed="1500">0</span><sup>+</sup></h3>
<p class="fs-4 d-inline-block text-center text-md-left">Happy Clients</p>
</div>
<!--Facts Item END-->
</div>
<div class="col-6">
<!--Facts Item START-->
<div class="fact d-flex flex-column align-items-center align-items-md-start">
<h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="8963" data-speed="1500">0</span></h3>
<p class="fs-4 d-inline-block text-center text-md-left">Downloads</p>
</div>
<!--Facts Item END-->
</div>
<div class="col-6">
<!--Facts Item START-->
<div class="fact d-flex flex-column align-items-center align-items-md-start">
<h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="2569" data-speed="1500">0</span></h3>
<p class="fs-4 d-inline-block text-center text-md-left">Projects done</p>
</div>
<!--Facts Item END-->
</div>
</div>
</div>
<div class="col-md-6">
<h2 class="fs-3 mb-5 fw-bold">My Skills</h2>
<div class="skills_container">
<!--Progress Bar START-->
<div class="mb-4">
<label class="mb-3 fs-6">Web Design 75%</label>
<div class="progress">
<div class="progress-bar progress-bar-loadAnimation" data-percent="75" style="width: 0%;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<!--Progress Bar END-->
<!--Progress Bar START-->
<div class="mb-4">
<label class="mb-3 fs-6">Web Development 90%</label>
<div class="progress">
<div class="progress-bar progress-bar-loadAnimation" data-percent="90" style="width: 0%;" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<!--Progress Bar END-->
<!--Progress Bar START-->
<div class="mb-4">
<label class="mb-3 fs-6">Wordpress development 70%</label>
<div class="progress">
<div class="progress-bar progress-bar-loadAnimation" data-percent="70" style="width: 0%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<!--Progress Bar END-->
<!--Progress Bar START-->
<div class="mb-4">
<label class="mb-3 fs-6">Front end development 95%</label>
<div class="progress">
<div class="progress-bar progress-bar-loadAnimation" data-percent="95" style="width: 0%;" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<!--Progress Bar END-->
</div>
</div>
</div>
</div>
</div>
<!--Section Body END-->
</section>
<!--Facts Sectrion END-->
<!--Portfolio Section START-->
<section id="portfolio">
<div class="container">
<!--Section Heading START-->
<div class="heading text-center mb-5">
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Portfolio</h2>
</div>
<!--Section Heading END-->
<!--Section Body START-->
<div class="section-body">
<!--Masonry Grid Container START-->
<div class="row gy-5 grid">
<!--Masonry Grid Item START-->
<div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio1.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
<div class="portfolio-thumbnail"> <img src="static/picture/portfolio1.jpg" class="img-fluid img-grayTransition" alt=""> </div>
<div class="portfolio-description my-3">
<h3 class="fs-5 underline_text fw-bold d-inline-block">Man in Neon</h3>
<span class="d-block fw-light small-font-size">Street</span> </div>
</a> </div>
<!--Masonry Grid Item END-->
<!--Masonry Grid Item START-->
<div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio2.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
<div class="portfolio-thumbnail"> <img src="static/picture/portfolio2.jpg" class="img-fluid img-grayTransition" alt=""> </div>
<div class="portfolio-description my-3">
<h3 class="fs-5 underline_text fw-bold d-inline-block">Girl in Yellow</h3>
<span class="d-block fw-light small-font-size">Neon</span> </div>
</a> </div>
<!--Masonry Grid Item END-->
<!--Masonry Grid Item START-->
<div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio3.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
<div class="portfolio-thumbnail"> <img src="static/picture/portfolio3.jpg" class="img-fluid img-grayTransition" alt=""> </div>
<div class="portfolio-description my-3">
<h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
<span class="d-block fw-light small-font-size">Neon</span> </div>
</a> </div>
<!--Masonry Grid Item END-->
<!--Masonry Grid Item START-->
<div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio4.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
<div class="portfolio-thumbnail"> <img src="static/picture/portfolio4.jpg" class="img-fluid img-grayTransition" alt=""> </div>
<div class="portfolio-description my-3">
<h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
<span class="d-block fw-light small-font-size">Neon</span> </div>
</a> </div>
<!--Masonry Grid Item END-->
<!--Masonry Grid Item START-->
<div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio5.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
<div class="portfolio-thumbnail"> <img src="static/picture/portfolio5.jpg" class="img-fluid img-grayTransition" alt=""> </div>
<div class="portfolio-description my-3">
<h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
<span class="d-block fw-light small-font-size">Neon</span> </div>
</a> </div>
<!--Masonry Grid Item END-->
<!--Masonry Grid Item START-->
<div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio6.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
<div class="portfolio-thumbnail"> <img src="static/picture/portfolio6.jpg" class="img-fluid img-grayTransition" alt=""> </div>
<div class="portfolio-description my-3">
<h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
<span class="d-block fw-light small-font-size">Neon</span> </div>
</a> </div>
<!--Masonry Grid Item END-->
<!--Masonry Grid Item START-->
<div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio7.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
<div class="portfolio-thumbnail"> <img src="static/picture/portfolio7.jpg" class="img-fluid img-grayTransition" alt=""> </div>
<div class="portfolio-description my-3">
<h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
<span class="d-block fw-light small-font-size">Neon</span> </div>
</a> </div>
<!--Masonry Grid Item END-->
<!--Masonry Grid Item START-->
<div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio8.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
<div class="portfolio-thumbnail"> <img src="static/picture/portfolio8.jpg" class="img-fluid img-grayTransition" alt=""> </div>
<div class="portfolio-description my-3">
<h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
<span class="d-block fw-light small-font-size">Neon</span> </div>
</a> </div>
<!--Masonry Grid Item END-->
</div>
<!--Masonry Grid Container END-->
</div>
<!--Section Body START-->
</div>
</section>
<!--Portfolio Section END-->
<!--Education Section START-->
<section id="education">
<div class="container">
<!--Section Heading START-->
<div class="heading text-center mb-5">
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Education</h2>
</div>
<!--Section Heading END-->
<!--Section Body START-->
<div class="section-body">
<div class="table-responsive">
<!--Educational Table START-->
<table class="table">
<tbody>
<tr>
<td class="d-table-cell d-sm-none"><div class="mb-3 fw-light">2010-2016</div>
<div class="mb-3 fw-bold">Univercity of Boston, Computer Science</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</div></td>
<td class="w-25 d-none d-sm-table-cell"><span class="fw-light fs-5">2010-2016</span></td>
<td class="w-50 d-none d-sm-table-cell"><span class="fw-bold fs-5">Univercity of Boston, Computer Science</span></td>
<td class="w-25 d-none d-sm-table-cell"><span class="fw-normal text-secondary">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy </span></td>
</tr>
<tr>
<td class="d-table-cell d-sm-none border-0"><div class="mb-3 fw-light">2010-2016</div>
<div class="mb-3 fw-bold">Univercity of Boston, Computer Science</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</div></td>
<td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-light fs-5">2010-2016</span></td>
<td class="w-50 d-none d-sm-table-cell border-0"><span class="fw-bold fs-5">Univercity of Boston, Computer Science</span></td>
<td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-normal text-secondary">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy </span></td>
</tr>
</tbody>
</table>
<!--Educational Table END-->
</div>
</div>
<!--Section Body END-->
</div>
</section>
<!--Education Section END-->
<!--Testimonials START-->
<section id="testimonials">
<div class="container">
<!--Section Heading START-->
<div class="heading text-center mb-5">
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Testimonials</h2>
</div>
<!--Section Heading END-->
<!--Section Body START-->
<div class="section-body">
<div class="testimonials-header mb-5">
<div class="row">
<div class="col-10 offset-1">
<div class="text-primary fs-1"> <i class="fas fa-quote-right"></i> </div>
</div>
</div>
</div>
<div class="row">
<!--OWL Slider START-->
<div id="client_slider" class="owl-carousel owl-theme">
<!--OWL Slider Item START-->
<div class="offset-1 col-10">
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="testimonial_details">
<p class="text-secondary mb-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<span class="font-family-secondary fs-5 fw-light fst-italic">--Emma Watson</span></div>
</div>
<div class="col-md-6 order-1 order-md-2">
<div class="testimonial_thumbnail d-flex justify-content-start justify-content-md-end"><img src="static/picture/testimonial1.jpg" class="kayden-shadow rounded-3 w-auto" alt=""></div>
</div>
</div>
</div>
<!--OWL Slider Item END--><!--OWL Slider Item START-->
<div class="offset-1 col-10">
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="testimonial_details">
<p class="text-secondary mb-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<span class="font-family-secondary fs-5 fw-light fst-italic">--Linzi Landry</span> </div>
</div>
<div class="col-md-6 order-1 order-md-2">
<div class="testimonial_thumbnail d-flex justify-content-start justify-content-md-end"> <img src="static/picture/testimonial2.jpg" class="kayden-shadow rounded-3 w-auto" alt=""> </div>
</div>
</div>
</div>
<!--OWL Slider Item END-->
<!--OWL Slider Item START-->
<div class="offset-1 col-10">
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="testimonial_details">
<p class="text-secondary mb-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<span class="font-family-secondary fs-5 fw-light fst-italic">--Maksim Mckenna</span></div>
</div>
<div class="col-md-6 order-1 order-md-2">
<div class="testimonial_thumbnail d-flex justify-content-start justify-content-md-end"><img src="static/picture/testimonial3.jpg" class="kayden-shadow rounded-3 w-auto" alt=""></div>
</div>
</div>
</div>
<!--OWL Slider Item END--></div>
<!--OWL Slider END--></div>
</div>
<!--Section Body END--></div>
</section>
<!--Testimonials END--><!--FAQ START-->
<section id="faq">
<div class="container">
<div class="row">
<div class="offset-md-3 col-md-6"><!--Section Heading START-->
<div class="heading text-center mb-5">
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">FAQ</h2>
</div>
<!--Section Heading END--><!--Accordion START-->
<div class="accordion" id="faq_accordion"><!--Accordion ITEM START-->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1" aria-expanded="true" aria-controls="accordion1">What is Bootstrap 5 </button>
</h2>
<div id="accordion1" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faq_accordion">
<div class="accordion-body text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
<!--Accordion ITEM END-->
<!--Accordion ITEM START-->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion2" aria-expanded="true" aria-controls="accordion2"> How working kayden Template? </button>
</h2>
<div id="accordion2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faq_accordion">
<div class="accordion-body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
<!--Accordion ITEM END--><!--Accordion ITEM START-->
<div class="accordion-item">
<h2 class="accordion-header" id="heading3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion3" aria-expanded="true" aria-controls="accordion3">Why using Bootstrap 5? </button>
</h2>
<div id="accordion3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#faq_accordion">
<div class="accordion-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
<!--Accordion ITEM END-->
<!--Accordion ITEM START-->
<div class="accordion-item">
<h2 class="accordion-header" id="heading4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion4" aria-expanded="true" aria-controls="accordion4"> How to control grids in this template? </button>
</h2>
<div id="accordion4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#faq_accordion">
<div class="accordion-body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
<!--Accordion ITEM END--></div>
<!--Accordion END--></div>
</div>
</div>
</section>
<!--FAQ END--><!--Contact Us START-->
<section id="contact">
<div class="container"><!--Section Heading START-->
<div class="heading text-center mb-5">
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Contact Us</h2>
</div>
<!--Section Heading END--><!--Section Body START-->
<div class="section-body">
<div class="row gy-5">
<div class="col-md-6">
<div class="d-flex flex-column justify-content-center h-100"><!--Contact Details START-->
<div class="contact-details d-flex flex-row align-items-center mb-3">
<div class="cd-icon fs-2 me-4"><i class="fas fa-envelope"></i></div>
<div class="cd-info fs-5 font-family-secondary"><a href="#" class="text-white"><span class="__cf_email__" data-cfemail="d5beb4acb1b0bb95b0adb4b8a5b9b0fbb6bab8">[email protected]</span></a></div>
</div>
<!--Contact Details END--><!--Contact Details START-->
<div class="contact-details d-flex flex-row align-items-center mb-3">
<div class="cd-icon fs-2 me-4"><i class="fas fa-map-marked-alt"></i></div>
<div class="cd-info fs-5 font-family-secondary">New York,USA </div>
</div>
<!--Contact Details END--><!--Contact Details START-->
<div class="contact-details d-flex flex-row align-items-center">
<div class="cd-icon fs-2 me-4"><i class="fas fa-phone"></i></div>
<div class="cd-info fs-5 font-family-secondary"><a href="#" class="text-white">+7 123 456 789 </a></div>
</div>
<!--Contact Details END--></div>
</div>
<div class="col-md-6">
<h3 class="mb-5 fs-4 text-center text-sm-left">Or Let's start to conversation</h3>
<form action="php/form.php" method="post" id="contact-form">
<div class="mb-4">
<input type="text" name="name" id="name" placeholder="Full name" class="form-control">
</div>
<div class="mb-4">
<input type="email" name="email" id="email" placeholder="Email" class="form-control">
</div>
<div class="mb-4">
<input type="text" name="subject" id="subject" placeholder="Subject" class="form-control">
</div>
<div class="mb-4">
<textarea placeholder="Message" name="text" id="text" class="form-control" cols="30" rows="10"></textarea>
</div>
<div class="mb-4">
<button type="submit" id="contact-btn" class="btn btn-primary">Send Message</button>
</div>
</form>
</div>
</div>
</div>
<!--Section Body END--></div>
</section>
<!--Contact Us END-->
<!--Footer START-->
<footer class="kayden-footer py-4">
<div class="container">
<div class="d-flex flex-column align-items-center justify-content-center py-3"><!--Social Links START-->
<ul class="social-links list-inline mb-4">
<li class="list-inline-item"><a href="#" title="facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#" title="linkedin"><i class="fab fa-linkedin-in"></i></a></li>
<li class="list-inline-item"><a href="#" title="pinterest"><i class="fab fa-pinterest-p"></i></a></li>
<li class="list-inline-item"><a href="#" title="git"><i class="fab fa-git"></i></a></li>
</ul>
<!--Social Links END-->
<!--Copyright START-->
<p class="text-center m-0">Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></p>
<!--Copyright END--></div>
</div>
</footer>
<!--Footer END--><!--To TOP START-->
<a href="#" class="toTop d-inline" id="return-to-top"><i class="fas fa-chevron-up"></i></a>
<!--To TOP END--><!--JavaScript START-->
<script src="static/js/bootstrap.min.js"></script>
<!--JQuery-->
<script src="static/js/jquery.min.js"></script>
<!--AOS Animations-->
<script src="static/js/aos.js"></script>
<!--Jquery Easing -->
<script src="static/js/jquery.easing.min.js"></script>
<!--Jquery Appear -->
<script src="static/js/jquery.appear.min.js"></script>
<!--Kayden preloader -->
<script src="static/js/preloader.js"></script>
<!--Jquery Count To -->
<script src="static/js/jquery.countTo.js"></script>
<!--Masonry -->
<script src="static/js/masonry.pkgd.min.js"></script>
<!--Jquery Magnific Popup -->
<script src="static/js/jquery.magnific-popup.min.js"></script>
<!--OWL Carousel -->
<script src="static/js/owl.carousel.min.js"></script>
<!--Typed JS -->
<script src="static/js/typed.min.js"></script>
<!--Kayden Alert -->
<script src="static/js/alert.js"></script>
<!--Kayden Contact US -->
<script src="static/js/contact.js"></script>
<!--Kayden Custom Script -->
<script src="static/js/kayden.js"></script>
<!--JavaScript END-->
</body>
</html>
做好之后呢，把网页文件拷贝到开发板中。
拷贝完成后，在浏览器中输入开发板的IP地址。这样就能看到刚刚做好的网页了。
这样，我们的简单的网站服务器就完成了，感谢大家的阅读。
21ic.zip
(2.25 MB)
| 
楼主
标题置顶
标题高亮
