rusty's profile picture

Published by

published
updated

Category: Web, HTML, Tech

jumpcut character card template code thingie

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>


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )