3 images next to each other with text - html

I want 3 images next to each other, but to fill the entire screen. So i have this:
.container {
position: relative;
text-align: center;
color: white;
max-width: 99%;
}
img.forside,
img.forside-1,
img.forside-2 {
opacity: 0.7;
}
img.forside:hover,
img.forside-1:hover,
img.forside-2:hover {
transition: 1s ease;
opacity: 1;
filter: brightness(70%);
}
img.forside-2 {
width: 30%;
display: inline-block;
margin-top: 2%;
}
img.forside-1 {
width: 30%;
display: inline-block;
margin-left: 2%;
margin-right: 3%;
margin-top: 2%;
}
img.forside {
width: 30%;
display: inline-block;
margin-right: 3%;
margin-top: 2%;
}
<div class="forsidebilleder">
<a href="index.php/personlig-traening"><img class="forside-1" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
</a>
<a href="index.php/individuel-programmering"><img class="forside" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
</a>
<a href="index.php/crossfit-bootcamp"><img class="forside-2" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
</a>
</div>
I know that can be written better, but I couldn't get it to work. But this way, the 3 images is perfectly next to each other with same amount of space in each side. But what I want, is to write a headline over each image, but I don't know how?
You understand the question? :) Sorry if it's a bit messy.


You can simply use flex and consider background image in order to use text over it. You may also add an overlay to control the opacity of the image :
UPDATE
Added media query for better view on mobile
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.image {
position: relative;
flex: 1;
margin: 5px;
text-align: center;
background-size: cover;
display: flex;
align-items: center;
}
.image:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
transition: 1s;
}
.image:hover::before {
background: rgba(0, 0, 0, 0.5);
}
.image p {
position: relative;
z-index: 1;
flex: 1;
color: #fff;
font-size: 18px;
}
#media all and (max-width:460px) {
.container {
flex-direction: column
}
}
<div class="container">
<div class="image" style="background-image:url(https://lorempixel.com/400/600/)">
<p>text text</p>
</div>
<div class="image" style="background-image:url(https://lorempixel.com/500/400/)">
<p>text text</p>
</div>
<div class="image" style="background-image:url(https://lorempixel.com/600/600/)">
<p>text text</p>
</div>
</div>
You may adjust margin and height like you want.


