API tools faq
paste
lowkeywicked

Freebie - Wadrobe 01

lowkeywicked
Apr 23rd, 2020 (edited)
5,128
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.60 KB | None | 0 0
raw download clone embed print report
  1. <div class="bg-faded rounded p-3 mx-auto" style="max-width: 950px;">
  2. <div class="card d-block border-0 p-2 text-center mb-3">
  3. <h1 class="display-4" style="letter-spacing:1px;">
  4. Title Here
  5. </h1>
  6. </div>
  7. <div class="row no-gutters">
  8. <div class="col-md-4 push-md-8 mb-md-0 mb-2">
  9. <div class="card p-2 border-0 h-100">
  10. <!-------- FOCAL IMAGE -- WILL SCALE & CROP WITH SCREEN -- FOCUS IN TOP CENTER ------------------>
  11. <div style="background-image:url('IMG_URL');
  12. background-size: cover; repeat:no-repeat; background-position: top center; min-height: 500px;" class="rounded h-100"></div>
  13. </div>
  14. </div>
  15. <div class="col-md-8 pull-md-4 pr-md-3">
  16. <div class="card p-2 border-0 d-block mb-2">
  17. <div class="carousel slide" id="woop">
  18. <!-------- there are three carousel sections by default --- you can add more if you want ---->
  19. <div class="carousel-inner">
  20. <div class="carousel-item active">
  21. <!----- grid for images -- images will scale & crop with screen size -- focus will be in the CENTER of the image -->
  22. <div class="row no-gutters w-100">
  23. <div class="col-md-4 col-6 p-1">
  24. <div style="background-image: url('IMG_URL');
  25. background-size:cover; background-position: center; min-height: 250px;"></div>
  26. </div>
  27. <div class="col-md-4 col-6 p-1">
  28. <div style="background-image: url('IMG_URL');
  29. background-size:cover; background-position: center; min-height: 250px;"></div>
  30. </div>
  31. <div class="col-md-4 col-6 p-1">
  32. <div style="background-image: url('IMG_URL');
  33. background-size:cover; background-position: center; min-height: 250px;"></div>
  34. </div>
  35. <div class="col-md-4 col-6 p-1">
  36. <div style="background-image: url('IMG_URL');
  37. background-size:cover; background-position: center; min-height: 250px;"></div>
  38. </div>
  39. <div class="col-md-4 col-6 p-1">
  40. <div style="background-image: url('IMG_URL');
  41. background-size:cover; background-position: center; min-height: 250px;"></div>
  42. </div>
  43. <div class="col-md-4 col-6 p-1">
  44. <div style="background-image: url('IMG_URL');
  45. background-size:cover; background-position: center; min-height: 250px;"></div>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="carousel-item">
  50. <!----- grid for images -- images will scale & crop with screen size -- focus will be in the CENTER of the image -->
  51. <div class="row no-gutters w-100">
  52. <div class="col-md-4 col-6 p-1">
  53. <div style="background-image: url('IMG_URL');
  54. background-size:cover; background-position: center; min-height: 250px;"></div>
  55. </div>
  56. <div class="col-md-4 col-6 p-1">
  57. <div style="background-image: url('IMG_URL');
  58. background-size:cover; background-position: center; min-height: 250px;"></div>
  59. </div>
  60. <div class="col-md-4 col-6 p-1">
  61. <div style="background-image: url('IMG_URL');
  62. background-size:cover; background-position: center; min-height: 250px;"></div>
  63. </div>
  64. <div class="col-md-4 col-6 p-1">
  65. <div style="background-image: url('IMG_URL');
  66. background-size:cover; background-position: center; min-height: 250px;"></div>
  67. </div>
  68. <div class="col-md-4 col-6 p-1">
  69. <div style="background-image: url('IMG_URL');
  70. background-size:cover; background-position: center; min-height: 250px;"></div>
  71. </div>
  72. <div class="col-md-4 col-6 p-1">
  73. <div style="background-image: url('IMG_URL');
  74. background-size:cover; background-position: center; min-height: 250px;"></div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="carousel-item">
  79. <!----- grid for images -- images will scale & crop with screen size -- focus will be in the CENTER of the image -->
  80. <div class="row no-gutters w-100">
  81. <div class="col-md-4 col-6 p-1">
  82. <div style="background-image: url('IMG_URL');
  83. background-size:cover; background-position: center; min-height: 250px;"></div>
  84. </div>
  85. <div class="col-md-4 col-6 p-1">
  86. <div style="background-image: url('IMG_URL');
  87. background-size:cover; background-position: center; min-height: 250px;"></div>
  88. </div>
  89. <div class="col-md-4 col-6 p-1">
  90. <div style="background-image: url('IMG_URL');
  91. background-size:cover; background-position: center; min-height: 250px;"></div>
  92. </div>
  93. <div class="col-md-4 col-6 p-1">
  94. <div style="background-image: url('IMG_URL');
  95. background-size:cover; background-position: center; min-height: 250px;"></div>
  96. </div>
  97. <div class="col-md-4 col-6 p-1">
  98. <div style="background-image: url('IMG_URL');
  99. background-size:cover; background-position: center; min-height: 250px;"></div>
  100. </div>
  101. <div class="col-md-4 col-6 p-1">
  102. <div style="background-image: url('IMG_URL');
  103. background-size:cover; background-position: center; min-height: 250px;"></div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="card border-0 d-block p-2 text-center">
  111. <a href="#woop" data-slide="prev"><i class="fal fa-angle-double-left fa-2x fa-fw" /></a>
  112. <a href="#woop" data-slide="next"><i class="fal fa-angle-double-right fa-2x fa-fw" /></a>
  113. </div>
  114. </div>
  115.  
  116. </div>
  117. </div>
  118. <!---------- CREDIT ----------------------------->
  119. <div class="mx-auto mt-1" style="max-width: 950px;"><p class="text-right small text-muted">
  120. HTML by @Pinky
  121. </p></div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!