Hello, I coded my own website. But I need some help with the unordered list part.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>HSP | Ranks</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div class="wrapper">
<a href="index.html">
<img class="logo" src="img/logohsp.png" alt="HSP HardendSteelPants LOGO">
</a>
<a href="index.html">
<h1>Hardened <span class="highlight">Steel </span>Pants</h1>
</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="about.html">About us</a></li>
<li class="current"><a href="ranks.html">Ranks</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</nav>
</div>
</header>
<div class="joinindex">
<center>
<H1>Ranks</H1>
</center>
</div>
<section class="ranks">
<ul>
<li><h3 class="achievableranks">Achievable Ranks:</h3></li>
<li><h3 class="staffranks">Staff Ranks:</h3></li>
<li><h3 class="buyableranks">Buyable Ranks:</h3></li>
</ul>
<ul class="rank123">
<li><p class="rank1">Recruit</p></li>
<li><p class="rank2">Leader</p></li>
<li><p>Donator</p></li>
</ul>
<ul class="rank123">
<li><p class="rank3">Fighter</p></li>
<li><p class="rank4">Co-Leader</p></li>
</ul>
<ul class="rank123">
<li><p class="rank5">Knight</p></li>
<li><p class="rank6">Administrator</p></li>
</ul>
<ul class="rank123">
<li><p class="rank7">God</p></li>
<li><p class="rank8">Moderator</p></li>
</ul>
<ul class="rank123">
<li><p class="rank9">Titan</p></li>
<li><p class="rank10">Helper</p></li>
</ul>
<ul class="rank123">
<li><p class="rank11">Youtuber</p></li>
<li><p class="rank12">Developer</p></li>
<ul class="rank123">
<li><p class="rank13">Streamer</p></li>
<li><p class="rank14">Graphics Designer</p></li>
</ul>
</section>
<div class="noteranks">
<P>NOTE! Asking for higher ranks will result a Permanent Ban!</P>
</div>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
CSS CODE:
/* Ranks */
.ranks{
background-color: #222;
font-family: 'Righteous', cursive;
font-size: 18px;
font-weight: bold;
color: #cccccc;
text-align: center;
padding-top: 25px;
}
section ul li{
display: inline-block;
}
.achievableranks{
text-align: left;
padding-right: 600px
}
.staffranks{
text-align: center;
padding-right: 600px;
}
/* RANK LIST*/
.rank1{
text-align: left;
padding-right: 700px
}
.rank2{
text-align: center;
padding-right: 700px;
}
.rank3{
text-align: left;
padding-right: 700px;
}
.rank4{
text-align: left;
padding-right: 700px;
}
.rank5{
text-align: left;
padding-right: 700px
}
.rank6{
text-align: center;
padding-right: 700px;
}
.rank7{
text-align: left;
padding-right: 700px
}
.rank8{
text-align: center;
padding-right: 700px;
}
.rank9{
text-align: left;
padding-right: 700px
}
.rank10{
text-align: center;
padding-right: 700px;
}
.rank11{
text-align: left;
padding-right: 700px
}
.rank12{
text-align: center;
padding-right: 700px;
}
.rank13{
text-align: left;
padding-right: 700px
}
.rank14{
text-align: center;
padding-right: 700px;
}
/* NOTE */
.noteranks{
background-color: #222;
font-family: 'Righteous', cursive;
font-size: 10px;
font-weight: bold;
color: #cccccc;
text-align: center;
padding-top: 45px;
}
I want the ranks do be straight under each other now they look ugly.
I want it like this:
Achievable Ranks: Staff Ranks: Buyable Ranks:
Rank1 Rank1 Rank1
Rank2 Rank2 Rank2
Rank3 Rank3 Rank3
Rank4 Rank4 Rank4
Rank5 Rank5 Rank5
My website:Still work in progress!