I need help I am using this templete for creating a website https://www.w3schools.com/bootstrap/trybs_theme_me_complete.htm#

I need help I am using this templete for creating a website https://www.w3schools.com/bootstrap/trybs_theme_me_complete.htm#
0

#1

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>

#2

For this amount of code, it would be better if you could post a link to the actual website. If this is only on your local machine, then it is more difficult for us to figure out if you have the wrong path to your images (which could be causing what you are seeing).

One suggestion is to reconfirm you have correctly spelled the image names. Wrong spelling would also cause images to not appear. Also, you should check the console (on Chrome Ctrl+Shft+I) to see if there are any image reference errors showing.

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.