API tools faq
paste
Advertisement
Guest User

bootstrap

a guest
Apr 25th, 2019
154
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>bootstrap</title>
  9. <!-- bootstrap include -->
  10. <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  11.  
  12. <!-- style css include -->
  13. <link rel="stylesheet" href="style.css">
  14. <!-- bootsrap js -->
  15. <script src="assets/js/all.js"></script>
  16. <script src="assets/js/bootstrap.min.js"></script>
  17.  
  18.  
  19. </head>
  20.  
  21. <body>
  22.  
  23. <!--slider section start-->
  24. <section class="slider bg-primary">
  25. <div class="container">
  26.  
  27. <div class="row">
  28.  
  29. <div class="col mx-auto text-center">
  30. <div id="example" class="carousel slide" data-ride='carousel'>
  31. <!-- carousel indicators-->
  32. <ul class="carousel-indicators">
  33. <li data-target="#example" data-slide-to="0" class="active"></li>
  34. <li data-target="#example" data-slide-to="1"></li>
  35. <li data-target="#example" data-slide-to="2"></li>
  36. <li data-target="#example" data-slide-to="3"></li>
  37. </ul>
  38. <!-- end of carousel indicators-->
  39. <!-- slider images-->
  40. <div class="carousel-inner">
  41. <div class="carousel-item"><img src="assets/img/t1.jpg" alt="" class="d-block w-100"></div>
  42. <div class="carousel-item"><img src="assets/img/t1.jpg" alt="" class="d-block w-100"></div>
  43. <div class="carousel-item"><img src="assets/img/t1.jpg" alt="" class="d-block w-100"></div>
  44. <div class="carousel-item"><img src="assets/img/t1.jpg" alt="" class="d-block w-100"></div>
  45. </div>
  46. <!-- end of slider images-->
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </section>
  52. <!-- skill section start -->
  53. <section class="skills">
  54. <div class="container-fluid">
  55. <div class="row text-center py-5">
  56. <div class="col text-center">
  57. <!-- title -->
  58. <h1 class="display-4 text-dark mb-0">SKILLS</h1>
  59. <div class="title-underline bg-danger text-center"> </div>
  60. </div>
  61. </div>
  62. <div class="row text-center">
  63. <!-- single skilll box -->
  64. <div class="col-sm-12, col-md-6 col-lg-4 table-bordered p-5">
  65. <i class="fab fa-node-js fa-5x text-danger"></i>
  66. <h3 class="text-success">Node js</h3>
  67. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi at ratione tenetur ut voluptatibus reiciendis et veritatis, quibusdam eveniet doloribus error enim! Delectus, animi molestias. Hic eum modi voluptas.</p>
  68. <a class="text-uppercase btn btn-outline-danger btn-block" href="">Press here</a>
  69. </div>
  70. <!-- End single skill box -->
  71. <!-- single skilll box -->
  72. <div class="col-sm-12, col-md-6 col-lg-4 table-bordered p-5 pl-0">
  73. <i class="fab fa-node-js fa-5x text-danger"></i>
  74. <h3 class="text-success">Node js</h3>
  75. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi at ratione tenetur ut voluptatibus reiciendis et veritatis, quibusdam eveniet doloribus error enim! Delectus, animi molestias. Hic eum modi voluptas.</p>
  76. <a class="text-uppercase btn btn-outline-danger btn-block" href="">Press here</a>
  77. </div>
  78. <!-- End single skill box -->
  79. <!-- single skilll box -->
  80. <div class="col-sm-12, col-md-6 col-lg-4 table-bordered p-5">
  81. <i class="fab fa-node-js fa-5x text-danger"></i>
  82. <h3 class="text-success">Node js</h3>
  83. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi at ratione tenetur ut voluptatibus reiciendis et veritatis, quibusdam eveniet doloribus error enim! Delectus, animi molestias. Hic eum modi voluptas.</p>
  84. <a class="text-uppercase btn btn-outline-danger btn-block" href="">Press here</a>
  85. </div>
  86. <!-- End single skill box -->
  87. </div>
  88. </div>
  89. </section>
  90. <!-- skill section end -->
  91. <!-- about section -->
  92. <section class="about bg-info">
  93. <div class="container-fluid">
  94.  
  95. <div class="row">
  96. <!-- about image col -->
  97. <div class="col-md-6 about-pic height-80">
  98.  
  99. </div>
  100. <!-- about text col -->
  101. <div class="col-md-6 about-text height-80">
  102. <div class="about-text-center text-center">
  103. <h1 class="display-4 text-uppercase text-dark mb-0">About</h1>
  104. <div class="title-underline bg-warning text-center"> </div>
  105. <p class="text-capitalize mt-3 text-muted">Lorem ipsum dolor sit amet</p>
  106. </div>
  107. <!-- end of title -->
  108. <!-- single check box -->
  109. <div class="check-box-item d-flex">
  110. <i class="fas fa-check p-2 fa-3x bg-warning mr-3 align-self-center"></i>
  111. <p class="text-light lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo reiciendis animi eligendi asperiores </p>
  112. </div>
  113. <!-- end single check box -->
  114. <!-- single check box -->
  115. <div class="check-box-item d-flex">
  116. <i class="fas fa-check p-2 fa-3x bg-warning mr-3 align-self-center"></i>
  117. <p class="text-light lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo reiciendis animi eligendi asperiores </p>
  118. </div>
  119. <!-- end single check box -->
  120. <!-- single check box -->
  121. <div class="check-box-item d-flex">
  122. <i class="fas fa-check p-2 fa-3x bg-warning mr-3 align-self-center"></i>
  123. <p class="text-light lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo reiciendis animi eligendi asperiores</p>
  124. </div>
  125. <!-- end single check box -->
  126. <!-- single check box -->
  127. <div class="check-box-item d-flex">
  128. <i class="fas fa-check p-2 fa-3x bg-warning mr-3 align-self-center"></i>
  129. <p class="text-light lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo reiciendis animi eligendi asperiores .</p>
  130. </div>
  131. <!-- end single check box -->
  132. </div>
  133. </div>
  134. </div>
  135. </section>
  136. <!-- end about section -->
  137. <!-- start project section -->
  138. <section class="project bg-secondary py-5">
  139. <div class="container">
  140. <div class="row">
  141. <div class="col text-center">
  142. <h1 class="display-4 text-uppercase mb-0">
  143. <strong>Project</strong>
  144. </h1>
  145. <div class="title-underline bg-danger text-center"> </div>
  146. </div>
  147. </div>
  148. <div class="row mt-5">
  149. <!-- single image-->
  150. <div class="col-sm-6 col-md-4">
  151. <img src="assets/img/alex-blajan-113889-unsplash.jpg" class="img-fluid bg-danger border border-danger" alt="">
  152. </div>
  153. <!-- end single image-->
  154. <!-- single image-->
  155. <div class="col-sm-6 col-md-4">
  156. <img src="assets/img/arisa-chattasa-500794-unsplash.jpg" class="img-fluid border border-danger" alt="">
  157. </div>
  158. <!-- end single image-->
  159. <!-- single image-->
  160. <div class="col-sm-6 col-md-4">
  161. <img src="assets/img/daniel-von-appen-266179-unsplash.jpg" class="img-fluid border border-danger" alt="">
  162. </div>
  163. <!-- end single image-->
  164. <!-- single image-->
  165. <div class="col-sm-6 col-md-4 mt-5">
  166. <img src="assets/img/gift-habeshaw-652729-unsplash.jpg" class="img-fluid border border-danger" alt="">
  167. </div>
  168. </div>
  169. </div>
  170. </section>
  171. <!--end project section-->
  172.  
  173. <!--Team section started-->
  174. <section class="team bg-light py-5">
  175. <div class="container">
  176. <div class="row">
  177. <!-- start of title-->
  178. <div class="col text-center">
  179. <h1 class="display-4 text-uppercase mb-0">
  180. <strong>Team</strong>
  181. </h1>
  182. <div class="title-underline bg-warning text-center"> </div>
  183. </div>
  184. <!-- end of title-->
  185. </div>
  186. <div class="row ">
  187. <!-- single team member-->
  188. <div class="col-md-6 col-lg-4 mt-5">
  189. <div class="card text-center">
  190. <img src="assets/img/t1.jpg" alt="member" class="card-img-top">
  191. <div class="card-body">
  192. <h5 class="card-title text-capitalize">Team Member</h5>
  193. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse eum id maiores officia? Asperiores assumenda molestias non provident ratione?</p>
  194. <a href="" class="btn btn-outline-warning text-uppercase">Press here</a>
  195.  
  196. </div>
  197. <div class="card-footer bg-secondary d-flex justify-content-around ">
  198. <a href="" class="text-light rounded-circle"><i class="fab fa-facebook fa-2x"></i></a>
  199. <a href="" class="text-light rounded-circle"><i class="fab fa-linkedin fa-2x"></i></a>
  200. <a href="" class="text-light rounded-circle"><i class="fab fa-twitter fa-2x"></i></a>
  201. <a href="" class="text-light rounded-circle"><i class="fab fa-instagram fa-2x"></i></a>
  202. </div>
  203. </div>
  204. </div>
  205. <!-- end single member-->
  206. <!-- single team member-->
  207. <div class="col-md-6 col-lg-4 mt-5">
  208. <div class="card text-center">
  209. <img src="assets/img/t2.jpg" alt="member" class="card-img-top">
  210. <div class="card-body">
  211. <h5 class="card-title text-capitalize">Team Member</h5>
  212. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse eum id maiores officia? Asperiores assumenda molestias non provident ratione?</p>
  213. <a href="" class="btn btn-outline-warning text-uppercase">Press here</a>
  214.  
  215. </div>
  216. <div class="card-footer bg-secondary d-flex justify-content-around ">
  217. <a href="" class="text-light rounded-circle"><i class="fab fa-facebook fa-2x"></i></a>
  218. <a href="" class="text-light rounded-circle"><i class="fab fa-linkedin fa-2x"></i></a>
  219. <a href="" class="text-light rounded-circle"><i class="fab fa-twitter fa-2x"></i></a>
  220. <a href="" class="text-light rounded-circle"><i class="fab fa-instagram fa-2x"></i></a>
  221. </div>
  222. </div>
  223. </div>
  224. <!-- end single member-->
  225. <!-- single team member-->
  226. <div class="col-md-6 col-lg-4 mt-5">
  227. <div class="card text-center">
  228. <img src="assets/img/t2.jpg" alt="member" class="card-img-top">
  229. <div class="card-body">
  230. <h5 class="card-title text-capitalize">Team Member</h5>
  231. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse eum id maiores officia? Asperiores assumenda molestias non provident ratione?</p>
  232. <a href="" class="btn btn-outline-warning text-uppercase">Press here</a>
  233.  
  234. </div>
  235. <div class="card-footer bg-secondary d-flex justify-content-around ">
  236. <a href="" class="text-light rounded-circle"><i class="fab fa-facebook fa-2x"></i></a>
  237. <a href="" class="text-light rounded-circle"><i class="fab fa-linkedin fa-2x"></i></a>
  238. <a href="" class="text-light rounded-circle"><i class="fab fa-twitter fa-2x"></i></a>
  239. <a href="" class="text-light rounded-circle"><i class="fab fa-instagram fa-2x"></i></a>
  240. </div>
  241. </div>
  242. </div>
  243. <!-- end single member-->
  244. <!-- single team member-->
  245. <div class="col-md-6 col-lg-4 mt-5">
  246. <div class="card text-center">
  247. <img src="assets/img/t3.jpg" alt="member" class="card-img-top">
  248. <div class="card-body">
  249. <h5 class="card-title text-capitalize">Team Member</h5>
  250. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse eum id maiores officia? Asperiores assumenda molestias non provident ratione?</p>
  251. <a href="" class="btn btn-outline-warning text-uppercase">Press here</a>
  252.  
  253. </div>
  254. <div class="card-footer bg-secondary d-flex justify-content-around ">
  255. <a href="" class="text-light rounded-circle"><i class="fab fa-facebook fa-2x"></i></a>
  256. <a href="" class="text-light rounded-circle"><i class="fab fa-linkedin fa-2x"></i></a>
  257. <a href="" class="text-light rounded-circle"><i class="fab fa-twitter fa-2x"></i></a>
  258. <a href="" class="text-light rounded-circle"><i class="fab fa-instagram fa-2x"></i></a>
  259. </div>
  260. </div>
  261. </div>
  262. <!-- end single member-->
  263. <!-- single team member-->
  264. <div class="col-md-6 col-lg-4 mt-5">
  265. <div class="card text-center">
  266. <img src="assets/img/t2.jpg" alt="member" class="card-img-top">
  267. <div class="card-body">
  268. <h5 class="card-title text-capitalize">Team Member</h5>
  269. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse eum id maiores officia? Asperiores assumenda molestias non provident ratione?</p>
  270. <a href="" class="btn btn-outline-warning text-uppercase">Press here</a>
  271.  
  272. </div>
  273. <div class="card-footer bg-secondary d-flex justify-content-around ">
  274. <a href="" class="text-light rounded-circle"><i class="fab fa-facebook fa-2x"></i></a>
  275. <a href="" class="text-light rounded-circle"><i class="fab fa-linkedin fa-2x"></i></a>
  276. <a href="" class="text-light rounded-circle"><i class="fab fa-twitter fa-2x"></i></a>
  277. <a href="" class="text-light rounded-circle"><i class="fab fa-instagram fa-2x"></i></a>
  278. </div>
  279. </div>
  280. </div>
  281. <!-- end single member-->
  282. <!-- single team member-->
  283. <div class="col-md-6 col-lg-4 mt-5">
  284. <div class="card text-center">
  285. <img src="assets/img/t3.jpg" alt="member" class="card-img-top">
  286. <div class="card-body">
  287. <h5 class="card-title text-capitalize">Team Member</h5>
  288. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse eum id maiores officia? Asperiores assumenda molestias non provident ratione?</p>
  289. <a href="" class="btn btn-outline-warning text-uppercase">Press here</a>
  290.  
  291. </div>
  292. <div class="card-footer bg-secondary d-flex justify-content-around ">
  293. <a href="" class="text-light rounded-circle"><i class="fab fa-facebook fa-2x"></i></a>
  294. <a href="" class="text-light rounded-circle"><i class="fab fa-linkedin fa-2x"></i></a>
  295. <a href="" class="text-light rounded-circle"><i class="fab fa-twitter fa-2x"></i></a>
  296. <a href="" class="text-light rounded-circle"><i class="fab fa-instagram fa-2x"></i></a>
  297. </div>
  298. </div>
  299. </div>
  300. <!-- end single member-->
  301. </div>
  302. </div>
  303. </section>
  304. <!--End team section-->
  305. <!-- jquery include -->
  306. <script src="assets/js/jquery-3.3.1.slim.min.js"></script>
  307. <script src="assets/js/popper.min.js"></script>
  308. </body>
  309.  
  310.  
  311. </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!