API tools faq
paste
View difference between Paste ID: 1HvTj90F and nJLUEGMe
SHOW: | | - or go back to the newest paste.
1
<!-- primary color is #30BF9B -->
2
3
<div class="justify-content-around">

4
  <div class="col-2">

5
      <ul class="nav nav-tabs card-header-tabs row mb-1">

6
        <li class="col-6 mb-1 px-1"><a class="btn btn-block border-0 btn-outline-secondary active " style="background: #30BF9B; text-white; border-radius: 15px;" data-toggle="tab" href="#ONE"><i class="fad fa-info fa-lg"></i></a></li>

7
        

8
        <li class="col-6 mb-1 px-1"><a class="btn btn-block border-0 btn-outline-secondary" style="background: #30BF9B; text-white; border-radius: 15px;" data-toggle="tab" href="#TWO"><i class="fad fa-file-alt fa-lg"></i></a></li> 

9
        

10
      </ul>

11
   </div>

12
  </div>

13
  

14
<!-- background image -->

15
<div class="justify-content-around">

16
    <div class="col-12 py-0 px-5 justify-content-around" style="max-width:615px; background-image:url(IMG_URL);background-position:center center no-repeat; background-size:cover; border-top-right-radius:0px; border-top-left-radius:25px; border-bottom-right-radius:25px; border-bottom-left-radius:0px; border:1px solid #000000; box-shadow: 5px 5px 10px rgba(32,13,38,0.5);">

17
        

18
        

19
        <div class="col-2 p-2">

20
            <i class="fa fa-flower fa-4x" style="color:#FFFFFF"></i>

21
            <i class="fad fa-grip-lines fa-4x" style="color:#FFFFFF"></i>

22
            <i class="fal fa-grip-lines fa-4x" style="color:#FFFFFF"></i>

23
            <i class="fad fa-grip-lines fa-4x" style="color:#FFFFFF"></i>

24
            <i class="fa fa-flower-tulip fa-4x fa-rotate-90" style="color:#FFFFFF"></i>

25
        </div>

26
        

27
        <div class="col-10 p-2" style="background: #FFFFFF; box-shadow: -10px 0px 10px rgba(32,13,38,0.3);">

28
        <div class="tab-content">

29
30
<!-- TAB ONE -->

31
<div class="tab-pane fade active show" id="ONE">

32
            <div class="row no-gutters">

33
                <div class="col-9 p-0">

34
<!-- full name -->

35
                    <div class="col-12 text-right pr-2" style="font-family:terminal">

36
                        <span style="font-weight:900; font-size:30px; color:#30BF9B">✿ Name Surname</span></div>

37
                        <div class="col-12">

38
                            <div class="row no-gutters">

39
<!-- name -->

40
                      <div class="col-1 text-right pr-1 mb-2"><i class="fa-solid fa-signature" style="color:#30BF9B"></i></div>

41
                      <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>

42
<!-- height -->

43
                      <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-ruler" style="color:#30BF9B"></i></div>

44
                      <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>

45
<!-- age -->

46
                      <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-stopwatch" style="color:#30BF9B"></i></div>

47
                      <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>

48
<!-- species -->

49
                      <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-dna" style="color:#30BF9B"></i></div>

50
                      <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>

51
<!-- gender or pronouns -->

52
                      <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-venus-mars" style="color:#30BF9B"></i></div>

53
                      <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>

54
<!-- status -->

55
                      <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-heart-pulse" style="color:#30BF9B"></i></div>

56
                      <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>

57
                      

58
                                

59
                            </div>

60
                            

61
                        </div>

62
                </div>

63
                <div class="col-3">

64
<!-- character image -->

65
                <div style="background-image:url(IMG_URL);background-position:center center no-repeat; background-size:cover; border-radius:10px; border:4px solid #FFFFFF; height: 150px; width: 150px;"></div></div>

66
                

67
                </div>

68
                <div class="row no-gutters">

69
<!-- extra image -->

70
                <div class="col-3">

71
                <div style="background-image:url(IMG_URL);background-position:center center no-repeat; background-size:cover; border-radius:10px; border:1px solid #000000; height: 150px; width: 150px;"></div></div>

72
<!-- character blurb -->

73
              <div class="col-9 p-2 mt-1 table-responsive text-justify" style="height:140px; color:#000000; background: rgba(255,255,255,0.8); border-radius:10px; box-shadow: 5px 5px 10px rgba(32,13,38,0.3); font-size:12px">

74
                  

75
                  <p>Write about your character here! This box scrolls</p>

76
77
                  <p>- -</p>

78
                  

79
                  <p>- -</p>

80
81
                </div>

82
83
            </div>

84
            </div>

85
<!-- END TAB ONE -->

86
87
<!-- TAB TWO -->

88
<div class="tab-pane fade" id="TWO">

89
            <div class="row no-gutters">

90
                <div class="col-4">

91
<!-- extra image -->

92
                 <div style="background-image:url(IMG_URL);background-position:center center no-repeat; background-size:cover; border-radius:10px; border:1px solid #000000; height: 150px; width: 150px;"></div>

93
                 </div>

94
                <div class="col-8">

95
<!-- traits (you can make them whatever you want) -->

96
                    <div class="text-right mb-0" style="color:#30BF9B; font-size:18px; font-family:terminal; letter-spacing:2px">trait</div>

97
                    <div class="progress rounded-1" style="background:#30BF9B;"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50% ;height:8px;"></div></div>

98
                    

99
                    <div class="text-right mb-0" style="color:#30BF9B; font-size:18px; font-family:terminal; letter-spacing:2px">trait</div>

