API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 24th, 2019
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <style>
  8.  
  9. </style>
  10. <body>
  11. <link href="css/bootstrap.min.css" rel="stylesheet">
  12. <link href="fonts/css/font-awesome.min.css" rel="stylesheet">
  13.  
  14. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  15. <a class="navbar-brand" href="#">Navbar</a>
  16. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  17. <span class="navbar-toggler-icon"></span>
  18. </button>
  19.  
  20. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  21. <ul class="navbar-nav mr-auto">
  22. <li class="nav-item active">
  23. <a class="nav-link" href="#"><i class="fa fa-home"></i>Home</a>
  24. </li>
  25. <li class="nav-item">
  26. <a class="nav-link" href="#"><i class="fa fa-book"></i> Posts</a>
  27. </li>
  28.  
  29. <li class="nav-item">
  30. <a class="nav-link" href="#"><i class="fa fa-envelope"></i>Contact</a>
  31. </li>
  32. <li class="nav-item">
  33. <a class="nav-link" href="#"><i class="fa fa-user"></i>About</a>
  34. </li>
  35. </ul>
  36. <form class="form-inline my-2 my-lg-0">
  37. <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  38. </form>
  39. </div>
  40. </nav>
  41. <div class="container mt-3">
  42. <div class="row">
  43. <div class="col-8">
  44. <h3 style="color:dodgerblue">Blog Post</h3>
  45. <p><i class="fa fa-user"></i>by<span style="color:dodgerblue">Finki</span> </p>
  46. <hr>
  47. <p><i class="fa fa-calendar"></i> Posted on August 24,2014 at 9:00 PM</p>
  48. <p><i class="fa fa-tags"></i>Tags:<span class="badge badge-secondary">Bootstrap</span><span class="badge badge-secondary ml-1">Web</span><span class="badge badge-secondary ml-1">CSS</span><span class="badge badge-secondary ml-1">HTML</span></p>
  49. <hr>
  50. <img src="http://placehold.it/700x300">
  51. <hr>
  52. <h4>Ras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</h4>
  53. <br>
  54. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.
  55. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!
  56. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati?
  57. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, aliquam tenetur ratione tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!
  58. </p>
  59. <br>
  60. <p style="font-size: 15px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. </p>
  61. <blockquote class="blockquote" style="border-left:lightgray solid 3px">
  62. <p class="mb-0 ml-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  63. <br>
  64. <footer class="blockquote-footer ml-4">Someone famous in
  65. <cite title="Source Title">Source Title</cite>
  66. </footer>
  67. <br>
  68. </blockquote>
  69. <p>I like the post? Like this!</p>
  70. <button class="mr-2"><i class="fa fa-twitter" style="color:dodgerblue"></i>Tweet</button>
  71. <button><i class="fa fa-google-plus" style="color:red"></i></button><span style="font-size: 10px">Reccomend this on Google</span>
  72. <hr>
  73. <div class="card">
  74. <h4 class="card-header"><i class="fa fa-paper-plane-o"></i>Leave a Comment:</h4>
  75. <div class="card-body">
  76. <form>
  77. <div class="form-group">
  78. <textarea class="form-control" rows="3"></textarea>
  79. </div>
  80. <button class="btn btn-primary"><i class="fa fa-reply">Submit</i></button>
  81. </form>
  82. </div>
  83. </div>
  84. <hr>
  85. <div>
  86. <h4><i class="fa fa-comment"></i>User One says: <span style="font-size: 12px;color: gray">9:41 PM on August 24,2014</span></h4>
  87. <p style="font-size: 12px">Excelent post! THank You the great article was usefull</p>
  88. </div>
  89. <div>
  90. <h4><i class="fa fa-comment"></i>User Two says: <span style="font-size: 12px;color: gray">9:41 PM on August 24,2014</span></h4>
  91. <p style="font-size: 12px">Excelent post! THank You the great article was usefull</p>
  92. </div>
  93. </div>
  94. <div class="col-4">
  95. <div class="card bg-light">
  96. <div class="card-body">
  97. <h5><i class="fa fa-search"></i>Blog Search</h5>
  98. <form>
  99. <div class="input-group">
  100. <input class="form-control" type="text">
  101. <span class="input-group-btn">
  102. <button class="btn btn-secondary"><i class="fa fa-search"></i></button>
  103. </span>
  104. </div>
  105. </form>
  106. </div>
  107. </div>
  108. <div class="card bg-light mt-3">
  109. <div class="card-body">
  110. <h5><i class="fa fa-tags"></i>Popular Tags</h5>
  111. <div class="row">
  112. <div class="col">
  113. <div class="btn-group-vertical">
  114. <span class="badge badge-secondary">Windows 8</span>
  115. <span class="badge badge-secondary mt-1">C#</span>
  116. <span class="badge badge-secondary mt-1">Window Forms</span>
  117. <span class="badge badge-secondary mt-1">WPF</span>
  118. </div>
  119. </div>
  120. <div class="col">
  121. <div class="btn-group-vertical">
  122. <span class="badge badge-secondary">Bootstrap</span>
  123. <span class="badge badge-secondary mt-1">Joomla</span>
  124. <span class="badge badge-secondary mt-1">CMS</span>
  125. <span class="badge badge-secondary mt-1">Java</span>
  126. </div>
  127. </div>
  128. </div>
  129.  
  130. </div>
  131. </div>
  132. <div class="card bg-light mt-3">
  133. <div class="card-body">
  134. <h5><i class="fa fa-thumbs-o-up"></i>Follow me!</h5>
  135. <span class="fa fa-facebook-square fa-2x" style="color: dodgerblue"></span>
  136. <span class="fa fa-twitter-square fa-2x" style="color: dodgerblue"></span>
  137. <span class="fa fa-google-plus-square fa-2x" style="color: dodgerblue"></span>
  138. <span class="fa fa-linkedin-square fa-2x" style="color: dodgerblue"></span>
  139. <span class="fa fa-linkedin-square fa-2x" style="color: dodgerblue"></span>
  140. <span class="fa fa-git-square fa-2x" style="color: dodgerblue"></span>
  141. <span class="fa fa-bitbucket-square fa-2x" style="color: dodgerblue"></span>
  142. </div>
  143. </div>
  144. <div class="card bg-light mt-3">
  145. <div class="card-body">
  146. <h5><i class="fa fa-fire"></i>Popular Posts:</h5>
  147. <ul>
  148. <li style="color:dodgerblue;font-size: 14px"><a href="#">WPF vs Windows Forms- Which is better</a></li>
  149. <li style="color:dodgerblue;font-size: 14px"><a href="#">How to create responsive websites with Bootstrap</a></li>
  150. <li style="color:dodgerblue;font-size: 14px"><a href="#">The best Joomla!templates 2014</a></li>
  151. <li style="color:dodgerblue;font-size: 14px"><a href="#">APS. NET cms list</a></li>
  152. <li style="color:dodgerblue;font-size: 14px"><a href="#">C3 Hello,World! program</a></li>
  153. <li style="color:dodgerblue;font-size: 14px"><a href="#">Java random genereator</a></li>
  154. </ul>
  155. </div>
  156. </div>
  157. <div class="card bg-light mt-3">
  158. <div class="card-body">
  159. <h5><i class="fa fa-book"></i>Featured books:</h5>
  160. <div class="card" style="width: 18rem;">
  161. <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
  162. <div class="card-body text-center bg-dark text-white">
  163. <h5>Book 1</h5>
  164. </div>
  165. </div>
  166. <div class="card" style="width: 18rem;">
  167. <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
  168. <div class="card-body text-center bg-dark text-white">
  169. <h5>Book 2</h5>
  170. </div>
  171. </div>
  172.  
  173. </div>
  174. </div>
  175.  
  176. </div>
  177. </div>
  178. <hr>
  179. <div class="row">
  180. <div class="col mr-1">
  181. <div class="card" style="width: 18rem;height: 200px" >
  182. <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
  183. <div class="card-body text-center bg-dark text-white">
  184. <h5>This is h5</h5>
  185. </div>
  186. </div>
  187. </div>
  188. <div class="col mr-1">
  189. <div class="card" style="width: 18rem;">
  190. <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
  191. <div class="card-body text-center bg-dark text-white">
  192. <h5>This is h5</h5>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="col mr-1">
  197. <h3 class="mt-3">Categories:</h3>
  198. <ul>
  199. <li style="color:dodgerblue;font-size: 14px"><a href="#"><i class="fa fa-file"></i>News</a></li>
  200. <li style="color:dodgerblue;font-size: 14px"><a href="#"><i class="fa fa-android"></i>Android</a></li>
  201. <li style="color:dodgerblue;font-size: 14px"><a href="#"><i class="fa fa-code"></i>C#</a></li>
  202. <li style="color:dodgerblue;font-size: 14px"><a href="#"><i class="fa fa-code"></i>Java</a></li>
  203. <li style="color:dodgerblue;font-size: 14px"><a href="#"><i class="fa fa-book"></i>Books</a></li>
  204. <li style="color:dodgerblue;font-size: 14px"><a href="#"><i class="fa fa-globe"></i> Web</a></li>
  205. <li style="color:dodgerblue;font-size: 14px"><a href="#"><i class="fa fa-windows"></i>Windows </a></li>
  206. </ul>
  207. </div>
  208. <div class="col mr-1">
  209. <h3>Contact:</h3>
  210. <p>Have a question or feeedback? COntact me!</p>
  211. <p style="color:dodgerblue"><i class="fa fa-envelope" style="color:dodgerblue">Contact</i></p>
  212. <br>
  213. <h3>Follow:</h3>
  214. <span class="fa fa-twitter-square" style="color:dodgerblue"> Twitter</span>
  215. <span class="fa fa-github-square " style="color:dodgerblue;"> GitHub</span>
  216. </div>
  217. </div>
  218. <br>
  219. <button class="mr-2"><i class="fa fa-twitter" style="color:dodgerblue"></i>Tweet</button>
  220. <button><i class="fa fa-google-plus" style="color:red"></i></button><span style="font-size: 10px">Reccomend this on Google</span>
  221. <hr>
  222. </div>
  223. <footer class="text-center">
  224. <p>CopyRight &copy; YourWebsite | <a href="#" style="color: dodgerblue">Privacy Policy</a> | <a href="#" style="color: dodgerblue">Terms of Use</a></p>
  225. </footer>
  226. <script src="js/jquery-3.2.1.slim.min.js"></script>
  227. <script src="js/bootstrap.bundle.min.js"></script>
  228.  
  229. </body>
  230. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!