I'm creating a Santa letter writing website and I'm trying to get a graphic of Santa to look like it is riding on top of the snow. The issue is I cannot seem to get it to work responsively. For reference below is a mockup image of how I would like the Santa graphic placed with everything else I have. How can I make this work?
The container needed bit restructuring to make it work. On the image set following classes img-fluid w-50 h-50 align-self-end
<!DOCTYPE html>
<html lang="en" referrerpolicy="no-referrer">
<head referrerpolicy="no-referrer">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- remove following in production-->
<meta name="referrer" content="no-referrer">
<title>Reindeer Express</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- link rel="stylesheet" href="css/style.css" -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://kit.fontawesome.com/1463370ce3.js" crossorigin="anonymous"></script>
<style>
.bg-img {
background-image: url("https://i.imgur.com/9L54Zdw.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.custom-shape-divider-bottom-1637548946 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1637548946 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 70px;
}
.custom-shape-divider-bottom-1637548946 .shape-fill {
fill: #FFFFFF;
}
#stop-btn {
display: none;
}
#how-to-mail {
display: none;
}
#hidden-template {
display: none;
}
.img-anim {
transform-origin: 25% 75%;
animation: ride 2s ease-in-out 0s infinite alternate;
}
#keyframes ride {
0% {
transform: rotateZ(356deg);
}
100% {
transform: rotateZ(359deg);
}
}
</style>
</head>
<body onload=display_countdown; referrerpolicy="no-referrer">
<div class="bg-img">
<nav class="navbar navbar-dark navbar-expand-sm">
<div class="container-fluid position-relative">
<a class="navbar-brand position-absolute fixed-top" style="left:12px" href="#">
<img src="https://i.imgur.com/vavioW9.png" alt="" width="24" height="29"
class="d-inline-block align-text-top">
Reindeer Express
</a>
<div class="navbar-collapse collapse flex-grow-0 mx-auto">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#"><u>Home</u></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><u>Nav Item</u></a>
</li>
<li class="nav-item ">
<a class="nav-link text-white" href="#"><u>Nav Item</u></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container col-xxl-8 px-4 py-5">
<div class="d-sm-flex justify-content-between">
<img class="img-fluid w-50 h-50 align-self-end img-anim" src="https://i.imgur.com/4n4uujr.png">
<div class="col flex-lg-row-reverse align-items-center g-5 p-5">
<div class="col-10">
<h1 class="fw-bold lh-1 mb-3 text-white">Reindeer Express</h1>
<p class="lead text-white" id="welcome">Welcome Friends to the Reindeer Express! Have you ever wanted to
write
a letter
to Santa Clause? Well now you can! Fill out the form below to let Santa know what you would like for
Christmas!
But that is not all! You can also download a copy of your letter once you send it! How cool is that?</p>
</div>
<div class="">
<h1 class="text-white" id="countdown_days"></h1>
</div>
</div>
</div>
</div>
<div class="custom-shape-divider-bottom-1637548946">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" class="shape-fill"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" class="shape-fill"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
class="shape-fill"></path>
</svg>
</div>
</div>
<section id="form-area" class="py-3">
<div class="container">
<div class="row py-5">
<div class="col text-center">
<h2>Write a letter to Santa</h2>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-12 ">
<img class="img-fluid d-block mx-auto w-75" src="https://i.imgur.com/ZeukS4C.png"
alt="santa standing by a reindeer">
</div>
<div class="col-md-7 col-sm-12">
<form id="form" onsubmit="handleSubmit(event)">
<div class="mb-3 form-floating">
<input type="email" placeholder="ex: parent#mail.com" class="form-control" id="parentEmail"
oninput="handleChange(event)" required>
<label for="parentEmail" class="form-label">Parent's Email Address</label>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3 ">
<input type="text" placeholder="ex: Sally Smith" class="form-control" id="name"
oninput="handleChange(event)" required>
<label for="name" class="form-label">Name</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3 ">
<input type="number" placeholder="3" class="form-control" id="age" oninput="handleChange(event)"
required min="0" max="150">
<label for="age" class="form-label">Age</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="gender" aria-label="select gender" oninput="handleChange(event)"
required>
<option>Pick boy or girl</option>
<option value="boy">Boy</option>
<option value="girl">Girl</option>
</select>
<label for="gender" class="form-label">Gender</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="behavior" aria-label="select naughty or nice"
oninput="handleChange(event)" required>
<option>Select option</option>
<option value="nice">Nice</option>
<option value="naughty">Naughty</option>
<option value="okay">Okay</option>
</select>
<label for="behavior" class="form-label">Behavior</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="wishlistOne" class="form-label">Name three things you would like for Christmas:</label>
<input type="text" placeholder="1." class="form-control" id="wishlistOne" oninput="handleChange(event)"
required>
</div>
<div class="mb-3">
<input type="text" placeholder="2." class="form-control" id="wishlistTwo" oninput="handleChange(event)"
required>
</div>
<div class="mb-3">
<input type="text" placeholder="3." class="form-control" id="wishlistThree" oninput="handleChange(event)"
required>
</div>
<div class="mb-3 form-floating">
<textarea class="form-control textbox" id="message" oninput="handleChange(event)" rows="10"
required></textarea>
<label for="message" class="form-label">Write a message for Santa</label>
<div class="row mt-1">
<div class="col">
<p id="instructions" class="text-muted"></p>
</div>
<div class="col d-flex flex-row-reverse">
<button class="btn btn-outline-primary btn-sm" id="start-btn">
<i class="fas fa-microphone"></i>
Start Voice to Text
</button>
<button class="btn btn-outline-primary btn-sm" id="stop-btn">
<i class="fas fa-microphone-slash"></i>
End Voice to Text
</button>
</div>
</div>
</div>
<div class="col-12">
<button id="send-letter-btn" class="btn btn-danger" type="submit" value="submit">
<i class="fas fa-paper-plane"></i> Submit
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section id="how-to-mail" class="py-3">
<div class="container">
<div class="row">
<div class="col text-center">
<h3>How to mail your letter</h3>
<p class="fw-light">Instructions from the USPS</p>
</div>
</div>
<div class="row">
<div class="col mail-instructions">
<p>
<span class="number">1. </span>Print downloaded PDF with your letter
</p>
<p>
<span class="number">2. </span>Place letter in envelope
</p>
<p>
<span class="number">3. </span>Address letter to "Santa Claus, North Pole"
</p>
<p>
<span class="number">4. </span>Place First-Class Mail stamp to envelope
</p>
<p>
<span class="number">5. </span>Have parent mail your letter!
<br>
<small class="fw-light">Additional instructions for parents</small>
</p>
</div>
</div>
</div>
</section>
<footer class="py-5 bg-light">
<p>footer</p>
</footer>
<!-- hidden template goes here -->
<div id="hidden-template">
<div class="container">
<div class="row">
<div class="col">
<p id="letter-name"></p>
<p id="letter-age"></p>
<p id="letter-gender"></p>
<p id="letter-behavior"></p>
<p id="letter-wishlist-one"></p>
<p id="letter-wishlist-two"></p>
<p id="letter-wishlist-three"></p>
<p id="letter-message"></p>
</div>
</div>
</div>
<div id="elementH"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/bootstrap.bundle.js"></script>
<script src="./js/form.js"></script>
<script src="./js/speech.js"></script>
<script>
var display_countdown = setInterval(function () {
countdown();
}, 10)
function countdown() {
var currentDate = new Date();
var christmasDate = new Date("12/25/2021 12:00:00");
var timeLeft = christmasDate.getTime() - currentDate.getTime();
var days_Left = Math.round(timeLeft / (1000 * 60 * 60 * 24));
if (currentDate.getTime() !== christmasDate.getTime()) {
days_Left - 1;
document.getElementById('countdown_days').innerHTML = "Christmas is in " + days_Left + " Days!";
} else {
document.getElementById('countdown_days').innerHTML = "MERRY CHRISTMAS!";
}
display_countdown;
}
</script>
</body>
</html>
Note: In order to make your code work in my environment I had to made some changes. Like putting entire style.css in <style> tag, added meta referer tag, added bootstrap cdn link. Remove the animation if you don't like it.
Compress the background image it's too big 1.77mb. Convert it to jpg, because the png is not transparent.
That should work just great if you add img-fluid to the image Class.
<img src="https://i.imgur.com/4n4uujr.png" class="img-fluid">
I am working on a website that has a left and right container, which you can see if you run the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<style>
.card
{
background-color: #EFF3FC!important;
}
html, body
{
height: 100%;
}
.toggleBlue
{
color: blue;
}
.regular
{
color: gray;
}
#radioDiv
{
text-align: left;
display: inline-block;
margin-left: 25px;
}
.required:before
{
content: "*";
color: red;
}
.btnBlue
{
background: #1467ba;
height: 25px;
width: 70px;
font-size: 14px;
color: white;
margin-right: 30px;
}
.btnSave
{
background: #1467ba;
height: 25px;
width: 70px;
font-size: 14px;
color: white;
margin-right: 10px;
}
</style>
<body>
<div class="container-fluid h-100">
<div class="row no-gutters h-100">
<div class="col-md-2 my-auto p-1">
<div class="card card-block pl-2 ">
<br>
<img class="mx-auto" src="CoreCLM_Logo.JPG" alt="CoreCLM Logo" width="80px" height="50px"> </img>
<hr class="mx-auto" style="height:1px;border:none;color:#333;background-color:#333;width:80%;" />
<p class="toggleBlue"> 1. Procurement Requests & Funding </p>
<p class="regular"> 2. Suppiles or Services </p>
<p class="regular"> 3. Contract Type </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>
</div>
<div class="col-md-10 my-auto">
<div class="card card-block">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #E6E6E6;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Edit Profile </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Logout </a>
</li>
</ul>
<form>
<button class="btnSave" type="submit"> SAVE </button>
<button class="btnBlue" type="submit"> CANCEL </button>
</form>
<form class="form-inline my-2 my-lg-0 text-center">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<input type="image" src="searchicon.jpg" width="38px" height="38px"/>
</form>
</div>
</nav>
<div class="p-3">
<form>
<p style="font-size: 18px; text-align: center;"> Ensure the accuracy and completeness of procurement request packages and availability of funds to fulfill the procurement request </p>
<br>
<p style="font-size: 16px; color: gray;"> Have you advised customers on the completeness and accuracy of the procurement request? </p>
<div class="form-group">
<div id="radioDiv">
<input type="radio" id="yes1" name="option">
<label for="yes"> Yes </label>
<br>
<input type="radio" id="no1" name="option">
<label for="no"> No </label>
</div>
<br>
</div>
<p class="required" style="font-size: 16px; color: gray;">Has the funding type been identified? </p>
<div class="form-group">
<div id="radioDiv">
<input type="radio" id="yes2" name="option">
<label for="yes"> Yes </label>
<br>
<input type="radio" id="no2" name="option">
<label for="no"> No </label>
</div>
<br>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label style="color: gray; font-size: 16px;" class="required" for="fundingAmount">If yes, then what is the funding amount? </label>
<input type="number" id="fundingAmount" class="form-control mx-sm-3">
</div>
</form>
<br> <br> <br> <br> <br> <br> <br> <br>
</div>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: white">
<div class="col-md-10">
<div style="color: gray; font-size: 14px;" class="required">Required Question </div>
</div>
<div class="col-md-2">
<button class="btnBlue" type="submit"> > </button>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
I am confused why the right and left container are not perfectly the same in terms of their height. I have tried adding br tags to adjust the height, but it always overshoots or undershoots it. How should I fix this?
I see you're using BS 4.3 but upgrade to BS 4.6 and utilize Bootstrap Flex utilities and add the .align-items-stretch class to the parent of your left and right containers. You have to declare that you're using flex with d-flex. Set the cols with .w-25 and .w-75, which sets up your sidebar and main structure...play with the alignment classes, you'll see what's going on. Do not set fixed heights, I'd get rid of your padding and margin classes, all that eats up space and messes with your overall layout and structure. Add padding and margin once your know your house is built right. Get rid of all the break tags too. But this should put you on track to solve your height stretching dilema.
<div class="container-fluid">
<div class="d-flex align-items-stretch">
<div class="w-25 bg-info">
<div class="bg-info">
<img class="mx-auto" src="CoreCLM_Logo.JPG" alt="CoreCLM Logo" height="50px">
<p class="toggleBlue"> 1. Procurement Requests & Funding </p>
<p class="regular"> 2. Suppiles or Services </p>
<p class="regular"> 3. Contract Type </p>
</div>
</div>
<div class="w-75 bg-warning">
Content stretches here...
</div>
</div>
</div>
My current problem is that rows are overlapping each other when the screen is shrinked (responsive). I've tried adding containers without success. Also, I've noticed that rows are not "pushing" the content below them when in mobile screen sizes... What am I doing wrong here?
Everything looks very well on desktop and tablet, but once I reach mobile screen sizes it gets hairy.
Here's the live code: Codepen - Bootstrap rows overlapping
Here's my current HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" />
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
Any guidence would be helpful!
Change height from vh to %
.v-align{
height:30%;
}
#import url('https://fonts.googleapis.com/css?family=Maven+Pro|Roboto');
body {
background-color: ;
padding-top: 70px;
}
#full-h {
height: 100%;
width: 100%;
}
.txt-wrap {
word-wrap: break-word;
}
.v-align {
height: 30%;
}
.v-align2 {
height: 40%;
}
.fl-row {
background-color: #314d74;
}
.f-row {
margin-top: 6vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.s-row {
background-color: #b3bdc7;
}
.s-row-box {
padding: 5vh;
text-align: center;
}
.t-row {
background-color: #697fa4;
}
h1 {
color: #FFE082;
text-align: center;
margin-top: 2vh;
}
h2 {
border-left: 4px solid #FFB300;
}
.sol-icons {
font-size: 72px;
}
.sol-icons-cap {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.form-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact.s-row-box {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 576px) {
/* ... */
}
#media (min-width: 768px) {
/* ... */
}
/****** Canvas Animation ******/
/***** Animation CSS Code *****/
.project-title--container,
.project-link--container {
width: 100%;
text-align: center;
}
.project-title,
.project-link {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.project-title {
font-size: 18px;
margin-top: 10px;
}
.project-link,
.project-link a {
color: #fff;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
.fa {
font-size: 22px !important;
padding: 0 5px;
color: #fff;
}
.container-animation--flexbox {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.animationItem {
position: absolute;
margin-right: 35px;
}
#animationItem-image--bigCloud {
animation: bobble 2s infinite;
margin-top: 3vh;
margin-left: 12vh;
font-size: 170px;
color: #7ec0ee;
}
#animationItem-image--smallCloud {
animation: bobble 4s infinite;
margin-top: 12vh;
margin-left: 20vh;
font-size: 145px;
color: #e9e9e9;
}
.smallCloud-two {
margin-bottom: 5px;
margin-right: 320px;
font-size: 145px;
z-index: -1;
color: #d9d9d9 !important;
animation: bobble 2.5s infinite !important;
}
#keyframes bobble {
0% {
transform: translate3d(0px, -25px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(0px, -35px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, -25px, 0px);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Network Technology</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" /> TEST WEB
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud1" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
</html>
I've using bootstrap labels in web page but in normal page its looking good but in modal there is no margin b/w two labels:
$('.task').dblclick(function (e) {
$('#Modal_Task_View').modal({keyboard: true, show: true});
});
/* Common styles for all types */
.task {
padding: 10px 15px;
margin: 10px 0;
border: 1px solid #eee;
border-left-width: 10px;
border-radius: 3px;
}
.task h4 {
margin-top: 0;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="task task-overdue" data-id="2">
<div class="row">
<div class="col-lg-9 col-md-8 col-sm-6 col-xs-12">
<h4>Title 2
(First Category)
<i class="fa fa-eye" aria-hidden="true"></i>
<i class="fa fa-pencil" aria-hidden="true"></i>
</h4>
Assigned to :<span class="spn-actionee">
<label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label>
<label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label>
</span></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<span class="pull-right">
Due Date: 26-Jun-2017<br>
Days Left: 0
</span>
</div>
</div>
</div>
<div class="modal" id="Modal_Task_View" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" ><div class="modal-backdrop fade in"></div>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title task_title">Task 2 Wishlist </h4>
<label class="label task_status task-head-due">Due</label><label class="label label-info task_priority">Normal</label>
<span class="pull-right"><label>Due Date : <span class="task_due_date">08-Jul-2017</span></label></span>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<label>Category : <span class="tc_name">Second Category</span></label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label>Description :</label>
<span class="task_desc">Description Description Description</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>Assigned To :</label>
<span class="spn-actionee"><label class="label label-info" data-id="1">Standard</label><label class="label label-info" data-id="17">Ash Wilde(ACW)</label><label class="label label-info" data-id="2">admin admin(admin)</label></span>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="list-group spn-linked">Linked TasksTitle 4Title 3</div>
</div>
<div class="col-sm-6">
<div class="list-group linked-docs">Documents</div>
</div>
</div>
</div>
</div>
</div>
</div>
The label class ".label" is an inline element by default so when you place two or more together there should be some space inbetween by default. This should also work inside a modal.
Also, you should not be using the <label> element for this. The <label> tag defines a label for an <input> element. Use a <span> instead.
This because of no line change or spacebar in modal have a look these two example
No Space/Line Change Example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span><label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label><label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label></span>
Line Change Example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span>
<label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label>
<label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label>
</span>
You can try this
#myModal .modal-body span.spn-actionee label {
margin-right: 10px;
}
Hope it will helps you.
Here is my main page code. It is working in the localhost but not on my website.
My website link where pics are not comming - bh007.hol.es. I have even added some images (1.PNG, 2.jpg, 3.PNG) in the ftp but then also its not working
heres the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1,maximum-scale=1">
<meta name="description" content="BlackHackers Co. Ltd. established in 2015 has launched digital India most ambitious project freedom 420, within the price range of 420 rupees">
<meta name="keywords" content="Cheapest smartphone in India, Affordable smartphone, Freedom 420, 4G smartphone under 500, Best smartphone 2016, Smartphone in 420">
<meta name="author" content="">
<title>Freedom 420 The best mobile to be get fooled</title>
<link rel="stylesheet" href="https://s3-ap-southeast-1.amazonaws.com/fdmfiles/css/bootstrap.min.css">
<link rel="stylesheet" href="https://s3-ap-southeast-1.amazonaws.com/fdmfiles/css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/favicon.ico">
<link rel="apple-touch-icon" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="https://s3-ap-southeast-1.amazonaws.com/fdmimages/apple-touch-icon-152x152.png" />
<style>
.nav > li > a { padding: 5px 13px; font-size:12px; color:#666; border-bottom:solid 2px #FFF}
.nav > li > a:hover{ background-color:#FFF; color:#0C8F0D; border-bottom:solid 2px #0C8F0D}
.pad_0{ padding:0}
.mob_no{color:#FF863B; font-size:12px; margin-top:23px; text-align:right}
.contact-btn{ background-color:#FF863B; color:#FFFFFF!important; border-radius:15px; font-weight:bold; padding: 5px 10px!important; border:solid 1px #FF863B!important}
.contact-btn:hover{ background-color:#FFFFFF!important; color:#FF863B!important; border:solid 1px #FF863B}
.header_img{ background-image:url(2.jpg); background-size:100% 100%; height:570px; border-bottom:solid 1px #005BA8}
.btn-buy{background-color:#1ABA1C; color:#FFFFFF;margin-top: 27%;margin-left: 34%; font-size: 20px;border-radius: 20px;font-weight: bold;padding: 8px 20px;}
.btn-buy:hover{ color:#FFFFFF; background-color:#1B971A}
.form-control{ border-radius:0px}
label{ font-weight:normal!important; color:#666666}
.selected-menu > a{ background-color:#FFF; color:#0C8F0D!important; border-bottom:solid 2px #0C8F0D!important}
.selected1-menu > a{ background-color:#FFFFFF!important; color:#FF863B!important; border:solid 1px #FF863B}
.selected-menu1{background-color:#FFF; color:#0C8F0D!important;}
.hlwitslogo{ margin-top:105px; float:left}
#media (max-width:991px) {
.hlwitslogo{ margin:15px auto!important;}
.hlwitslogo > span { margin-right:15px}
}
#media (min-width:769px) and (max-width:1024px){
.header_img{ height:400px}
.mob_no{ font-size:11px; text-align:center}
.nav > li > a { padding: 5px 6px;}
.navigation{ padding-left:0; padding-right:0}
.halwits_logo{ width:27%; margin-left:15px;}
.hlwitslogo{ margin-top:97px}
.footer_img{ margin-top:18%}
}
</style>
<script src="https://s3-ap-southeast-1.amazonaws.com/fdmfiles/js/jquery-1.11.3.min.js"></script>
<script src="https://s3-ap-southeast-1.amazonaws.com/fdmfiles/js/bootstrap.min.js"></script>
<script src="https://s3-ap-southeast-1.amazonaws.com/fdmfiles/js/general.js"></script>
<script>
$(document).ready(function() {
$('input[name="quantity"]').keyup(function() {
var quantity = $(this).val();
var price = ;
var shipping = ;
var final_price = quantity * price;
$('.f_price').html(final_price);
var final_shipping = quantity * shipping;
$('.s_price').html(final_shipping);
$('.t_price').html(final_price + final_shipping);
});
});
</script>
</head>
<body>
<div style="overflow-x: hidden;" class="container-fluid">
<div class="row visible-lg visible-md" style="border-bottom:solid 1px #005BA8">
<div class="container">
<div class="col-md-12" style="padding:10px 0px">
<div class="col-md-3"><img src="1.png" class="img-responsive" /></div>
<div class="col-md-4 pad_0">
<p class="mob_no">CUSTOMER CARE NO. 0120-4001000, 4200470, 6619580</p>
</div>
<div class="col-md-5 navigation" style="padding-top:15px">
<ul class="nav navbar-nav pull-right">
<li class="">ABOUT US</li>
<li class="">MISSION AND VISION</li>
<li class="">CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
<!------mobile menu start----->
<div class="row header hidden-md hidden-lg" style="margin-bottom: -20px;">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="navbar-header" style="background-color:#FFFFFF; float:none"> <span style=" float:left; margin-left:10px;"><img src="1.png" class="img-responsive" /> </span>
<div class="mini-submenu" style="display:block; float:right;padding:8px; border-radius:4px; margin:10px;"> <span class="icon-bar" style=" background-color:#FF5C19"></span> <span class="icon-bar" style=" background-color:#FF5C19"></span> <span class="icon-bar" style=" background-color:#FF5C19"></span> </div>
</div>
<div class="list-group mobile_link hidden-md hidden-lg" style=" position:absolute; width:54%;z-index: 1000; left:-1000px">
<i class="fa fa-comment-o"></i> Home
<i class="fa fa-search"></i> ABOUT US
<i class="fa fa-user"></i> MISSION AND VISION
<!-- <i class="fa fa-comment-o"></i> BUY NOW-->
<!-- <i class="fa fa-folder-open-o"></i> MEDIA -->
<i class="fa fa-envelope"></i> CONTACT US </div>
</div>
</div>
</nav>
</div>
<!------mobile menu end----->
<div class="row header_img visible-lg visible-md">
<div class="container">
<div class="col-md-12">
<!--<button class="btn btn-buy">BUY NOW</button>-->
<!--<button class="btn btn-buy" style="font-size:14px">Booking starts from 18th Feb - 6 AM onwards</button>-->
</div>
</div>
</div>
<div class="row visible-xs visible-sm">
<img src="2.jpeg" class="img-responsive" />
</div>
<div class="row">
<div class="container">
<div class="col-md-12 visible-md visible-lg"> <img src="https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_part.jpg" class="img-responsive" style="margin:15px auto" /> </div>
<div class="col-xs-12 visible-xs visible-sm table-responsive" style="padding:0; margin-top:10px">
<table class="table">
<tr>
<td><img src="https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_part.jpg" class="img-responsive" style="margin:15px auto" /></td>
</tr>
</table>
</div>
</div>
<div class="row first_con">
<div class="container">
<div class="col-md-12">
<div class="col-md-6"> <img src="https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_freedom251.jpg" alt="freedom251" class="img-responsive" /> </div>
<div class="col-md-6">
<p>Freedom to Flaunt your Bread</p>
<p>All your favourite Breads, Lolcats and jokes are rendered vivid and larger than life on the 4 inch (Only if your life is less than 4 inches) (10.2 cms) special "420" qHD IPS display.</p>
</div>
</div>
</div>
</div>
<div class="row sec_con">
<div class="container">
<div class="col-md-12">
<div class="col-md-6">
<p>Freedom to Capture</p>
<p class="cam">Freedom 420 comes With a special "420" 3.2MP AF Rear Camera & .3MP Front camera capture best moments of your life with a special 'Low Quality Blur' Effect. Guranteed you will not get this feature in the I-Phone. Freedom 420 with its inbuilt touchless technology is Ideal for blurry Selfie. For Selfie lovers life just got a little more difficult. Still better than a pin hole camera.</p>
</div>
<div class="col-md-6 cam-spec"> <img src="https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_freedom.jpg" alt="freedom" class="img-responsive" /> </div>
</div>
</div>
</div>
<div class="row third_con">
<div class="container">
<div class="col-md-12">
<div class="col-md-6"> <img src="https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_freedom1.jpg" alt="freedom251" class="img-responsive" /> </div>
<div class="col-md-6">
<p>Freedom to throw your phone at somebody</p>
<p>Don't let a moment to throw your phone to anyone that passes you by. Enjoy the boundless freedom of throwing your phone so that even if it breaks, you will never regret! throw this phone on your family, friends
or followers wherever you are with an enhanced hardness that gives you the ultimate bread you need at lightning fast speeds.</p>
</div>
</div>
</div>
</div>
<div class="row fourth_con" style="background-image:url(https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_bgr.jpg); background-repeat:no-repeat;background-position: 100% 10%;">
<div class="container">
<div class="col-md-12" style="padding-top:5%; padding-bottom:5%">
<div class="col-md-6">
<p style="margin-top:20%">Freedom to your fitness</p>
<p style="font-size:20px; color:#48A645">Throw this phone at anybody and run away! Will enhance your stamina and will act as your personal trainer!! Never miss a chance to loose your weight by throwing this phone at anyone! It comes with a special feature called
the "420 Bhaggo" feature for better hardness to break someone's head.</p>
</div>
<div class="col-md-6"> <img src="https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_freedom2.jpg" alt="freedom" class="img-responsive" /> </div>
</div>
</div>
</div>
<div class="row six_con" style="border-top:solid 4px #0C8F0D;">
<div class="container">
<div class="col-md-12" style="padding-top:5%; padding-bottom:5%">
<div class="col-md-6"> <img src="https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_freedom3.jpg" alt="freedom251" class="img-responsive" /> </div>
<div class="col-md-6">
<p>Freedom to charge!</p>
<p>You can even charge your Freedom 420! The greatest feature in this phone!</p>
</div>
</div>
</div>
</div>
<div class="row fifth_con">
<div class="container">
<div class="col-md-12 visible-md visible-lg" style="padding-top:5%; padding-bottom:5%"> <img src="3.jpg" class="img-responsive" style="margin:15px auto" /> </div>
<div class="col-xs-12 visible-xs visible-sm table-responsive" style="padding:0; margin-top:10px">
<table class="table">
<tr>
<td><img src="3.jpg" class="img-responsive" style="margin:15px auto; width:600px" /></td>
</tr>
</table>
</div>
</div>
</div>
</div> <div class="row">
<div class="row" style="background-color:#FFF; padding-bottom:10px">
<div class="container">
<div class="col-md-12 col-xs-12" style="padding-right:0px;">
<div class="col-md-5 social col-xs-12">
</div>
<ul class="nav navbar-nav col-md-12 col-xs-12">
</ul>
</div>
</div>
<div class="col-md-4 col-xs-12"> <img src="https://s3-ap-southeast-1.amazonaws.com/fdmimages/img_footer.jpg" alt="freedom251" class="img-responsive footer_img"> </div>
<div class="col-md-3 col-xs-12 halwits_logo" style="padding-right:0px;" align="right"><span class="description hlwitslogo"><span style="float:left; margin-top:8px">Developed & Managed By </span></span><img src="lol.jpg" alt="Halwits" class="img-responsive hlwitslogo" style="margin-left:10px"></div>
</div>
<div class="col-md-12 col-xs-12 footer_txt">
<!--<p>© Freedom 251 | All Rights Reserved | Privacy Policy<span>Design & Developed by Halwits</p>-->
</div>
</div>
</div>
</div>
</div>
<!---popup start--->
<div class="popup-bg" id="popup-bg-book" onClick="hideContactpopup()"></div>
<div class="popup-body" id="popup-book"> </div>
<!---popup end----->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73802173-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
I noticed in your code you have img src attribute is pointing to a relative link:
<img src="2.jpeg" class="img-responsive" />
if the file is not on the server in the same manner as you local then it will not render. So to ensure that it will work properly provide all the files in their respective location. Also make sure this class "img-responsive" is set correctly.
And if all else fails and the files are in the right location, make them absolute links instead.