100
                    <div class="progress rounded-1" style="background:#30BF9B;"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50% ;height:8px;"></div></div>

101
                    

102
                    <div class="text-right mb-0" style="color:#30BF9B; font-size:18px; font-family:terminal; letter-spacing:2px">trait</div>

103
                    <div class="progress rounded-1" style="background:#30BF9B;"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50% ;height:8px;"></div></div>

104
                    

105
                    <div class="text-right mb-0" style="color:#30BF9B; font-size:18px; font-family:terminal; letter-spacing:2px">trait</div>

106
                    <div class="progress rounded-1" style="background:#30BF9B;"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50% ;height:8px;"></div></div>

107
                </div>

108
               </div>

109
            <div class="row no-gutters">

110
             <div class="col-12 justify-content-between">

111
                <div class="col-5 p-1" style="font-family:terminal">

112
                        <span style="font-weight:900; font-size:18px; color:#30BF9B; letter-spacing:3px">✿ Trivia</span></div>

113
                <div class="col-7 py-1 px-0 text-right" style="font-family:terminal">

114
                        <span style="font-weight:900; font-size:18px; color:#30BF9B; letter-spacing:3px">Likes/Dislikes ✿</span></div>

115
            </div>

116
            

117
            <div class="col-12 justify-content-between">

118
<!-- trivia -->

119
              <div class="col-7 pr-1 p-0">

120
              <div class="col-12 p-2  table-responsive text-justify" style="height:115px; color:#000000; background: rgba(255,255,255,0.8); border-radius:10px; box-shadow: 5px 5px 10px rgba(32,13,38,0.3); font-size:12px;">

121
                  

122
                  <ul class="fa-ul ml-3 mb-0 my-auto">

123
124
						<li class="pl-0 pb-1"><span class="fa-li"><i class="fa fa-hand-point-right" style="color:#30BF9B"></i></span>info</li>

125
126
						<li class="pl-0 pb-1"><span class="fa-li"><i class="fa fa-hand-point-right" style="color:#30BF9B"></i></span>info</li>

127
128
						<li class="pl-0 pb-1"><span class="fa-li"><i class="fa fa-hand-point-right" style="color:#30BF9B"></i></span>info</li>

129
130
						<li class="pl-0 pb-1"><span class="fa-li"><i class="fa fa-hand-point-right" style="color:#30BF9B"></i></span>info</li>

131
132
					  </ul>

133
134
                </div>

135
                </div>

136
                

137
<!-- likes/dislikes -->

138
              <div class="col-5 p-2 table-responsive" style="height:115px; color:#000000; background: rgba(255,255,255,0.8); border-radius:10px; box-shadow: 5px 5px 10px rgba(32,13,38,0.3); font-size:12px;">

139
                  

140
<!-- likes -->

141
                  <div class="row no-gutters">

142
143
						<div class="col-1"><i class="fa fa-heart" style="color:#30BF9B"></i></div>

144
						<div class="col-11 pl-1">info</div>

145
146
						<div class="col-1"><i class="fa fa-heart" style="color:#30BF9B"></i></div>

147
						<div class="col-11 pl-1">info</div>

148
149
						<div class="col-1"><i class="fa fa-heart" style="color:#30BF9B"></i></div>

150
						<div class="col-11 pl-1">info</div>

151
152
						<div class="col-1"><i class="fa fa-heart" style="color:#30BF9B"></i></div>

153
						<div class="col-11 pl-1">info</div>

154
155
					  </div>

156
157
<!-- dislikes -->

158
                  <div class="row no-gutters">

159
160
                      	<div class="col-11 pr-1 text-right">info</div>

161
						<div class="col-1"><i class="fa fa-circle-xmark" style="color:#30BF9B"></i></div>

162
163
					    <div class="col-11 pr-1 text-right">info</div>

164
						<div class="col-1"><i class="fa fa-circle-xmark" style="color:#30BF9B"></i></div>

165
166
					    <div class="col-11 pr-1 text-right">info</div>

167
						<div class="col-1"><i class="fa fa-circle-xmark" style="color:#30BF9B"></i></div>

168
169
						<div class="col-11 pr-1 text-right">info</div>

170
						<div class="col-1"><i class="fa fa-circle-xmark" style="color:#30BF9B"></i></div>

171
172
					  

173
            </div>

174
            </div>

175
            

176
</div>

177
</div>

178
</div>

179
<!-- END TAB TWO -->

180
181
                </div>

182
            </div>

183
            <div class="col-2 p-3">

184
            <i class="fa fa-flower-tulip fa-4x fa-rotate-270" style="color:#FFFFFF"></i>

185
            <i class="fal fa-grip-lines fa-4x" style="color:#FFFFFF"></i>

186
            <i class="fad fa-grip-lines fa-4x" style="color:#FFFFFF"></i>

187
            <i class="fal fa-grip-lines fa-4x" style="color:#FFFFFF"></i>

188
            <i class="fa fa-flower fa-4x" style="color:#FFFFFF"></i>

189
            </div>

190
</div>

191
</div>

192
193
<!-- credit -->

194
<!-- DO NOT REMOVE. -->

195
<div class="justify-content-around">

196
<div class="col-12 text-right p-1" style="max-width:615px">

197-
			<a class="tooltipster" href="https://toyhou.se/teethsome" style="color:#30BF9B;" title="code by teethsome"><i class="fa fa-tooth fa-lg"></i></a></div>

197+
			<a class="tooltipster" href="https://toyhou.se/DENTALHYGIENE" style="color:#30BF9B;" title="code by DENTALHYGIENE"><i class="fa fa-tooth fa-lg"></i></a></div>

198
			</div>
        

    


            


                                


        

            



                
    

        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!