Develop Reference

Two buttons, only one works

Only one out of my two “Order Now” buttons seems to work. Can’t find out the issue. The link and the :hover function works for the first button but for the second one none of them works. The first button is showcasebutton and the second one is showcasebutton2. They use the same code in CSS but it still isn’t working.
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
* {
border: 0px solid black;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: linear-gradient(rgba(10, 10, 104, 0.068), rgba(89, 85, 150, 0.247)), url(imgs/teslamodely.jpg);
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
float: right;
margin: 0%;
padding-right: 42px;
}
nav ul li {
display: inline-block;
padding: 16px 32px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.logo {
height: 80px;
float: left;
margin: 16px 48px;
}
h1 {
font-size: 48px;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
padding-top: 125px;
color: #fff;
margin: 0;
}
.description {
width: 80%;
margin: 50px auto;
}
p {
font-size: 18px;
line-height: 28px;
color: #333;
text-align: justify;
}
nav.black {
background: rgba(126, 114, 145, 0.61);
}
.trustbadge {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
padding-bottom: 10px;
}
#model_s {
width: 100%;
float: left;
z-index: -1;
}
#model_3 {
width: 100%;
margin-top: -4px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #11232F;
height: 30px;
border-radius: 20px;
padding: 10px;
}
.search-box.hover>.search-txt {
width: 180px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
color: black;
}
.search-btn {
color: #017CC9;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #11232F;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 30px;
width: 180px;
font-weight: bold;
}
#searchbtnpic {
height: 25px;
color: white;
}
* {
border: 0px solid black;
}
.showcasebutton {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container {
position: relative;
width: 100%;
z-index: -1;
align-content: center;
}
.nametext {
position: absolute;
top: 20px;
width: 100%;
}
.showcasebutton2 {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton2:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
z-index: 2;
}
#buttonid2 {
display: flex;
justify-content: center;
margin-top: 150px;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<header>
<nav>
<a href="index.html">
<img class="logo" src="imgs/Tesla_logo.png">
</a>
<div class="menu">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search....">
<a class="search-btn" href="">
<img id="searchbtnpic" src="imgs/searchbtn.png" alt="">
<i class="fas fa-search">
</i>
</a>
</div>
<ul>
<li>Home</li>
<li>Cars</li>
<li>Cart</li>
</ul>
</div>
</nav>
<h1>Model Y</h1>
<div id="buttonid">
<a href="cart.html">
<button type="button" class="showcasebutton">Order Now</button>
</a>
</div>
</div>
</header>
<div class="container">
<img id="model_s" src="imgs/Tesla_model_S.jpg" alt="">
<div class="nametext">
<h1>Model S</h1>
<div id="buttonid2">
<a href="cart.html">
<button type="button" class="showcasebutton2">Order Now</button>
</a>
</div>
</div>
</div>
<img id="model_3" src="imgs/model_3.png" alt="">

I added a container class and deleted the nametext class.
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
* {
border: 0px solid black;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: linear-gradient(rgba(10, 10, 104, 0.068), rgba(89, 85, 150, 0.247)), url(imgs/teslamodely.jpg);
background-size: cover;
background-position: center;
width: 100%;
padding-bottom: 20px;
}
nav {
position: absolute;
width: 100%;
line-height: 60px;
}
nav ul {
float: right;
margin: 0%;
padding-right: 42px;
}
nav ul li {
display: inline-block;
padding: 16px 32px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.logo {
height: 80px;
float: left;
margin: 16px 48px;
}
h1 {
font-size: 48px;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
padding-top: 125px;
color: #fff;
margin: 0;
}
.description {
width: 80%;
margin: 50px auto;
}
p {
font-size: 18px;
line-height: 28px;
color: #333;
text-align: justify;
}
nav.black {
background: rgba(126, 114, 145, 0.61);
}
.trustbadge {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
padding-bottom: 10px;
}
#model_s {
width: 100%;
float: left;
z-index: -1;
}
#model_3 {
width: 100%;
margin-top: -4px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #11232F;
height: 30px;
border-radius: 20px;
padding: 10px;
}
.search-box.hover>.search-txt {
width: 180px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
color: black;
}
.search-btn {
color: #017CC9;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #11232F;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 30px;
width: 180px;
font-weight: bold;
}
#searchbtnpic {
height: 25px;
color: white;
}
* {
border: 0px solid black;
}
.showcasebutton {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container {
position: relative;
width: 100%;
z-index: -1;
align-content: center;
}
.showcasebutton2 {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton2:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid2 {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container{
position: relative;
width: 100%;
align-content: center;
padding-bottom:20px;
height: auto;
background: #2421fe;
display: block;
z-index:1;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<header>
<nav>
<a href="index.html">
<img class="logo" src="imgs/Tesla_logo.png">
</a>
<div class="menu">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search....">
<a class="search-btn" href="">
<img id="searchbtnpic" src="imgs/searchbtn.png" alt="">
<i class="fas fa-search">
</i>
</a>
</div>
<ul>
<li>Home</li>
<li>Cars</li>
<li>Cart</li>
</ul>
</div>
</nav>
<h1>Model Y</h1>
<div id="buttonid">
<a href="cart.html">
<button type="button" class="showcasebutton">Order Now</button>
</a>
</div>
</header>
<div class="container">
<img id="model_s" src="imgs/Tesla_model_S.jpg" alt="">
<div>
<h1>Model S</h1>
<div id="buttonid2">
<a href="cart.html">
<button type="button" class="showcasebutton2">Order Now</button>
</a>
</div>
</div>
</div>
<img id="model_3" src="imgs/model_3.png" alt="">

How to change image url after upload

I simply created the Facebook posting section in react functional
after I upload a picture I want to preview it and its working fine check this:
after writing something on description and upload image when I click post button it creates post like This:
forget the profile picture its giving everything same but I want it to preview the original image so is there any way in JavaScript to change the local URL to some working URL so I can see image
I am a beginner in react so kindly give solution in JavaScript because image preview is also done with JS
I don't know if this can help you or not but this is the code everything is written in App.js file and its exporting in index.js
function like(e){
const element = e.target;
element.classList.toggle('changeColor');
const thumbsUp = e.target.childNodes[0];
if(thumbsUp.className === 'far fa-thumbs-up'){
thumbsUp.className = 'fas fa-thumbs-up';
}
else{
thumbsUp.className = 'far fa-thumbs-up';
}
}
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src)
}
console.log(output.src);
};
function App(){
var count = 0;
var obj = [];
const Upload = ({profile}) => {
var [postDetail, settingPostDetail] = React.useState('');
var [postImage, setPostImage] = React.useState('');
function postBtn (){
var output = document.getElementById('output');
var imageUrl = output.src;
postImage = imageUrl;
var setObj = {
id : count,
postDetail,
postImage
}
count = count+1;
obj.push(setObj);
settingPostDetail('');
setPostImage('');
}
return (
<>
<div className="uploadContent">
<div className="comment">
<form id="commentForm">
<div>
<img src={profile}/>
</div>
<input type="text" placeholder="Whats on your mind..." onChange={(e) => settingPostDetail(e.target.value)} />
</form>
<div className="image-preview">
<img id="output"/>
</div>
<ul className="uploadIcons">
<li><i className="fas fa-video"></i>Live Video</li>
<li><i className="fas fa-file-image"></i><input type="file" className="custom-file-input" accept="image/*" onChange={loadFile}/></li>
<li><i className="far fa-laugh"></i>Feeling / Activities</li>
</ul>
<div className="postBtn">
<input type="button" value="post" onClick={postBtn}/>
</div>
</div>
</div>
<Post functionalPost={obj}/>
</>
)
}
function Post(props) {
// eslint-disable-next-line no-lone-blocks
return(
<div className="major_container">
{props.functionalPost.map((postDetails) => {
let {id, postDetail, postImage} = postDetails;
return (
<div id={id} className="post">
<div className="post_top_bar">
<div>
<img src={props.profile}/>
</div>
<div>
<span>Muhaymin</span>
<p>12-12-2020</p>
</div>
</div>
<div>
<p>{postDetail}</p>
<img src={postImage}/>
</div>
<div className="emoji">
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
</div>
<div className="reactions">
<button onClick={like}><i className="far fa-thumbs-up"></i>Like</button>
<button><i className="far fa-comment-alt"></i>Comments</button>
<button><i className="fas fa-share"></i>Share</button>
</div>
<div className="comment">
<form id="commentForm">
<div>
<img src={props.profile}/>
</div>
<input type="text" placeholder="Write a comment..."/>
</form>
</div>
</div>
)
})}
</div>
)
}
return(
<div className="main_container">
<Upload profile="https://scontent.fkhi2-1.fna.fbcdn.net/v/t1.0-9/126435904_2740947029493468_1372746916749511118_o.jpg?_nc_cat=108&ccb=2&_nc_sid=09cbfe&_nc_ohc=eFGfxtrYKHQAX_XyVSw&_nc_ht=scontent.fkhi2-1.fna&oh=a019fbfa628a7885d3ae7483fa2d017d&oe=5FFFE5BB"/>
</div>
)
}
export default App;
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap');
body{
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
background-color: #18191a;
}
/* upload post */
.uploadContent{
background-color: #252525;
width: 500px;
margin: 0 auto;
padding: 10px 0;
box-sizing: border-box;
border-radius: 10px;
margin: 20px auto 0;
}
.uploadContent .comment #commentForm{
margin-top: 0;
}
.uploadIcons{
display: flex;
list-style: none;
padding: 0;
margin: 0 20px 0;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
border-top: 1px solid rgb(95, 95, 95);
}
.image-preview{
padding: 20px;
box-sizing: border-box;
}
.image-preview img{
width: 100%;
}
.uploadIcons li:nth-child(2){
display: flex;
align-items: center;
width: 150px;
}
.uploadIcons li{
color: rgb(182, 182, 182);
font-size: 14px;
cursor: pointer;
padding: 10px;
box-sizing: border-box;
transition: .2s ease-in-out;
}
.uploadIcons li:hover{
background-color: #ffffff1a;
border-radius: 5px;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Photo Upload';
display: inline-block;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-family: 'Poppins', sans-serif;
outline: none;
}
.custom-file-input:focus{
outline: none;
}
.custom-file-input:hover::before {
outline: none;
}
.custom-file-input:active::before {
outline: none;
}
.uploadIcons li i{
margin-right: 7px;
font-size: 22px;
}
.uploadIcons li:first-child i{
color: rgb(231, 56, 56);
}
.uploadIcons li:nth-child(2) i{
color: rgb(29, 134, 29);
}
.uploadIcons li:nth-child(3) i{
color: rgb(219, 176, 33);
}
.postBtn{
width: 100%;
padding: 7px 20px;
box-sizing: border-box;
}
.postBtn input{
width: 100%;
background-color: #3688ce;
border: none;
color: white;
height: 40px;
border-radius: 8px;
font-size: 17px;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
outline: none;
cursor: pointer;
}
.post{
width: 500px;
height: auto;
background-color: #252525;
border-radius: 10px;
padding: 10px 0;
box-shadow: 5px 5px 15px rgb(31 31 31 / 80%);
margin: 20px auto 0;
}
.post .post_top_bar{
margin: 0 20px;
position: relative;
}
.post .post_top_bar div:nth-child(1),
.comment #commentForm div{
width: 45px;
height: 45px;
position: relative;
display: inline-block;
overflow: hidden;
border-radius: 50%;
}
.comment #commentForm div{
width: 40px;
height: 40px;
}
.post .post_top_bar::after,
.comment #commentForm::after{
content: '';
position: absolute;
background-color: #028302;
width: 10px;
height: 10px;
border-radius: 50%;
left: 32px;
bottom: 1px;
z-index: 9999;
}
.comment #commentForm::after{
left: 26px;
}
.post .post_top_bar div img,
.comment #commentForm div img{
display: inline;
margin: 0 auto;
height: 100%;
}
.post .post_top_bar{
display: flex;
}
.post .post_top_bar div:nth-child(2){
line-height: 1.2;
margin-left: 6px;
}
.post .post_top_bar div:nth-child(2) span{
font-weight: bold;
color: white;
font-size: 17px;
}
.post .post_top_bar div:nth-child(2) p{
margin: 2px 0 0;
color: rgb(187, 187, 187);
font-size: 11px;
}
.post div:nth-child(2) img{
width: 100%;
margin: 10px 0 0;
}
.post .emoji{
display: flex;
margin: 0 0 8px 20px;
}
.post .emoji .bg_img{
background: url("Facebook-Reactions-2020.png");
background-repeat: no-repeat;
background-size: cover;
width: 21px;
height: 18px;
text-align: center;
}
.post .emoji .bg_img:nth-child(1){
background-position: 0 0;
}
.post .emoji .bg_img:nth-child(2){
background-position: -21px 0;
}
.post .emoji .bg_img:nth-child(3){
background-position: -42px 0;
}
.post .emoji .bg_img:nth-child(4){
background-position: -63px 0;
}
.post .emoji .bg_img:nth-child(5){
background-position: -84px 0;
}
.post .emoji .bg_img:nth-child(6){
background-position: -105px 0;
}
.post .emoji .bg_img:nth-child(7){
background-position: -127px 0;
}
.post .reactions{
border-top: 1px solid rgb(95, 95, 95);
border-bottom: 1px solid rgb(95, 95, 95);
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 20px;
position: relative;
}
.post .reactions button{
border: none;
background-color: transparent;
color: rgb(155, 155, 155);
font-family: 'Poppins', sans-serif;
margin: 4px 0 4px;
font-weight: 600;
outline: none;
cursor: pointer;
font-size: 15px;
padding: 4px 32px;
transition: .2s ease-in-out;
}
.post .reactions button i {
margin-right: 6px;
pointer-events: none;
}
.post .reactions button:hover{
background-color: #ffffff1a;
border-radius: 5px;
}
.post .reactions button.changeColor{
color:rgb(32, 120, 244);
transition: .2s ease-in-out;
}
.post .reactions button i.fas.fa-thumbs-up{
animation-name: jump;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
z-index: 10;
}
.comment #commentForm{
margin: 10px 20px 0;
display: flex;
align-items: center;
position: relative;
}
.comment #commentForm div{
margin-right: 10px;
}
.comment #commentForm input{
width: 100%;
background: #333333;
border: none;
border-radius: 20px;
height: 39px;
font-family: 'Poppins', sans-serif;
padding-left: 12px;
box-sizing: border-box;
font-size: 15px;
outline: none;
color: white;
}
#keyframes jump{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.4) rotate(-15deg);
}
100%{
transform: scale(1) rotate(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

conflict - jumbotron vs responsive img

I created simple website, by used HTML5, CSS3, JS and Bootstrap. I have conflict with jumbotron and img-responsive. When I minimize the screen aprox. below 760, I see two wallpapers the div.jumbotron, and img-responsive. but I want to see only the img-responsive.
I was checking many times what's going on, but I have no idea.
Do somebody can review the code. I will be really grateful.
Link to this web -https://magdalena-dering.github.io/RWD-Coffee-Corner/
/*BODY*/
body {
background-color: #ffeee6;
font-family: 'Mirza', cursive;
}
/*HEADER*/
#header-nav {
background-color: #ffffff;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand a:focus,
.navbar-brand a:hover {
text-decoration: none;
}
.navbar-brand h1 {
/* Restaurant name */
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
line-height: .75;
}
.navbar-brand span {
font-size: 1em;
color: #4d0000;
}
#nav-list a {
font-size: 1.6em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin-top: 5px;
margin-left: 5px;
background-color: #ffeee6;
border: 1px solid #ffffff;
box-shadow: 0 0 30px #ff9999;
}
#nav-list a:hover {
background: #ffeee6;
box-shadow: 3px 3px 3px #ff9999;
}
.navbar-header button.navbar-toggle,
.navbar-header .icon-bar {
border: 1px solid #661400;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
/*HOME PAGE*/
.container .jumbotron {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #4d1a00;
padding: 0;
border: 1px solid #ffffff;
}
#menu-tile,
#specials-tile,
#map-tile {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 280px;
margin: 30px;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#menu-tile:hover,
#specials-tile:hover,
#map-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
#menu-tile {
background: url('../images/menu.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#specials-tile {
background: url('../images/specials1.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
/* FOOTER */
.panel-footer {
background-color: #ffffff;
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 20px;
}
.visible-xs {
border-top: 1px solid #800000;
}
#hours span,
#address span,
#sentence span {
color: #4d0000;
text-align: center;
text-shadow: 3px 3px 3px #ff9999;
font-size: 1.3em;
}
/***********MENU SIDE*********/
.category-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
.category-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.category-tile+div {
margin-bottom: 50px;
}
#menu-title {
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
}
span {
font-size: 1.4em;
text-align: center;
}
.text-center {
margin-top: 0px;
margin-bottom: 30px;
}
/***********COFFEE CATEGORY SIDE*********/
.coffee-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 180px;
height: 180px;
margin: 0 auto 15px;
margin-bottom: 120px;
}
.coffee-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.coffee-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.row {
margin-right: 0px;
margin-left: 0px;
}
.coffee-price {
font-size: 1.2em;
text-align: center;
margin-top: -110px;
margin-bottom: 20px;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 230px;
height: 230px;
margin: 0 auto 15px;
}
.sweets-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.sweets-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.3em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.sweet-price {
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 35px;
}
/***********SPECIALS SIDE*********/
.specials-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/bday.jpg') no-repeat;
}
.specials-tile2 {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/catering.jpg') no-repeat;
}
.specials-tile:hover,
.specials-tile2:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.specials-tile span,
.specials-tile2 span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
h4 {
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text1,
.text2 {
font-size: 1.3em;
text-align: center;
margin-top: 10px;
position: relative;
border: solid 1px #ffcccc;
padding: 5px;
background-color: #ffe6e6;
}
.text1 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text2 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
/***********CONTACT SIDE*********/
#map-contact {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 250px;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#map-contact:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.head-text {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
margin: 20px;
}
.contact-description {
font-size: 1.3em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin: 30px;
}
}
/********** Large devices only **********/
#media (min-width: 1200px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
}
.container .jumbotron {
background: url(../images/coffee-wallpapers-1200.jpg) no-repeat;
height: 675px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
/* Home Page */
.container .jumbotron {
background: url(../images/coffee-wallpapers-992.jpg) no-repeat;
height: 558px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
margin: 5px;
}
/* Home Page */
.container .jumbotron {
background: url('../images/coffee-wallpapers-768.jpg') no-repeat;
height: 432px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand {
padding-top: 10px;
}
.navbar-brand h1 {
/* Restaurant name */
padding-top: 10px;
font-size: 5vw;
/* 1vw = 1% of viewport width */
margin-top: -10px;
}
#nav-list a {
font-size: 4vw;
}
.navbar-brand span {
font-size: 3vw;
color: #4d0000;
}
/*Home Page*/
#logo-img {
background: url('../images/md.png') no-repeat;
height: 76px;
width: 210px;
}
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
/*Footer*/
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: vw;
}
.panel-footer {
font-size: 3vw;
}
#hours span,
#address span,
#sentence span {
font-size: 4vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 4vw;
}
#menu-title {
font-size: 4vw;
}
span {
font-size: 3vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 4vw;
}
.coffee-price {
font-size: 4vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 4vw;
}
.sweet-price {
font-size: 4vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 4vw;
}
.text1,
.text2 {
font-size: 3vw;
margin: 15px;
}
.text-center span {
font-size: 4vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 4vw;
}
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
#media (max-width: 479px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 6vw;
margin-left: 10px;
}
#nav-list a {
font-size: 5vw;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 6vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 6vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
/********** Super EXTRA (created by me) extra small devices Only :-)**********/
#media (max-width: 423px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 7vw;
}
#nav-list a {
font-size: 6vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
width: 150px;
height: 54px;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 5vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 5vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive design - coffee corner</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Mirza:400,500,600,700" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-xs visible-sm visible-md visible-lg">
<div id="logo-img"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>coffee corner</h1><span> Magdalena Dering ©<br> RWD</span></a>
</div>
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navMenuButton">
<a href="menu.html " onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> menu</a>
</li>
<li>
<a href="specials.html">
<span class="glyphicon glyphicon-star-empty"></span><br class="hidden-xs"> specials</a>
</li>
<li>
<a href="contact.html">
<span class="glyphicon glyphicon-envelope"></span><br class="hidden-xs"> contact</a>
</li>
</ul>
<!-- #nav-list -->
</div>
<!-- .collapse .navbar-collapse -->
</div>
<!-- .container -->
</nav>
<!-- #header-nav -->
</header>
<div id="main-content" class="container">
<div class="jumbotron">
<img src="images/coffee-wallpapers-768.jpg" alt="Picture of restaurant" class="img-responsive visible-xs">
</div>
</div>
<div class="row"></div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu.html">
<div id="menu-tile"><span>menu</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="specials.html">
<div id="specials-tile"><span>specials</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="https://www.google.pl/maps/place/1211+6th+Ave,+New+York,+NY+10036,+Stany+Zjednoczone/#40.7586101,-73.9841164,17z/data=!3m1!4b1!4m5!3m4!1s0x89c258ff14d2b811:0x3569ce18f2731425!8m2!3d40.7586101!4d-73.9819277" target="_blank">
<div id="map-tile">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.155246285712!2d-73.98411638459368!3d40.75861007932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258ff14d2b811%3A0x3569ce18f2731425!2s1211+6th+Ave%2C+New+York%2C+NY+10036%2C+Stany+Zjednoczone!5e0!3m2!1spl!2spl!4v1482304685186"
width=315 height="280" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>map</span>
</div>
</a>
</div>
</div>
<!-- End of #home-tiles -->
</div>
<!-- End of #main content -->
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span><b>hours:</b><br></span> monday - friday: 11am- 8pm<br> saturday - sunday: 10am - 9pm<br>
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span><b>address:</b><br></span> 1211 6th Ave, New York<br> NY 10036
<hr class="visible-xs">
</section>
<section id="sentence" class="col-sm-4">
<span><b>quots:</b><br></span><i>
“Let me wake up next to you, have coffee in the morning and wander through<br>the city with your hand in mine, and I'll be happy for the rest of my fucked<br> up little life.”</i><br> ― Charlotte Eriksson
<hr class="visible-xs">
</section>
</div>
</div>
</footer>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Best,
Megi

