API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 15th, 2018
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.88 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Model</title>
  6.  
  7. <link href="Model.css" rel="stylesheet" type="text/css">
  8. <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9.  
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  11. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  12. </head>
  13.  
  14. <body>
  15. <div class="col-md">
  16. <div class="row sticky-top" style="height: 6vh; background-color: #E9E9E9;">
  17. <div class="col-md">
  18. <div id="left">
  19. <img src="pict/images/Logo2_02.png"
  20. alt="Logo"
  21. class="img-fluid"
  22. style="width: 30%;
  23. height: auto;">
  24. </div>
  25. </div>
  26.  
  27. <div class="col-md">
  28. <p id="centre">
  29. G a l l e r y
  30. </p>
  31. </div>
  32.  
  33. <div class="col-md">
  34. <div id="right">
  35. <a href="#">Home</a>
  36. &nbsp; &nbsp; &nbsp; &nbsp;
  37. <a href="http://www.google.com">Gallery</a>
  38. &nbsp; &nbsp; &nbsp; &nbsp;
  39. <a href="http://www.google.com">About</a>
  40. &nbsp; &nbsp; &nbsp; &nbsp;
  41. <a href="http://www.twitter.com">Contact</a>
  42. </div>
  43. </div>
  44. </div>
  45.  
  46. <div class="row" style="background-color: #232323;
  47. background-size: cover;
  48. margin-top: auto;
  49. height: auto;">
  50. <div class="typewriter" style="text-align: center;
  51. width: 100%;
  52. padding-top: 50px;
  53. ">
  54. <h1>Model Photography.</h1>
  55. </div>
  56.  
  57.  
  58. <div id="demo" class="carousel slide" data-ride="carousel" style="text-align: center; padding-top: 40px">
  59.  
  60. <!-- Indicators -->
  61. <ul class="carousel-indicators">
  62. <li data-target="#demo" data-slide-to="0" class="active"></li>
  63. <li data-target="#demo" data-slide-to="1"></li>
  64. <li data-target="#demo" data-slide-to="2"></li>
  65. </ul>
  66.  
  67. <!-- The slideshow -->
  68. <div class="carousel-inner">
  69. <div class="carousel-item active">
  70. <img src="pict/X/IMG_9861.JPG" alt="Los Angeles" width="80%">
  71. </div>
  72. <div class="carousel-item">
  73. <img src="pict/X/IMG_9728.JPG" alt="Chicago" width="80%">
  74. </div>
  75. <div class="carousel-item">
  76. <img src="pict/X/IMG_9818.JPG" alt="New York" width="80%">
  77. </div>
  78. </div>
  79.  
  80. <!-- Left and right controls -->
  81. <a class="carousel-control-prev" href="#demo" data-slide="prev">
  82. <span class="carousel-control-prev-icon"></span>
  83. </a>
  84. <a class="carousel-control-next" href="#demo" data-slide="next">
  85. <span class="carousel-control-next-icon"></span>
  86. </a>
  87. </div>
  88.  
  89.  
  90. <div class="row">
  91. <div class="col-md-2"></div>
  92. <div class="col-md-8">
  93. <div class="row">
  94. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  95. <a href="#lightbox" data-slide-to="0"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  96. </div>
  97. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  98. <a href="#lightbox" data-slide-to="1"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  99. </div>
  100. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  101. <a href="#lightbox" data-slide-to="2"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  102. </div>
  103. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  104. <a href="#lightbox" data-slide-to="3"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  105. </div>
  106. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  107. <a href="#lightbox" data-slide-to="4"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  108. </div>
  109. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  110. <a href="#lightbox" data-slide-to="5"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  111. </div>
  112. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  113. <a href="#lightbox" data-slide-to="6"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  114. </div>
  115. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  116. <a href="#lightbox" data-slide-to="7"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  117. </div>
  118. <div class="col-md-4 col-sm-6" data-toggle="modal" data-target="#modal">
  119. <a href="#lightbox" data-slide-to="8"><img src="pict/X/IMG_9728.JPG" class="img-fluid my-3"></a>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <!-- Modal -->
  125. <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="Lightbox Gallery by Bootstrap 4" aria-hidden="true">
  126. <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
  127. <div class="modal-content">
  128. <div class="modal-body">
  129. <div id="lightbox" class="carousel slide" data-ride="carousel" data-interval="5000" data-keyboard="true">
  130. <ol class="carousel-indicators">
  131. <li data-target="#lightbox" data-slide-to="0"></li>
  132. <li data-target="#lightbox" data-slide-to="1"></li>
  133. <li data-target="#lightbox" data-slide-to="2"></li>
  134. <li data-target="#lightbox" data-slide-to="3"></li>
  135. <li data-target="#lightbox" data-slide-to="4"></li>
  136. <li data-target="#lightbox" data-slide-to="5"></li>
  137. <li data-target="#lightbox" data-slide-to="6"></li>
  138. <li data-target="#lightbox" data-slide-to="7"></li>
  139. <li data-target="#lightbox" data-slide-to="8"></li>
  140. </ol>
  141. <div class="carousel-inner">
  142. <div class="carousel-item active"><img src="pict/X/IMG_9728.JPG" class="w-100"alt=""></div>
  143. <div class="carousel-item"><img src="pict/X/IMG_9728.JPG" class="w-100" alt=""></div>
  144. <div class="carousel-item"><img src="pict/X/IMG_9728.JPG" class="w-100" alt=""></div>
  145. <div class="carousel-item"><img src="pict/X/IMG_9728.JPG" class="w-100" alt=""></div>
  146. <div class="carousel-item"><img src="pict/X/IMG_9728.JPG" class="w-100" alt=""></div>
  147. <div class="carousel-item"><img src="pict/X/IMG_9728.JPG" class="w-100" alt=""></div>
  148. <div class="carousel-item"><img src="pict/X/IMG_9728.JPG" class="w-100" alt=""></div>
  149. <div class="carousel-item"><img src="pict/X/IMG_9728.JPG" class="w-100" alt=""></div>
  150. </div>
  151. <a class="carousel-control-prev" href="#lightbox" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
  152. <a class="carousel-control-next" href="#lightbox" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158.  
  159. </body>
  160. </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!