API tools faq
paste
lowkeywicked

Freebie - Wardrobe 02

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