add background for 760 media without url & height 100% to your custom style css
#media (max-width: 767px) {
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
background: url('');
height: 100%;
}
}

Can I make slideToggle() overlap a div rather than move it?

I have a website that I am making with a friend and there is a problem where, when a dropdown tab is being slideToggle()'d with jquery, it moves the html div below it, and I just want it to overlap it, is there an easy way to do it?
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'/>
<link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Architects+Daughter|Coda|Indie+Flower|Shadows+Into+Light|Special+Elite" rel="stylesheet">
<title>ALFEX Inc.</title>
</head>
<body>
<div class='content'>
<div class='header'>
<h1>ALFEX INCORPORATED</h1>
<ul class='tabsbar'>
<a class='link' href='alfex.html'><li class='tab'>Home</li></a>
<div class='link'><li class='tab' id='gam'>Gags & Memes</li></div>
<div class='link'><li class='tab' id='crew'>The Crew</li></div>
<a class='link' href='alfex-codex.html'><li class='tab'>The Codex</li></a>
<a class='link' href='alfex-minigames.html'><li class='tab'>Minigames</li></a>
</ul>
</div>
<div class='panel-gam'>
<ul class='panel-list'>
<a class='p-link' href='alfex-gagsandmemes-doggo.html'><li class='p-tab'>Doggo Memes</li></a>
<a class='p-link' href='alfex-gagsandmemes-dad.html'><li class='p-tab'>Dad Jokes</li></a>
<a class='p-link' href='alfex-gagsandmemes-pun.html'><li class='p-tab'>Puns</li></a>
</ul>
</div>
<div class='panel-crew'>
<ul class='panel-list'>
<a class='p-link' href='alfex-alfie.html'><li class='p-tab'>Alfie</li></a>
<a class='p-link' href='alfex-alex.html'><li class='p-tab'>Alex</li></a>
</ul>
</div>
<div class='main'>
<h2>Welcome to the Alfex Inc. website</h2>
<h3>for all your cousin needs xD.</h3>
<div class='olexparent'>
<iframe class='olexvideo' width="560" height="315" src="https://www.youtube.com/embed/aa6IGzjY_kI?list=PLsCWhnzJYhqRCjHKprzyP7vQBJexv6OOZ" frameborder="0" allowfullscreen align="right"></iframe>
</div>
<p class="intro"></p>
</div>
</div>
</body>
</html>
Here is my JavaScript Code:
$(document).ready(function() {
$('.content').hide();
$('.content').fadeIn(800);
$('#gam').click(function() {
$('.panel-crew').slideUp(0);
$('.panel-gam').slideToggle();
});
$('#crew').click(function() {
$('.panel-gam').slideUp(0);
$('.panel-crew').slideToggle();
});
});
If needed, here is my CSS:
/* * {
border-style: solid;
border-width: 0.5px;
border-color: #fff;
box-sizing: border-box;
} */
body {
margin: 0px;
padding: 0px;
background-image: url('http://images.naldzgraphics.net/2012/08/4-lined.jpg');
background-repeat: repeat-y;
background-size: 100%;
}
.tabsbar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #525c68;
}
.tab {
padding: 18px 0px 18px 0px;
float: left;
max-width: 20%;
min-width: 20%;
display: block;
text-align: center;
background-color: #525c68;
color: #5dbace;
}
.header {
display: block;
background-color: #525c68;
}
.link{
text-decoration: none;
background-color: #525c68;
color: #7bcadb;
font-family: 'Special Elite', 'Coda', sans-serif;
}
h1 {
color: #ffffff;
font-family: sans-serif;
font-size: 550%;
display: block;
background-color: #525c68;
margin: 0px;
text-align: center;
padding: 10px;
}
p {
font-family: 'Annie Use Your Telescope', 'Indie Flower', 'Shadows Into Light', 'Architects Daughter', cursive;
font-size: 24px;
}
h2 {
font-size: 30px;
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-bottom: 10px;
}
.main {
background-color: #d8d8d8;
max-width: 80%;
margin: 0px 10% 180px 10%;
padding: 80px 80px 100px 80px;
}
h3, .minigames-subheading, .minigames-subheading2, .alfie-subheading {
opacity: 0.5;
padding: 5px 0px 0px 0px;
position: relative;
bottom: 20px;
font-style: italic;
font-family: 'Coda', sans-serif;
margin-right: 50%;
font-size: 26px;
}
.olexvideo {
max-width: 100%;
position: relative;
bottom: 59px;
max-width: 52%;
}
.panel-gam {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 20%;
}
.panel-crew {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 40%;
}
.p-link {
text-decoration: none;
color: #ffffff;
font-family: 'Special Elite', 'Coda', sans-serif;
padding: 0px 20px 20px 20px;
}
.panel-list {
padding: 0px 40px 10px 40px;
list-style-type: none;
}
a.p-link:hover {
color: #d8d8d8;
}
h4 {
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
font-size: 20px;
border-bottom-style: solid;
border-bottom-color: #737373;
border-bottom-width: 2px;
padding-bottom: 5px;
}
.rockpaperscissors {
border-style: solid;
border-width: 5px;
border-radius: 10px;
margin: 20px 0px 10px 0px;
padding: 20px 20px 60px 20px;
background: #a6a6a6;
border-color: #a6a6a6;
min-height: 300px;
}
button {
border-style: outset;
border-color: #4f5864;
background-color: #525c68;
color: #7bcadb;
padding: 40px;
border-radius: 5px;
font-family: 'Special Elite', 'Coda', sans-serif;
width: 33%;
font-size: 28px;
}
button:hover {
border-style: inset;
border-color: #73c6d9;
background-color: #7bcadb;
color: #ffffff;
}
.result {
font-family: 'Special Elite', 'Coda', sans-serif;
font-size: 50px;
}
.reset {
position: relative;
top: 20px;
width: 100%;
}
li.tab:hover {
background-color: #7bcadb;
color: #ffffff;
}
.specialised-memes {
border: none;
padding: 20px 5px 20px 5px;
font-family:
width: 100%;
height: 1000px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
}
.page-feed {
position: relative;
bottom: 1000px;
max-width: 45%;
overflow: scroll;
}
img {
width: 100%;
padding: 20px 0px 20px 0px;
}
.left-side {
width: 520px;
}
.fb-picture {
position: relative;
bottom: 393px;
background-color: #a6a6a6;
border-radius: 10px;
}
.embed {
border-radius: 50px;
padding: 50px;
background-color: #a6a6a6;
width: 50%;
}
.intro {
margin-left: 20px;
}

Webpage doesn't adjust to any screen height automatically

I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>

What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units

You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.