was unsure of where else to put this, so here, sorry if it looks a bit wonky
this is what it should look like
(please be sure to read the comment put near the bottom)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
display: grid;
background-color: silver;
margin: auto;
width: 700px;
height: 700px;
color: white;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 0px;
height: 100%;
}
#name {
text-align: center;
background-color: blue;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 15;
}
#stuff {
text-align: center;
font-size: 20px;
background-color: dimgray;
grid-row-start: 4;
grid-column-start: 2;
grid-row-end: 5;
grid-column-end: 13;
}
#desc {
background-color: gray;
grid-row-start: 6;
grid-column-start: 3;
grid-row-end: 11;
grid-column-end: 12;
}
#like-a {
text-align: center;
background-color: dimgray;
grid-row-start: 12;
grid-column-start: 3;
grid-row-end: 12;
grid-column-end: 7;
}
#like-b {
text-align: center;
background-color: gray;
grid-row-start: 13;
grid-column-start: 3;
grid-row-end: 15;
grid-column-end: 7;
}
#dislike-a {
text-align: center;
background-color: dimgray;
grid-row-start: 12;
grid-column-start: 8;
grid-row-end: 13;
grid-column-end: 12;
}
#dislike-b {
text-align: center;
background-color: gray;
grid-row-start: 13;
grid-column-start: 8;
grid-row-end: 15;
grid-column-end: 12;
}
#character {
background-color: blue;
grid-row-start: 2;
grid-column-start: 14;
grid-row-end: 20;
grid-column-end: 19;
}
</style>
<p>
<!--v name v-->
<div class="card">
<div id="name">
<p style="font-size:20px">
name
</p>
</div>
<div id="stuff">
?/? - jan 1 - 0'0"
</div>
<!--v desc v-->
<div id="desc">
-text︎ ︎<p>︎ ︎︎ ︎-text <p>︎ ︎︎ ︎-text <p>︎ ︎︎ ︎-text
</div>
<div id="like-a">
like
</div>
<div id="like-b">
</br> (like)
</div>
<div id="dislike-a">
dislike
</div>
<div id="dislike-b">
</br> (dislike)
</div>
<div id="character">
<!--for the sake of proper sight of the box, ive turned it yellow, go to "#name" and replace the "blue" with "k21t17" to turn it transparent! (your character doesnt have to exactly fit the box since i planned for it to be transparent", this also applies for the name section-->
<img src="https://rustyo.nekoweb.org/character.png" width="170" height="500">
</div>
</div>
</div>
<p> <center> <h3> <a href="https://blog.spacehey.com/entry?id=1467073">code</a> </h3> </center>
</body>
</html>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )