-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (72 loc) · 4.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<style>
html {
height: 100%;
align-self:auto;
}
body {
background: linear-gradient(to bottom, #B01B52, #F288AE);
font-family: Arial, sans-serif;
}
.round-image {
border-radius: 50%;
width: 200px;
height: 200px;
}
</style>
<div class="container px-0" style="html max-width:795px; background-image:url(https://www.google.com/url?sa=i&url=https%3A%2F%2Ftenor.com%2Fview%2Fplaceholder-text-animated-word-gif-20733330&psig=AOvVaw2btrIFKIcmAtMn-a6R7bsn&ust=1679254621821000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCJie_omd5v0CFQAAAAAdAAAAABAj); background-repeat:auto; background-position:center center; border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; background-attachment:fixed;">
<div class="row no-gutters">
<!-- CHARACTER IMAGE// TO ADD LATER -->
<div class="col-md-6"><img src=""></div>
<div class="col-md-6 p-3">
<!-- NAME BOX -->
<div class="col-12 text-white p-2" align="center" style="background: rgba(0,39,91,0.55); border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px;">
<div class="mb-2">
<!-- NAME -->
<span style="letter-spacing:3mm; font-size:28px; font-weight:lighter;">CATAS</span>
<img src="./img/tigger.png" class="round-image" alt="Describe Avatar Here!">
<span style="letter-spacing:3mm; font-size:28px; font-weight:lighter;">TROPHE</span>
<br>
<!-- INFO -->
<span style="letter-spacing:2px; font-size:smaller;">insert whatever text you want here</span>
</div>
</div>
<!-- DESCRIPTION BOX -->
<div class="col-12 text-white p-2 mt-3 mb-3" align="left" style="background: rgba(0,39,91,0.55); border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; height:150px;">
<div class="p-2" style="overflow-x: hidden; height:130px;">
<!-- DESCRIPTION -->
<span style="letter-spacing:1px; font-size:smaller;">Write a description of your character here! Extra-long descriptions work too, I'm making it scroll with my magic tiger powers! Rawr! :3</span>
</div>
</div>
<!-- LIKES/DISLIKES BOXES -->
<div class="row">
<div class="col-md-6 text-white" align="left">
<div style="background: rgba(0,39,91,0.55); border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; height:170px;">
<div class="p-3">
<!-- LIKES -->
<span style="letter-spacing:3px; font-size:small;">LIKES<span class="pull-right"><i class="fas fa-check-circle"></i></span></span><br>
<span style="letter-spacing:1px; font-size:smaller;">Like</span><br>
<span style="letter-spacing:1px; font-size:smaller;">Like</span><br>
<span style="letter-spacing:1px; font-size:smaller;">Like</span><br>
<span style="letter-spacing:1px; font-size:smaller;">Like</span><br>
<span style="letter-spacing:1px; font-size:smaller;">Like</span>
</div>
</div>
</div>
<div class="col-md-6 text-white" align="left">
<div style="background: rgba(0,39,91,0.55); border-style:none; border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; height:170px;">
<div class="p-3">
<!-- DISLIKES -->
<span style="letter-spacing:3px; font-size:small;">DISLIKES<span class="pull-right"><i class="fas fa-times-circle"></i></span></span><br>
<span style="letter-spacing:1px; font-size:smaller;">Dislike</span><br>
<span style="letter-spacing:1px; font-size:smaller;">Dislike</span><br>
<span style="letter-spacing:1px; font-size:smaller;">Dislike</span><br>
<span style="letter-spacing:1px; font-size:smaller;">Dislike</span><br>
<span style="letter-spacing:1px; font-size:smaller;">Dislike</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>