<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css%22" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li class="dropdown">
<a href="services.html" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></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 class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<!-- banner
================================================== -->
<div class= "banner-sektion banner-overlay ">
<div class="container text-left">
<div class="col-md-6 col-xs-12">
<div class="banner-heading ">
<h2>International Conference In Paris 2017 </h2>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</P>
<button type="button" class="btn btn-default site-btn">Primary</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 paddingTB20">
<div class="col-md-6 text-center">
<img src="https://images.pexels.com/photos/159750/woman-poses-e-learning-female-159750.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responvie" alt="Cinque Terre">
</div>
<div class="col-md-6">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Create an Account</legend>
<p>Don't have an account? Create your account. It's take less then a minute.</p>
<!-- Text input-->
<div class="form-group">
<div class="col-md-12">
<input id="Name" name="Name" placeholder="Name" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-12">
<input id="Email" name="Email" placeholder="Email" class="form-control input-md" type="text">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<div class="col-md-12">
<input id="Password" name="Password" placeholder="Password" class="form-control input-md" required="" type="password">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<div class="col-md-12">
<input id="confirm password" name="confirm password" placeholder="Confirm Password" class="form-control input-md" required="" type="password">
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-6">
<button id="listing-button" name="listing-button" class="btn btn-warning">Register</button>
</div>
</div>
<p>Are you a already member ? Login</p>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- section-row-column-site identition -->
<div class="cta-sektion cta-padding35">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-12">
<h3><i class="fa fa-home"></i> <b>Got a Question? </b> We’re here to help. Send us an email </h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 Tpadding10">
<button type="button" class="btn btn-default site-btn">Start Right Now</button>
</div>
</div>
</div>
</div>
<div class="footer-section">
<div class="footer">
<div class="container">
<div class="col-md-5 footer-one">
<div class="foot-logo">
<img src="http://smarthead.ancorathemes.com/wp-content/uploads/2016/12/footer_logo.png">
</div>
<p>Providing Life Changing Experiences Through Education. Class That Fit Your Busy Life. Closer to Home
</p>
<div class="social-icons">
<a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
<a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
<a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
</div>
</div>
<div class="col-md-4 footer-two">
<h5>Quick Links</h5>
<ul>
<li><a href="#"> About Us</a> </li>
<li><a href="#"> Our News</a> </li>
<li><a href="#"> Our Services</a> </li>
<li><a href="#"> Contact Us</a> </li>
</ul>
</div>
<div class="col-md-3 footer-three">
<h5>Services</h5>
<ul>
<li><a href="#"> About Us</a> </li>
<li><a href="#"> Our News</a> </li>
<li><a href="#"> Our Services</a> </li>
<li><a href="#"> Contact Us</a> </li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-6 ">
<div class="copyright-text">
<p>CopyRight © 2017 Digital All Rights Reserved</p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 ">
<div class="copyright-text pull-right">
<p> <a href="#">Home</a> | <a href="#">Privacy</a> |<a href="#">Terms & Conditions</a> | <a href="#">Refund Policy</a> </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
/* color code- #f65314 linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7))
*********************************/
a {
color: #f65314;
}
.bg-brown {
background-color: #eaeaea;
box-shadow: 2px 2px 2px #888888;
}
.paddingTB20 {
padding-top : 50px;
padding-bottom:50px;
}
/* Plan Section */
.plan {
background: #f9f9f9;
padding: 50px 30px;
margin-bottom: 30px;
}
.plan-header h4 {
padding-bottom: 8px;
text-transform: uppercase;
color: #333;
font-weight: 600;
}
.plan-header {
font-weight: 700;
}
.plan-header span {
color: #fe4819;
font-size: 40px;
}
.plan li {
padding-bottom: 15px;
}
.plan ul {
padding-left: 0;
margin-bottom: 15px;
list-style: none;
}
.plan-header p {
padding-header: 12px;
padding-bottom: 15px;
}
/* Team Section */
.team-content {
padding: 0px 15px 15px 15px;
}
.border-team {
border-bottom:1px solid #e2e2e2;
margin-bottom:10px;
}
.team-img:hover {
background:#f5f5f5;
}
/* Social Icons */
.social-icons{
margin: 0;
padding: 0;
font-size : 10px;
}
.social {
margin:7px 7px 7px 0px;
color:#232323;
}
#social-fb:hover {
color: #3B5998;
transition:all .25s;
}
#social-tw:hover {
color: #4099FF;
transition:all .25s;
}
#social-gp:hover {
color: #d34836;
transition:all .25s;
}
#social-em:hover {
color: #f39c12;
transition:all .25s;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 50px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
img{
width:100%;
}
.about-box h3 {font-size:30px; color:#f65314; line-height:1.8px; font-weight:600; text-transform:uppercase;}
.about-box h2 {font-size:40px; font-weight:600; text-transform:uppercase;}
.gap-90 {margin-bottom:90px;}
.figure-box {
background: linear-gradient(rgba(255,69,0,.9), rgba(0,0,0,.7)), url("https://images.pexels.com/photos/601170/pexels-photo-601170.jpeg?w=940&h=650&auto=compress&cs=tinysrgb");
background-repeat: no-repeat;background-size: cover;background-position: center center;color: #fff;padding-top: 20px; padding-bottom:100px;}
.figure-box h4 {font-size:30px; color:#fff; text-transform:uppercase; }
.figure-box h2 {font-size:30px; color:#fff; text-transform:uppercase; }
.carousel-caption h1{
margin-top:50px;
color:#fff ;
font-size: 56px;
font-weight: 600;
text-align:left;
}
/***************************
Banner CSS
***************************/
.banner-overlay {
background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)), url("https://images.pexels.com/photos/601170/pexels-photo-601170.jpeg?w=940&h=650&auto=compress&cs=tinysrgb");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #fff;
padding-top: 200px;
padding-bottom:100px;
}
.banner-heading h2 {
color:#fff ;
font-size: 56px;
font-weight: 600;
text-transform:uppercase;
}
.banner-heading P {
color:#fff;
padding-bottom:20px;
font-size: 19px;
font-weight: 400;
}
.banner-heading span p {
color:#cd0e00;
}
/* Footer */
.footer {
position: relative;
background-color: #222222;
color: #989898;
padding: 95px 0 50px;
font-size:16px;
}
.footer p {
line-height:26px;
color : #fff;
}
.footer h5 {
font-size: 25px;
font-weight: 700;
color: #f65314 ;
position: relative;
padding-bottom: 16px;
}
.footer h5:after {
content: '';
display: block;
margin: 5px 0 0;
width: 40%;
height: 1px;
background-color: #1e1d22 ;
}
.footer ul {
list-style: none;
line-height:35px;
margin: 0px;
color:#fff;
}
.footer a {
color:#fff;
}
.footer a:hover {
color: #f65314 ;
}
/* Footer Logo */
.foot-logo {
margin: 0px 0px 18px 0px;
padding: 0;
}
/*footer bottom */
.footer-bottom {
padding-top: 10px;
padding-bottom: 25px;
border-top: 1px solid #2f2f33 ;
background: #1e1d22 ;
}
.copyright-text p {
color: #7d7975;
margin-top: 18px;
margin-bottom: 0;
font-size:15px;
}
.copyright-text a {
color: #7d7975;
margin: 0px 10px 0px 10px;
}
.copyright-text a:hover {
color: #f65314 ;
}
/* Social Icons */
.social-icons{
margin: 0;
padding: 0;
font-size : 10px;
}
.social {
margin:7px 7px 7px 0px;
color:#fff;
}
#social-fb:hover {
color: #3B5998;
transition:all .25s;
}
#social-tw:hover {
color: #4099FF;
transition:all .25s;
}
#social-gp:hover {
color: #d34836;
transition:all .25s;
}
#social-em:hover {
color: #f39c12;
transition:all .25s;
}
/* cta section */
/*******************
Padding-Margin
*********************/
.cta-padding35 {
padding: 35px 0 40px;
background-color: #f65314 ;
color:#fff;
border-bottom:1px solid #222222 ;
}
.Tpadding10 {
padding-top: 10px;
color:#fff;
}
.TBpadding60 {
padding-top:60px;
padding-bottom:60px;
}
.site-btn {
font-size: 14px;
padding: 13px 30px;
border-radius: 5px;
min-width: 200px;
display: inline-block;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
background-color:transparent ;
transition: all .25s ease-in-out;
border-color:#fff;
}
.site-btn2 {
padding: 13px 30px;
border-radius: 5px;
min-width: 200px;
color: #000;
border-color:#000;
margin-top: 5px; margin-bottom: 5px;
}
.site-btn: hover{
background-color:#000 ;
}
.secpaddingTB60 {
padding-top:60px;
padding-bottom:60px;
}
.section-title {
font-weight:400;
letter-spacing:.5px;
text-transform:none;
color:#000;
}
.section-titlepara {
font-weight:400;
text-transform:none;
color:#636363;
}
.border {
border-bottom: 1px solid #e2e2e2;
width: 30%;
margin-bottom:25px;
}
i {
font-size : 36px;
padding-right: 10px;
color: #f65314;
}
.icon-box {
position: relative;
margin-top: 20px;
padding: 0 0 0 80px;
}
.icon-left {
display: block;
position: absolute;
width: 64px;
height: 64px;
top: 0;
left: 0;
}
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption h1 {
font-size:64px;
font-weight:600;
margin-bottom:20px;
}
/* navigation CSS */
.navbar-default {
background-color: #000000;
border-color: #000000;
padding-top:20px;
padding-bottom:20px;
font-weight:600;
letter-spacing:2.5px;
font-size:17px;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #f65314;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #f65314;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #000000;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #f65314;
background-color: #000000;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
background-color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #f65314;
background-color: #000000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #f65314;
background-color: #000000;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #f65314;
background-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #000000;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #f65314;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #f65314;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #f65314;
background-color: #000000;
}
