Kissanime Template
Kissanime homepage recreation :]
I recreated the Kissanime homepage for my anime log page and figured I'd share the code with everyone in case anyone wants it :] Uh please keep in mind I am not the greatest at HTML/CSS and I just kind of did my best LOL this page is NOT mobile compatible.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kissanime.ru</title>
<link href="anime.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!-- HI! Welcome to the inside of Overwinters Kissanime recreation :] -->
<!-- This was coded by Kelso on March 21st 2025 -->
<!-- Below is the "header" section, this includes everything down to the nav bar -->
<div class = "header">
<!-- I made this Kissanime logo myself, but you could always make your own or use one of their "official" ones -->
<img class = "logo" src = "newkissanimelogo.png">
<div class = "headerstack">
<div class = "login"><img src = "kalogin.png">Please <a href = "blank">login</a> or <a href = "blank">register</a></div><br><br><br>
<div class = "button">SEARCH</div>
<div class = "textfield">
<input type="text">
</div><br><br>
<p><img height = 15px; src = "kamagnifyingglass.png"> Advanced Search</p>
</div>
</div>
<!-- This is the navigation bar, I don't use any of these as links, but you could! -->
<div class = "tabbar">
hi
<div class = "buttons">
<div class = "barbutton">
<b>Home</b>
</div>
<div class = "barbuttongray">
<b>Anime list</b>
</div>
<div class = "barbuttongray">
<b>MOBILE</b>
</div>
<div class = "barbuttongray">
<b>Report/Request</b>
</div>
<div class = "barbuttongray">
<b>Forum</b>
</div>
<div class = "barbuttongray">
<b>Read Manga</b>
</div>
<div class = "barbuttongray">
<b>Read Novel</b>
</div>
<div class = "barbuttongray">
<b>Watch Drama</b>
</div></div>
<div class = "greenbar">
<div class = "bartext">
Register for MORE options | Upcoming anime
</div>
</div>
</div>
<!-- This table is where the majority of the content exists. It is divided into two columns, the main left one, and the smaller right one -->
<table class = "maintable">
<tr>
<!-- Left column starts here -->
<td class = "maincol">
<!-- This is the big box with the spotlighted anime -->
<div class = "highlightbox">
<img height = 225px class = "imgfloat" src = "https://cdn.myanimelist.net/images/anime/1648/126110l.jpg">
<h1>I'm the Villainess, So I'm Taming the Final Boss</h1><br>
<div class = "genres">
Genres: <a href = "blank">Comedy, Fantasy, Romance, Isekai, Villainess</a>
</div><br>
<div class = "description">
Aileen Lauren Dautriche's life changes forever on the day her engagement with the crown prince Cedric Jeanne Elmir is nullified so he can be together with Lilia Rainworth. The event triggers Aileen's memories from her past life—she has been reincarnated in an otome game as the villainess, who is destined to die in the final act. To prevent her predetermined demise, Aileen has only one option: to court the game's last boss, Claude Jeanne Elmir—the proclaimed "Demon King" and Cedric's half-brother—and marry him.<br><br> However, it is easier said than done, as Claude distrusts her intentions. Instead of giving up, Aileen adamantly tries to win his heart by helping Claude fulfill his wish: to build peace between humankind and demonic beasts. But time is running out, and it is up to Aileen to change the course of not only her tragic ending but Claude's as well.
</div>
</div><br>
<!-- This is the box with five anime labeled "latest update" -->
<div class = "sidebox">
<div class = "title"><h3>Latest update</h3></div>
<img class = "titlearrow" src = "kaarrow.gif">
<div class = "mangarow">
<div class = "mangaupdate">
<img height = 200px; src = "https://cdn.myanimelist.net/images/anime/1648/126110l.jpg">
<div class = "bottomtext"><a href = "blank">I'm the Villainess, So I'm Taming the Final Boss</a></div>
</div>
<div class = "mangaupdate">
<img height = 200px; src = "https://cdn.myanimelist.net/images/anime/1299/117604l.jpg">
<div class = "bottomtext"><a href = "blank">Neon Genesis Evangelion</a></div>
</div>
<div class = "mangaupdate">
<img height = 200px; src = "https://cdn.myanimelist.net/images/anime/1553/133767l.jpg">
<div class = "bottomtext"><a href = "blank">Buddy Daddies</a></div>
</div>
<div class = "mangaupdate">
<img height = 200px; src = "https://cdn.myanimelist.net/images/anime/1906/121592l.jpg">
<div class = "bottomtext"><a href = "blank">Black Lagoon</a></div>
</div>
<div class = "mangaupdate">
<img height = 200px; src = "https://cdn.myanimelist.net/images/anime/1408/127129l.jpg">
<div class = "bottomtext"><a href = "blank">Do It Yourself!!</a></div>
</div>
</div>
</div><br>
<!-- This is the nav menu above the top 10 box -->
<div class = "barbutton"><b>Favorites</b></div>
<div class = "barbuttongray"><b>Recent additions</b></div>
<div class = "barbuttongray"><b>Most popular</b></div>
<!-- This is the top 10 box -->
<div class = "top10">
<div class = "top3">
<img class = "ranking" src = "ka1.png">
<img class = "topimg" height = 150 src = "https://cdn.myanimelist.net/images/anime/11/55225l.jpg">
<h2><br>Madoka Magica</h2><br>
<div class = "genres2">Genre: <a href = "blank">Drama, Suspense, Mahou Shoujo, Psychological</a></div><br>
<div class = "genres2">Rating: <a href = "blank">10/10</a></div>
</div>
<div class = "top2">
<img class = "ranking" src = "ka2.png">
<img class = "topimg" height = 150 src = "https://cdn.myanimelist.net/images/anime/8/77966l.jpg">
<h2><br>Assassination Classroom</h2><br>
<div class = "genres2">Genre: <a href = "blank">Action, Comedy, School</a></div><br>
<div class = "genres2">Rating: <a href = "blank">8/10</a></div>
</div>
<div class = "top3">
<img class = "ranking" src = "ka3.png">
<img class = "topimg" height = 150 src = "https://cdn.myanimelist.net/images/anime/1906/121592l.jpg">
<h2><br>Black Lagoon</h2><br>
<div class = "genres2">Genre: <a href = "blank">Action, Organized Crime</a></div><br>
<div class = "genres2">Rating: <a href = "blank">9/10</a></div>
</div>
<div class = "top2">
<img class = "ranking" src = "ka4.png">
<img class = "topimg" height = 150 src = "https://cdn.myanimelist.net/images/anime/1622/111483l.jpg">
<h2><br>O' Maidens in Your Savage Season</h2><br>
<div class = "genres2">Genre: <a href = "blank">Drama, Romance, School</a></div><br>
<div class = "genres2">Rating: <a href = "blank">9/10</a></div>
</div>
<div class = "top3">
<img class = "ranking" src = "ka5.png">
<img class = "topimg" height = 150 src = "https://cdn.myanimelist.net/images/anime/1553/133767l.jpg">
<h2><br>Buddy Daddies</h2><br>
<div class = "genres2">Genre: <a href = "blank">Action, Comedy, Childcare, Organized Crime</a></div><br>
<div class = "genres2">Rating: <a href = "blank">10/10</a></div>
</div>
</div>
</td>
<td></td>
<!-- Side column starts here -->
<td class = "sidecol">
<!-- This is the mini "Kissanime" box at the top of the right column -->
<div class = "sidebox">
<div class = "title"><h3>KissAnime</h3></div>
<img class = "titlearrow" src = "kaarrow.gif">
<div class = "sidetext"> This webpage is a re-creation of the now defunct anime piracy site Kissanime where (checks statute of limitations) I spent my childhood watching anime with massive incorrect yellow subtitles. Unfortunately you can not watch anime here, but you <i>can</i> listen to me talk about the anime <i>I</i> have watched.</div>
</div><br>
<!-- This is the "ongoing series" box -->
<div class = "sidebox">
<div class = "title"><h3>Ongoing Series</h3></div>
<img class = "titlearrow" src = "kaarrow.gif">
<div class = "sidetext">
<img src = "kapaperclip.png"><a href = "blank"> O' Maidens in Your Savage Season</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Beastars</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Black Lagoon</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Buddy Daddies</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Death Note</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Do It Yourself!!</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Vampire Knight</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Princess Jellyfish</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Madoka Magica</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Ouran High School Host Club</a><br>
<img src = "kapaperclip.png"><a href = "blank"> My Dress-Up Darling</a><br>
<img src = "kapaperclip.png"><a href = "blank"> Sword Art Online</a><br>
</div>
</div>
</td>
</tr>
</table>
</body>CSS
body {
background-color: #161616;
background-image: url(kabg.gif);
font-family: sans-serif;
}
.header {
width: 70%;
margin-left: auto;
margin-right: auto;
}
.logo {
float: left;
}
.login {
color: white;
float: right;
font-family: sans-serif;
background-color: #353535;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
border-radius: 5px;
}
a {
color: #D5F406;
text-decoration: none;
font-weight: normal;
}
.textfield {
float: right;
}
.button {
color: white;
float: right;
background-color: #6BAC01;
padding: 5px;
border-radius: 5px;
}
input {
height: 20px;
width: 300px;
margin-right: 5px;
background-color: #353535;
}
p {
color: #D5F406;
float: right;
}
.tabbar {
background-color: #353535;
margin-top: 50px;
color: #353535;
height: 45px;
}
.barbutton {
color: white;
background-color: #6BAC01;
width: 115px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-size: 12px;
border-radius: 5px 5px 0px 0px;
float: left;
}
.barbuttongray {
color: black;
background-color: #D2D2D2;
width: 115px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-size: 12px;
border-radius: 5px 5px 0px 0px;
float: left;
margin-left: 2px;
}
.buttons {
margin-left: 15%;
}
.greenbar {
background-color: #6BAC01;
margin-top: 24px;
}
.bartext {
color: white;
font-size: 12px;
padding: 5px;
margin-left: 250px;
}
.maintable {
margin-left: auto;
margin-right: auto;
width: 70%;
margin-top: 2%;
vertical-align: top;
}
.maincol {
width: 75%;
vertical-align: top;
}
.sidecol {
width: 23%;
vertical-align: top;
}
.highlightbox {
background-color: #353535;
padding: 7px;
height: 225px;
}
.imgfloat {
float: left;
}
h1 {
color: #D5F406;
margin: 0;
margin-left: 175px;
font-weight: normal;
font-size: 30px;
letter-spacing: -2px;
}
.genres {
color: #828282;
margin-left: 175px;
font-size: 12px;
}
.description {
color: white;
font-size: 12px;
margin-left: 175px;
}
.sidebox {
color: white;
background-color: #1A1A1A;
border-color: #828282;
border-style: solid;
border-width: 1px;
}
.title {
background-color: #6BAC01;
}
h3 {
margin: 0;
letter-spacing: -2px;
font-weight: normal;
font-size: 25px;
margin-left: 10px;
font-size: 20px;
}
.titlearrow {
position:absolute;
}
.sidetext {
margin: 10px;
margin-top: 15px;
font-size: 12px;
font-weight: bold;
}
.mangarow {
padding: 10px;
height: 230px;
}
.mangaupdate {
font-size: 12px;
text-align: center;
float: left;
margin: 5px;
width: 18%;
}
.top10 {
margin-top: 23px;
color: white;
border-color: #828282;
border-style: solid;
border-width: 1px;
}
.top1 {
height: 165px;
background-color: #111111;
}
.topimg {
float: left;
margin-left: 15px;
}
h2 {
margin: 0;
margin-left: 140px;
margin-top: 15px;
color: #D5F406;
font-weight: normal;
letter-spacing: -1px;
font-size: 16px;
}
.genres2 {
color: #828282;
margin-left: 140px;
font-size: 12px;
}
.ranking {
float: right;
margin-right: 10px;
margin-top: 10px;
}
.top2 {
height: 165px;
background-color: #161616;
margin-top: -15px;
}
.top3 {
height: 165px;
background-color: #111111;
margin-top: -15px;
}
h4 {
color: #D5F406;
margin: 0;
margin-left: 10px;
font-weight: normal;
font-size: 30px;
letter-spacing: -2px;
}
.genres3 {
color: #828282;
margin-left: 10px;
font-size: 12px;
}
.description2 {
color: white;
font-size: 12px;
margin-left: 10px;
}Files
anime.css, kissanime.html, images zip
