<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand mylogo" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-edit"></i> Answer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-bell"></i> Notifications</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 col-md-5">
<input class="myform-control mr-sm-2" type="search" placeholder="Search Quora" aria-label="Search">
<button class="btn btn-light"><i class="fa fa-search"></i></button>
</form>
<ul class="navbar-nav ml-auto">
<li>
<a href="#" id="add-question" class="btn mybtn btn-success">Add Question</a>
</li>
<li class="avatar-profile d-none d-sm-block ">
<a href="#" ><img src="https://a11.t26.net/taringa/avatares/9/1/2/F/7/8/Demon_King1/48x48_5C5.jpg" class="img-responsive" /></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div class=" aff-right">
<div class="ui-block">
<h6 class="my-4">Feeds</h6>
<hr>
<div class="nav flex-column nav-pills nav-stacked" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" data-toggle="pill" href="#"> Top Stories</a>
<a class="nav-link" data-toggle="pill" href="#" >New Questions</a>
<a class="nav-link" data-toggle="pill" href="#">Bookmarked Answers</a>
<a class="nav-link" data-toggle="pill" href="#">Links</a>
<a class="nav-link" data-toggle="pill" href="#">Payment Gateways</a>
<a class="nav-link" data-toggle="pill" href="#" >Education</a>
<a class="nav-link" data-toggle="pill" href="#">E-commerce</a>
<a class="nav-link" data-toggle="pill" href="#">Android Applications</a>
</div>
</div>
</div>
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-7">
<div class="ui-block">
<article class="hentry post">
<div class="m-link">
<a href="#" target="_blank">
<h4>Why should I follow you, in five sentences?</h4>
</a>
</div>
<div class="post__author author vcard inline-items">
<img src="https://a11.t26.net/taringa/avatares/9/1/2/F/7/8/Demon_King1/48x48_5C5.jpg" alt="author">
<div class="author-date">
<a class="h6 post__author-name fn" href="#">Dipendra Singh</a>
<div class="post__date">
<time class="published" datetime="2004-07-24T18:18">
Answered 2h ago
</time>
</div>
</div>
<div class="more">
<a href="#">
<i class="fa fa-ellipsis-v"></i>
</a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris consequat.
</p>
<div class="post-additional-info inline-items">
<p>
<a href="#" class="btn btn-sm btn-light"><span class="fa fa-pencil"></span> Answer</a>
<a href="#" class="btn btn-sm btn-light"> Pass</a>
</p>
<p class="social-icons">
<a href="#" class="btn btn-sm btn-light"><i class="fa fa-facebook"></i></a>
<a href="#" class="btn btn-sm btn-light"> <i class="fa fa-twitter"></i></a>
<a href="#" class="btn btn-sm btn-light"> <i class="fa fa-share"></i></a>
</p>
</div>
</article>
</div>
<div class="ui-block">
<article class="hentry post">
<div class="card mt-4">
<div class="card-body">
<h5 class="card-title">How many people use Quora?</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta fugit fugiat hic aliquam itaque facere, soluta. Totam id dolores, sint aperiam sequi pariatur praesentium animi perspiciatis molestias iure, ducimus!</p>
<span class="text-warning">★ ★ ★ ★ ☆</span>
4.0 stars
</div>
</div>
<!-- /.card -->
<div class="card card-outline-secondary my-4">
<div class="card-header">
Reviews
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.</p>
<small class="text-muted">Posted by Anonymous on 3/1/17</small>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.</p>
<small class="text-muted">Posted by Anonymous on 3/1/17</small>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.</p>
<small class="text-muted">Posted by Anonymous on 3/1/17</small>
<hr>
<a href="#" class="btn btn-success">Leave a Review</a>
</div>
</div>
<!-- /.card -->
</article>
</div>
</div>
<!-- /.col-lg-6 -->
<!--col-lg-3-->
<div class="col-lg-3">
<div class=" q-wid">
<div class="ui-block">
<h6 class="my-4">Improve Your Feed</h6>
<hr>
<div class="nav flex-column nav-pills nav-stacked" id="v-pills-tab" aria-orientation="vertical">
<a class="nav-link" data-toggle="pill" href="#" > Upvote 5 more good answers</a>
<a class="nav-link" data-toggle="pill" href="#" >Ask your first question</a>
<a class="nav-link" data-toggle="pill" href="#" >Add 3 credentials</a>
<a class="nav-link" data-toggle="pill" href="#">Answer a question</a>
</div>
</div>
</div>
</div>
<!-- /.col-lg-3 -->
</div>
</div>
<!-- /.container -->
<!-- The Modal -->
<div class="modal fade" id="addModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="well">
<h4>Why should I follow you, in five sentences?</h4>
How to quickly get a good answer:
<ul>
<li>Keep your question short and to the point
<li>Check for grammar or spelling errors
<li>Phrase it like a question</li>
</ul>
</div>
<div class="post__author author vcard inline-items">
<img src="https://a11.t26.net/taringa/avatares/9/1/2/F/7/8/Demon_King1/48x48_5C5.jpg" alt="author">
<div class="author-date">
<a class="h6 post__author-name fn" href="#">Dipendra Singh</a>
<div class="post__date">
<time class="published" datetime="2004-07-24T18:18">
Answered 2h ago
</time>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger">Add Question</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 90px ;
/* background: #edf2f6 !important; */
background:#fff !important;
}
.mylogo{
height:50px;
width:80px;
background-size: 80px 23px;
background-image: url('https://qsf.fs.quoracdn.net/-3-images.logo.wordmark_default.svg-26-bfa6b94bc0d6af2e.svg');
background-repeat: no-repeat;
background-position: center center;
}
.navbar-expand-lg{
border-bottom: 1px solid #ccc;
background:#fff !important;
}
.container-fluid{
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
.container-custom{
position:relative;
width:75%;
margin:0px auto;
}
.ui-block {
background-color: #fff;
border-radius: 5px;
border: 1px solid #e6ecf5;
margin-bottom: 15px;
}
.post {
position: relative;
padding: 25px;
border-bottom: 1px solid #e6ecf5;
}
.card{
border:none !important;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0 !important;
}
.post__author {
margin-bottom: 20px;
}
.post__author img {
width: 40px;
height: 40px;
border-radius: 100%;
overflow: hidden;
margin-right: 12px;
}
.avatar-profile img {
width: 35px;
height: 34px;
border-radius: 100%;
overflow: hidden;
margin-left: 12px;
}
.inline-items > * {
display: inline-block;
vertical-align: middle;
}
.post .author-date a {
font-weight: 700;
}
.post__author .more {
float: right;
font-size: 16px;
margin-right: 20px;
}
.more a {
color: #777;
}
button.btn.btn-light {
position: absolute;
background: transparent;
border:none;
height: 38px;
}
.myform-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
text-indent: 22px;
}
.mybtn{
background: #b92b27 !important;
border-color: #b92b27 !important;
}
placeholder{
text-indent:102;
}
ul {
list-style: none;
display:inline;
}
.post-additional-info {
padding: 20px 0 0;
border-top: 1px solid #e6ecf5;
}
.post-additional-info > * {
margin-right: 15px;
}
.left-ul li {
display: inline-block;
}
.m-link a {
color: #333;
}
.m-link a:hover {
color: #333;
}
.m-link h4 {
font-weight: bold;
}
.social-icons{
float:right;
}
h6.my-4 {
margin: 13px;
}
div#v-pills-tab a {
border-radius: 0;
color: #666;
font-size: 13px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff !important;
background-color: #b92b27 !important;
}
.nav-pills .nav-link:hover{
background:#edf2f6;
}
.btn-light{
border-color: #dae0e5 !important;
}
@media only screen and (min-width: 1200px) {
.container {
max-width: 1201px !important;
}
}
@media screen and (max-width: 559px){
.container-custom{
width:90%;
}
ul.myul li {
vertical-align: middle;
float: left;
}
}
$(document).on("click", "#add-question", function(){
$("#addModal").modal("show");
});
