Html Kodu:
Kod:
<html>
<head>
<link rel="stylesheet" href="css/menü.css">
<script src="https://kit.fontawesome.com/930f8b0f45.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="bodymt">
<a href="#"><img src="https://i.ya-webdesign.com/images/red-wolf-png.png" style="width: 100px;border: 1px solid lime" ></a>
<div class ="menübody" >
<ul>
<li><a href="#home"><i class="fas fa-comments"></i> Forum</a></li>
<li><a href="#contact"><i class="fas fa-address-card"></i> Üyeler</a></li>
<li><a href="#about"><i class="fas fa-align-justify"></i> Yönetim</a></li>
<li><a href="#news"><i class="fas fa-arrow-alt-circle-down"></i> Giriş Yap</a></li>
</ul>
</div>
<div class="menübody-1">
<ul>
<li><a href="#home"><i class="fas fa-comments"></i> Kullanıcı Paneli</a></li>
<li><a href="#contact"><i class="fas fa-address-card"></i> Admin Panel</a></li>
<li><a href="#news"><i class="fas fa-power-off"></i> Çıkış Yap</a></li>
</ul>
</div>
</div>
</body>
</html>Css Kodu:
Kod:
#bodymt{
align-content: center;
margin: auto;
text-align: center;
background: linear-gradient(45deg, #232323, #060606f2);
padding: 4px; border: solid #007716 1px;
}
.menübody {
margin: auto;
height: 100%;
width: 80%;
display: block;
padding: 23px;
color: green;
font-family: monospace;
font-size: 15px;
text-align: center;
}
.menübody-1{
margin: auto;
height: 100%;
width: 80%;
display: block;
padding: 10px;
padding-top: 17px;
padding-bottom: 17px;
color: green;
font-family: monospace;
font-size: 15px;
text-align: center;
}
.menübody ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menübody ul li {
display: inline;
}
.menübody ul li a{
padding: 8px;
border: solid #007716 1px;
text-decoration: none;
color: green;
}
.menübody ul li a:hover {
border-color: #03ff03;
color: #03ff03;
}
.menübody-1 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menübody-1 ul li {
display: inline;
}
.menübody-1 ul li a{
padding: 8px;
border: solid #007716 1px;
text-decoration: none;
color: green;
}
.menübody-1 ul li a:hover {
border-color: #03ff03;
color: #03ff03;
}Önizleme:
https://codepen.io/Rankings/pen/YzwYReP
