<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 11px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body {margin:0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.4285; color: #333; background-color: #fff;}
table {border-spacing: 0; border-collapse: collapse;}
.table-responsive {min-height: 0.01%; overflow-x: auto;}
.table {width: 100%; max-width: 100%; margin-bottom: 20px;}
td, th {padding: 0;}
p {margin: 0 0 10px;}
b, strong {font-weight: 700;}
body {line-height: 1; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.4285; color: #333; background-color: #fff;}
html {font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
p {margin: 0 0 10px;}
span.summary-acc {font-size: 12.5pt; font-weight: bold;}
table {border-collapse: collapse; border-spacing: 0;}
table {background-color: transparent;}
span.table {color: black; line-height: 115%; font-size: 11.5pt;}
span.acc {font-family: Calibri,sans-serif; font-size: 12pt;}
p.heading {margin-top: 10px; vertical-align: middle;}
span.heading {font-family: Baskerville Old Face; font-weight: bold; font-size: 16pt;}
span.heading {vertical-align: baseline;}
::after, ::before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.container {padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
@media all and (min-width:768px) {.container {width: 750px;}}
@media all and (min-width:992px) {.container {width: 970px;}}
@media all and (min-width:1200px) {.container {width: 1170px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} }
@media all and (min-width:768px) {.container {width: 750px;}}
@media all and (min-width:992px) {.container {width: 970px;}}
@media all and (min-width:1200px) {.container {width: 1170px;}}
.row {margin-right: -15px; margin-left: -15px;}
.row-heading {line-height: 108.33%; font-family: Georgia; font-size: 18px; background-color: blue; font-weight: bold; color: white; border-top: 1px double white; border-bottom: 1px double white;}
.row {overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
.row {margin-right: -15px; margin-left: -15px;}
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {display: table; content: " ";}
.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after, .container-fluid::after, .container::after, .dl-horizontal dd::after, .form-horizontal .form-group::after, .modal-footer::after, .nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after, .pager::after, .panel-body::after, .row::after {clear: both;}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {float: left;}
.col-xs-7 {width: 58.33%;}
.col-xs-5 {width: 41.66%;}
.col-xs-12 {width: 100%;}
.table-responsive {min-height: 0.01%; overflow-x: auto;}
.heading {overflow: hidden; background: rgb(51, 51, 255); padding: 0pt;}
.text-center {text-align: center;}
.row-heading {text-align: justify; line-height: 108.33%; margin: 0px; font-family: Georgia; font-size: 18px; background-color: blue; font-weight: bold; color: white; padding: 0px;}
.media {margin-top: 15px;}
.media, .media-body {overflow: hidden; zoom: 1;}
.media {margin-top: 15px;}
.media-body, .media-left, .media-right {display: table-cell; vertical-align: top;}
.media-body {font-family: georgia; font-size: 20px; line-height: 90%; line-height: 100%; width: 10000px;}
.media-body, .media-left, .media-right {display: table-cell; vertical-align: top;}
.media-left, .media > .pull-left {padding-right: 10px;}
:first-child.media {margin-top: 0px;}
.glyphicon {position: relative; top: 1px; display: inline-block; font-family: "Glyphicons Halflings"; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.pull-left {float: left !important;}
.glyphicon-ok::before {content: "\e013";}
.summary-acc {font-size: 14pt; padding: 5px;}
.navbar-brand {padding:0; font-size: 22px; img {display: inline-block;margin-right: 8px; width: 50px; height: 50px;} }
nav {display: block;}
.navbar-nav {display: inline-block;}
.nav-link {padding-top: 0; padding-bottom:0; height:50px; line-height:50px}
.affix {position: fixed; top: 10px; width: 100%; display:block;}
/* .affix + .container-fluid {padding-top: 70px;} */
</style>
</head>
<body class="position: relative" data-spy="scroll">
<section class="container" id="summary" style="margin-top: 155px;">
<div class="row" style="height: auto; margin-top: 5px; margin-bottom: 0px;">
<div class="col-xs-7"><!-- A -->
<div class="row row-heading">
<div class="col-xs-12 heading">
<p class="heading">
<b><span class="heading">SUMMARY OF QUALIFICATIONS</span></b>
</p>
</div>
</div>
<div class="row summary" style="height: auto;">
<div class="col-xs-12">
<div class="summary-left">
<div class="media">
<span class="float-left pull-left lg glyphicon glyphicon-ok" style="padding-top: 5px;"></span>
<div class="media-body">
Propelled Unified-Communications (UC), Customer-Relationship-Management (CRM) and Voice-over-Internet-Protocol (VoIP) industry pioneers into market-share winners by delivering seven years of Inside Sales, Channel Partner, and Product Marketing team leadership and sales productivity
</div>
</div>
<div class="media">
<span class="float-left pull-left lg glyphicon glyphicon-ok" style="padding-top: 5px;"></span>
<div class="media-body">
Preeminent UC Cloud Contact Center industry, competitor and product knowledge expert
</div>
</div>
<div class="media">
<span class="float-left pull-left lg glyphicon glyphicon-ok" style="padding-top: 5px;"></span>
<div class="media-body">
Improved competitiveness, profitability and cost-effectiveness for over 1,500 SMBs
</div>
</div>
<div class="media">
<span class="float-left pull-left lg glyphicon glyphicon-ok" style="padding-top: 5px;"></span>
<div class="media-body">
Surpassed sales quota by 135% during five years as Inside Sales agent
</div>
</div>
<div class="media">
<span class="float-left pull-left lg glyphicon glyphicon-ok" style="padding-top: 5px;"></span>
<div class="media-body">
Delivered double digit market-share growth and built sustainable competitive advantages for over 20 UC Contact Center project management partners, delivering competitive advantage through cloud and digital marketing optimization, vendor management, professional services, and other project management services
</div>
</div>
</div>
</div>
</div>
</div><!-- /left column -->
<div class="col-xs-5">
<div class="row">
<div class="col-xs-12 table-responsive" style="background: white; margin: 0px 10px; border: 1pt solid rgb(51, 51, 255); border-image: none; width: 100%; align-content: center;" valign="middle" colspan="3">
<table align="center" class="table-responsive;" style="width: 100%; margin-top: 5px; margin-right: auto; margin-left: auto; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr style="margin-bottom: 10px;">
<td style="background: blue; border-width: medium medium 1pt; border-style: none none dashed; border-color: currentColor currentColor rgb(0, 0, 0); border-image: none; width: 100%; height: 14.2pt; padding-bottom: 5px;" colspan="4">
<p align="center" class="MsoNormal" style="margin: 4pt 0in 0pt 0pt; text-align: center; line-height: normal;"><b><span class="acc" style="color: white; font-size: 15px;">VENDOR CLOUD REVENUE PRODUCER</span></b></p>
</td>
</tr>
<tr>
<td valign="top" style="border-width: medium 1pt medium medium; border-style: none dashed none none; border-color: currentColor rgb(51, 51, 255) currentColor currentColor; padding: 2px; border-image: none; width: 22%; min-width: 82px;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: normal; margin-bottom: 0pt;"><b><span style="color: black; font-family: Arial,sans-serif; font-size: 9pt;"> </span></b></p>
</td>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 5px; width: 40%; vertical-align: middle; max-width: 144px;" rowspan="2">
<p class="MsoNormal" style="margin: 0in -2.45pt 0pt 2.45pt; line-height: normal;"><b><span>Managed, Value-Added & Prof Services</span></b></p>
</td>
<td valign="bottom" style="border-width: medium medium 1pt; border-style: none none dashed; border-color: currentColor currentColor rgb(51, 51, 255); padding: 0in; border-image: none; width: auto;" colspan="2">
<p align="center" class="MsoNormal" style="margin: 0in 0in 0pt 0.05in; text-align: center; line-height: normal;"><b><span>Vendor Revenue</span></b></p>
</td>
</tr>
<tr>
<td valign="top" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 2px;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: normal; margin-bottom: 0pt;"><b><span style="color: black; font-family: Arial,sans-serif; font-size: 9pt;"> </span></b></p>
</td>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 2px; vertical-align: middle;">
<p class="MsoNormal" style="margin: 0in 0in 0pt 4pt; line-height: normal;"><b><span>Direct Sales</span></b></p>
</td>
<td valign="bottom" style="border-width: medium medium 1pt; border-style: none none dashed; border-color: currentColor currentColor rgb(51, 51, 255); padding: 2px; border-image: none; width: auto;">
<p class="text-center" style="margin: 0in -4.5pt 0pt 4pt; line-height: normal;"><b><span>VAR, SI, Consult</span></b></p>
</td>
</tr>
<tr>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 2px;">
<p align="right" class="text-center" style="margin: 0in 3.3pt 0pt 0in; text-align: right; line-height: 115%; -ms-layout-grid-mode: char; -ms-word-break: break-all;"><span class="table">Revenue</span></p>
</td>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 2px;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">$12M</span></p>
</td>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 2px;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">$5M</span></p>
</td>
<td valign="bottom" style="border-width: medium medium 1pt; border-style: none none dashed; border-color: currentColor currentColor rgb(51, 51, 255); padding: 4px; border-image: none;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">$68M</span></p>
</td>
</tr>
<tr>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 4px;">
<p align="right" class="MsoNormal" style="margin: 0in 3.3pt 0pt 0in; text-align: right; line-height: 115%; -ms-layout-grid-mode: char; -ms-word-break: break-all;"><span class="table">SMBs</span></p>
</td>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 4px;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">85</span></p>
</td>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 4px;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">1200</span></p>
</td>
<td valign="bottom" style="border-width: medium medium 1pt; border-style: none none dashed; border-color: currentColor currentColor rgb(51, 51, 255); padding: 4px; border-image: none;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">250</span></p>
</td>
</tr>
<tr>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 4px;">
<p align="right" class="MsoNormal" style="margin: 0in 3.3pt 0pt 4.5pt; text-align: right; line-height: 115%; text-indent: -4.5pt; -ms-layout-grid-mode: char; -ms-word-break: break-all;"><span class="table">Experience</span></p>
</td>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 4px;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">5 years</span></p>
</td>
<td valign="bottom" style="border-width: medium 1pt 1pt medium; border-style: none dashed dashed none; border-color: currentColor rgb(51, 51, 255) rgb(51, 51, 255) currentColor; padding: 4px;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">5 years</span></p>
</td>
<td valign="bottom" style="border-width: medium medium 1pt; border-style: none none dashed; border-color: currentColor currentColor rgb(51, 51, 255); padding: 4px; border-image: none;">
<p align="center" class="MsoNormal" style="text-align: center; line-height: 115%; margin-bottom: 0pt;"><span class="table">7 years</span></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row" style="margin-top: 10px; margin-bottom: 10px;">
<div class="col-xs-12" style="background: white; margin: 0px 10px; border: 1pt solid rgb(7, 8, 221); border-image: none; width: 100%;">
<p class="MsoNormal" style="margin: 2pt 0in; text-align: justify; -ms-text-justify: inter-ideograph;">
<span class="summary-acc">Decade of B2B Cloud Ecosystem role diverse experience ‐</span>
<span class="summary-acc" style="color: rgb(29, 29, 255);">Service Provider, Value-Added Reseller (VAR), Systems Integrator (SI), Consultant, Customer, and Vendor</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="background: white; border-width: 1pt; border-style: solid; border-color: rgb(7, 8, 221) rgb(7, 8, 221) currentColor; margin: 0px 10px; border-image: none; width: 100%;">
<p class="MsoNormal" style="margin: 2pt 0in 0pt 0pt; text-align: justify; -ms-text-justify: inter-ideograph;">
<span class="summary-acc">Produced $70M SMB Revenue For Preferred Cloud Vendors ‐</span>
<span class="summary-acc" style="color: red;"> 8x8, Google, Mitel, Five9, Marketo, Contactual, Cisco, Shoretel, SugarCRM, Salesforce.com, Netsuite, Zoho, Microsoft</span>
</p>
</div>
</div>
</div><!-- /right column -->
</div><!-- /row containing both summary cols -->
</section>
<!-- test my navbars for scrolling affixing fixing and shrinking -->
<section class="container-fluid jumbotron jumbotron-fluid" id="cta" style="height: 580px; width: 100%; position: absolute;" >
</section>
<section class="container" id="test-navbars">
<div class="row">
<div class="col-4"><a class="navbar-brand" href="#"><span id="logo"><img src="http://sangampatel.com/assets/img/logo2-big.png" alt="Sangam Patel"></span></a></div>
<div class="col-8">
<nav id="top-navbar0" class="navbar navbar-expand-sm bg-dark navbar-dark" style="display:block;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" data-spy="affix" data-offset-top="200">>
<li><a href="#">Home</a></li>
<li class="dropdown "><a class="dropdown-toggle" id="drop1" role="button" href="#" data-toggle="dropdown">Books <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JQuery</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation"><a role="menuitem" href="#">Bootstarp</a></li>
</ul>
</li>
<li class="dropdown "><a class="dropdown-toggle" id="drop1" role="button" href="#" data-toggle="dropdown">services <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" href="#">services-1</a></li>
<li role="presentation"><a role="menuitem" href="#">services-2</a></li>
<li role="presentation"><a role="menuitem" href="#">services-3</a></li>
<li role="presentation"><a role="menuitem" href="#">services-4</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-12">
<nav id="top-navbar1" class="navbar navbar-expand-sm bg-dark navbar-dark" style="display:block;">
<a class="navbar-brand" href="#"><span id="logo"><img src="http://sangampatel.com/assets/img/logo2-big.png" alt="Sangam Patel"></span></a>
<!-- NAVBAR WITH DROPDOWN MENU -->
<ul class="nav navbar-nav navbar-expand-sm navbar-dark bg-dark" data-spy="affix" data-offset-top="350">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<br>
<nav id="top-navbar2" class="navbar navbar-expand-sm bg-dark navbar-dark" style="display:block;"><!-- LOGIN NAVBAR -->
<a class="navbar-brand" href="#"><span id="logo"><img src="http://sangampatel.com/assets/img/logo2-big.png" alt="Sangam Patel"></span></a>
<ul class="nav navbar-nav navbar-right" data-spy="affix" data-offset-top="450">
<li class="active"><a href="./">Login <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Contact Me</a></li>
<li><a href="../navbar-fixed-top/">Why Hire Me?</a></li>
</ul>
</nav>
</section>
<script type="text/javascript">
$(document).ready(function () {
$('body').scrollspy({ target: '#top-navbar0', offset: 10
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('body').scrollspy({ target: '#top-navbar1', offset: 60
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('body').scrollspy({ target: '#top-navbar2', offset: 120
});
});
</script>
</body>
