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.
Related
I'm building a website in Bootstrap but when I switch my website to a mobile responsive view some elements are bumping into each other like this.
That's how site looks in the large version.
I'm tried to add some media queries.
#media (max-width: 992px) {
/*Intro*/
.title {
font-size: 30px;
}
.title-text {
font-size: 12px;
}
.title-btn button {
padding: 10px 35px !important;
}
}
But elements still are bumping into each other when I switch to mobile responsive view.
My HTML code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Intro -->
<section class="intro" id="intro">
<div class="container">
<div class="row">
<div class="col-lg-6 order-1 order-lg-2">
<img class="img-fluid" src="Img/Intro/Phone.png" alt="">
</div>
<div class=" col-lg-6 order-2 order-lg-1 title-block">
<div class="pre-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
<path d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
</svg>
<p>#1 Editiors Choice App of 2020</p>
</div>
<h1 class="title">
Best app for your
modern lifestyle
</h1>
<p class="title-text">
Increase productivity with a simple to-do app. app for
managing your personal budgets.
</p>
<div class="title-btn">
<button type="button" class="btn btn-primary">
Try for free
</button>
Watch demo video
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-sm">
<img src="Img/Companies/SouthWest.png " class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Anubis.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Alonzo.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Express.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Maniac.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
The problem is that looks like structure of HTML in your footer section. Initializing the row div, you should have used "col" feature as you used. Your code looks like the same what I explain. However, there is a little bit difference compare to what i mention. In order to make it clear for you, i have build up this snippet for you. You need to use "col" feature on element that you want to layout . In your code, you used for container of image tags which is not the element you want to make it responsive. That is why you got bumping into each other. I wish that yoou figure it out. Cheers!
.box{
background-color: red;
width: 200px;
height: 200px;
display: inline-block;
}
.box-1{
background-color: yellow;
}
.box-2{
background-color: purple;
}
.box-3{
background-color: blue;
}
.box-4{
background-color: green;
}
.box-5{
background-color: lightpink;
}
<!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.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>stackover</title>
</head>
<body>
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-lg-4 col-md-3 col-sm-6 box box-1">Logo-1</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-2">Logo-2</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-3">Logo-3</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-4">Logo-4</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-5">Logo-5</div>
</div>
</div>
</section>
</body>
</html>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
"When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath."
And thats exactly whats happening when somebody opens this page on a larger screen. I found solutions online on how to fix this, but I do not know where to apply what.
I tried these and a few more without success. They must be working, I just didn't know how to apply them.
https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
https://matthewjamestaylor.com/bottom-footer
https://codepen.io/cbracco/pen/zekgx
<html lang="en">
<head>
<title>About Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap" id="home-section">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center position-relative">
<div class="col-3 ">
<div class="site-logo">
<a href="index.php" class="font-weight-bold">
<img src="images/logo.png" alt="Image" class="img-fluid">
</a>
</div>
</div>
<div class="col-9 text-right">
<span class="d-inline-block d-lg-none"><span class="icon-menu h3 text-white"></span></span>
<nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation">
<ul class="site-menu main-menu js-clone-nav ml-auto ">
<li>Home</li>
<div class="dropdown">
<p id="ddm" class="dropbtn">Types of Violence ▾</p>
<div class="dropdown-content">
<a id="f" href="fizicko.php">Physical </a>
<a id="s" href="seksualno.php">Sexual </a>
<a id="p" href="psiholosko.php">Psychological </a>
<a id="d" href="digitalno.php">Digital </a>
</div>
</div>
<li>Simulation</li>
<li><span style="color:rgba(255, 215, 0,0.9);">About Project</span></li>
<li><?php include_once 'jezici.php'; ?></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
</div>
<div class="row" style="padding: 50px;">
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">About project</h2>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<p>The project is intended primarily for high school and elementary school students, but it can also be useful for the elderly. It consists of two main parts, informative and interactive.</p>
<p>The informative section aims to present to the site visitors what are the most common forms of violence in schools and how they can be prevented.</p>
<p>The interactive part is based on a simulation of a conversation between a user and another person, with the conversation having a different outcome relative to the answers.</p>
<hr><p>The goal of this project is to raise awareness of the severity of peer violence, how much concequences it can cause if no one responds, and general education about peer violence.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
<p class="text-center w-responsive mx-auto mb-5">Have a question? Contact us directly via email, and we will respond as soon as possible.</p>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="kontakt.php" method="POST">
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message" >Message</label>
</div>
</div>
</div>
</form>
<div class="text-center text-md-left">
<a style="float: right;" class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
</div>
<div class="status"></div>
</div>
</div>
</div>
</div>
<footer style="width: 100%; text-align: center; background-color: #002366;">
<div style="display: inline-block; margin-left: 5px; margin-right: 15px;">
<b><p class="ftprijavimup" style="color:rgba(255, 215, 0,0.9); margin-top: 5px;">Report<br>violence</p></b>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS violence in schools<br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">0800 200201</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;" >SOS CENTER FOR YOUTH<br>(18-22h) <span style="color:rgba(255, 215, 0,0.9);">3192 782</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS INTERNET VIOLENCE <br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">198 33</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS WOMEN'S CENTER<br>(10-20h) <span style="color:rgba(255, 215, 0,0.9);">2645 328</span></p>
</div>
</footer>
</body>
</html>
Try this.
Looks like your are using bootstrap
https://getbootstrap.com/docs/4.0/examples/sticky-footer/
https://startbootstrap.com/snippets/sticky-footer-flexbox/
First of all, wrap everything in the .site-wrap div as I did below. Add the classes d-flex flex-column to your body element and then add this CSS to that
html,body{
height: 100%
}
.site-wrap{
flex-grow:1;
}
Working Snippet here
html,body{
height: 100%
}
.site-wrap{
flex-grow:1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">
<head>
<title>About Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css">
</head>
<body data-spy="scroll" class="site-mobile-menu d-flex flex-column" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap" id="home-section">
<div class="site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center position-relative">
<div class="col-3 ">
<div class="site-logo">
<a href="index.php" class="font-weight-bold">
<img src="images/logo.png" alt="Image" class="img-fluid">
</a>
</div>
</div>
<div class="col-9 text-right">
<span class="d-inline-block d-lg-none"><span class="icon-menu h3 text-white"></span>
</span>
<nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation">
<ul class="site-menu main-menu js-clone-nav ml-auto ">
<li>Home</li>
<div class="dropdown">
<p id="ddm" class="dropbtn">Types of Violence ▾</p>
<div class="dropdown-content">
<a id="f" href="fizicko.php">Physical </a>
<a id="s" href="seksualno.php">Sexual </a>
<a id="p" href="psiholosko.php">Psychological </a>
<a id="d" href="digitalno.php">Digital </a>
</div>
</div>
<li>Simulation</li>
<li><span style="color:rgba(255, 215, 0,0.9);">About Project</span></li>
<li>
<?php include_once 'jezici.php'; ?>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="row" style="padding: 50px;">
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">About project</h2>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<p>The project is intended primarily for high school and elementary school students, but it can also be useful for the elderly. It consists of two main parts, informative and interactive.</p>
<p>The informative section aims to present to the site visitors what are the most common forms of violence in schools and how they can be prevented.</p>
<p>The interactive part is based on a simulation of a conversation between a user and another person, with the conversation having a different outcome relative to the answers.</p>
<hr>
<p>The goal of this project is to raise awareness of the severity of peer violence, how much concequences it can cause if no one responds, and general education about peer violence.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
<p class="text-center w-responsive mx-auto mb-5">Have a question? Contact us directly via email, and we will respond as soon as possible.</p>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="kontakt.php" method="POST">
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
</form>
<div class="text-center text-md-left">
<a style="float: right;" class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
</div>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<footer style="width: 100%; text-align: center; background-color: #002366;" clas="footer">
<div style="display: inline-block; margin-left: 5px; margin-right: 15px;">
<b><p class="ftprijavimup" style="color:rgba(255, 215, 0,0.9); margin-top: 5px;">Report<br>violence</p></b>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS violence in schools<br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">0800 200201</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" styhttps://stackoverflow.com/questions/60209899/footer-rising-up-because-of-not-sufficient-content#le="margin-top: 5px;">SOS CENTER FOR YOUTH<br>(18-22h) <span style="color:rgba(255, 215, 0,0.9);">3192 782</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS INTERNET VIOLENCE <br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">198 33</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS WOMEN'S CENTER<br>(10-20h) <span style="color:rgba(255, 215, 0,0.9);">2645 328</span></p>
</div>
</footer>
</body>
</html>
Did you tried with this:
footer {
position: absolute;
bottom: 0;
width: 100%;
}
I've been working on a website using Bootstrap 4 where there are three images inside a .row div. The problem I'm having, however, is that I want all the images to have the same height, so I created my own class where I set height: 20% and width: auto The images look exactly how I want them to, however, for each image a certain amount of pixels are added under that div and it sets a huge gap between the section that has the images and the section that follows it. I was wondering what would be a way to avoid this from happening since I don't want to keep that gap between both sections. Here's a fiddle with what I'm talking about https://jsfiddle.net/wxg51v5x/ (Comment out the images to see the difference in action). Thanks!
EDIT: Included the code itself.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: auto;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
The problem was coming from your program-logo class and the large images.
I used the img-fluid class for the images as well as the px-5 class for the third image and also re-arranged things a little bit by using the container class instead of container-fluid and nesting images into their own row-column pairs for easier manipulation using Bootstrap 4 native classes alone (without any custom css).
Also note: I added the background color classes (bg-warning and bg-secondary) just to see what's happening and commented out some your other stuff that was unnecessary in my option. Feel free to adjust that as needed.
I only dealt with the upper section and the spacing underneath because that was your question. But you might want to do some adjustments for the bottom section because that container-fluid doesn't make it look good on wide 4K screens.
Here's the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container bg-warning" id="programs">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<!--
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
-->
<h3 class="font-heavy mt-3">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/2%20CITE_CITE%20Logo%20C.png" alt="Caribbeans In Tech + Entrepreneurship" />
</div>
</div>
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 offset-2 offset-md-1 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/bwn4.png" alt="Build With, Not For" />
</div>
</div>
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid px-5" src="https://illicitmind.com/static/img/Gsd-Logo.png" alt="Get Shit Done" />
</div>
</div>
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
<!-- </div>-->
</div>
<div class="container-fluid bg-secondary" id="formula">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
<!-- </div>-->
</div>
The space you are talking about is coming because you use .program-logo width:auto; i changed the property and the space is gone i did it in below code you should try it.
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 col-sm-12">
<img height="20%" width="auto" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: 40%;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
I'm trying to create a div which contains a text box with 3 columns with text and images below them. like in the first image I have attached. Including the lines that divide the and if possible the small question marks as well!
Currently this is where I am in image 2,
I have attached a JSFiddle file however it does not contain the images as they are not online:
https://jsfiddle.net/5xzg78je/
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="box">
<img src="iphone.png">
<div class="row">
<div class="column">How many would you like to insure <img src="10.png" class="textimage">
<br> Total value when new <img src="10000.png" class="textimage"><br> Would you like instant replacement <img src="replacement.png" class="textimage">
</div>
</div>
</div>
</div>
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height: 40px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
Try below one.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<style>
.box p i {position: absolute;padding-left: 5px;}
.box img {margin:0 auto;}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I know this post is old, but here is a better solution.
Html:
<table>
<tr class="v-line">
//Content
</tr>
<tr class="v-line">
//Content
</tr>
<tr>
//Content
</tr>
</table>
CSS:
.v-line {
padding-right: 2em;
border-right: 1px solid rgb(185, 185, 185);
}
The v-line class is a bit dirty, but this is easy and basic HTML code.
I am trying to apply background image to cover whole page. Could someone tell me what I did wrong? My background image does not cover the entire page. Here is the page:
http://codepen.io/aitruong/pen/mVmKYR
.my-photo{
margin-top: 20px;
}
p{
padding-top: 40px;
}
hr{
width: 200px;
}
.navbar{
margin-left:128px;
margin-right: 128px;
}
.social-icon{
margin-left:350px;
margin-top:40px;
}
.text{
margin-left: 365px;
margin-top: 50px;
font-size: 40px;
font-family:Tangerine;
}
#language-text{
font-family:Tangerine;
font-size: 35px;
margin-left: 300px;
padding-top: 0px;
}
i{
color: #e67200;
}
#android-app {
margin-left : 90px;
}
footer p,a{
margin-left: 0px;
color:#666600
}
#background{
}
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container--fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
<div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10"><p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p></div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3><br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div><br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
</div>
</div>
</body>
you probably need this in addition to your existing CSS:
body { background-size: cover; }
There are two mistakes in your code:
body { background-size: cover; }
Is missing. But in addition you will need to put your section3 element inside of the background div. Otherwise the background will stop right before section 3
</div><!-- This is your end of <div id="background"> -->
<div id="section3"> <!-- this is a new section outside of the background element -->
Try applying this:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: intial;
}
Set your background like this
background: #ffffff url(bg.jpg) repeat;
for example for the body, set your css
body { background: #ffffff url(your_bg.jpg) repeat; }
The structure of the HTML document is also invalid. Use the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Ai Truong Personal's Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#css").load(function(evt){
$(this).fadeIn();
});
$("#html").load(function(evt){
$(this).fadeIn("slow");
});
$("#js").load(function(evt){
$(this).fadeIn(5000);
});
$("#python").load(function(evt){
$(this).fadeIn(4000);
});
$("#java").load(function(evt){
$(this).fadeIn(2000);
});
});
</script>
<style>
body {
position: relative;
font-family: Open Sans;
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #6a5750;}
#section2 {padding-top:0px;height:500px;color: #fff; background-color: #f6f1ed;}
#section3 {padding-top:0px;height:300px;color: #fff; background-color: #b5a397;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container--fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10">
<p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p>
</div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3>
<br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div>
<br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p > Theme Made By Ai Truong © 2016</p>
</footer>
</body>
</html>
Replace your following CSS:
#background{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
}
With:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
Tryed with:
#ImageBackground {
background-size: cover;
Width: 100%;
Height: auto;
}
Else you can try with:
#ImageBackground {
Width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}