<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bg">
<div class="col-md-10">
<img width="50" src="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/v/t1.0-9/1010549_378823185552943_1788436797_n.png?oh=22ba084d3525bcd1c26137da36882340&oe=54498BFE" />
<span class="brand">Dynasofts</span>
</div>
<div class="col-md-2 pull-right">
<i class="social fa fa-facebook fa-2x" style="
color: rgb(100, 100, 246);
"></i>
<i class="social fa fa-google-plus fa-2x" style="
color: rgb(252, 49, 49);
"></i>
<i class="social fa fa-twitter fa-2x" style="
color: rgb(47, 188, 255);
"></i>
</div>
</div>
<br>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">Dynasofts</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">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Services</a></li>
<li><a href="#">Designing</a></li>
<li class="divider"></li>
<li><a href="#">Branding</a></li>
<li class="divider"></li>
<li><a href="#">R & D</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Contact Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Google plus</a></li>
<li class="divider"></li>
<li><a href="#">Tweet</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-bottom:10px;-webkit-box-shadow: -3px 10px 22px -7px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 10px 22px -7px rgba(0,0,0,0.75);
box-shadow: -3px 10px 22px -7px rgba(0,0,0,0.75);">
<!-- 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://cdn.qiibo.com/wp-content/uploads/2013/03/galaxy-wallpaper-background-40801-hd-wallpapers-2.jpg" width="100%" height="200px" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://www.cyclesoles.com/wp-content/uploads/2013/10/hd-wallpapers-mountain-bike-desktop-biking-wallpaper-tricks-1920x1080-wallpaper-1000x400.jpg" width="100%" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://www.cyclesoles.com/wp-content/uploads/2013/10/bicycle-hd-for-and-85908-1000x400.jpg" width="100%" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="col-md-8">
<section>
<blockquote style="border-left: 5px solid #CA5252;">
<header><h3 class="title">Learn HTML5</h3></header>
<img src="http://lorempixel.com/output/fashion-q-c-100-100-9.jpg" class="img_item img-circle"/>
<p>Famous Web design scripting language learning made easy grap the tutorial today!</p>
<footer align="right"><i> ~ishwar katwe 05-Aug-2014</i></footer>
</blockquote>
<blockquote style="border-left: 5px solid #CA5252;">
<header><h3 class="title">Learn HTML5</h3></header>
<img src="http://lorempixel.com/output/fashion-q-c-100-100-9.jpg" class="img_item img-circle"/>
<p>Famous Web design scripting language learning made easy grap the tutorial today!</p>
<footer align="right"><i> ~ishwar katwe 05-Aug-2014</i></footer>
</blockquote>
<br>
<blockquote style="border-left: 5px solid #CA5252;">
<header><h3 class="title">Learn Android</h3></header>
<img src="http://lorempixel.com/output/people-q-c-100-100-2.jpg" class="img_item img-circle"/>
<p>Famous Web design scripting language</p>
<footer align="right"><i> ~ishwar katwe 05-Aug-2014</i></footer>
</blockquote>
<br>
<blockquote style="border-left: 5px solid #CA5252;">
<header><h3 class="title">Learn PHP Scripting</h3></header>
<img src="http://lorempixel.com/output/people-q-c-100-100-10.jpg" class="img_item img-circle"/>
<p>Famous Web design scripting language</p>
<footer align="right"><i> ~ishwar katwe 05-Aug-2014</i></footer>
</blockquote>
</section>
</div>
<div class="col-md-4">
<aside>
<blockquote style="border-left: 5px solid #CA5252;">
<h3 class="title">Recent News</h3>
<ul class="list-group">
<li class="list-group-item">Hello its Friday</li>
<li class="list-group-item">Awsome Designing stuff using bootstrap</li>
<li class="list-group-item">HTML5</li>
<li class="list-group-item">CSS3</li>
<li class="list-group-item">PHP</li>
</ul>
</blockquote>
</aside>
</div>
<footer align="center" class="col-md-12" style="
border-top: 2px brown solid;
margin: 5px;
">
<i style="
color: #FFF;
">All Right Received © 2014</i>
</footer>
</div>
*{
margin:0px;
padding:0px;
}
.navbar-default {
background-color: #FFFFFF;
border-bottom-color: #BB0000;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
color: #FFF;
background-color: #8A8A8A;
}
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #CCC;
color: #FFF;
}
a {
color: #FFFFFF;
text-decoration: none;
}
.img_item
{
width:80px;
height:80px;
float:left;
}
.title{
margin-top: 3px;
margin-bottom: 3px;
font-family: fantasy;
color: brown;
}
element.style {
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #EBEBEB;
border: 1px solid #DADADA;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
opacity: 0.9;
}
.social{
margin:10px;
}
.brand{
font-family: fantasy;
font-size: 37px;
}
body{
background-image:url(http://subtlepatterns.com/patterns/restaurant_icons.png);
}
.header {
background-color: rgba(39, 39, 39, 0.8);
padding: 5px;
opacity: 1;
margin-bottom: 10px;
border-radius: 6px 6px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(165, 42, 42, 0.36);
}
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4%;
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
filter: alpha(opacity=50);
opacity: 1.1;
}
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
display: block;
width: 100% \9;
max-width: 100%;
height: 340px;
}
