<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme The Band</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=Lato" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/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>
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #60578e;
}
h2{
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 30px;
color: #111
}
.container {
padding: 80px 120px;
}
.doctorName{
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
doctorName:hover{
color:#10bbce;
}
}
.logo-small {
color: #60578e;
font-size: 50px;
}
.logo {
color: #60578ee;
font-size: 200px;
}
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity:1;
}
.person:hover {
opacity:0.7;
}
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color:#1913c1 !important;
}
@media (max-width: 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
}
.bg-1 {
background: #10bbce;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
.btn {
padding: 10px 20px;
background-color: #10bbce;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
.nav-tabs li a {
color: #777;
}
#googleMap {
width: 100%;
height: 400px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.navbar {
font-family: Montserrat, sans-serif;
margin-bottom: 0;
background-color: #10bbce;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 1;
}
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
.navbar-nav li a:hover {
color: #fff !important;
}
.navbar-nav li.active a {
color: #fff !important;
background-color: #60578e !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.open .dropdown-toggle {
color: #fff;
background-color: #60578e !important;
}
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu li a:hover {
background-color: #60578e !important;
}
footer {
background-color: #10bbce;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
.form-control {
border-radius: 0;
}
textarea {
resize: none;
}
.appointment{
border: 5px solid #60578e;
border-radius: 10px;
background-color: #60578e
}
.Insurance{
background-color: #60578e;
font-size:60px;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<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>
<a class="navbar-brand" href="#myPage"><h3 style="font-color:'#60578e' background-color:#60578e ">Advance Medical</h3></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#myPage">HOME</a></li>
<li><a href="#Doctors">Doctors</a></li>
<li><a href="#Services">Services</a></li>
<li><a href="#Insurance">Insurance</a></li>
<li><a href="#Patients">Patients</a></li>
<li><a href="#googleMap">CONTACT</a></li>
<li class="appointment" ><a href="#Appointment">Appointment</a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide" 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">
<img src="https://kendalljung.files.wordpress.com/2015/02/doctors-banner.jpg" alt="New York" width="1200" height="700">
<div class="carousel-caption">
<h4>Advance Health Care</h4>
</div>
</div>
<div class="item">
<img src="https://carcrashrelief.com/wp-content/uploads/2014/06/doctorsLineBannerImg.jpg" alt="Chicago" width="1200" height="700">
<div class="carousel-caption">
<h4>Get Better services</h4>
</div>
</div>
<div class="item">
<img src="https://waleshealthcare.com/wp-content/uploads/2016/04/AdobeStock_75612913.jpeg" alt="Los Angeles" width="1200" height="700">
<div class="carousel-caption">
<h4>Get Comfirtable with your provider </h4>
</div>
</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>
<!-- Container (Doctors section) -->
<div id="Doctors" class="container text-center">
<br>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<a href="#demo3" data-toggle="collapse">
<p class="text-center" style=font-size:26px><strong>Dr Bashir Ahmed, MD</strong></p>
<img src="https://ahmed-clinic.angelfire.com/b_ahmed.jpg" class="img-rounded person" alt="Doctor" width="255" height="255">
</a>
<div id="demo3" class="collapse in">
<h5 style="font-size:35px"><strong>Dr Bashir Ahmed, MD</strong></h5>
<p style="font-size:20px">Dr. Ahmed provides traditional medical care as well as Holistic (alternative) health care services.All patients will be personally evaluated by Dr.Ahmed . We will bring you the best result in the shortest amount of time.</p>
</div>
</div>
</div>
</div>
<!-- Container (Services We offer) -->
<div id="Services" class="bg-1" style="color:#60578e;">
<div class="container-fluid">
<div id="services" class="container text-center">
<h2 style=color:#60578e>SERVICES</h2>
<h3 style=color:#60578e;>What we offer</h3>
<br>
<div class="col-sm-4" >
<span class="glyphicon glyphicon-off logo-small" ></span>
<h3 style=color:#60578e;>POWER</h3>
</div>
<div class="col-sm-4" >
<span class="glyphicon glyphicon-heart logo-small"></span>
<h3 style=color:#60578e;>LOVE</h3>
</div>
<div class="col-sm-4" >
<span class="glyphicon glyphicon-lock logo-small"></span>
<h3 style=color:#60578e;>JOB DONE</h3>
</div>
<br><br>
<div class="row slideanim">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h3 style=color:#60578e;>GREEN</h3>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h3 style=color:#60578e;>CERTIFIED</h3>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h3 style=color:#60578e;>HARD WORK</h3>
</div>
</div>
</div>
</div>
</div>
<!-- Container (Insurance) -->
<div id="Insurance" class="container Insurance" >
<row class="col-sm-4 " >
<h3 style=color:#b2ecf3>Aetna</h3><br>
<h3 style=color:#b2ecf3>Aetna</h3><br>
<h3 style=color:#b2ecf3>Aetna</h3><br>
</row>
<row class="col-sm-4 " >
<h3 style=color:#b2ecf3>Aetna</h3><br>
<h3 style=color:#b2ecf3>Aetna</h3><br>
<h3 style=color:#b2ecf3>Aetna</h3><br>
</row>
<row class="col-sm-4 " >
<h3 style=color:#b2ecf3>Aetna</h3><br>
<h3 style=color:#b2ecf3>Aetna</h3><br>
<h3 style=color:#b2ecf3>Aetna</h3><br>
</row>
</div>
<!-- patients -->
<div id="Patients">
<div class="container">
<div class="container-fluid text-center ">
<h1>Welcome to Patients & Visitors</h1>
<p class="text-center"><strong>Name</strong></p><br>
<p>We offer our patients to access medical records and lab tests through patient portal</p><br><br>
</div>
<div class="row">
<a href="https://cloud8.curemd.com/patientportal/CurePatientHome.aspx?amo">
<div class="col-sm-4">
<p class="text-center">ACCESS TO PATIENT PORTAL</p><br>
<img class="col-sm-offset-3" src="https://www.tangentehr.com/website/wp-content/uploads/2017/02/TangentEHR-patient-portal-application.png" alt="Portal" width="150" height="250" >
</div>
</a>
<a href="#">
<div class="col-sm-4">
<p class="text-center">ACCESS TO PATIENT PORTAL</p><br>
<img class="col-sm-offset-3" src="https://www.youthvillage.co.za/wp-content/uploads/2013/09/form-3.jpg" alt="Portal" width="150" height="250" >
</div>
</a>
<a href="#">
<div class="col-sm-4">
<p class="text-center">ACCESS TO PATIENT PORTAL</p><br>
<img class="col-sm-offset-3" src="https://www.medtunnel.com/img/hipaa-seal-dark.png" alt="Portal" width="150" height="250" >
</div>
</a>
</div>
</div>
</div>
<div id="googleMap"></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=AIzaSyARnnPpa1Yxhz4dA_JmC2pnxyMXSbpVF4E&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
-->
<!--
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
-->
<!-- Container (Contact Section) -->
<div id="Appointment" class="container">
<h3 class="text-center" style="font:#777">Book an Appintment</h3>
<p class="text-center"><em>We love our patients</em></p>
<div class="row">
<div class="col-md-4">
<h1>Appointment</h1>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: [email protected]</p>
</div>
<div class="col-md-8">
<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="Description" rows="5"></textarea>
<br>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit" >Send</button>
</div>
</div>
</div>
</div>
<br>
</div>
<!-- Footer -->
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Copy right reserved</p>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
// 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
});
})
</script>
</body>
</html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
