I am trying to build a static web page as a part of a bigger project (the project is in Laravel).
Everything seems to work fine except for the footer that is behaving unusually.
Despite being at the bottom of the HTML tree, it tends to occupy much more space, overlapping many of the elements above it.
I have already tried changing the div (footer) to the 'footer' element and then to a 'section' element but to no avail.
My HTML file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Medical Insurance</title>
<link rel="stylesheet" type="text/css" href="{{ asset('web/css/medicalInsuranceStyles.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<!-- header -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-offset-1 col-md-3">
<a href="https://www.letsmd.com/">
<img id='main-logo' src="<?php echo e(asset('/web/images/logo-without-Tagline.svg')); ?>">
</a>
</div>
</div>
<!-- banner -->
<div id='banner-container'>
<div id="transparent-div"></div>
<div id='banner-text-div'>
<h1>Smart Health Insurance Cover</h1>
<h2>Starting from ₹5/day</h2>
</div>
</div>
<!-- content part one -->
<div>
<div class='col-md-12 col-sm-12 col-xs-12' id="content-div-one">
<h2>Same premium, <span id='content-div-one-span'>2x</span> the value</h2>
<button class="btn btn-default">Apply Now</button>
</div>
</div>
<!-- content part two -->
<div>
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="content-div-two">
<h2><span>CARE COVER</span> PLAN</h2>
<p>Ensures affordable, comprehensive cover</p>
<ul>
<li>Coverage for family</li>
<li>Covers everything under a standard health policy</li>
<li>Sum Insured options upto 5lacs with deductibles</li>
<li>Sum Insured on family floater basis</li>
<li>Hospitalisation expenses + pre - post hospitalisation covered</li>
<li>All room/ICU/nursing/medicine/surgery etc charges covered</li>
<li>Day care procedures covered</li>
<li>Coverage available at all leading hospitals across the country</li>
<li>Deductible 50,000/100,000 options available. Deductible finances at 0% EMI</li>
<li>Tax benifits under section 80D</li>
</ul>
</div>
</div>
<!-- form -->
<div>
<div class='col-md-12 col-sm-12 col-xs-12' id="form-div">
<h2><span>GET</span> QUOTE</h2>
<form action="" method="POST">
<div id="form">
<section id="form-section-one">
<p>Enter Your Name</p>
<input type="text" name="name">
<p>Your Mobile No.</p>
<input type="number" name="number">
<p>Email-Id</p>
<input type="email" name="email">
</section>
<section id="form-section-two">
<p>Gender</p>
<input type="radio" name="gender" value='female'><span>Female</span>
<input type="radio" name="gender" value='male'><span>Male</span>
<input type="radio" name="gender" value='others'><span>Others</span>
<p>Source of Income</p>
<select name="income-source" id="">
<option value="" selected disabled>-- Select One --</option>
<option value="">alpha</option>
<option value="">beta</option>
<option value="">gamma</option>
</select>
<p>Annual Income/Salary</p>
<input type="number" name="salary">
</section>
<section id="form-section-three">
<p>Our team will get in touch with you for further processing</p>
<p>Please select the number of family members you want to get insured with you</p>
<select name="family-memers" id="">
<option value="" selected disabled>-- Select One --</option>
<option value="">alpha</option>
<option value="">beta</option>
<option value="">gamma</option>
</select>
<p id='greeting-text'>Thank You</p>
</section>
</div>
<button class="btn btn-default" id='form-btn'>Next</button>
</form>
</div>
</div>
<!-- video -->
<!-- <div>
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="video-div">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div> -->
<!-- media mentions -->
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="media-mentions-div">
<h2><span>MEDIA</span> MENTIONS</h2>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-sm-offset-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/2017.10.06_09-23-18bhaskar.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" class="img-responsive"src="<?php echo e(asset('/web/loancard/Media/vccircle.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/TheHindu-Logo.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/Zee-Business-CS6-1110x550.png')); ?>">
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-sm-offset-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/dribbble_001_2x.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/the-economic-times-logo-png-1.png')); ?>" >
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yahoo-logo-png-transparent-background-768x256.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yourstory.png')); ?>">
</div>
</div>
</div>
<!-- footer -->
<div class="row" id='footer'>
<div class="col-md-5 col-sm-5 col-xs-5 pull-left">
<p>Copyright © {{ date('Y') }} LetsMD. All rights reserved </p>
</div>
<div class="col-md-offset-1 col-md-6 col-sm-offset-1 col-sm-6 col-xs-6 pull-right">
<p>
Get social with us
<a href="https://www.facebook.com/LetsMDMedbay/" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://www.youtube.com/channel/UC4urUJpHcA9LpeRQ1O2hdjw" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube-play fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://in.linkedin.com/company/letsmd" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="{{ asset('web/js/medicalInsuranceScript.js') }}"></script>
</html>
My CSS file :
#main-logo {
width: 50%;
margin-top: 5%;
}
#transparent-div {
width: 70%;
margin: 0 auto;
background: black;
opacity: 0.7;
color: white;
padding: 10px 50px;
min-height: 200px;
}
#content-div-one {
color: #E97C2B;
background: #f1efef;
text-align: center;
min-height: 300px;
}
#content-div-one button {
color: white;
background-image: linear-gradient(to right, #105e7b , #44b649);
box-shadow: 3px 3px 6px black;
border: none;
font-size: 170%;
font-weight: bold;
padding: 10px 20px;
}
#content-div-one button:hover {
font-size: 175%;
transition: all 0.2s;
box-shadow: 6px 6px 6px black;
}
#content-div-one button:focus {
outline:0;
}
.container-fluid {
margin: 0 !important;
padding: 0 !important;
}
#banner-container {
background-image: url('/images/family.jpg');
background-size: cover;
min-height: 500px !important;
padding-top: 20%;
position: relative;
}
#banner-text-div {
color: white;
margin: 0 auto;
width: 70% !important;
text-align: center;
position: absolute;
left: 15%;
bottom: 14%;
}
#banner-text-div h1 {
font-size: 400%;
font-weight: bolder;
font-style: italic;
}
#banner-text-div h2 {
font-size: 340%
}
#content-div-one h2 {
font-size: 300%;
font-weight: bold;
margin-top: 5%;
}
#content-div-one-span {
font-size: 300%;
}
#content-div-two h2 {
text-align: center;
color: #59A553;
margin-top: 8%;
}
#content-div-two p {
text-align: center;
color: #306577;
font-size: 150%;
/*margin-bottom: 6%;*/
}
#content-div-two h2 span {
font-weight: bolder;
}
#content-div-two ul {
color: #306577;
font-size: 150%;
margin: 5% 10%;
line-height: 200%;
}
#form-div {
background: #f1efef;
}
#form-div h2, #media-mentions-div h2 {
text-align: center;
color: #59A553;
margin-top: 10%;
margin-bottom: 5%;
}
#form-div h2 span, #media-mentions-div h2 span {
font-weight: bolder;
}
#form {
background: white;
padding: 5%;
box-shadow: 1px 1px 10px black;
width: 50% !important;
margin: 0 auto;
}
#form section p {
font-size: 150%;
color: #306577;
margin-top: 10%;
}
#form section select, #form section input[type='text'], #form section input[type='number'], #form section input[type='email'] {
width: 100%;
border: 2px solid #306577;
background: #f1efef;
font-size: 175%;
margin-bottom: 5%
}
#form section select {
height: 45px !important;
}
#form-btn {
width: 50%;
margin: 5% 25%;
text-align: center;
color: white;
background-image: linear-gradient(to right, #105e7b , #44b649);
box-shadow: 3px 3px 6px black;
border: none;
font-size: 170% !important;
font-weight: bold;
padding: 10px 20px;
margin-bottom: 10%;
}
#form-btn:hover {
font-size: 175%;
transition: all 0.2s;
box-shadow: 6px 6px 6px black;
}
#form section input[type='radio'] {
margin: 0px 10px;
}
#form-section-two span {
margin-right: 10%;
font-size: 120%;
}
#form-section-three p:first-child {
color: #E97C2B;
}
#greeting-text {
font-style: italic;
text-align: center;
font-size: 200% !important;
}
#media-mentions-div {
margin-bottom: 8%;
}
#footer {
background: grey;
color: white;
}
My JS file :
var sectionNumber = 2;
function toggleForm() {
if (sectionNumber === 0) {
$('#form-section-one').css('display','block');
$('#form-section-two').css('display','none');
$('#form-section-three').css('display','none');
}
else if (sectionNumber === 1) {
$('#form-section-one').css('display','none');
$('#form-section-two').css('display','block');
$('#form-section-three').css('display','none');
}
else if (sectionNumber === 2) {
$('#form-section-one').css('display','none');
$('#form-section-two').css('display','none');
$('#form-section-three').css('display','block');
}
else {
}
}
toggleForm();
What I expect (as stated) is that the footer should come at the bottom of the page and not overlap the elements above it.
What I expect :
What I'm getting :
Thank You
Add a wrapper row for the content above footer section
Check this fiddle
<div class="row">
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12'
id="media-mentions-div"></div>
</div>
Related
I am trying to get an SVG to go in the bottom right-hand corner of an image in a bootstrap card. I tried a solution similar to this: picture on the bottom right cornor of image but using the CSS for the icon makes my SVG disappear completely. I did not include the SVG tags in my code snippet because it was very long. But the full SVG I am using can be found here: https://communityloaves.org/wp-content/uploads/2022/03/breadherobadge.svg
Using the included code the cards look like this:
I would like them instead to have the SVG in the bottom right corner of the all green image. like in the second picture.
.image{
height:100%;
position:relative;
background-color:green;
background-size: cover;
background-image: url(https://communityloaves.org/wp-content/uploads/2021/05/Avatar-2-450x450.jpg);
}
.image .icon {
position:absolute;
bottom:0px;
right:0px;
}
p.dash-intro.nav-btns {
padding-top: 3rem;
}
.col-md-4.padding-1 {
padding-left: 5px;
padding-right: 5px;
}
.ann-text {
margin-bottom: 0px !important;
}
.ann-img {
max-height: 40rem;
}
.dash-intro {
color: black;
font-size: 18px;
margin-top: 35px;
}
.member-img {
max-height: 7rem;
margin-bottom: 6px;
padding-left: 15px;
}
p.card-text {
font-size: 11px;
padding: 9px 15px 9px 0px;
}
.special {
color: black;
font-size: 19px;
font-weight: bold;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #D4E1D4;
border-bottom: 1px solid rgba(0,0,0,0.125);
}
.hide {
display: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<br>
<hr>
<div class="row mt-3">
<div class="col-md-12">
<h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
</div>
</div>
<div class="row">
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image">
<div class="icon"><svg goes here. I didnt inlcude the full svg because it was too long> </div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> janedoe#gmail.com</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image" stlye="background-image: url();">
<div class="icon">><svg goes here. I didnt inlcude the full svg because it was too long></div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> janedoe#gmail.com</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image" stlye="background-image: url();">
<div class="icon">><svg goes here. I didnt inlcude the full svg because it was too long></div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> janedoe#gmail.com</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I add an image inside .icon class you can add your svg.
Basically you need to give parent class which is .icon a position:relative and your svg (child) position:absolute than you can play inside with
bottom, left, right and top properties which in this situation need
bottom:0;
right: 0;
Here is your code
*,
*::before,
*::after {
box-sizing: border-box;
}
.image{
height:100%;
position:relative;
background-color:green;
background-size: cover;
}
.image .icon {
position:relative;
width: 100%;
height: 100%;
}
.image .icon img{
position: absolute;
bottom:0;
right: 0;
border-radius: 100%;
width: 80px;
}
p.dash-intro.nav-btns {
padding-top: 3rem;
}
.col-md-4.padding-1 {
padding-left: 5px;
padding-right: 5px;
}
.ann-text {
margin-bottom: 0px !important;
}
.ann-img {
max-height: 40rem;
}
.dash-intro {
color: black;
font-size: 18px;
margin-top: 35px;
}
.member-img {
max-height: 7rem;
margin-bottom: 6px;
padding-left: 15px;
}
p.card-text {
font-size: 11px;
padding: 9px 15px 9px 0px;
}
.special {
color: black;
font-size: 19px;
font-weight: bold;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #D4E1D4;
border-bottom: 1px solid rgba(0,0,0,0.125);
}
.hide {
display: none;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<div class="container-fluid">
<br />
<hr />
<div class="row mt-3">
<div class="col-md-12">
<h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
</div>
</div>
<div class="row">
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image">
<div class="icon">
<img
src="https://source.unsplash.com/random/100x100"
alt=""
/>
</div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br /></span>
<span class="font-weight-bold">Member Since: </span> Apr 13,
2022 <br />
<span class="font-weight-bold">First Donation: </span> Feb 27,
2022 <br />
<span class="email-text"
><span class="font-weight-bold"
><i class="fa fa-envelope"></i
></span>
janedoe#gmail.com</span
>
<br /><span class="font-weight-bold"
><i class="fa fa-phone"></i
></span>
555 555 555 (cell) <br /><span class="font-weight-bold"
>Loaves to date:
</span>
5
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I have a thin white line that is hard to see on the right side of my website. You can notice it if you scroll to the right on the webpage. Using DevTools it looks like it is 15px padding.
I am trying to remove this and I have tried to find the item that is causing this but I can't seem to find it. What could be causing the problem?
Image of white line:
Url of site: 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">
What is TextJet?
FAQ
Pricing
</div>
<div class="navbar-nav ml-auto">
Sign Up
Login
</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">
Sign Up
<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>
The problem is that you have Bootstrap row classes that are not inside a Bootstrap container class.
You are using the class container-flex which isn't a Bootstrap class - I assume you meant to use container-fluid (which is a Bootstrap class)? e.g.
<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>
The reason this is causing a problem: is because Bootstrap container classes add 15px padding left and right, and the row class has -15px margin to remove this (i.e. it extends the row by 30px) and make the row full width. If the row is not inside a Bootstrap container class, the 30px is being added to the width and causing the scrollbar and whitespace you see.
Working Code
#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">
What is TextJet?
FAQ
Pricing
</div>
<div class="navbar-nav ml-auto">
Sign Up
Login
</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">
Sign Up
<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>
This is what happend on my cards while having excess card in 1 row, I need it to be on the exact height and width even if different sizes of images. This is also in BOOTSTRAP 3
.card {
background-color: #fff;
border: 1px solid transparent;
border-radius: 6px;
}
.card>.card-link {
color: #333;
}
.card>.card-link:hover {
text-decoration: none;
}
.card>.card-link .card-img img {
border-radius: 6px 6px 0 0;
}
.card .card-img {
position: relative;
padding: 0;
display: table;
}
.card .card-img .card-caption {
position: absolute;
right: 0;
bottom: 16px;
left: 0;
}
.card .card-body {
display: table;
width: 100%;
padding: 12px;
}
.card .card-header {
border-radius: 6px 6px 0 0;
padding: 8px;
}
.card .card-footer {
border-radius: 0 0 6px 6px;
padding: 8px;
}
.card .card-left {
position: relative;
float: left;
padding: 0 0 8px 0;
}
.card .card-right {
position: relative;
float: left;
padding: 8px 0 0 0;
}
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
I need to be on the same width and height so this not happen THANK YOUUU :(((
There are a few things you need to adjust. I have documented the changes in the source code.
The main container is changed into a flexbox. Since the default for flexbox items is stretch, all cards will have the same height.
Everything below the image is in a separate container and aligned to the bottom of the card.
/* Added */
.overview {
display: flex;
}
.card-default {
display: flex;
flex-wrap: wrap;
}
.card-default>* {
width: 100%;
}
.excludingImage {
align-self: flex-end;
text-align: center;
}
/* End Added */
.card {
background-color: #fff;
border: 1px solid transparent;
border-radius: 6px;
}
.card>.card-link {
color: #333;
}
.card>.card-link:hover {
text-decoration: none;
}
.card>.card-link .card-img img {
border-radius: 6px 6px 0 0;
}
/*
.card .card-img {
position: relative;
padding: 0;
display: table;
}
.card .card-img .card-caption {
position: absolute;
right: 0;
bottom: 16px;
left: 0;
}
*/
.card .card-body {
/* display: table;
width: 100%; */
padding: 12px;
}
.card .card-header {
border-radius: 6px 6px 0 0;
padding: 8px;
}
.card .card-footer {
border-radius: 0 0 6px 6px;
padding: 8px;
}
/*
.card .card-left {
position: relative;
float: left;
padding: 0 0 8px 0;
}
.card .card-right {
position: relative;
float: left;
padding: 8px 0 0 0;
}
*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Class overview is added -->
<div class="col-xs-6 col-sm-3 overview">
<div class="card card-default">
<div class="card-img">
<img src="https://via.placeholder.com/120x100" alt="Card image" class="img-thumbnail" height="100">
</div>
<!-- Extra div added to enable alignment at bottom -->
<div class="excludingImage">
<div class="card-body">
<p class="card-text" style="color:#00873a"><b>Cart name</b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱100.00</strike> ₱100.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
<div class="card card-default">
<div class="card-img">
<img src="https://via.placeholder.com/120x150" alt="Card image" class="img-thumbnail" height="100">
</div>
<!-- Extra div added to align at bottom -->
<div class="excludingImage">
<div class="card-body">
<p class="card-text" style="color:#00873a"><b>Cart name</b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱100.00</strike> ₱100.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
</div>
You can use flexbox to achieve this add display:flex to parent div and check
check code snippet below using flexbox
.card-main {
display: flex;
}
<div class="card-main">
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
</div>
Note: please change display:flex to display:block for responsive in media query:
The navigation bar is at a certain distance away from the top, after scrolling past the navigation-bar, it sticks to the top but unfortunately it's width expands beyond the container(it's defined in). The navigation-bar should retain it's original width, so how do I resolve it? Here's my github link too :- https://github.com/Archiie/MyPortfolio
.affix {
top: 0px;
margin: 0px 20px;
}
.affix + .container {
padding: 5px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
Check Now its working, when it is sticky then it's position fixed so you have to give it width or set left and right position
.affix {
top: 0px;
margin: 0px 20px;
width:1100px;
}
#media (max-width: 1199px)
{
.affix {
width: 900px;
}
}
#media (max-width: 991px)
{
.affix {
width: 680px;
}
}
#media (max-width: 768px)
{
.affix {
left:15px;
right:15px;
width:auto;
}
}
.affix + .container {
padding: 0px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
Here is my codepen: https://codepen.io/LastSoldi3r/pen/OmjGgR
HTML:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
I understand that you can change the css within bootstrap itself to change these effects. However, I am learning and seeing as I am new I just used the link provided on the bootstrap website instead of sifting through the css. If you look at my pen you will see that hovering over any text well darken it and underline some parts.
I have tried overriding the code in various ways.
My most recently tried, and most commonly found solution:
a.hover {text-decoration: none !important;}
This has not worked for me and I haven't been able to find any other working solution.
add this simple code to your css file :
html a:hover {
text-decoration: none !important;
}
here is how your page will shown :
html a:hover {
text-decoration: none !important;
}
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
You were super close!
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
text-decoration: none;
}
Here is a forked example of what you are looking for:
https://codepen.io/anon/pen/NjaobY
I just added text-decoration: none to your existing CSS. https://codepen.io/anon/pen/Lyzqxp
Replace a.hover with a:hover and it should work.
.hover means "class named hover"
:hover means "when the element is hovered"
If you're using Chrome, the Developper Tools (right click -> inspect element) -or similar firebug features- will allow you to see what css is being rendered on any element.
you should override bootstrap style by "!important" please use this:
https://codepen.io/houtan/pen/mmBvop