Advertisement
oftenwrongthemes

Updates Tab #5

Aug 22nd, 2017
529
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.60 KB | None | 0 0
  1. ******THIS PART GOES BETWEEN <HEAD> AND </HEAD>***********
  2.  
  3. <!--IMPORT FONT AWESOME ICONS-->
  4. <script src="https://use.fontawesome.com/a8cbc62841.js"></script>
  5.  
  6. <!--IMPORT GOOGLE FONT-->
  7. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700" rel="stylesheet">
  8.  
  9. <!--ALL THE JQUERY-->
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
  11.  
  12. <script>
  13.  
  14. $(document).ready(function(){
  15. $('.textbox').hide();
  16. $('.tab-con').click(function(){
  17. $(this).children('.bubble').toggleClass('open');
  18. $(this).children('.textbox').delay(500).fadeToggle(600);
  19. })
  20. })
  21.  
  22. </script>
  23.  
  24. ******THIS PART GOES BETWEEN <STYLE TYPE="TEXT/CSS"> AND </STYLE>***********
  25.  
  26. .con {
  27. position: fixed;
  28. margin: 10px;
  29. }
  30.  
  31. .bubble {
  32. width: 30px;
  33. height: 30px;
  34. border: 1px solid white;
  35. z-index: 99;
  36. text-align: center;
  37. padding: 6px 0;
  38. box-sizing: border-box;
  39. border-radius: 25px;
  40. -moz-border-radius: 25px;
  41. -webkit-border-radius: 25px;
  42. background: #ace8ba;
  43. margin-bottom: 10px;
  44. position: relative;
  45. transition-duration: 0.75s;
  46. -moz-transition-duration: 0.75s;
  47. -webkit-transition-duration: 0.75s;
  48. }
  49.  
  50. .bubble i {
  51. color: white;
  52. position: relative;
  53. z-index: 999;
  54. }
  55.  
  56. .open {
  57. transition-duration: 0.75s;
  58. -moz-transition-duration: 0.75s;
  59. -webkit-transition-duration: 0.75s;
  60. margin-left: 125px;
  61. }
  62.  
  63. .textbox {
  64. width: 135px;
  65. height: auto;
  66. border: 1px solid #ace8ba;
  67. position: relative;
  68. top: -20px;
  69. left: 5px;
  70. clear: both;
  71. font-family: 'Open Sans', sans-serif;
  72. }
  73.  
  74. .textbox .title {
  75. background: #ace8ba;
  76. text-align: center;
  77. text-transform: uppercase;
  78. font-size: 8pt;
  79. padding: 5px 0;
  80. letter-spacing: 2px;
  81. color: white;
  82. font-weight: 700;
  83. }
  84.  
  85. .textbox .text {
  86. font-size: 8pt;
  87. width: auto;
  88. padding: 5px;
  89. font-weight: 300;
  90. box-sizing: border-box;
  91. }
  92.  
  93. ******THIS PART GOES BETWEEN <BODY> AND </BODY>***********
  94.  
  95. <div class="con">
  96.  
  97. <!--PROFILE BOX-->
  98. <div class="tab-con">
  99. <div class="bubble">
  100. <i class="fa fa-user"></i>
  101. </div>
  102. <div class="textbox">
  103. <div class="title">
  104. title
  105. </div>
  106. <div class="text">
  107. text
  108. </div>
  109. </div>
  110. </div>
  111.  
  112. <div style="clear: both"></div>
  113.  
  114. <!--MUSIC BOX-->
  115. <div class="tab-con">
  116. <div class="bubble">
  117. <i class="fa fa-step-forward"></i>
  118. </div>
  119. <div class="textbox">
  120. <div class="title">
  121. title
  122. </div>
  123. <div class="text">
  124. text
  125. </div>
  126. </div>
  127. </div>
  128.  
  129. <!--OTHER BOX | COPY AND PASTE THIS BOX TO ADD OTHER BOXES-->
  130. <div class="tab-con">
  131. <div class="bubble">
  132. <i class="fa fa-star"></i>
  133. </div>
  134. <div class="textbox">
  135. <div class="title">
  136. title
  137. </div>
  138. <div class="text">
  139. text
  140. </div>
  141. </div>
  142. </div>
  143.  
  144. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement