Kind regards. I need help. I do not know what’s wrong with the templete i am using. I want to add images on the blocks of the website for every paragraph, I have tried to change the width and height classess of the images and I does not even appear. I do not know if I am modifying something wrong. Here is the code. Any help, well be welcome.
<!DOCTYPE html>
<html lang="en">
<head>
<title> SOFTWARE LIMITED</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="images/favicon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
.bgimg-2 {
background-image: url(images/img2.jpg);
height: 400px;
width: 100%;
background-size: 100% 100%;
border: 1px solid;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
opacity: 0.6;
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #2f2f2f; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
.navbar-brand {
background-image: url(images/Bussines-solutions--software.png);
background-position: left top;
background-size: 55px 55px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">__</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="HowWeWork">HOW WE WORK</a></li>
<li><a href="#">WHY US</a></li>
<li><a href="#">INDUSTRIES</a></li>
<li><a href="#">ADDRESING YOUR NEEDS</a></li>
<li><a href="#">GET IN TOUCH</a></li>
</ul>
</div>
</div>
</nav>
<!-- First Container -->
<div class="container-fluid bgimg-2">
<div class="caption">
<span class="border" "> BUSINESS SOLUTIONS & SOFTWARE LIMITED</span>
</div>
</div>
<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin">How we work</h3><a id="HOwWeWork"></a>
<div class="col-sm-3">
<p>
1. Understanding your business challenge <br>
- We will explore your business needs with you. No need to write any technical specification upfront. </p> </div>
<div class="col-sm-3">
<p>
2. Creating and managing the project
- We will transform your business challenge into an IT project. You don't need your own CTO or any Project Manager. </p> </div>
<div class="col-sm-3">
<p>
3. Developing tech solution <br>
- We will implement technical products to address your business needs. We will make sure the standards are held high. </p></div>
<div class="col-sm-3">
<p>
4. Running and maintaining the product
- We will cover whole life cycle of the product for you. Alternatively, we will help you to hire your own in-house team.</p> </div>
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
<!-- Third Container (Grid) -->
<div class="container-fluid bg-3 text-center">
<h3 class="margin"> <strong>Why us?</strong></h3><br>
<div class="row">
<div class="col-sm-4 icon">
<p>* We embrace Agile
- We breath for Agile. We understand that IT project cannot be planned years ahead.</p>
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
</div>
<div class="col-sm-4">
<p>* We work very closely with our clients
- We will discuss the project quite frequently. Be prepared to be a true part of our team.</p>
</div>
<div class="col-sm-4">
<p>* We understand business challenges
- Our team members have background in economics, corporate governance, finance and other business disciplines. We speak your language.</p>
</div>
</div>
</div>
<!--Industries -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin">Industries</h3>
<p>
Our experts have taken part in projects (not only) in these industries:
<br>
* Banking
<br>
* Insurance
<br>
* E-commerce
</p>
</a>
</div>
<!-- Addresing your needs -->
<div class="container-fluid bg-3 text-center">
<h3 class="margin">Addressing your needs</h3><br>
<div class="row">
<div class="col-sm-3">
<p>* Open Banking
- We will help you to gain from the APIs provided by the Open Banking initiative.
</p>
<img src="images/banking.jpg" class="img-responsive margin" style="width:20% height:20%" alt="Image">
</div>
<div class="col-sm-3">
<p>* PSD2
- We are closely monitoring changes coming with PSD2 regulation. We are here to help you to implement solutions leveraging PSD2.</p>
</div>
<div class="col-sm-3">
<p>* GDPR
- We understand that complying with a new EU regulation can be tricky. We will navigate your through the implementation process.</p>
</div>
<div class="col-sm-3">
<p>* PCI/DSS
- If you are building any platform concerned with payments, you might need our help to comply with PCI/DSS standards.</p>
<img src="images/computer.jpg" class="img-responsive margin" style="width:100%" alt="Image">
</div>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Getting in touch:
<br>
* Call us:
<br>
* Write us: email
<br>
* Skype us: skype nickname</p>
</footer>
</body>
</html>