Viewing File: /home/webrbaew/public_html/index-old.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>AB Web Solutions</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 href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
::selection {
background:#1dbf73;
color:#fff;
}
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #1dbf73;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.color-text {
color: #1dbf73;
}
.jumbotron {
background-color: #1dbf73;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
text-shadow:2px 2px 8px black, -2px -2px 8px black;;
}
.jumbotron p {
font-size:22px;
}
.container-fluid {
padding: 50px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #1dbf73;
font-size: 50px;
}
.logo {
color: #1dbf73;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #1dbf73;
}
.carousel-indicators li {
border-color: #1dbf73;
}
.carousel-indicators li.active {
background-color: #1dbf73;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #1dbf73;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #1dbf73;
background-color: #fff !important;
color: #1dbf73;
}
.panel-heading {
color: #fff !important;
background-color: #1dbf73 !important;
padding: 4px;
font-size:19px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 25px;
color:#1dbf73;
}
.panel-body h4, .panel-footer h4 {
font-size: 18px;
color:#1dbf73;
font-weight:bold;
}
.panel-footer .panel-table {
width:100%;
}
.panel-footer .panel-table td {
width:50%;
vertical-align:top;
padding:0 3px;
}
.panel-footer.more-gigs h4 {
margin-bottom:4px;
color:#818181;
}
.panel-footer.more-gigs h4.more-gigs-heading {
color:#1dbf73;
}
.panel-price h3 {
color:#818181;
}
.panel-footer .price {
color:#1dbf73;
font-weight:bold;
}
.panel-footer .glyphicon {
color:#1dbf73;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #1dbf73;
color: #fff;
}
.navbar {
margin-bottom: 0;
background-color: #1dbf73;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #1dbf73 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #1dbf73;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (min-width: 767px) {
.jumbotron {
height:662px;
padding-top:200px;
background-attachment:fixed;
}
}
@media screen and (max-width: 1200px) {
.panel-footer .panel-table {
width:100%;
}
}
@media screen and (min-width:991px) and (max-width: 1199px) {
.panel-price {
padding-top:65px;
}
}
@media screen and (max-width: 991px) {
.container-fluid {
padding-left:15px;
padding-right:15px;
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
.panel-footer .panel-table {
width:100%;
}
}
@media screen and (max-width: 525px) {
.col-xs-full {
width:100%;
clear:both;
margin-left:0;
}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<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="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#gigs">GIGS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center" style="background-image:url('images/bg-cover.jpg');background-position:center center; background-size:cover;background-repeat:no-repeat;">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<div class="row">
<div style="background:rgba(0,0,0,0.5);border-radius:32px">
<br><br><br>
<h1>AB Web Solutions</h1>
<p>Providing Web Services</p>
<br><br><br>
</div>
</div>
</div>
</div>
<!-- Container (About Section) -->
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About Us</h2><br>
<h4><span class="color-text"><b>AB</b></span> Providing Website Development Services in Pakistan. We believe that we are on the face of the earth to make great products and that's not changing. We are constantly focusing on innovating. We believe in the simple not the complex. We believe in saying no to thousands of projects, so that we can really focus on the few that are truly important and meaningful to us.</h4><br>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo slideanim"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2><br>
<h4>
<strong>MISSION:</strong>
Our mission is to make technology an asset for your business or organization not a problem. To be the providers of strategies and services, which deliver long term commercial benefits, based upon our clients key business requirements. The strategies evolved should be economical, efficient, durable, flexible and allow the organizations to respond rapidly to both market and customer needs, therefore, we will work hand in hand with you to support your growth.
</h4><br>
<h4><strong>VISION:</strong> To become a prime performer in the global marketplace by providing highly innovative web designing, web development and other web solutions services that will drive our clients' business towards growth. Worldwide reputation is the dream of every company and we want to achieve it through our work.</h4>
</div>
</div>
</div>
<!-- Container (Services Section) -->
<div id="services" class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row slideanim">
<div class="col-sm-3 col-xs-6" style="padding:15px;">
<span class="fa fa-desktop logo-small"></span>
<h4>WEBSITE DEVELOPMENT</h4>
<p>We are specialized in <span class="color-text"><b>development and designing of E-commerce and dynamic sites</b></span>. Be a part of creative agency and establish the brands and businesses.</p>
</div>
<div class="col-sm-3 col-xs-6" style="padding:15px;">
<span class="fa fa-check-square-o logo-small"></span>
<h4>WEB ASSIGNMENTS</h4>
<p>We are specialized in completing assignments in Web terms. Done your <span class="color-text"><b>PHP, JavaScript/Jquery, HTML/CSS, Bootstrap, OOP</b></span> assignments on time.</p>
</div>
<div class="visible-xs" style="clear:both"></div>
<div class="col-sm-3 col-xs-6" style="padding:15px;">
<span class="fa fa-database logo-small"></span>
<h4>Database</h4>
<p>Design and create normalized <span class="color-text"><b>MySQL Database</b></span> with <span class="color-text"><b>20+ Tables</b></span> and their relationships, write <span class="color-text"><b>queries</b></span> and <span class="color-text"><b>fix issues</b></span>.</p>
</div>
<div class="col-sm-3 col-xs-6" style="padding:15px;">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4>FIXING ISSUES</h4>
<p>Specialized in fixing web issues. Fix your <span class="color-text"><b>PHP bug issues, CSS responsive issues</b></span> within <span class="color-text"><b>12 hours</b></span>.</p>
</div>
</div>
<br><br>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center bg-grey">
<h2>Portfolio</h2><br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York" width="400" height="300">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco" width="400" height="300">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div><br>
<h2>Happy Clients</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4> <p style="margin:50px">"Efficient and effective interactions for the final product! Clear understanding of the work requested and prompt communication to work out any discrepencies."<br><span>Chancemd</span></p></h4>
</div>
<div class="item">
<h4>"One word... WOW!!"<br><span>John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span>Chandler Bing, Actor, FriendsAlot</span></h4>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Container (Pricing Section) -->
<div id="gigs" class="container-fluid">
<div class="text-center">
<h2>Gigs</h2>
<h4>Choose a payment plan that works for you</h4>
</div>
<?php
$panel_title[0] = 'Complete Website';
$gig_title[0] = 'I Will Create Complete And Secure Website In PHP And Mysql';
$gig_picture[0] = 'gig1.png';
$gig_price[0] = 70;
$gig_link[0] = 'https://www.fiverr.com/muhammadabub739/create-responsive-and-secure-website-in-php-with-mysql';
$gig_features[0] = array(
"Dynamic Website",
"Admin Panel",
"Users",
"Database (MySQL)",
"File Upload",
"Email Integration",
"Payment Methods",
"Responsive Design",
"Backend in PHP",
"Source Code"
);
$panel_title[1] = 'Web Designing';
$gig_title[1] = 'I Will Create Responsive Web Design, Landing Page etc';
$gig_picture[1] = 'gig2.png';
$gig_price[1] = 25;
$gig_link[1] = 'https://www.fiverr.com/muhammadabub739/convert-your-website-to-responsive';
$gig_features[1] = array(
"Responsive Design",
"Customized Design",
"Landing Page",
"Modern Look",
"Parallax Scrolling",
"Bootstrap",
"Device Compatibility",
"Browser Compatibility"
);
$panel_title[2] = 'Web Assignments';
$gig_title[2] = 'I Will Do Web Assignments Tasks, PHP, JS, HTML CSS, Bootstrap, CI';
$gig_picture[2] = 'gig3.png';
$gig_price[2] = 25;
$gig_link[2] = 'https://www.fiverr.com/muhammadabub739/do-web-assignments-tasks-php-js-html-css-bootstrap-ci';
$gig_features[2] = array(
"Custom Coding",
"Documentation",
"Proper Commenting",
"Scripting",
"Designing",
"HTML & CSS",
"Functions",
"OOP Concepts"
);
?>
<div class="row">
<?php
$gig_count = 0;
for ($i=0;$i<count($gig_title);$i++) {
$gig_count++;
?>
<div class="col-lg-4 col-md-12">
<div class="panel panel-default slideanim">
<div class="panel-heading text-center">
<?php echo $panel_title[$i] ?>
</div>
<div class="row">
<div class="col-lg-12 col-md-4 col-sm-6 col-xs-8 col-xs-offset-2 col-sm-offset-0 col-xs-full">
<div class="panel-body">
<img src="images/<?php echo $gig_picture[$i] ?>" class="img-responsive" width="100%">
</div>
</div>
<div class="col-lg-12 col-md-5 col-sm-6 col-xs-12 col-xs-full">
<div class="panel-footer">
<h4><?php echo $gig_title[$i] ?></h4>
<table class="panel-table">
<tr>
<td>
<?php for ($j=0;$j<count($gig_features[$i]);$j=$j+2) { ?>
<p><span class="glyphicon glyphicon-check"></span> <?php echo $gig_features[$i][$j]; ?></p>
<?php } ?>
</td>
<td>
<?php for ($j=1;$j<count($gig_features[$i]);$j=$j+2) { ?>
<p><span class="glyphicon glyphicon-check"></span> <?php echo $gig_features[$i][$j]; ?></p>
<?php } ?>
</td>
</tr>
</table>
</div>
</div>
<div class="col-lg-12 col-md-3 col-sm-12 col-xs-12 col-xs-full">
<div class="panel-footer text-center panel-price">
<h3>Starting At <b class="price">$<?php echo $gig_price[$i] ?></b></h3>
<a href="<?php echo $gig_link[$i]; ?>" target="_blank"><button class="btn btn-sm">CONTACT NOW</button></a>
</div>
</div>
</div>
</div>
</div>
<?php if ($gig_count%3==0) echo '<div class="visible-lg" style="clear:both"></div>'; ?>
<?php } ?>
</div>
<div class="panel panel-default slideanim">
<div class="panel-heading text-center">
More Gigs
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel-body">
<img src="images/gig4.png" class="img-responsive" width="100%">
</div>
<div class="panel-footer text-center more-gigs">
<h4 class="more-gigs-heading">I Will Fix CSS, PHP, Responsive, HTML Issues</h4>
<h4>Starting At <b class="price">$5</b></h4>
<a href="https://www.fiverr.com/muhammadabub739/fix-css-php-responsive-html-issues" target="_blank"><button class="btn btn-sm">CONTACT NOW</button></a>
</div>
</div>
<div class="col-sm-4">
<div class="panel-body">
<img src="images/gig5.png" class="img-responsive" width="100%">
</div>
<div class="panel-footer text-center more-gigs">
<h4 class="more-gigs-heading">I Will Create Dashboard Or Admin Panel In PHP Or In Code Igniter</h4>
<h4>Starting At <b class="price">$70</b></h4>
<a href="https://www.fiverr.com/muhammadabub739/create-dashboard-or-admin-panel-in-php-mysql-or-code-igniter" target="_blank"><button class="btn btn-sm">CONTACT NOW</button></a>
</div>
</div>
<div class="col-sm-4">
<div class="panel-body">
<img src="images/gig6.png" class="img-responsive" width="100%">
</div>
<div class="panel-footer text-center more-gigs">
<h4 class="more-gigs-heading">I Will Convert PSD To Html</h4>
<h4>Starting At <b class="price">$20</b></h4>
<a href="https://www.fiverr.com/muhammadabub739/convert-psd-to-html" target="_blank"><button class="btn btn-sm">CONTACT NOW</button></a>
</div>
</div>
</div>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> <b>Multan, Pakistan</b></p>
<p><span class="glyphicon glyphicon-phone"></span> <b>+92 304 5357 190</b></p>
<p><span class="glyphicon glyphicon-envelope"></span> <b>abubakr123.ch@gmail.com</b></p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
<!-- Add Google Maps -->
<div id="" style="height:400px;width:100%;">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27592.50517634972!2d71.38132603245718!3d30.17819008734793!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x393b33d4cc95dbb3%3A0xc5dc139a9b62ab2!2sMultan%20Cantonment%2C%20Multan%2C%20Punjab%2C%20Pakistan!5e0!3m2!1sen!2s!4v1596913867179!5m2!1sen!2s" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
var mapProp = {center:myCenter, zoom:12, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Copyright <?php echo date('Y')?> | All Rights Reserved. AB IT Solutions</p>
</footer>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
$(window).scrollTop(1);
})
</script>
</body>
</html>
Back to Directory
File Manager