github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-13 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 更新官网ui新版样式

Browse Source
This commit is contained in:
RalapChen 2021-01-27 00:38:15 +08:00
parent 9a0503946b
commit 92a3088aad
11 changed files with 1470 additions and 1399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

283
website/css/style.css
View File

@ -1,6 +1,6 @@
body {
font-size: 16px;
font-family: "Roboto", sans-serif;
font-family: 'Roboto', sans-serif;
font-weight: 400;
overflow-x: hidden;
overflow-y: scroll;
@ -106,8 +106,15 @@ p {
/* ---------------------------------------------------------------- */
/* 03.Helper Class
/* ---------------------------------------------------------------- */
.preview-container {
padding-bottom: 52px;
}
.preview-container img {
width: 120px;
height: 270px;
}
.section-padding {
padding: 100px 0;
padding: 65px 0;
position: relative;
}
.section-heading {
@ -124,15 +131,14 @@ p {
.section-title span {
margin-right: 10px;
margin-left: 10px;
color: #0033CC;
color: #0033cc;
}
.section-title::after,
.section-title::before {
position: absolute;
content: "";
content: '';
left: 50%;
height: 2px;
background: #0033CC;
height: 4px;
background: #0033cc;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@ -142,10 +148,10 @@ p {
}
.section-title::before {
bottom: 0;
width: 60px;
width: 33px;
}
.section-sub-title {
text-align: center;
text-align: left;
font-size: 1.125rem;
}
.section-badge {
@ -181,6 +187,9 @@ p {
background: #12bd81;
color: #fff !important;
}
.blue-btn {
background-color: #0095ff !important;
}
.default-btn {
display: inline-block;
overflow: hidden;
@ -189,7 +198,7 @@ p {
text-transform: capitalize;
position: relative;
color: #fff !important;
background: #0033CC;
background: #0033cc;
-webkit-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
@ -229,7 +238,7 @@ p {
}
.bg-blue-overlay::after {
position: absolute;
content: "";
content: '';
height: 100%;
width: 100%;
top: 0;
@ -237,19 +246,19 @@ p {
z-index: -1;
opacity: 0.8;
background-position: center;
background: #0033CC;
background: #0033cc;
}
.item-shadow {
-webkit-box-shadow: 0 10px 30px 0 rgba(0, 51, 204,0.1);
box-shadow: 0 10px 20px 0 rgba(0, 51, 204,0.1);
-webkit-box-shadow: 0 10px 30px 0 rgba(0, 51, 204, 0.1);
box-shadow: 0 10px 20px 0 rgba(0, 51, 204, 0.1);
-webkit-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.item-shadow:hover {
-webkit-box-shadow: 0 10px 30px 0 rgba(0, 51, 204,0.1);
box-shadow: 0 15px 30px 0 rgba(0, 51, 204,0.15);
-webkit-box-shadow: 0 10px 30px 0 rgba(0, 51, 204, 0.1);
box-shadow: 0 15px 30px 0 rgba(0, 51, 204, 0.15);
}
.img-jump {
-webkit-animation: imgJump 5s linear 0s infinite normal forwards;
@ -274,7 +283,13 @@ p {
border-radius: 5px;
visibility: hidden;
color: #fff !important;
background: #15db95;
background: #1336d0;
overflow: hidden;
border-radius: 6px;
}
.scroll-top-btn img {
width: 100%;
height: 100%;
}
.scroll-top-btn.active {
opacity: 1;
@ -295,7 +310,7 @@ p {
display: flex;
justify-content: center;
align-items: center;
background: #0033CC;
background: #0033cc;
flex-direction: column;
}
.preloader-wrap .preloader-inner {
@ -304,7 +319,7 @@ p {
position: relative;
margin: 0 auto;
}
.preloader-inner .spinner {
.preloader-inner .spinner {
margin: auto;
margin-top: -100px;
width: 50px;
@ -329,8 +344,8 @@ p {
animation-delay: -1.1s;
}
.preloader-inner .spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.preloader-inner .spinner .rect4 {
-webkit-animation-delay: -0.9s;
@ -374,8 +389,8 @@ p {
.blog-item,
.footer-social-links > a,
.download-btn,
.screenshots-slider.owl-theme .owl-nav.disabled+.owl-dots .owl-dot span,
.testimonial-slider.owl-theme .owl-nav.disabled+.owl-dots .owl-dot span,
.screenshots-slider.owl-theme .owl-nav.disabled + .owl-dots .owl-dot span,
.testimonial-slider.owl-theme .owl-nav.disabled + .owl-dots .owl-dot span,
.team-social > a,
.blog-single-meta-box > a:hover {
-webkit-transition: all 0.25s linear;
@ -536,14 +551,14 @@ p {
}
}
@-webkit-keyframes iconPulse {
0%{
0% {
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
50%{
50% {
opacity: 1;
}
100% {
@ -555,14 +570,14 @@ p {
}
}
@keyframes iconPulse {
0%{
0% {
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
50%{
50% {
opacity: 1;
}
100% {
@ -591,7 +606,7 @@ p {
}
30% {
left: 15px;
background:#15db95;
background: #15db95;
}
35% {
top: 5px;
@ -609,7 +624,7 @@ p {
top: 6px;
}
80% {
top:6px;
top: 6px;
}
60% {
top: -6px;
@ -633,7 +648,7 @@ p {
}
30% {
left: 15px;
background:#15db95;
background: #15db95;
}
35% {
top: 5px;
@ -651,24 +666,32 @@ p {
top: 6px;
}
80% {
top:6px;
top: 6px;
}
60% {
top: -6px;
}
}
@-webkit-keyframes spinnerDelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
0%,
40%,
100% {
-webkit-transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
}
}
@keyframes spinnerDelay {
0%, 40%, 100% {
0%,
40%,
100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
}
@ -685,7 +708,7 @@ p {
top: 0;
left: 0;
padding: 20px 0;
background: #0033CC;
background: #0033cc;
-webkit-box-shadow: 0px 13px 35px -12px rgba(0, 0, 0, 0.15);
box-shadow: 0px 13px 35px -12px rgba(0, 0, 0, 0.15);
-webkit-animation: stickyMenu 0.7s ease-in-out;
@ -794,20 +817,20 @@ p {
.togler-icon-inner > span:last-child {
margin-bottom: 0;
}
.navbar-toggler[aria-expanded="true"] .togler-icon-inner > span:nth-child(1) {
.navbar-toggler[aria-expanded='true'] .togler-icon-inner > span:nth-child(1) {
-webkit-transform: rotate(-45deg) translate(-5px, 6px);
-ms-transform: rotate(-45deg) translate(-5px, 6px);
-o-transform: rotate(-45deg) translate(-5px, 6px);
transform: rotate(-45deg) translate(-5px, 6px);
}
.navbar-toggler[aria-expanded="true"] .togler-icon-inner > span:nth-child(3) {
.navbar-toggler[aria-expanded='true'] .togler-icon-inner > span:nth-child(3) {
-webkit-transform: rotate(45deg) translate(-5px, -6px);
-ms-transform: rotate(45deg) translate(-5px, -6px);
-o-transform: rotate(45deg) translate(-5px, -6px);
transform: rotate(45deg) translate(-5px, -6px);
}
.navbar-toggler[aria-expanded="true"] .togler-icon-inner > span:nth-child(2) {
.navbar-toggler[aria-expanded='true'] .togler-icon-inner > span:nth-child(2) {
opacity: 0;
}
@ -825,7 +848,7 @@ p {
max-width: 100%;
}
.header .main-menu {
background: #0033CC;
background: #0033cc;
}
.header .main-menu .navbar-nav .nav-link {
margin: 0;
@ -849,17 +872,24 @@ p {
/* ---------------------------------------------------------------- */
/* 06.Hero Section
/* ---------------------------------------------------------------- */
.first-section {
overflow: hidden;
padding-bottom: 8px;
}
.first-section section {
overflow: initial;
}
.hero-section {
position: relative;
height: 900px;
background-repeat: no-repeat;
z-index: 42;
background: #0033CC;
background: #0033cc;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230033cc'/%3E%3Cstop offset='1' stop-color='%230033cc'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23385dff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23385dff' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.5'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
}
.hero-section::after {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
@ -868,12 +898,14 @@ p {
margin-bottom: 30px;
line-height: 1.2;
color: #fff;
text-align: left;
}
.hero-section-subtitle {
margin: 0 0 40px;
font-size: 1.125rem;
opacity: 0.85;
color: #fff;
text-align: left;
}
/* Hero Button Group */
@ -910,11 +942,15 @@ p {
.hero-section .hero-image {
display: none;
}
.hero-section, .hero-section-2, .parallax-bg {
.hero-section,
.hero-section-2,
.parallax-bg {
text-align: center;
background-position: 100% 0;
}
.hero-section .container .row, .hero-section-2 .container .row, .parallax-bg .container .row {
.hero-section .container .row,
.hero-section-2 .container .row,
.parallax-bg .container .row {
justify-content: center !important;
}
.hero-section-subtitle {
@ -933,10 +969,14 @@ p {
section .button-group-hero {
display: none !important;
}
.hero-section, .hero-section-2, .parallax-bg {
height: 600px !important;
.hero-section,
.hero-section-2,
.parallax-bg {
height: 650px !important;
}
.hero-section, .hero-section-2, .parallax-bg {
.hero-section,
.hero-section-2,
.parallax-bg {
background-position: 100% 0;
}
}
@ -952,14 +992,14 @@ p {
}
.services-item .services-icon {
display: inline-block;
height: 80px;
width: 80px;
height: 40px;
width: 40px;
margin-bottom: 20px;
text-align: center;
font-size: 40px;
line-height: 80px;
font-size: 24px;
line-height: 40px;
border-radius: 10px;
background: #0033CC;
background: #0033cc;
color: #fff;
-webkit-box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.15);
box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.15);
@ -968,12 +1008,16 @@ p {
position: relative;
display: inline-block;
}
.box-title {
font-size: 24px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
margin-left: 23px;
}
.services-body h5 {
margin-bottom: 10px;
}
.services-body p {
margin-bottom: 20px;
}
.services-body + .services-link {
display: inline-block;
border-radius: 5px;
@ -1031,10 +1075,9 @@ p {
display: inline-block;
border-radius: 5px;
font-size: 10px;
color: #fff !important;
background: #0033cc;
-webkit-box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.1);
box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.1);
}
.about-list ul > li > i img {
vertical-align: middle;
}
.about-list ul > li {
margin-top: 15px;
@ -1044,6 +1087,9 @@ p {
.about-list ul > li:first-child {
margin-top: 0;
}
.about-container {
padding: 0 26px;
}
.about-inner h3 {
margin-bottom: 15px;
line-height: 1.35;
@ -1065,15 +1111,15 @@ p {
/* ---------------------------------------------------------------- */
/* 09.Features
/* ---------------------------------------------------------------- */
.features-list{
.features-list {
display: inline-block;
}
.features-list > li {
margin-top: 15px;
padding: 20px;
border-radius:5px;
-webkit-box-shadow: 0 10px 30px 0 rgba(0, 51, 204,0.1);
box-shadow: 0 10px 20px 0 rgba(0, 51, 204,0.1);
border-radius: 5px;
-webkit-box-shadow: 0 10px 30px 0 rgba(0, 51, 204, 0.1);
box-shadow: 0 10px 20px 0 rgba(0, 51, 204, 0.1);
}
.features-list > li:first-child {
margin-top: 0;
@ -1092,7 +1138,7 @@ p {
border-radius: 5px;
text-align: center;
color: #fff;
background: #0033CC;
background: #0033cc;
-webkit-box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.15);
box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.15);
}
@ -1114,9 +1160,9 @@ p {
border-radius: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
background-position: center;
background: #0033CC;
background: #0033cc;
}
/* ---------------------------------------------------------------- */
@ -1128,7 +1174,7 @@ p {
margin-bottom: 30px;
}
.features-image-order {
order:2;
order: 2;
}
.features-circle {
display: none;
@ -1197,7 +1243,7 @@ p {
line-height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
border-radius: 50%;
cursor: pointer;
font-size: 40px;
@ -1219,7 +1265,7 @@ p {
margin-bottom: 40px;
}
.how-it-work-item .how-it-work-number::before {
content: "";
content: '';
position: absolute;
top: 50%;
right: -50%;
@ -1227,7 +1273,7 @@ p {
transform: translateY(-50%);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
z-index: -7;
border:2px dashed #fff;
border: 2px dashed #fff;
}
.how-it-work-item:last-child .how-it-work-number::before {
display: none;
@ -1245,11 +1291,11 @@ p {
background: #fff;
font-weight: 500;
transition: all 0.2s linear;
box-shadow: 0 0 0 10px #315ad6,0 0 0 20px #1a48d1;
box-shadow: 0 0 0 10px #315ad6, 0 0 0 20px #1a48d1;
}
.how-it-work-item.active a > span {
color: #fff !important;
font-family: "Poppins",sans-serif;
font-family: 'Poppins', sans-serif;
background-position: center;
background: #15db95;
}
@ -1373,8 +1419,8 @@ p {
margin: 0 auto 60px auto;
padding: 10px;
border-radius: 5px;
-webkit-box-shadow: 0 10px 30px 0 rgba(0, 51, 204,0.1);
box-shadow: 0 10px 20px 0 rgba(0, 51, 204,0.1);
-webkit-box-shadow: 0 10px 30px 0 rgba(0, 51, 204, 0.1);
box-shadow: 0 10px 20px 0 rgba(0, 51, 204, 0.1);
}
.pricing-tab-content {
display: none;
@ -1391,11 +1437,11 @@ p {
position: relative;
overflow: hidden;
background-color: #e8eafd;
color: #0033CC;
color: #0033cc;
}
.price-toggle-wrap > a.active {
background-position: center;
background: #0033CC;
background: #0033cc;
color: #fff;
}
@ -1406,20 +1452,23 @@ p {
background: #fff;
}
.price-table-active .price-table {
background: #0033CC;
background: #0033cc;
-webkit-box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.15);
box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.15);
}
.price-table-active .price-icon span {
background: #fff;
color: #0033CC;
color: #0033cc;
}
.price-table-active h4, .price-table-active li,
.price-table-active h4,
.price-table-active li,
.price-table-active .price-body > ul > li::before,
.price-table-active .price-table h5 {
color: #fff !important;
}
.price-table .price-header, .price-body, .price-btn-wrap {
.price-table .price-header,
.price-body,
.price-btn-wrap {
padding: 0 30px;
}
.price-btn-wrap {
@ -1438,7 +1487,7 @@ p {
font-size: 40px;
border-radius: 5px;
line-height: 80px;
background: #0033CC;
background: #0033cc;
color: #fff;
-webkit-transition: all 0.25s linear;
transition: all 0.25s linear;
@ -1473,15 +1522,15 @@ p {
margin-bottom: 15px;
}
.price-table .price-body > ul > li::before {
content: "\f0da";
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-family: 'Font Awesome 5 Free';
font-weight: 600;
margin-right: 15px;
color: #15db95;
}
.price-table .price-body > ul > li::after {
content: "\f00c";
font-family: "Font Awesome 5 Free";
content: '\f00c';
font-family: 'Font Awesome 5 Free';
font-weight: 600;
color: #15db95;
float: right;
@ -1495,7 +1544,7 @@ p {
.price-table-active .default-btn {
background: #fff;
color: #0033CC !important;
color: #0033cc !important;
}
/* ---------------------------------------------------------------- */
@ -1551,15 +1600,16 @@ p {
z-index: -7;
}
.testimonial-text p::after {
content: "\f10e";
content: '\f10e';
margin-left: 7px;
}
.testimonial-text p::before {
content: "\f10d";
content: '\f10d';
margin-right: 7px;
}
.testimonial-text p::after, .testimonial-text p::before {
font-family: "Font Awesome 5 Free";
.testimonial-text p::after,
.testimonial-text p::before {
font-family: 'Font Awesome 5 Free';
font-weight: 600;
display: inline-block;
color: #fff;
@ -1604,7 +1654,7 @@ p {
.testimonial-body img {
width: inherit !important;
border-radius: 5px;
display:inline-block !important;
display: inline-block !important;
text-align: center;
}
@ -1652,7 +1702,8 @@ p {
margin-bottom: 10px;
}
.counter-icon,
.counter-body p, .counter-body h2 {
.counter-body p,
.counter-body h2 {
color: #fff;
}
.counter-body p {
@ -1660,11 +1711,11 @@ p {
}
.counter-icon::after,
.counter-icon::before {
content: "";
content: '';
display: block;
position: absolute;
border-radius: 50%;
border:1px solid #fff;
border: 1px solid #fff;
left: -20px;
right: -20px;
top: -20px;
@ -1713,18 +1764,18 @@ p {
overflow: hidden;
border-radius: 10px;
}
.team-card .team-img:after{
content: "";
.team-card .team-img:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: -100%;
left: 0;
transition: all 0.35s ease-in-out 0s;
background: #0033CC;
background: #0033cc;
opacity: 0.8;
}
.team-card:hover .team-img:after{
.team-card:hover .team-img:after {
bottom: 0;
}
.team-card .team-social {
@ -1760,7 +1811,7 @@ p {
border-radius: 5px;
transition: all 0.3s ease 0s;
margin-right: 5px;
border:2px solid transparent;
border: 2px solid transparent;
}
.team-card .team-social li:last-child a {
margin-right: 0;
@ -1768,9 +1819,9 @@ p {
.team-card:hover .team-social li a:hover {
color: #fff;
background: transparent;
border:2px solid #fff;
border: 2px solid #fff;
}
.team-card .team-card-content{
.team-card .team-card-content {
padding: 30px 0;
}
.team-card .title {
@ -1820,7 +1871,7 @@ p {
color: #fff;
}
.footer-title::after {
content: "";
content: '';
width: 50px;
height: 2px;
background: #fff;
@ -1838,15 +1889,15 @@ p {
.footer li:first-child {
margin-top: 0;
}
.footer-links>li::before {
content: "\f105";
.footer-links > li::before {
content: '\f105';
display: inline-block;
margin-right: 10px;
font-family: "Font Awesome 5 Free";
font-family: 'Font Awesome 5 Free';
font-weight: 600;
vertical-align: top;
}
.footer-links>li:hover {
.footer-links > li:hover {
opacity: 1;
}
.footer-logo {
@ -1873,7 +1924,7 @@ p {
line-height: 34px;
text-align: center;
border-radius: 50%;
background: rgba(255, 255, 255,0.02);
background: rgba(255, 255, 255, 0.02);
color: #fff;
}
.footer-social-links > a:last-child {
@ -1932,7 +1983,8 @@ p {
padding-bottom: 100px;
height: auto !important;
}
.signup-form-header, .signup-form-inner {
.signup-form-header,
.signup-form-inner {
padding: 15px;
}
}
@ -1945,7 +1997,7 @@ p {
background: none;
}
.bg-jarallax-overlay::before {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
@ -1970,13 +2022,6 @@ p {
opacity: 0.75;
}
/* ---------------------------------------------------------------- */
/* 26.Intro
/* ---------------------------------------------------------------- */
@ -1989,7 +2034,7 @@ p {
max-width: max-content;
padding: 10px 20px;
margin: 0 auto 15px auto;
border:2px solid #fff;
border: 2px solid #fff;
}
.intro-hero-title {
color: #fff;
@ -2032,7 +2077,7 @@ p {
transition: all 0.25s ease;
}
.demo-item:hover .demo-item-link {
background: #0033CC;
background: #0033cc;
color: #fff;
}
.demo-img {

BIN
website/img/.DS_Store vendored
View File

Binary file not shown.

BIN
website/img/TOP.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
website/img/business.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 B

BIN
website/img/f1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 226 KiB

After

Width:  |  Height:  |  Size: 176 KiB

BIN
website/img/h5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 B

BIN
website/img/menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 B

BIN
website/img/phone@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 736 KiB

BIN
website/img/sale.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 B

110
website/index.html
View File

@ -62,6 +62,7 @@
<!--// Header End //-->
<!--// Hero Section Start //-->
<section class="first-section" data-scroll-index="0">
<section class="hero-section" data-scroll-index="0">
<div class="container h-100">
<div class="row align-items-center h-100">
@ -72,19 +73,20 @@
<p class="hero-section-subtitle wow fadeInUp" data-wow-delay="0.3s">
H5-Dooring是一款功能强大，高可扩展的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。
</p>
<a href="http://h5.dooring.cn/h5_plus" target="_blank" class="default-outline-btn wow fadeInUp" data-wow-delay="0.4s">立即使用</a>
<a href="http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg" style="margin-left: 10px" target="_blank" class="default-outline-btn wow fadeInUp" data-wow-delay="0.4s">GPL商业授权+私有化部署</a>
<a href="http://h5.dooring.cn/h5_plus" target="_blank" class="default-outline-btn wow fadeInUp" data-wow-delay="0.4s">免费体验</a>
<a href="http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg" style="margin-left: 10px" target="_blank" class="default-outline-btn wow fadeInUp blue-btn" data-wow-delay="0.4s">GPL商业授权+私有化部署</a>
<a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" class="default-video-btn github wow fadeInUp">Github</a>
</div>
<!--// .col //-->
<div class="col-lg-4 text-right wow fadeInRight" style="overflow:hidden;padding:0;margin-left: 30px">
<img src="./img/face_p.png" alt="Hero image" style="height: 528px; border-radius: 32px">
<div class="col-lg-4 text-center wow fadeInRight" style="overflow:hidden;padding:0;padding-top: 47px;">
<img src="./img/face_p.png" alt="Hero image" style="width: 268px; border-radius: 32px">
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
</section>
</section>
<!--// Hero Section End //-->
<!--// Services Section Start //-->
@ -93,7 +95,7 @@
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="section-heading">
<h2 class="section-title">产品 <span>特点</span></h2>
<h2 class="section-title">产品特点</h2>
<p class="section-sub-title">
通过不断打磨和迭代，致力于打造功能更强大，操作更便捷的H5营销工具
</p>
@ -108,8 +110,8 @@
<div class="services-icon services-blue-icon">
1
</div>
<span class="box-title">简单方便</span>
<div class="services-body">
<h5>简单方便</h5>
<p>
任何人只需要傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
</p>
@ -122,8 +124,8 @@
<div class="services-icon">
2
</div>
<span class="box-title">插拔式体验</span>
<div class="services-body">
<h5>插拔式体验</h5>
<p>
产品以GPL协议开源，可植入任何系统，并支持二次开发
</p>
@ -136,8 +138,8 @@
<div class="services-icon">
3
</div>
<span class="box-title">持续迭代，无限可能</span>
<div class="services-body">
<h5>持续迭代，无限可能</h5>
<p>
目前正在持续迭代中，后续可根具需求开发功能更强大的可视化系统.
</p>
@ -160,9 +162,9 @@
<img src="./img/f1.png" alt="About image" class="img-fluid img-jump">
</div>
<!--// .col //-->
<div class="col-md-4 col-lg-4 wow fadeInUp">
<div class="col-md-4 col-lg-4 wow fadeInUp about-container">
<div class="about-inner">
<span class="section-badge">场景展示</span>
<!-- <span class="section-badge">场景展示</span> -->
<h3>拖拽式生成H5页面</h3>
<p>
通过轻松拖拽的方式来快速生成H5页面元素，并提供丰富的页面组件，更方便的为使用者搭建更强大的H5落地页
@ -170,12 +172,12 @@
</div>
<div class="about-list">
<ul>
<li><i class="fa fa-check">1</i>产品营销页面</li>
<li><i class="fa fa-check">2</i>企业/个人微官网</li>
<li><i class="fa fa-check">3</i>产品原型/H5活动页面</li>
<li><i class="fa fa-check"><img src="./img/sale.png" style="width: 12px;height: 14px;"/></i>产品营销页面</li>
<li><i class="fa fa-check"><img src="./img/business.png" style="width: 16px;height: 14px;"/></i>企业/个人微官网</li>
<li><i class="fa fa-check"><img src="./img/h5.png" style="width: 11px;height: 16px;"/></i>产品原型/H5活动页面</li>
</ul>
</div>
<a href="http://h5.dooring.cn/h5_plus" class="default-btn">立即使用
<a href="http://h5.dooring.cn/h5_plus" class="default-btn">免费体验
<i class="ml-2 fa fa-angle-right"></i>
</a>
</div>
@ -186,51 +188,75 @@
<!--// .container //-->
</section>
<!--// About Section End //-->
<!--// Features Section Start //-->
<section id="features" class="features-section section-padding" data-scroll-index="3">
<div class="container">
<div class="features-row">
<div class="col-md-8 col-lg-8 wow fadeInLeft text-center preview-container">
<img src="./img/phone@2x.png" alt="About image" class="img-fluid img-jump">
</div>
<div class="row align-items-center justify-content-between">
<div class="col-md-7 col-lg-6 wow fadeInLeft">
<div class="features-inner">
<span class="section-badge">场景展示</span>
<h3>自由缩放视图，多模式预览页面</h3>
<!-- <span class="section-badge">场景展示</span> -->
<h2 class="section-title">灵活预览</h2>
<p>
自由拖拽，灵活缩放视图，支持H5长页面，移动端真机预览，PC端模拟预览，最大限度的降低使用成本
</p>
<ul class="features-list">
<li class="d-flex align-items-center">
<i class="mdi">4</i>
<div class="features-box">
<h6>移动端适配</h6>
<span>适配不同移动端机型，实时可调整，预览无压力</span>
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.1s">
<div class="services-item item-shadow">
<div class="services-icon services-blue-icon">
1
</div>
</li>
<li class="d-flex align-items-center">
<i class="mdi">5</i>
<div class="features-box">
<h6>持续升级</h6>
<span>定期根据用户需求进行系统升级，优化，创造更好的体验</span>
<span class="box-title">移动端适配</span>
<div class="services-body">
<p>
适配不同移动端机型，实时可调整，预览无压力
</p>
</div>
</li>
<li class="d-flex align-items-center">
<i class="mdi">6</i>
<div class="features-box">
<h6>实时下载</h6>
<span>用户不用担心存储问题，可在平台直接下载对应代码或json文件，更灵活的使用</span>
</div>
</li>
</ul>
</div>
</div>
<!--// .col //-->
<div class="col-md-5 col-lg-5 text-center features-image-resp wow slideInRight">
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
2
</div>
<span class="box-title">持续升级</span>
<div class="services-body">
<p>
定期根据用户需求进行系统升级，优化，创造更好的体验
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
3
</div>
<span class="box-title">实时下载</span>
<div class="services-body">
<p>
用户不用担心存储问题，可在平台直接下载对应代码或json文件，更灵活的使用.
</p>
</div>
</div>
</div>
<!--// .col //-->
</div>
</div>
</div>
<!--// .col //-->
<!-- <div class="col-md-5 col-lg-5 text-center features-image-resp wow slideInRight">
<div class="features-circle"></div>
<div class="feature-image-wrap wow zoomIn" data-wow-delay="0.8s">
<img src="./img/f2.png" alt="About image" class="img-fluid img-jump">
</div>
</div>
</div> -->
<!--// .col //-->
</div>
<!--// .row //-->
@ -249,7 +275,7 @@
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
<h2 class="section-title">问题<span>反馈</span></h2>
<h2 class="section-title">问题反馈</h2>
<p class="section-sub-title">
如果在使用过程中有任何疑问或者需求，可以通过以下方式联系到作者
</p>
@ -285,7 +311,7 @@
<!--// Footer Section Start //-->
<a href="#0" class="scroll-top-btn" data-scroll-goto="0">
🔝
<img src="./img/TOP.png" />
</a>
<!--// Scroll Top //-->