Advertisement
LivvyAh

MODULAR: Relationships 2.0

Jun 12th, 2020 (edited)
1,357
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.25 KB | None | 0 0
  1. <!-- RELATIONSHIPS V2 START
  2. Close to the traditional style for these.-->
  3. <div class="row">
  4. <div class="col-12 p-2">
  5. <div class="text-light bg-dark p-3">
  6. <div class="text-uppercase d-flex justify-content-between" style="letter-spacing:3px; font-size:20px;">
  7. RELATIONSHIPS
  8. </div>
  9. <hr class="bg-white w-100">
  10. <!-- TO ADD ANOTHER PAIR COPY FROM HERE -->
  11. <!-- PERSON 1 START -->
  12. <div class="row">
  13. <div class="col-md-4 col-sm-down-12">
  14. <!-- SPLASH PICTURE -->
  15. <div class="p-2 bg-dark h-100" style="min-height:50px; background: url(IMG HERE);
  16. background-size: cover;
  17. background-position: center;
  18. background-attachment: fixed;">
  19. <table style="height: 100%; width:100%; border-width: 3px;">
  20. <tbody>
  21. <tr>
  22. <td class="align-middle text-center">
  23. <!-- PICTURE 1
  24. Resizes to 200px automatically.-->
  25. <img style="max-height:200px" src="IMG HERE">
  26. </tr>
  27. </tbody>
  28. </table>
  29. </div>
  30. </div>
  31. <!-- NAME + URL -->
  32. <div class="col-md-8 col-sm-10">
  33. <div class="text-light p-2">
  34. <a class="text-muted text-uppercase" style="letter-spacing:3px; font-size:20px;" href="URL HERE">Name
  35. </a>
  36. <!-- DESCRIPTION -->
  37. <p>Don't talk too much! There's no scrollbar!
  38. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at tellus sodales, sodales libero quis, maximus tellus. Ut sed pulvinar nisi. Phasellus eu massa leo. Praesent metus erat, hendrerit accumsan sagittis et, auctor id enim. Cras eget magna vestibulum, varius tellus euismod, semper metus. Suspendisse potenti.
  39. </p>
  40. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at tellus sodales, sodales libero quis, maximus tellus. Ut sed pulvinar nisi. Phasellus eu massa leo. Praesent metus erat, hendrerit accumsan sagittis et, auctor id enim. Cras eget magna vestibulum, varius tellus euismod, semper metus. Suspendisse potenti.
  41. </p>
  42. </div>
  43. </div>
  44. </div>
  45. <!-- PERSON 1 END -->
  46. <!-- LINE DIVIDER -->
  47. <hr class="bg-white w-75">
  48. <!-- PERSON 2 START -->
  49. <div class="row">
  50. <!-- NAME + URL -->
  51. <div class="col-md-8 col-sm-10">
  52. <div class="text-light p-2">
  53. <a class="text-muted text-uppercase" style="letter-spacing:3px; font-size:20px;" href="URL HERE">Name
  54. </a>
  55. <!-- DESCRIPTION -->
  56. <p>Don't talk too much! There's no scrollbar!
  57. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at tellus sodales, sodales libero quis, maximus tellus. Ut sed pulvinar nisi. Phasellus eu massa leo. Praesent metus erat, hendrerit accumsan sagittis et, auctor id enim. Cras eget magna vestibulum, varius tellus euismod, semper metus. Suspendisse potenti.
  58. </p>
  59. </div>
  60. </div>
  61. <div class="col-md-4 col-sm-down-12">
  62. <!-- SPLASH PICTURE -->
  63. <div class="p-2 bg-dark h-100" style="min-height:50px; background: url(IMG HERE);
  64. background-size: cover;
  65. background-position: center;
  66. background-attachment: fixed;">
  67. <table style="height: 100%; width:100%; border-width: 3px;">
  68. <tbody>
  69. <tr>
  70. <td class="align-middle text-center">
  71. <!-- PICTURE 2
  72. Resizes to 200px automatically.-->
  73. <img style="max-height:200px" src="IMG HERE">
  74. </tr>
  75. </tbody>
  76. </table>
  77. </div>
  78. </div>
  79. </div>
  80. <!-- PERSON 2 END -->
  81. <!-- TO HERE, THEN PASTE RIGHT AFTER.
  82. To add the line divider, go right above this note and paste this:
  83. <hr class="bg-white w-75">
  84. Don't include this end carrot lol-->
  85. </div>
  86. </div>
  87. </div>
  88. <!-- RELATIONSHIPS V2 END -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement