

<!DOCTYPE html>
<html lang="en">
<!-- min-height: 55px;
    padding: 0 15px 15px; 

    .navbar-brand{
    float: left;
    
    min-height: 55px;
    padding: 0 15px 15px;
    
  }-->
<head>

  <title>Serves Web Tech Solution and Services</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <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>

  h1.header1{
      color: #660000;
  }
  h1.header2{
    background-color: #0000cc;
    color: #FFF;
  }
  body{

    font-family: Verdana, Geneva, sans-serif;
  }
  .navbar {
      margin-bottom: 0;
      border-radius: 0;
      background-color: #0000cc;
      color: #FFF;
      padding: 1% 0%;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
      font-size: 1.3em;
      border: 0;
  }
  .left{

    float: left;
  }
   
 
  .navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav {
    color: #FFF;
    background-color: #0000cc;
    



  }

  

  .navbar-inverse .navbar-nav li a{

    color: #D5D5D5;
  }
  .carousel-caption{
    top: 50%;
    transform: translateY(-50%);
    text-transform: uppercase;
  }
  .btn{
    font-size: 18px;
    color: #D3D3D3;
    padding: 12px 22px;
    background-color: orange;
    border: 2px solid #FFF; 
  }
  .container{
    margin: 4% auto;
  }
  #icon{
    max-width: 200px;
    margin: 1% auto;
  }
  footer{
    width: 100%;
    background-color: #0000cc;
    padding: 5%;
    color: #FFF;
  }
  .fa{
    padding: 15px;
    font-size: 25px;
    color: #FFF;
  }
  .fa:hover{
    color: #D5D5D5;
    text-decoration: none;

  }
  .fa-facebook{
    color: #365899;
  }
  .fa-twitter{

    color: #1da1f2
  }
  .color{
      color: #0000cc;
      font-size: 5rem;
  }
  div.line{
    background-color: #0000cc;
  }
 


  

  @media (max-width: 900px){
   .fa{
      font-size: 20px;
      padding: 10px;
   }
  }


  @media (max-width: 600px){
    .carousel-caption{
      display: none;
    }
    #icon{
      max-width: 150px;
    }
    h4{
      font-size: 1.7em;
    }

  }


  </style>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <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 class="collapse navbar-collapse" id="MyNavbar">
        
        
        
        <a class="left" href="home.php"><img src="img/serve.png"></a>
          <ul class="nav navbar-nav navbar-left">
            <li class="active"><a href="home.php">Home</a></li>
            <li class="active"><a href="management.php">Management</a></li>
            <li class="active"><a href="services.php">Services</a></li>
            <li class="active"><a href="product.php">Products</a></li>
            <li class="active"><a href="../../../Electricks-shop/index.php">Buy Here!</a></li>
            
          </ul>   
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a>Contact Us</a></li>
            <li class="active"><a href="https://www.facebook.com/Serves-Web-Tech-Solution-and-Services-207908169756361/" class="fa fa-facebook"></a></li>
            <li class="active"><a href="https://twitter.com/mark_angelo503" class="fa fa-twitter"></a></li>
            <li class="active"><a href="#" class="fa fa-google"></a></li>
          </ul>   
      </div>
    </div>
  </nav>

  <!--end slider -->
  <div class="container text-center">
    <div class="row">
      <div>
      <h1 class="header2">Product</h1>
      </div>
    </div>
  </div>


  <div class="container text-center">
    <div class="row">
      <h1>Arduino</h1>
      <div class="col-md-6">
        <img src="img/uno.png" class="img-responsive">
      </div>
      <div class="col-md-6">
        <h1>Arduino Uno</h1>
        <h2>The Arduino Uno is a microcontroller board based on the ATmega328 (datasheet). It has 14 digital input/output pins (of which 6 can be used as PWM outputs), 6 analog inputs, a 16 MHz ceramic resonator, a USB connection, a power jack, an ICSP header, and a reset button.</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <img src="img/redboard.jpg" class="img-responsive">
      </div>
      <div class="col-md-6">
        <h1>RedBoard Arduino</h1>
        <h2>The SparkFun RedBoard is an Arduino-compatible development platform that enables quick-and-easy project prototyping. It can interact with real-world sensors, control motors, display information, and perform near-instantaneous calculations.</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <img src="img/shield.jpg" class="img-responsive">
      </div>
      <div class="col-md-6">
        <h1>Arduino Shield</h1>
        <h2>Shields are boards that can be plugged on top of the Arduino PCB extending its capabilities. The different shields follow the same philosophy as the original toolkit: they are easy to mount, and cheap to produce.</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <img src="img/raspi.jpg" class="img-responsive">
      </div>
      <div class="col-md-6">
        <h1>Raspberry pi</h1>
        <h2>The Raspberry Pi is a series of small single-board computers developed in the United Kingdom by the Raspberry Pi Foundation to promote the teaching of basic computer science in schools and in developing countries.</h2>
      </div>
    </div>

    <h1>Capacitor</h1>
    <div class="row">
      <div class="col-md-6">
        <img src="img/ceramic.jpeg" class="img-responsive">
      </div>
      <div class="col-md-6">
        <h1>Ceramic Capacitor</h1>
        <h2>A ceramic capacitor is a fixed-value capacitor in which ceramic material acts as the dielectric. It is constructed of two or more alternating layers of ceramic and a metal layer acting as the electrodes. The composition of the ceramic material defines the electrical behavior and therefore applications.</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <img src="img/electrocapacitor.jpg" class="img-responsive">
      </div>
      <div class="col-md-6">
        <h1>Electrolytic Capacitor</h1>
        <h2>An electrolytic capacitor is a type of capacitor that uses an electrolyte as one of its plates, to achieve a larger capacitance per unit volume than other types of capacitors.</h2>
      </div>
    </div>

     <div class="row">
      <div class="col-md-6">
        <img src="img/tamtalum.jpg" class="img-responsive">
      </div>
      <div class="col-md-6">
        <h1>Tamtalum Capacitor</h1>
        <h2>A tantalum capacitor is a type of electrolytic capacitor and usually consists of a pellet of tantalum metal that acts as an anode, is covered by an insulating oxide layer which forms the dielectric and is surrounded by conductive material that acts as a cathode.</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <img src="img/resistor.jpg" class="img-responsive">
      </div>
      <div class="col-md-6">
        <h1>Resistor</h1>
        <h2>A resistor is an electrical component that limits or regulates the flow of electrical current in an electronic circuit. Resistors can also be used to provide a specific voltage for an active device such as a transistor.</h2>
      </div>
    </div>


  </div>

  
  <!--<div class="container">
    <div class="row">
      <h4><a href="#hidden" data-toggle="collapse">Care to learn Boostrap?</a></h4>
      <div id="hidden" class="collapse">
        <h4>qweqweqweqw</h4>
        <p>qweqweqweqw</p>
        <p>weqweqweqweq</p>
      </div>
    </div>
  </div>
  footer-->

  <footer class="container-fluid text-center">
    <div class="row">
      <div class="col-sm-6">
        <h3> Develop By </h3>
        <br>
        <h4>Team ABC</h4>
        <h4>Team AAbsent</h4>
      </div>
      <!--<div class="col-sm-">
        <h3>Connect</h3>
        <a href="#" class="fa fa-facebook"></a>
        <a href="#" class="fa fa-twitter"></a>
        <a href="#" class="fa fa-google"></a>
        <a href="#" class="fa fa-linkedin"></a>
        <a href="#" class="fa fa-youtube"></a>
      </div>-->
      <div class="col-sm-6">
        <img src="img/ironman2.png" class="icon">
      </div>

    </div>
  </footer>


</body>
</html>