Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
342 lines (307 sloc) 18.6 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Sticky Example - GyanBlog.com</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main>
<section>
<div class="container pt-lg-md mb-2">
<div class="row no-gutters">
<div class="col-lg-12 jumbotron mb-0">
</div>
</div>
</div>
</section>
<section class="bg-white p-4 mb-4">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row row-grid align-items-center mb-4">
<div class="col-lg-6">
<img src="http://via.placeholder.com/520x250" class="img-fluid rounded shadow">
</div>
<div class="col-lg-6 text-center">
<h3 class="h3">Experience quality</h3>
<p class="lead mt-4">Purpose is a professional Bootstrap theme which includes over 150 ready to use layouts. From business and corporate to real estate, education, health and much more. It comes with three complete shop layouts.</p>
</div>
</div>
<div class="row row-grid align-items-center mb-4">
<div class="col-lg-6">
<img src="http://via.placeholder.com/520x250" class="img-fluid rounded shadow">
</div>
<div class="col-lg-6 text-center">
<h3 class="h3">Experience quality</h3>
<p class="lead mt-4">Purpose is a professional Bootstrap theme which includes over 150 ready to use layouts. From business and corporate to real estate, education, health and much more. It comes with three complete shop layouts.</p>
</div>
</div>
<div class="row row-grid align-items-center mb-4">
<div class="col-lg-6">
<img src="http://via.placeholder.com/520x250" class="img-fluid rounded shadow">
</div>
<div class="col-lg-6 text-center">
<h3 class="h3">Experience quality</h3>
<p class="lead mt-4">Purpose is a professional Bootstrap theme which includes over 150 ready to use layouts. From business and corporate to real estate, education, health and much more. It comes with three complete shop layouts.</p>
</div>
</div>
<div class="row row-grid align-items-center mb-4">
<div class="col-lg-6">
<img src="http://via.placeholder.com/520x250" class="img-fluid rounded shadow">
</div>
<div class="col-lg-6 text-center">
<h3 class="h3">Experience quality</h3>
<p class="lead mt-4">Purpose is a professional Bootstrap theme which includes over 150 ready to use layouts. From business and corporate to real estate, education, health and much more. It comes with three complete shop layouts.</p>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<img src="http://via.placeholder.com/820x350" class="img-fluid">
</div>
<div class="col-12">
<div class="card border-0">
<div class="card-body">
<h1 class="text-center">Laptop broke and it felt the end of life</h1>
<hr>
<div class="row">
<div class="col-2">
<img src="http://via.placeholder.com/320x250" class="img-fluid rounded-circle">
</div>
<div class="col-10">
<h5><a href="#">Gorav Singal</a></h5>
<p class="text-muted text-right m-0"><small>Updated on</small> Fri, 06/08/2018 - 12:00</p>
<p class="lead text-right">In Architecture, Furniture</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<p>My wife always advises others: <em><strong>Never marry a Software Engineer</strong></em>.</p>
<p>I just nod my head always. Well, she always has complaints about my work ethics. I, being a Capricorn, is very disciplined towards my work. Apart from work, I kept on looking other areas like building a new product or startup.</p>
<p>But, when my wife told me, you never gave us your time. I have some complaints!</p>
<p>To be continued...</p>
<hr>
<h5>
<span class="badge badge-info">Thinking designs</span>
<span class="badge badge-info">Walls design</span>
<span class="badge badge-info">Washroom</span>
<span class="badge badge-info">Kitchen window</span>
</h5>
<hr>
<hr>
<hr>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XE0kyn4esS8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<hr>
<div class="card">
<div class="card-body p-1">
<div class="row">
<div class="col-8">
<i class="fa fa-user-circle-o fa-5x" aria-hidden="true"></i>
</div>
<div class="col-10">
<h5><a href="#">Gorav Singal</a></h5>
<p class="text-muted m-0">Software Architect | Aspiring Writer </p>
<p class="text-muted"><small>written on</small>Thu, 06/21/2018 - 17:23</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body p-1">
<h3 class="card-title">Must Read</h3>
<div class="list-group list-group-flush">
<div class="list-group-item px-1"><a href="/articles/21-how-find-furniture-will-suit-your-place" class="text-dark">How To Find The Furniture That Will Suit Your Place?</a></div>
<div class="list-group-item px-1"><a href="/articles/20-how-become-efficient-interior-designer" class="text-dark">How To Become An Efficient Interior Designer?</a></div>
<div class="list-group-item px-1"><a href="/articles/19-going-design-3d-help-5-simple-steps" class="text-dark">Going For Design In 3D With The Help Of 5 Simple Steps</a></div>
<div class="list-group-item px-1"><a href="/articles/17-garden-dream-7-traits-post-modern-gardening" class="text-dark">Garden Of Dream: 7 Traits Of Post Modern Gardening</a></div>
<div class="list-group-item px-1"><a href="/articles/16-comparative-analysis-between-modern-contemporary-and-traditional-furniture" class="text-dark">A Comparative Analysis Between Modern, Contemporary and Traditional Furniture</a></div>
<div class="list-group-item px-1"><a href="/articles/15-design-ideas-make-your-hotel-%E2%80%9C-pleasant-stay%E2%80%9D" class="text-dark">Design Ideas To Make Your Hotel “A Pleasant Stay”</a></div>
</div>
</div>
</div>
<div class="card mb-2 sticky-top" style="top: 100px;">
<div class="card-body p-1">
<h3 class="card-title">Must Read</h3>
<div class="row no-gutters mb-2">
<div class="col-6 pr-2">
<img src="http://via.placeholder.com/200x170" class="img-fluid rounded shadow">
</div>
<div class="col-6">
<p>Experience quality quality</p>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6 pr-2">
<img src="http://via.placeholder.com/200x170" class="img-fluid rounded shadow">
</div>
<div class="col-6">
<p>Experience quality</p>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6 pr-2">
<img src="http://via.placeholder.com/200x170" class="img-fluid rounded shadow">
</div>
<div class="col-6">
<p>Experience quality</p>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6 pr-2">
<img src="http://via.placeholder.com/200x170" class="img-fluid rounded shadow">
</div>
<div class="col-6">
<p>Experience quality</p>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6 pr-2">
<img src="http://via.placeholder.com/200x170" class="img-fluid rounded shadow">
</div>
<div class="col-6">
<p>Experience quality</p>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-6 pr-2">
<img src="http://via.placeholder.com/200x170" class="img-fluid rounded shadow">
</div>
<div class="col-6">
<p>Experience quality</p>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
</section>
</main>
<footer class="page-footer pt-0">
<!--Footer Links-->
<div class="bg-dark">
<div class="container pt-4 pb-4 text-center text-md-left">
<div class="row mt-3 text-white">
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<h6 class="text-uppercase font-weight-bold">
<strong>Products</strong>
</h6>
<hr class="bg-white mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a href="#!" class="text-white">Product 1</a>
</p>
<p>
<a href="#!" class="text-white">Product 2</a>
</p>
<p>
<a href="#!" class="text-white">Product 3</a>
</p>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<h6 class="text-uppercase font-weight-bold">
<strong>Useful links</strong>
</h6>
<hr class="bg-white mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a href="#!" class="text-white">Help</a>
</p>
</div>
<div class="col-md-4 col-lg-3 col-xl-3">
<h6 class="text-uppercase font-weight-bold">
<strong>Contact</strong>
</h6>
<hr class="bg-white mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> My address, India</p>
<p>
<i class="fa fa-envelope mr-3"></i> info@example.com</p>
<p>
<i class="fa fa-phone mr-3"></i> + Hey phone</p>
</div>
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<h6 class="text-uppercase font-weight-bold">
<strong>Folow Us</strong>
</h6>
<hr class="bg-white mb-4 mt-0 d-inline-block mx-auto" style="width: 90px;">
<div class="bg-white pt-4 pb-4">
<a class="btn btn-default" href="http://www.facebook.com/planndesigninfo" target="_blank">
<i class="fa fa-facebook-official fa-2x" style="color:#3b5998;"></i>
</a>
<a class="btn btn-default" href="https://www.youtube.com/channel/UCNNxPxH_zIPxvWy5QMFkruA" target="_blank">
<i class="fa fa-youtube-play fa-2x" style="color:red;"></i>
</a>
<a class="btn btn-default" href="https://plus.google.com/+Planndesign" target="_blank">
<i class="fa fa-google-plus fa-2x" style="color:#dd4b39"></i>
</a>
<a class="btn btn-default" href="http://instagram.com/planndesign/" target="_blank">
<i class="fa fa-instagram fa-2x" style="color:#3f729b"></i>
</a>
<a class="btn btn-default" href="http://www.pinterest.com/planndesign" target="_blank">
<i class="fa fa-pinterest fa-2x" style="color:#CC2127"></i>
</a>
<a class="btn btn-default" href="https://www.linkedin.com/company/3679960" target="_blank">
<i class="fa fa-linkedin-square fa-2x" style="color:#007bb6"></i>
</a>
<a class="btn btn-default" href="https://twitter.com/PlanndesignInfo" target="_blank">
<i class="fa fa-twitter fa-2x" style="color:#55acee"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Footer Links-->
<!--Copyright-->
<div class="footer-copyright py-3 text-center">
© 2018 Copyright:
<a href="https://www.gyanblog.com"> Gyanblog.com </a>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>