<style>
img {
width: 100%;
}
.timetable {
position: relative;
}
.content {
position: absolute;
z-index: 999999;
bottom: 0;
color: white;
padding-left: 21px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="timetable">
<div class="row">
<div class="col-md-4">
<img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="set up time" width="30%">
<div class="content">
<h3>Hello</h3>
</div>
</div>
<div class="col-md-4">
<img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="doors open" width="30%">
<div class="content">
<h3>Hello</h3>
</div>
</div>
<div class="col-md-4">
<img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="Foodtrucks" width="30%">
<div class="content">
<h3>Hello</h3>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Related

Equal Height Images with Flexbox

I have a page (a catalogue of books), where the books should be displayed in rows in a flexbox container. Each book is an individual block, which contains a heading (name of the book) and the image of the book cover directly below it. I would like for all images to be equal height and fill up the whole block, but this does not seem to be working for me. Here is what the blocks look like right now:
Some research on Stack pointed to similar questions, but the proposed solutions did not seem to work, also. Why are the images different heights in the first place, even though I pass 100% height to the image element inside the container? And how can I resolve this?
Full HTML/CSS can be seen in the fiddle.
HTML:
<div class="flexbox">
<div class="item">
<h2 class="catalogue">
<a href="items/pyramid_texts.html" target="_blank">
Тексты пирамид
</a>
</h2>
<img class="catalogue"
src="images/pyramid_texts.png" alt="Тексты пирамид">
</div>
<div class="item">
<h2 class="catalogue">
<a href="items/coffin_texts.html" target="_blank">
Тексты саркофагов
</a>
</h2>
<img class="catalogue"
src="images/coffin_texts.jpg" alt="Тексты саркофагов">
</div>
<div class="item">
<h2 class="catalogue">
<a href="items/book_of_the_dead.html" target="_blank">
Египетская книга мертвых
</a>
</h2>
<img class="catalogue"
src="images/book_of_the_dead.png" alt="Книга мертвых">
</div>
</div>
CSS:
a
{
color: black;
text-decoration: none;
}
a:hover
{
color: red;
}
div.flexbox
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div.item
{
height: 20%;
width: 20%;
}
h2
{
background-color: #FFF3D9;
color: black;
font-size: 18px;
font-weight: 400px;
style: block;
text-align: center;
}
img
{
height: 20%;
outline: 2px solid red;
width: 20%;
}
img.catalogue
{
height: 100%;
object-fit: contain;
width: 100%;
}
UPDATE: Tried experimenting with background-size: cover and other CSS elements, but to no avail. Could it be that my HTML structure is ill suited for this task? Right now I have a parent flexbox block and each "item" block (for each book) contains a header element with the title of the book and an <img> element. Should I change the structure and take the header out of the item block, for example?

You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Demo</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
}
h2 {
background-color: #FFF3D9;
color: black;
font-size: 18px;
font-weight: 400;
style: block;
text-align: center;
}
img {
height: 20%;
outline: 2px solid red;
width: 100%;
}
img.catalogue {
height: 100%;
object-fit: contain;
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.flexbox .col {
flex: 1;
padding: 7px;
}
.flexbox .col:nth-child(1) {
background: #ccc;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.flexbox .col:nth-child(2) {
background: #eee;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.flexbox .col:nth-child(3) {
background: #eee;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
</style>
</head>
<body>
<div class="flexbox">
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/pyramid_texts.html" target="_blank">
Тексты пирамид
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Тексты пирамид">
</div>
</div>
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/coffin_texts.html" target="_blank">
Тексты саркофагов
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Тексты саркофагов">
</div>
</div>
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/book_of_the_dead.html" target="_blank">
Египетская книга мертвых
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Книга мертвых">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

How to make two columns layout HTML

I'm creating online shop.
I want to create two column layout.
On the left side will be the tab gallery. On the right side i want to display the options for purchase like size,quantity,color,button for buy and etc.
I'm using bootstrap.
I want to doing something like this:
online shop
This is my codepen: https://codepen.io/anon/pen/KYeWPj
I have this code:
/*google analytics js */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
position: relative;
}
img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #e8e8e8;
font-family: 'helvetive neue', sans-serif;
font-weight: 700;
}
.container {
width: 600px;
position: relative;
margin-top: 30px;
margin-left: 0px;
}
.thumbnails {
list-style: none;
font-size: 0;
margin-left: -2%;
}
.thumbnails li {
display: inline-block;
width: 23%;
margin-left: 2%;
text-align: center;
vertical-align: middle;
}
.thumbnails li:hover .item-hugger {
background: white;
}
.thumbnails li:hover .item-hugger .title {
color: #000;
}
.thumbnails input[name="select"] {
display: none;
}
.thumbnails .item-hugger {
position: relative;
height: 140px;
margin: 20px 0;
background: #f2f2f2;
transition: all 150ms ease-in-out;
}
.thumbnails label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.thumbnails .title {
padding: 20px 0 0;
font-size: 18px;
color: #555;
transition: all 150ms linear;
}
.thumbnails .thumb-image {
height: 100px;
padding: 20px 0;
}
.thumbnails .content {
position: absolute;
bottom: 0;
left: 0;
width: 600px;
height: 500px;
padding: 50px;
opacity: 0;
transition: all 150ms linear;
display: flex;
flex-direction: column;
justify-content: center;
}
.thumbnails .content .title {
font-size: 60px;
font-weight: 400;
display: inline-block;
color: #555;
border-bottom: 6px solid #fe7701;
padding: 50px 10px 0;
text-transform: uppercase;
}
.thumbnails input[name="select"]:checked+.item-hugger {
height: 180px;
margin: 0;
background: white;
}
.thumbnails input[name="select"]:checked~.content {
opacity: 1;
}
.white-box {
background: white;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title style="margin-bottom: 10px;">Item</title>
</head>-->
<body>
<div class="container">
<h1 style="margin-top:40px; text-align:center">Item</h1>
<ul class="thumbnails">
<li>
<input type="radio" name="select" id="image1">
<div class="item-hugger">
<div class="title">Image 1</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=882" />
<label for="image1"></label>
</div>
<div class="content">
<div class="item-wrapper"> <img src="https://unsplash.it/1024/612?image=882" />
<div class="title">Image 1</div>
</div>
</div>
</li>
<li class="is-active">
<input type="radio" name="select" id="image2" checked>
<div class="item-hugger">
<div class="title">Image 2</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=782" />
<label for="image2"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=782" />
<div class="title">Image 2</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image3">
<div class="item-hugger">
<div class="title">Image 3</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=682" />
<label for="image3"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=682" />
<div class="title">Image 3</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image4">
<div class="item-hugger">
<div class="title">Image 4</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=582" />
<label for="image4"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=582" />
<div class="title">Image 4</div>
</div>
</div>
</li>
</ul>
<div class="white-box"></div>
</div>
</body>

A really easy way of doing this would be to use a table. It doesn't require any CSS, just a simple table that doesn't have a visible border.
The way you do this is putting a <tr> tag around the content you want to align by each other and a <table> tag surrounding the <tr> tags. It should look like this:
<table><tr>YOUR ELEMENTS</tr></table>.
Now, take each of your elements that you'd like to be aligned side-by-side and put them in their own <td> tags. This is what it should look like now:
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr></table>
This should fix your problem. If you, for whatever reason, see borders around your elements you can to <table style="border: none;"> instead of just saying <table>. Hope this helped!

Grid so I can fit it entire mobile screen with no scrolling

My ultimate goal is to be able to fit my grid in 2 columns perfectly and also so it fits entire screen on my mobile devices. Right now, I still have to scroll down a bit, however that is not what I wanted. I want my screen to be not scrollable but have images/screen fit in perfectly the way I desire. Getting rid of spaces in between 2 columns perhaps. Right now my screen looks bit off and needs a little scrolling. The 2 pictures on the bottom doesn't fit and requires scrolling like shown on the picture.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/swiper.min.css') }}">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
top: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: auto;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body {
margin: 0;
padding: 0;
background-color: white;
font: 10px/13px 'Lucida Sans', sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: center;
position: relative;
width: 200%;
padding-bottom: 100%;
}
.boxInner {
position: absolute;
left: 50px;
right: -5px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.fixed {
position: absolute;
left: 30px;
right: 10px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 79%;
height: 75%
}
.boxInner img.img2 {
width: 100%;
height: 50%
}
body.no-touch .boxInner:hover .titleBox,
body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 100;
}
#media only screen and (max-width: 480px) {
/* Smartphone view: 1 tile */
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.box {
width: 50%;
padding-bottom: 30%;
}
}
.topnav {
overflow: hidden;
background-color: #66CDAA;
}
.topnav a {
float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #98FB98;
color: white;
}
.topnav .icon {
display: none;
}
.header1 {
margin: auto;
float: center;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body class="no-touch">
<!-- Swiper -->
<div class="topnav" id="myTopnav">
Let's Get To Know You!
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Define all of the tiles: -->
<div class="header1">What's your skin color?</div><br><br>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/U8pJVY0.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/Kz06qEO.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/43tH7Td.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/3uZKpV2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/SF3vYC9.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/8hujzfl.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/cxvELu2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/zLD3Nv1.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/baYebAV.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/iLd0ukK.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='swiper.min.js') }}"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
<script type="text/javascript">
$(function() {
// See if this is a touch device
if ('ontouchstart' in window) {
// Set the correct body class
$('body').removeClass('no-touch').addClass('touch');
// Add the touch toggle to show text
$('div.boxInner img').click(function() {
$(this).closest('.boxInner').toggleClass('touchFocus');
});
}
});
</script>
</body>
</html>

It's because your "swiper container" is height:100%, but starts 33px down because of the element above it. You could try calc() css if your browser target range allows it in order to make it 100% height minus the height of the element above. Something like:
height: calc(100% - 33px);

Can not fixed in footer css and image also

I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?

You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}

how to add div on top of image and there's issue with alignment while using bootstrap

I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}

The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}