html - Bootstrap 4 全角填充问题导致滚动条和空白
问题描述
我的网站右侧有一条很难看到的细白线。如果您在网页上向右滚动，您会注意到它。使用 DevTools 看起来它是 15px 填充。
我正在尝试删除它，并且我试图找到导致此问题的项目，但我似乎找不到它。什么可能导致问题？
白线图片：
网站网址：https ://grobconnolly.github.io/cloverweb/
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-5 {
font-family: "Montserrat", sans-serif;
color: #636468;
font-weight: 300;
}
.service-5 h1,
.service-5 h2,
.service-5 h3,
.service-5 h4,
.service-5 h5,
.service-5 h6 {
color: #3e4555;
}
.service-5 a {
text-decoration: none;
}
.service-5 .linking {
color: #3e4555;
}
.service-5 .linking:hover {
color: #316ce8;
}
.service-5 .font-weight-medium {
font-weight: 500;
}
.service-5 .bg-light {
background-color: #f4f8fa !important;
}
.service-5 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.service-5 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.service-5 .wrap-service5-box .card-body {
padding: 30px;
}
.service-5 .wrap-service5-box .text-success-gradiant {
background: #f47820;
background: -webkit-linear-gradient(legacy-direction(to right), #f47820 0%, #f47820 100%);
background: -webkit-gradient(linear, left top, right top, from(#f47820), to(#f47820));
background: -webkit-linear-gradient(left, #f47820 0%, #f47820 100%);
background: -o-linear-gradient(left, #f47820 0%, #f47820 100%);
background: linear-gradient(to right, #f47820 0%, #f47820 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.service-5 .wrap-service5-box .icon-size {
font-size: 45px;
}
.service-5 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
#textWhite {
color: white;
font-size: 25px;
}
.featureSection {
margin-top: 30px;
}
.ourFeatures {
margin-bottom: 50px;
}
* {
font-family: "Montserrat", sans-serif;
color: #636468;
}
.heroText {
font-weight: 900;
font-size: 50px;
color: #373E42;
padding-top: 4%;
padding-bottom: .3%;
}
#subHeroText {
font-size: 40px;
font-weight: 400;
color: #6b7175;
margin-top: 0px;
}
#setupText {
font-size: 22px;
color: rgb(107, 113, 117);
margin-bottom: 0.3em;
padding-top: 1em;
}
#heroButton {
font-size: 25px;
}
#cancelAnytime {
font-size: 22px;
color: rgb(107, 113, 117);
padding-bottom: 1em;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.footer {
padding: 30px 0;
background: #eee !important;
width: 100%
}
.priceText {
font-size: 15px;
font-weight: 100;
}
.secondSection {
background-color: white;
width: 100%;
}
.extraPad {
padding-bottom: 4%;
}
.question1 {
border: 1px solid black;
}
.priceBox {
border-width: thin;
border-color: #E9EEF1;
border-style: solid;
padding-top: 3%;
}
.dollarSymbol,
.mo,
.amount {
padding-bottom: 4%;
}
#extraSpace {
padding-left: 100px;
padding-right: 100px;
}
.dollarSymbol {
font-size: 20px;
font-weight: 400;
}
.amount {
font-size: 60px;
font-weight: 900;
}
.mo {
padding-top: 3%;
padding-left: 3%;
}
.faq {
padding-top: 20px;
padding-bottom: 20px;
}
#priceIcons {
padding-left: 20%;
}
.iconFeatures {
padding-left: 0%;
}
.iconTextPrice {
padding-left: 3%;
font-size: 14px;
font-weight: 200;
padding-top: 1%;
}
.iconUs {
left: 27%;
padding-top: 3%;
padding-bottom: 4%;
}
.textIcon {
color: black;
font-weight: 200;
}
#heroButtonPricing {
font-size: 20px;
width: 300px;
}
li {
font-size: 12px;
justify-content: left;
}
.heroBottom {
background-color: white;
}
.heroSection {
background-color: #F8FBFC;
}
.liRight {
text-align: left;
margin-left: 3em;
}
.navbar {
background-color: #F8FBFC;
}
li.borderless {
border: 0 none;
padding-top: 0;
}
.subHeroTextBottom {
font-size: 12px;
color: rgb(107, 113, 117);
padding-top: 1px;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.mainSubjectsWhy {
font-weight: 400;
font-size: 28px;
padding-top: 2em;
padding-bottom: .2em;
}
.mainSubjectsFaq {
font-weight: 400;
font-size: 28px;
padding-top: 8em;
padding-bottom: .2em;
}
.subjectHeader {
font-weight: 400;
font-weight: 100;
font-size: 18px;
padding-top: 0;
padding-bottom: .2em;
}
.readyToSignUp {
font-weight: 100;
font-size: 18px;
padding-top: 0;
margin-bottom: .1em;
}
.secondSubject {
padding-top: 15px;
}
.thirdTitle {
padding-top: 15px
}
.calButton {
padding-top: 400px;
}
.featureIconLeft1 {
left: 10%;
}
.featureTextLeft1 {
left: 6%;
}
.featureIconRight2 {
left: 5%;
}
.featureTextRight2 {
left: 1%;
}
.robpic {
width: 200px;
}
.name {
font-size: 10px;
padding-bottom: 0;
margin-bottom: 0px;
}
.title {
font-size: 8px;
padding-bottom: 2em;
}
.sectionSpace {
margin-top: 0px;
padding-top: 1.2em;
}
.backGround {
background-color: #F8FBFC;
width: 100%;
}
.tjFooterLogo {
max-width: 100px
}
#noBorder {
border: none;
width: 30%;
padding-top: 3%;
padding-bottom: 4%;
background-color: #F8FBFC;
}
.footerText {
font-size: 12px;
padding-bottom: .5em;
}
.fullWidth {
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
}
.footerLogo {
width: 50%;
padding-top: 8%;
padding-bottom: 4%;
}
.footerTextCopy {
font-style: normal;
color: rgb(107, 113, 117);
font-size: 10px;
}
.name {
font-size: 18px;
font-weight: 200;
}
.title {
font-size: 14px;
font-weight: 400;
}
@media only screen and (min-width: 980px) {
.mainSubjects,
.mainSubjectsWhy {
font-size: 32px;
}
.subjectContent {
font-size: 22px;
}
}
@media only screen and (min-width: 1224px) {
.heroText {
font-size: 64px;
padding-top: 4%;
padding-left: 20%;
padding-right: 20%;
}
.subHeroText {
font-size: 20px;
word-spacing: .2em;
}
.btn-primary {
width: 150px;
}
.mainSubjects {
font-size: 40px;
font-weight: 900;
}
.subjectContent {
font-size: 20px;
}
.name {
font-size: 20px;
font-weight: 400;
}
.title {
font-size: 15px;
font-weight: 200;
}
.footerLogo {
width: 20%;
margin-top: 0;
padding-top: 2em;
padding-bottom: 10px;
}
.footerText {
font-size: 15px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@200;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<title>Clover Networks and TextJet Loyalty</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light">
<a href="./index.html" class="navbar-brand">
<img src="./assets/images/TextJet.png" height="28" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#whatIsTextJet" class="nav-item nav-link">What is TextJet?</a>
<a href="https://support.textjet.com/en/" class="nav-item nav-link">FAQ</a>
<a href="#pricingSection" class="nav-item nav-link">Pricing</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#pricingSection" class="nav-item nav-link">Sign Up</a>
<a href="https://app.textjet.com/app/login" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>
<div class="container-flex heroSection">
<div class="row">
<div class="col-12">
<h1 class='heroText text-center'>Powerful loyalty software for small businesses!
</h1>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h2 id="subHeroText">Now available on Clover Networks!
</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.</div>
</div>
<img class="img-fluid" src="./assets/images/hero-image.png" alt="TextJet Hero images">
<img class="img-fluid heroBottom" src="./assets/images/hero-bottom.png" alt="img for bottom">
</div>
</div>
</div>
</div>
<div class="container secondSection">
<div class="row">
<div class="col-xs-12 col-sm-6">
<a id="whatIsTextJet"></a>
<h3 class="mainSubjects">Powerful Loyalty</h3>
<p class="subjectContent">Streamline your loyalty platform to maximize your reach. TextJet helps you turn occasional customers into loyal fans. We have spent countless hours designed and developing a system that will give you the upper hand over your competition. Not sure
if TextJet is right for you... schedule a demo and find out why hundreds of businesses rely on TextJet. </p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer1.png" alt="Happy Customer">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer2.png" alt="Happy Customer">
</div>
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Marketing Autopilot</h3>
<p class="subjectContent">We know running a business can be time restraining. With TextJet Marketing Autopilot we provide a powerful marketing suite without little to no effort on your part! After you set-up your account with one of our Customer Support Representatives,
everything will be in place for you to see results with TextJet! </p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Retention Plus</h3>
<p class="subjectContent">TextJet retention plus is a really cool tool we built to help you keep your customers coming back. Let's pretend Suzy comes into your store today, but you don't see her for 30+ days. TextJet retention starts to go to work for you. Our tools help
entice Suzy to come back to your store. It's really an amazing tool for your business!
</p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer3.png" alt="Happy Customer">
</div>
</div>
</div>
<!-- Features-->
<div class="bg-light py-5 service-5 featureSection">
<div class="container">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-12 text-center">
<p class="mainSubjects ourFeatures">Our Features</p>
</div>
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-comment"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Rich
Messaging</a></h6>
<p class="mt-3">Send beautiful images or videos directly to your customers' cell phones.
</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="fab fa-medapps"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Retention
Plus</a></h6>
<p class="mt-3">TextJet tracks how long it's been since a customer has been to your store. We set-up triggers to bring them back to your store. </p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-paper-plane"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Handsfree
Marketing</a></h6>
<p class="mt-3">TextJet is an easy to use marketing solution built for small businesses. It takes about 4 minutes to set-up and your account will be ready to go.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-chart-bar"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Analytics &
Tracking
</a></h6>
<p class="mt-3">We have reporting in place so you can see how your account is performing. We want you to see the value of TextJet!</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-object-group"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">2-Way
Messaging</a></h6>
<p class="mt-3">You can have a 2-way conversation with your customers using TextJet. This is a great customer service tool.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-gem"></i></div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">SmartPulse
(coming soon)</a></h6>
<p class="mt-3">Find out how your customers feel about your store. Resolve issues and keep your customers happy</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Features-->
<!-- Pricing -->
<div class="container-flex sectionSpace bg-white">
<div class="row">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<a id="pricingSection"></a>
<h1 class="mainSubjects">Pricing</h1>
<p class="subHeroText">Our plans are designed to grow with you! No contracts, no set-up fees, and awesome customer support is included in all packages. </p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Starter Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$1 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">50 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Business Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$39 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">1000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$89 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">5000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
Started</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="mainSubjects text-center">Ready to see the TextJet difference?</h4>
<p class='subHeroText text-center'>We are here to help you grow your business!
</h2>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in 15 minutes.
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment, Cancel anytime.
</div>
</div>
</div>
</div>
</div>
<div class="container-flex footer">
<div class="row">
<div class="col-4 text-center">
<img class="footerLogo" src="./assets/images/textjet_fitted.png" alt="textjet logo" />
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Pricing</div>
<div class="col-12 text-center footerText">FAQ</div>
<div class="col-12 text-center footerText">Contact Support</div>
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Privacy Policy</div>
<div class="col-12 text-center footerText">Terms of Service</div>
<div class="col-12 text-center footerText">Anti-Spam Policy</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center footerTextCopy">
© Copyright 2020 Textjet LLC
</div>
</div>
</body>
</html>解决方案
问题是您的 Bootstraprow类不在 Bootstrapcontainer类中。
您正在使用container-flex不是 Bootstrap 类的类 - 我假设您打算使用container-fluid（这是一个 Bootstrap 类）？例如
<div class="container-flex heroSection">
<div class="row">
<div class="col-12">
<h1 class='heroText text-center'>Powerful loyalty software for small businesses!
</h1>
</div>
</div>
</div>
这是造成问题的原因：是因为 Bootstrap 容器类在左右添加 15px 填充，并且row该类有-15px边距来删除它（即它将行扩展30px）并使行全宽。如果row不在 Bootstrap 容器类中，则会将 30px 添加到宽度并导致您看到滚动条和空白。
工作代码
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-5 {
font-family: "Montserrat", sans-serif;
color: #636468;
font-weight: 300;
}
.service-5 h1,
.service-5 h2,
.service-5 h3,
.service-5 h4,
.service-5 h5,
.service-5 h6 {
color: #3e4555;
}
.service-5 a {
text-decoration: none;
}
.service-5 .linking {
color: #3e4555;
}
.service-5 .linking:hover {
color: #316ce8;
}
.service-5 .font-weight-medium {
font-weight: 500;
}
.service-5 .bg-light {
background-color: #f4f8fa !important;
}
.service-5 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.service-5 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.service-5 .wrap-service5-box .card-body {
padding: 30px;
}
.service-5 .wrap-service5-box .text-success-gradiant {
background: #f47820;
background: -webkit-linear-gradient(legacy-direction(to right), #f47820 0%, #f47820 100%);
background: -webkit-gradient(linear, left top, right top, from(#f47820), to(#f47820));
background: -webkit-linear-gradient(left, #f47820 0%, #f47820 100%);
background: -o-linear-gradient(left, #f47820 0%, #f47820 100%);
background: linear-gradient(to right, #f47820 0%, #f47820 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.service-5 .wrap-service5-box .icon-size {
font-size: 45px;
}
.service-5 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
#textWhite {
color: white;
font-size: 25px;
}
.featureSection {
margin-top: 30px;
}
.ourFeatures {
margin-bottom: 50px;
}
* {
font-family: "Montserrat", sans-serif;
color: #636468;
}
.heroText {
font-weight: 900;
font-size: 50px;
color: #373E42;
padding-top: 4%;
padding-bottom: .3%;
}
#subHeroText {
font-size: 40px;
font-weight: 400;
color: #6b7175;
margin-top: 0px;
}
#setupText {
font-size: 22px;
color: rgb(107, 113, 117);
margin-bottom: 0.3em;
padding-top: 1em;
}
#heroButton {
font-size: 25px;
}
#cancelAnytime {
font-size: 22px;
color: rgb(107, 113, 117);
padding-bottom: 1em;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.footer {
padding: 30px 0;
background: #eee !important;
width: 100%
}
.priceText {
font-size: 15px;
font-weight: 100;
}
.secondSection {
background-color: white;
width: 100%;
}
.extraPad {
padding-bottom: 4%;
}
.question1 {
border: 1px solid black;
}
.priceBox {
border-width: thin;
border-color: #E9EEF1;
border-style: solid;
padding-top: 3%;
}
.dollarSymbol,
.mo,
.amount {
padding-bottom: 4%;
}
#extraSpace {
padding-left: 100px;
padding-right: 100px;
}
.dollarSymbol {
font-size: 20px;
font-weight: 400;
}
.amount {
font-size: 60px;
font-weight: 900;
}
.mo {
padding-top: 3%;
padding-left: 3%;
}
.faq {
padding-top: 20px;
padding-bottom: 20px;
}
#priceIcons {
padding-left: 20%;
}
.iconFeatures {
padding-left: 0%;
}
.iconTextPrice {
padding-left: 3%;
font-size: 14px;
font-weight: 200;
padding-top: 1%;
}
.iconUs {
left: 27%;
padding-top: 3%;
padding-bottom: 4%;
}
.textIcon {
color: black;
font-weight: 200;
}
#heroButtonPricing {
font-size: 20px;
width: 300px;
}
li {
font-size: 12px;
justify-content: left;
}
.heroBottom {
background-color: white;
}
.heroSection {
background-color: #F8FBFC;
}
.liRight {
text-align: left;
margin-left: 3em;
}
.navbar {
background-color: #F8FBFC;
}
li.borderless {
border: 0 none;
padding-top: 0;
}
.subHeroTextBottom {
font-size: 12px;
color: rgb(107, 113, 117);
padding-top: 1px;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.mainSubjectsWhy {
font-weight: 400;
font-size: 28px;
padding-top: 2em;
padding-bottom: .2em;
}
.mainSubjectsFaq {
font-weight: 400;
font-size: 28px;
padding-top: 8em;
padding-bottom: .2em;
}
.subjectHeader {
font-weight: 400;
font-weight: 100;
font-size: 18px;
padding-top: 0;
padding-bottom: .2em;
}
.readyToSignUp {
font-weight: 100;
font-size: 18px;
padding-top: 0;
margin-bottom: .1em;
}
.secondSubject {
padding-top: 15px;
}
.thirdTitle {
padding-top: 15px
}
.calButton {
padding-top: 400px;
}
.featureIconLeft1 {
left: 10%;
}
.featureTextLeft1 {
left: 6%;
}
.featureIconRight2 {
left: 5%;
}
.featureTextRight2 {
left: 1%;
}
.robpic {
width: 200px;
}
.name {
font-size: 10px;
padding-bottom: 0;
margin-bottom: 0px;
}
.title {
font-size: 8px;
padding-bottom: 2em;
}
.sectionSpace {
margin-top: 0px;
padding-top: 1.2em;
}
.backGround {
background-color: #F8FBFC;
width: 100%;
}
.tjFooterLogo {
max-width: 100px
}
#noBorder {
border: none;
width: 30%;
padding-top: 3%;
padding-bottom: 4%;
background-color: #F8FBFC;
}
.footerText {
font-size: 12px;
padding-bottom: .5em;
}
.fullWidth {
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
}
.footerLogo {
width: 50%;
padding-top: 8%;
padding-bottom: 4%;
}
.footerTextCopy {
font-style: normal;
color: rgb(107, 113, 117);
font-size: 10px;
}
.name {
font-size: 18px;
font-weight: 200;
}
.title {
font-size: 14px;
font-weight: 400;
}
@media only screen and (min-width: 980px) {
.mainSubjects,
.mainSubjectsWhy {
font-size: 32px;
}
.subjectContent {
font-size: 22px;
}
}
@media only screen and (min-width: 1224px) {
.heroText {
font-size: 64px;
padding-top: 4%;
padding-left: 20%;
padding-right: 20%;
}
.subHeroText {
font-size: 20px;
word-spacing: .2em;
}
.btn-primary {
width: 150px;
}
.mainSubjects {
font-size: 40px;
font-weight: 900;
}
.subjectContent {
font-size: 20px;
}
.name {
font-size: 20px;
font-weight: 400;
}
.title {
font-size: 15px;
font-weight: 200;
}
.footerLogo {
width: 20%;
margin-top: 0;
padding-top: 2em;
padding-bottom: 10px;
}
.footerText {
font-size: 15px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@200;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<title>Clover Networks and TextJet Loyalty</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light">
<a href="./index.html" class="navbar-brand">
<img src="./assets/images/TextJet.png" height="28" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#whatIsTextJet" class="nav-item nav-link">What is TextJet?</a>
<a href="https://support.textjet.com/en/" class="nav-item nav-link">FAQ</a>
<a href="#pricingSection" class="nav-item nav-link">Pricing</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#pricingSection" class="nav-item nav-link">Sign Up</a>
<a href="https://app.textjet.com/app/login" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>
<div class="container-fluid heroSection">
<div class="row">
<div class="col-12">
<h1 class='heroText text-center'>Powerful loyalty software for small businesses!
</h1>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h2 id="subHeroText">Now available on Clover Networks!
</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.</div>
</div>
<img class="img-fluid" src="./assets/images/hero-image.png" alt="TextJet Hero images">
<img class="img-fluid heroBottom" src="./assets/images/hero-bottom.png" alt="img for bottom">
</div>
</div>
</div>
</div>
<div class="container secondSection">
<div class="row">
<div class="col-xs-12 col-sm-6">
<a id="whatIsTextJet"></a>
<h3 class="mainSubjects">Powerful Loyalty</h3>
<p class="subjectContent">Streamline your loyalty platform to maximize your reach. TextJet helps you turn occasional customers into loyal fans. We have spent countless hours designed and developing a system that will give you the upper hand over your competition. Not sure
if TextJet is right for you... schedule a demo and find out why hundreds of businesses rely on TextJet. </p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer1.png" alt="Happy Customer">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer2.png" alt="Happy Customer">
</div>
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Marketing Autopilot</h3>
<p class="subjectContent">We know running a business can be time restraining. With TextJet Marketing Autopilot we provide a powerful marketing suite without little to no effort on your part! After you set-up your account with one of our Customer Support Representatives,
everything will be in place for you to see results with TextJet! </p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Retention Plus</h3>
<p class="subjectContent">TextJet retention plus is a really cool tool we built to help you keep your customers coming back. Let's pretend Suzy comes into your store today, but you don't see her for 30+ days. TextJet retention starts to go to work for you. Our tools help
entice Suzy to come back to your store. It's really an amazing tool for your business!
</p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer3.png" alt="Happy Customer">
</div>
</div>
</div>
<!-- Features-->
<div class="bg-light py-5 service-5 featureSection">
<div class="container">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-12 text-center">
<p class="mainSubjects ourFeatures">Our Features</p>
</div>
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-comment"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Rich
Messaging</a></h6>
<p class="mt-3">Send beautiful images or videos directly to your customers' cell phones.
</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="fab fa-medapps"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Retention
Plus</a></h6>
<p class="mt-3">TextJet tracks how long it's been since a customer has been to your store. We set-up triggers to bring them back to your store. </p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-paper-plane"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Handsfree
Marketing</a></h6>
<p class="mt-3">TextJet is an easy to use marketing solution built for small businesses. It takes about 4 minutes to set-up and your account will be ready to go.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-chart-bar"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Analytics &
Tracking
</a></h6>
<p class="mt-3">We have reporting in place so you can see how your account is performing. We want you to see the value of TextJet!</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-object-group"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">2-Way
Messaging</a></h6>
<p class="mt-3">You can have a 2-way conversation with your customers using TextJet. This is a great customer service tool.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-gem"></i></div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">SmartPulse
(coming soon)</a></h6>
<p class="mt-3">Find out how your customers feel about your store. Resolve issues and keep your customers happy</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Features-->
<!-- Pricing -->
<div class="container-fluid sectionSpace bg-white">
<div class="row">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<a id="pricingSection"></a>
<h1 class="mainSubjects">Pricing</h1>
<p class="subHeroText">Our plans are designed to grow with you! No contracts, no set-up fees, and awesome customer support is included in all packages. </p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Starter Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$1 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">50 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Business Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$39 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">1000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$89 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">5000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
Started</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="mainSubjects text-center">Ready to see the TextJet difference?</h4>
<p class='subHeroText text-center'>We are here to help you grow your business!
</h2>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in 15 minutes.
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment, Cancel anytime.
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid footer">
<div class="row">
<div class="col-4 text-center">
<img class="footerLogo" src="./assets/images/textjet_fitted.png" alt="textjet logo" />
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Pricing</div>
<div class="col-12 text-center footerText">FAQ</div>
<div class="col-12 text-center footerText">Contact Support</div>
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Privacy Policy</div>
<div class="col-12 text-center footerText">Terms of Service</div>
<div class="col-12 text-center footerText">Anti-Spam Policy</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center footerTextCopy">
© Copyright 2020 Textjet LLC
</div>
</div>
</body>
</html>推荐阅读
- sql - 优化SQL Query，需要建议
- sql - 如何修复oracle中的xml标签
- python - 无法将表单保存到模型 django
- java - 为什么`2.0 - 1.1`和`2.0F - 1.1F`会产生不同的结果？
- python - 如何附加所有细分的多边形坐标？
- python - 从数据框中获取上一个和下一个值并添加一个新列
- android - 异常：- android.database.CursorIndexOutOfBoundsException：请求索引 0，大小为 0
- android-sqlite - 内存分配 - UI 卡住/挂起 - 网络调用 (Rx2AndroidNetworking) 和在 SQLite (ActiveAndroid) 中插入记录
- scheduler - 如何将 tivoli 工作负载动态控制台连接到 tws？
- c# - 我无法从 Main() 有条件地更改 Windows 窗体的大小