<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="navbar">
<nav class="navbar navbar-inverse 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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" style="padding-top: 10px;">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign in as<br>Bride/Groom</a></li>
<li><a href="#">Sign in as<br>Guest</a></li>
<li><button type="button" class="btn btn-danger btn-lg">SignUp</button></li>
</ul>
</div>
</div>
</nav>
</div>
<!--navbar end-->
<!--*************************
***************************
main header
**************************-->
<div class="jumbotron">
<div class="heading">
<h2>Your best day is incomplete without friends</h2><br>
<span><h2>Invait friends on wedding and lets them fullfill youe wishes</h2></span></span>
</div>
<div class="btngroup">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
</div>
<!---*********************
***************************
grid s
*************-->
<div class="container">
<div class="page-header">
<h2 style="text-align: center;">Shere your moments with ur friends three ways</h2>
</div>
<div class="row grid-divider">
<div class="col-sm-3">
<div class="col-padding">
<i class="fa fa-bars" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-sm-3">
<div class="col-padding">
<i class="fa fa-comments" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate placeat.</p>
</div>
</div>
<div class="col-sm-3">
<div class="col-padding">
<i class="fa fa-gift" aria-hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam.</p>
</div>
</div>
<div class="col-sm-3" style="padding-top: 60px;">
<div class="col-padding" style="text-align: center;">
<button type="button" class="btn btn-danger">Danger</button>
</div>
</div>
</div>
</div>
<!--**********************
******************************
rows
***************************
*************************-->
<div class="container-fluid" style="margin-top: 50px;">
<div class="row">
<div class="col-xs-12">
<h2 style="text-align: center;"></i>We know want you want</h2>
</div>
</div>
<!-- row requires "row-divided" class -->
<div class="row row-divided" style="margin-top: 30px;">
<div class="col-xs-6 column-one">
<h2 style="text-align: center; padding-top: 60px;"><i class="fa fa-female" aria-hidden="true"></i></h2>
</div>
<div class="vertical-divider"><i class="fa fa-heart" aria-hidden="true"></i></div>
<div class="col-xs-6 column-two">
<h3 style="line-height: 30px; padding-left: 30px; padding-top: 40px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam
</h3>
</div>
</div>
<!--second-->
<div class="row row-divided" style="margin-top: 40px;">
<div class="col-xs-6 column-one">
<h3 style="line-height: 30px; padding-left: 10px; padding-top: 40px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam
</h3>
</div>
<div class="vertical-divider"><i class="fa fa-heart" aria-hidden="true"></i></div>
<div class="col-xs-6 column-two">
<h2 style="text-align: center; padding-top: 60px;">
<i class="fa fa-moon-o" aria-hidden="true"></i></h2>
</div>
</div>
<!--second end-->
<!--333333-->
<div class="row row-divided" style="margin-top: 40px;" >
<div class="col-xs-6 column-one">
<h2 style="text-align: center; padding-top: 60px;"> <i class="fa fa-male" aria-hidden="true"></i></h2>
</div>
<div class="vertical-divider"><i class="fa fa-heart" aria-hidden="true"></i></div>
<div class="col-xs-6 column-two">
<h3 style="line-height: 30px; padding-left: 30px; padding-top: 40px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam
</div>
</div>
<!--333-->
<!--44-->
<div class="row row-divided" style="margin-top: 40px;">
<div class="col-xs-6 column-one">
<h3 style="line-height: 30px; padding-left: 10px; padding-top: 40px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam
</h3>
</div>
<div class="vertical-divider"><i class="fa fa-heart" aria-hidden="true"></i></div>
<div class="col-xs-6 column-two">
<h2 style="text-align: center; padding-top: 60px;">
<i class="fa fa-users" aria-hidden="true"></i></h2>
</div>
</div>
<!--44-->
</div>
<!--**************
rowsss end
&**********-->
<!--slider**********
*************************
******************************-->
<h2 style="text-align: center; padding-top: 40px;">Our lovely guests noe have to say about it</h2>
<div class="slide" style="background-color:#929493;">
<div class="container">
<div class="row">
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text">
<div class="col-md-12">
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text">
<div class="col-md-12 text-center">
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
</div>
</div><!-- /header-text -->
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /carousel -->
</div>
</div>
</div>
<!--end slider-->
<!--grid second************
***************************
********************************-->
<div class="container">
<div class="page-header">
<h2>Going on wedding?</h2>
</div>
<div class="row grid-divider">
<div class="col-sm-3">
<div class="col-padding">
<i class="fa fa-gift" aria-hidden="true"></i><br>
<button type="button" class="btn btn-danger btn-xs">Shop Now</button>
</div>
</div>
<div class="col-sm-3">
<div class="col-padding">
<i class="fa fa-mobile" aria-hidden="true"></i><br>
<button type="button" class="btn btn-danger btn-xs">Shop Now</button>
</div>
</div>
<div class="col-sm-3">
<div class="col-padding">
<i class="fa fa-camera-retro" aria-hidden="true"></i><br>
<button type="button" class="btn btn-danger btn-xs">Shop Now</button>
</div>
</div>
<div class="col-sm-3">
<div class="col-padding">
<div style="size: 90px;"> <i class="fa fa-television" aria-hidden="true"></i><br></div>
<button type="button" class="btn btn-danger btn-xs">Shop Now</button>
</div>
</div>
</div>
</div>
<!--end second grid-->
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 21px;
line-height: 1.42857143;
color: #333;}
.nav {
padding-left: 54px;}
h2{color:black;}
.navbar-inverse .navbar-brand {
color: rgba(224, 14, 14, 0.99);
}
.navbar-brand {
float: left;
height: 50px;
padding: 24px 34px;
font-size: 34px;
line-height: 20px;
}
.jumbotron{
height: 590px;
background-image: url("rose.png");
background-repeat: no-repeat;
background-position: right;
background-size: 550px 600px;
background-color: #e7e8ea;
}
.heading {
padding-top: 99px;
padding-left: 68px;
}
.jumbotron .btngroup {
padding-left: 271px;
padding-top: 128px;
}
.jumbotron .btn {
margin: 20px;
}
/* grid */
@media ( min-width: 768px ) {
.grid-divider {
position: relative;
padding: 0;
}
.grid-divider>[class*='col-'] {
position: static;
}
.grid-divider>[class*='col-']:nth-child(n+2):before {
content: "";
position: absolute;
top: 0;
bottom: 0;
}
.col-padding {
padding: 0 15px;
}
.jumbotron
{margin-top: -20px;}
}
/* end------*/
.container,i{
text-align: center;
}
.page-header ,row .grid-divider ,.fa {
display: inline-block;
color: red;
font: normal normal normal 14px/1 FontAwesome;
font-size: 120px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-top: -42px;
}
/* rows----------
----------------------------*/
.vertical-divider {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
width: auto;
height: 10%;
line-height: 0;
text-align:center;
text-transform: uppercase;
transform: translateX(-50%);
}
.vertical-divider:before,
.vertical-divider:after {
position: absolute;
left: 50%;
content: '';
z-index: 9;
border-left: 1px solid rgba(34,36,38,.15);
border-right: 1px solid rgba(255,255,255,.1);
width: 0;
height: calc(100% - 1rem);
}
.row-divided > .vertical-divider {
height: calc(50% - 1rem);
}
.vertical-divider:before {
top: -100%;
}
.vertical-divider:after {
top: auto;
bottom: 0;
}
.row-divided {
position:relative;
}
.row-divided > [class^="col-"],
.row-divided > [class*=" col-"] {
padding-left: 30px; /* gutter width (give a little extra room) 2x default */
padding-right: 30px; /* gutter width (give a little extra room) 2x default */
}
/* #####################
#####################
slider
################# */
.container {
margin-top: 20px;
width:98%;
}
/* Carousel Styles */
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner img {
width: 100%;
max-height: 460px
}
.carousel-control {
width: 0;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 45%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
left: 0;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
right: 0;
}
.carousel-control.left span,
.carousel-control.right span {
background-color: #000;
}
.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .7;
filter: alpha(opacity=70);
}
.carousel-control.left span {
padding: 0px;}
.carousel-control.right span {
padding: 0px;}
.btn btn-danger btn-xs{padding-top: 40px;}
