API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 23rd, 2020
135
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.34 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <body id="page-top">
  3.  
  4. <div class="jumbotron">
  5. <h1 class="display-4">Hello, world!</h1>
  6. <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  7. <hr class="my-4">
  8. <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  9. <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  10. </div>
  11. <br>
  12. <div class="container">
  13. <div class="row">
  14. <div class="col-lg-12 text-center">
  15. <h2 class="section-heading text-uppercase">Services</h2>
  16. <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
  17. </div>
  18. </div>
  19. <div class="row text-center">
  20. <div class="col-md-4">
  21. <span class="fa-stack fa-4x">
  22. <i class="fas fa-circle fa-stack-2x text-primary"></i>
  23. <i class="fas fa-shopping-cart fa-stack-1x fa-inverse"></i>
  24. </span>
  25. <h4 class="service-heading">E-Commerce</h4>
  26. <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
  27. </div>
  28. <div class="col-md-4">
  29. <span class="fa-stack fa-4x">
  30. <i class="fas fa-circle fa-stack-2x text-primary"></i>
  31. <i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
  32. </span>
  33. <h4 class="service-heading">Responsive Design</h4>
  34. <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
  35. </div>
  36. <div class="col-md-4">
  37. <span class="fa-stack fa-4x">
  38. <i class="fas fa-circle fa-stack-2x text-primary"></i>
  39. <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
  40. </span>
  41. <h4 class="service-heading">Web Security</h4>
  42. <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
  43. </div>
  44. </div>
  45. </div>
  46.  
  47. <section id="about">
  48. <div class="container">
  49. <div class="row">
  50. <div class="col-lg-12 text-center">
  51. <h2 class="section-heading text-uppercase">About</h2>
  52. <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
  53. </div>
  54. <div class="col-lg-12">
  55. <p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
  56. <ul>
  57. <li>Clickable nav links that smooth scroll to page sections</li>
  58. <li>Responsive behavior when clicking nav links perfect for a one page website</li>
  59. <li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
  60. <li>Minimal custom CSS so you are free to explore your own unique design options</li>
  61. </ul>
  62. </div>
  63. </div>
  64. </div>
  65. </section>
  66.  
  67. <div class="container">
  68. <div class="row">
  69. <div class="col-lg-12 text-center">
  70. <h2 class="section-heading text-uppercase">About</h2>
  71. <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
  72. </div>
  73. </div>
  74. <div class="row">
  75. <div class="col-lg-12">
  76. <ul class="timeline">
  77. <li>
  78. <div class="timeline-image">
  79. <img class="rounded-circle img-fluid" src="img/about/1.jpg" alt="">
  80. </div>
  81. <div class="timeline-panel">
  82. <div class="timeline-heading">
  83. <h4>2009-2011</h4>
  84. <h4 class="subheading">Our Humble Beginnings</h4>
  85. </div>
  86. <div class="timeline-body">
  87. <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
  88. </div>
  89. </div>
  90. </li>
  91. <li class="timeline-inverted">
  92. <div class="timeline-image">
  93. <img class="rounded-circle img-fluid" src="img/about/2.jpg" alt="">
  94. </div>
  95. <div class="timeline-panel">
  96. <div class="timeline-heading">
  97. <h4>March 2011</h4>
  98. <h4 class="subheading">An Agency is Born</h4>
  99. </div>
  100. <div class="timeline-body">
  101. <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
  102. </div>
  103. </div>
  104. </li>
  105. <li>
  106. <div class="timeline-image">
  107. <img class="rounded-circle img-fluid" src="img/about/3.jpg" alt="">
  108. </div>
  109. <div class="timeline-panel">
  110. <div class="timeline-heading">
  111. <h4>December 2012</h4>
  112. <h4 class="subheading">Transition to Full Service</h4>
  113. </div>
  114. <div class="timeline-body">
  115. <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
  116. </div>
  117. </div>
  118. </li>
  119. <li class="timeline-inverted">
  120. <div class="timeline-image">
  121. <img class="rounded-circle img-fluid" src="img/about/4.jpg" alt="">
  122. </div>
  123. <div class="timeline-panel">
  124. <div class="timeline-heading">
  125. <h4>July 2014</h4>
  126. <h4 class="subheading">Phase Two Expansion</h4>
  127. </div>
  128. <div class="timeline-body">
  129. <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
  130. </div>
  131. </div>
  132. </li>
  133. <li class="timeline-inverted">
  134. <div class="timeline-image">
  135. <h4>Be Part
  136. <br>Of Our
  137. <br>Story!</h4>
  138. </div>
  139. </li>
  140. </ul>
  141. </div>
  142. </div>
  143. </div>
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!