1. <!--
2.  
3.   CREDIT: vom | vomcodesstuff | vomwastaken
4.  
5.   INFO:
6.     • Headers are colored using bootstrap's colors, to change them just change text-primary
7.       to text-[bs color] - you can find a list of BS colors here > https://toyhou.se/2621177.color-references-bs-pkmn-
8.     • Character images can be any size (thought the bigger, the better), they'll adjust
9.       their size
10.     • For more advanced edits, I suggest running this through a cleaner.
11.     • Keep my credit for the HTML.
12.  
13. -->
14. <div class="container-fluid p-0">
15.         <div class="row no-gutters" style="margin:-4px;">
16.                 <!-- --------------------------
17.  
18.  
19.           BASIC INFO
20.  
21.  
22. --------------------------- -->
23.                 <div class="col-12 p-1">
24.                         <div class="card bg-faded p-2 px-3 text-right text-muted" style="font-size:12px;">
25.  
26.                                 <p>lovers . first base . rocky</p>
27.                         </div>
28.                 </div>
29.                 <!-- --------------------------------
30.  
31.  
32.  
33.            CHARACTER ONE
34.  
35.  
36.  
37. --------------------------------- -->
38.                 <div class="col-md-6 row no-gutters">
39.                         <!-- --------------------------
40.  
41.  
42.            AVATAR
43.  
44.  
45. --------------------------- -->
46.                         <div class="col-lg-5 push-lg-7 p-1">
47.                                 <div class="card bg-faded h-100" style="
48.   background: url(https://file.toyhou.se/images/14500147_oS8VOQCGoqP8H1v.png);
49. background-position:center;background-repeat:no-repeat;background-size:cover;">
50.                                         <div style="height:450px;">
51.                                                 <br>
52.                                         </div>
53.                                 </div>
54.                         </div>
55.                         <!-- --------------------------
56.  
57.  
58.          C-ONE INFO
59.  
60.  
61. --------------------------- -->
62.                         <div class="col-lg-7 pull-lg-5 p-1">
63.                                 <div class="card d-block p-3 bg-faded h-100"><a class="d-block text-uppercase text-lg-right text-center text-primary" href="https://toyhou.se/4286579.jackson-jack-" id="" style="font-size:25px;font-weight:300;letter-spacing:2px;">Jackson</a>
64.                                         <hr class="my-2">
65.                                         <!-- --------------------------
66.  
67.  
68.            BASICS
69.  
70.  
71. --------------------------- -->
72.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">AGE</span>
73.                                                 <span>[24 years]</span></div>
74.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">GENDER</span>
75.                                                 <span>[male]</span></div>
76.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">SPECIES</span>
77.                                                 <span>[Paroith villager]</span></div>
78.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">ORIENT.</span>
79.                                                 <span>[bisexual]</span></div>
80.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">JOB</span>
81.                                                 <span>[musician]</span></div>
82.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">CREATOR</span>
83.                                                 <span>[<a href="https://toyhou.se/pandaepan" id="">Pandaepan</a>]</span></div>
84.                                         <hr class="my-2">
85.                                         <!-- --------------------------
86.  
87.  
88.             STATS
89.  
90.  
91. --------------------------- -->
92.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">INTELLIGENCE</span>
93.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
94.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">CREATIVITY</span>
95.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
96.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">CONFIDENCE</span>
97.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
98.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">HUMOR</span>
99.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
100.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">EMPATHY</span>
101.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
102.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">CHARISMA</span>
103.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
104.                                 </div>
105.                         </div>
106.                 </div>
107.                 <!-- --------------------------------
108.  
109.  
110.  
111.              CHARACTER TWO
112.  
113.  
114.  
115.   --------------------------------- -->
116.                 <div class="col-md-6 row no-gutters">
117.                         <!-- --------------------------
118.  
119.  
120.             AVATAR
121.  
122.  
123. --------------------------- -->
124.                         <div class="col-lg-5 p-1">
125.                                 <div class="card bg-faded h-100" style="
126.   background: url(IMG URL);
127. background-position:center;background-repeat:no-repeat;background-size:cover;">
128.                                         <div style="height:450px;">
129.                                                 <br>
130.                                         </div>
131.                                 </div>
132.                         </div>
133.                         <!-- --------------------------
134.  
135.  
136.       C-TWO INFO
137.  
138.  
139. --------------------------- -->
140.                         <div class="col-lg-7 p-1">
141.                                 <div class="card d-block p-3 bg-faded h-100"><a class="d-block text-uppercase text-lg-left text-center text-primary" href="" style="font-size:25px;font-weight:300;letter-spacing:2px;">Name</a>
142.                                         <hr class="my-2">
143.                                         <!-- --------------------------
144.  
145.  
146.            BASICS
147.  
148.  
149. --------------------------- -->
150.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">AGE</span>
151.                                                 <span>[info]</span></div>
152.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">GENDER</span>
153.                                                 <span>[info]</span></div>
154.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">SPECIES</span>
155.                                                 <span>[info]</span></div>
156.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">ORIENT.</span>
157.                                                 <span>[info]</span></div>
158.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">JOB</span>
159.                                                 <span>[info]</span></div>
160.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">CREATOR</span>
161.                                                 <span>[info]</span></div>
162.                                         <hr class="my-2">
163.                                         <!-- --------------------------
164.  
165.  
166.             STATS
167.  
168.  
169. --------------------------- -->
170.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">INTELLIGENCE</span>
171.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
172.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">CREATIVITY</span>
173.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
174.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">CONFIDENCE</span>
175.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
176.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">HUMOR</span>
177.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
178.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">EMPATHY</span>
179.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
180.                                         <div class="d-flex justify-content-between p-1"><span class="text-muted">CHARISMA</span>
181.                                                 <span><i class="fas fa-circle text-primary"></i><i class="fas fa-circle text-primary"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i><i class="fal fa-circle text-muted"></i></span></div>
182.                                 </div>
183.                         </div>
184.                 </div>
185.                 <!-- --------------------------
186.  
187.  
188.           PLAYLIST
189.  
190.  
191. --------------------------- -->
192.                 <div class="col-12 p-1">
193.                         <div class="card bg-faded p-1 px-2 text-muted" style="font-size:15px;">
194.                                 <div class="row no-gutters"><a class="col-md-3 col-sm-6 p-2 d-flex justify-content-between" href="" style="text-decoration:none;"><i class="fas fa-play fa-fw my-auto"></i><span class="text-muted">SONG NAME - <em>artist</em></span></a>
195.                                         <a class="col-md-3 col-sm-6 p-2 d-flex justify-content-between" href="" style="text-decoration:none;"><i class="fas fa-play fa-fw my-auto"></i><span class="text-muted">SONG NAME - <em>artist</em></span></a>
196.                                         <a class="col-md-3 col-sm-6 p-2 d-flex justify-content-between" href="" style="text-decoration:none;"><i class="fas fa-play fa-fw my-auto"></i><span class="text-muted">SONG NAME - <em>artist</em></span></a>
197.                                         <a class="col-md-3 col-sm-6 p-2 d-flex justify-content-between" href="" style="text-decoration:none;"><i class="fas fa-play fa-fw my-auto"></i><span class="text-muted">SONG NAME - <em>artist</em></span></a></div>
198.                         </div>
199.                 </div>
200.                 <!-- --------------------------
201.  
202.  
203.         IMPORTANT STUFF
204.           TO REMEMBER
205.  
206.  
207. --------------------------- -->
208.                 <div class="col-xl-4 col-md-6 p-1">
209.                         <div class="card d-block p-3 bg-faded">
210.                                 <div class="text-uppercase text-center text-primary" style="font-size:20px;font-weight:300;letter-spacing:1px;">Important</div>
211.                                 <hr class="my-2">
212.                                 <div class="table-responsive text-muted" style="height:300px;">
213.  
214.                                         <p>In sollicitudin finibus tellus, pulvinar ultrices velit pretium in. Cras id suscipit magna, ut sollicitudin neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed imperdiet eros, id luctus ante.</p>
215.                                         <hr>
216.  
217.                                         <p>Praesent sollicitudin, orci ut varius gravida, ex ante tincidunt sapien, sed pulvinar nisl diam eu elit. In hac habitasse platea dictumst. Duis vitae volutpat sem, id hendrerit odio.</p>
218.                                         <hr>
219.  
220.                                         <p>Cras pharetra ligula magna, sed sollicitudin turpis scelerisque eu. Proin id dignissim purus. In mollis ut nulla vitae feugiat. Etiam sollicitudin dolor sed magna pulvinar, et rutrum lacus posuere.</p>
221.                                 </div>
222.                         </div>
223.                 </div>
224.                 <!-- --------------------------
225.  
226.  
227.           MILESTONES
228.  
229.  
230. --------------------------- -->
231.                 <div class="col-xl-4 push-xl-4 col-md-6 p-1">
232.                         <div class="card d-block p-3 bg-faded">
233.                                 <div class="text-uppercase text-center text-primary" style="font-size:20px;font-weight:300;letter-spacing:1px;">Milestones</div>
234.                                 <hr class="my-2">
235.                                 <div class="table-responsive text-muted" style="height:300px;">
236.  
237.                                         <p>In sollicitudin finibus tellus, pulvinar ultrices velit pretium in. Cras id suscipit magna, ut sollicitudin neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed imperdiet eros, id luctus ante.</p>
238.                                         <hr>
239.  
240.                                         <p>Praesent sollicitudin, orci ut varius gravida, ex ante tincidunt sapien, sed pulvinar nisl diam eu elit. In hac habitasse platea dictumst. Duis vitae volutpat sem, id hendrerit odio.</p>
241.                                         <hr>
242.  
243.                                         <p>Cras pharetra ligula magna, sed sollicitudin turpis scelerisque eu. Proin id dignissim purus. In mollis ut nulla vitae feugiat. Etiam sollicitudin dolor sed magna pulvinar, et rutrum lacus posuere.</p>
244.                                 </div>
245.                         </div>
246.                 </div>
247.                 <!-- --------------------------
248.  
249.  
250.          BACKGROUND
251.  
252.  
253. --------------------------- -->
254.                 <div class="col-xl-4 pull-xl-4 p-1">
255.                         <div class="card d-block p-3 bg-faded">
256.                                 <div class="text-uppercase text-center text-primary" style="font-size:20px;font-weight:300;letter-spacing:1px;">Background</div>
257.                                 <hr class="my-2">
258.                                 <div class="table-responsive text-muted" style="height:300px;">
259.  
260.                                         <p>Ut non venenatis odio. Donec nec tortor neque. Nam in fermentum dolor, a sagittis augue. Quisque id quam neque. Quisque gravida dolor massa, sed congue nisi vehicula ut. Donec venenatis finibus augue vel aliquet. Aenean cursus tellus vel velit finibus, vitae tempus justo pulvinar. Integer sit amet massa sit amet tellus dapibus vestibulum vel eget leo.</p>
261.  
262.                                         <p>Donec aliquet, nisi quis mollis porta, risus turpis pulvinar elit, sit amet ullamcorper lorem felis vel diam. Integer vitae erat in risus congue interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas turpis nunc, bibendum tincidunt egestas faucibus, mattis eu dolor. Vivamus at pellentesque nisi, at consequat leo. Quisque et est volutpat, maximus mi id, facilisis nunc. Vestibulum vel ipsum scelerisque, gravida sapien quis, cursus mi. Sed mi magna, pellentesque non imperdiet vitae, maximus quis mi. Praesent eleifend justo non lacus pellentesque, non ultrices augue ullamcorper.</p>
263.  
264.                                         <p>Vestibulum varius, tortor nec laoreet interdum, libero diam ornare neque, at volutpat metus arcu vel dolor. Etiam vitae tellus pharetra, consequat felis at, lobortis dolor. Aliquam vel egestas arcu, in imperdiet tortor. Curabitur lobortis sagittis est et convallis. Morbi pulvinar, nunc id scelerisque viverra, metus ligula interdum erat, at porta enim orci at urna.</p>
265.                                 </div>
266.                         </div>
267.                 </div>
268.                 <!-- --------------------------
269.  
270.  
271.          CREDITS
272.  
273.  
274. --------------------------- -->
275.                 <div class="col-12 p-1">
276.                         <div class="card bg-faded p-2 px-3 text-muted" style="font-size:12px;">
277.  
278.                                 <p>credits . <a href="https://toyhou.se/vomcodesstuff">html by vom</a> . <a href="LINK">images by username</a></p>
279.                         </div>
280.                 </div>
281.         </div>
282. </div>
283.