Webleb - UI Elements

HTML

<!DOCTYPE html>

<html>

<head>

<title>Hamster</title>

</head>

<body>

<div>

</div>

<a class="new" >New Today</a>

<a class="memories" >Memories</a>

<a class="profit" href="#">Profit per hour</a>

<a class="tower" >Tower Defence</a>

<a class="count" >Count Master</a>

<a class="stone" >Stone Age</a>

<img class="diamond1" src="/Loading/Hamster /images2/diamond.webp" alt="Diamond"> 0

</div>

</div>

</body>

</html>

CSS

*{
 
  margin: 0;
  
}

body{
  background-color: black;
}

.border{
      display: fixed;
      position: fixed;
      width: 430px;
      height: 800px;
      background-color: #2C2929;
      border: 3px solid #0AFFF3;
      box-shadow: 0 0 50px #0AFFF3;
      border-radius: 40px;
      margin: 50px auto;
      left: -6px;
      top: 80px;
}

.border1{
  position: fixed;
  display: fixed;
  height: 45px;
  width: 240px;
  border:2px solid #4D4D5B;
  background-color: #4D4D5B;
  border-radius: 50px;
  margin-left: 10px;
  margin-top: 10px;
}

.border2 {
  position: fixed;
  display: fixed;
  height: 45px;
  width: 130px;
  border: 2px solid #0300FF;
  box-shadow: 0 0 20px ;
  background-color: #4D4D5B;
  border-radius: 50px;
  margin-left: 275px;
  margin-top: 10px;
}

.memories{
  position: fixed;
  text-decoration: none;
  color: #D0D0D8;
  margin-left: 330px;
  margin-top: 25px;
}

.profit{
  position: absolute;
  text-decoration: none;
  margin-top: 15px;
  margin-left: 100px;
  color: #BFC0CE;
  font-size: 0.8em;
}

.memories1{
  position: absolute;
  background: transparent;
  height: 40px;
  border-radius: 50%;
  margin-left: 280px;
  margin-top: 15px;
}

.border3{
  position: absolute;
  height: 130px;
  width: 120px;
  border: 2px solid #3B3B40;
  
  background-color: #3B3B40;
  border-radius: 20px;
  margin-left: 10px;
  margin-top: 130px;
}

.border4{
  position: absolute;
  height: 130px;
  width: 120px;
  border: 2px solid #3B3B40;
  box-shadow: 0 0 20px;
  background-color: #3B3B40;
  border-radius: 20px;
  margin-left: 150px;
  margin-top: 130px;
}

.border5 {
  position: absolute;
  height: 130px;
  width: 120px;
  border: 2px solid #3B3B40;
  
  background-color: #3B3B40;
  border-radius: 20px;
  margin-left: 290px;
  margin-top: 130px;
}

.new{
  position: absolute;
  color: white;
  margin-top: 90px;
  margin-left: 180px;
  font-weight: bolder;
}

.border6{
  position: absolute;
  height: 300px;
  width: 300px;
  background: #535FE0;
  border: 15px solid #382BFF;
  border-radius: 50%;
  margin-top: 330px;
  margin-left: 50px;
}

.game{
  position: absolute;
  height: 85px;
  width: 110px;
  margin-top: 140px;
  margin-left: 17px;
  border-radius: 10px;
}

.tower{
  position: absolute;
  color: white;
  margin-top: 230px;
  margin-left: 35px;
  font-weight: bolder;
  font-size: 0.8em;
}

.count{
  position: absolute;
  color: white;
  margin-top: 230px;
  margin-left: 179px;
  font-weight: bolder;
  font-size: 0.8em;
}

.game1{
  position: absolute;
  height: 85px;
  width: 110px;
  margin-top: 140px;
  margin-left: 157px;
  border-radius: 10px;
}

.game2{
  position: absolute;
  height: 85px;
  width: 110px;
  margin-top: 140px;
  margin-left: 297px;
  border-radius: 10px;
}

.stone{
  position: absolute;
  color: white;
  margin-top: 230px;
  margin-left: 325px;
  font-weight: bolder;
  font-size: 0.8em;
}

.game5 {
  position: absolute;
  color: white;
  margin-top: 315px;
  margin-left: 330px;
  font-weight: 350;
  font-size: 0.8em;
}

.game3{
  position: absolute;
  color: #C4C6D3;
  margin-top: 245px;
  margin-left: 60px;
  font-weight: 400;
  font-size: 0.8em;
}

.game4{
  position: absolute;
  color: #C4C6D3;
  margin-top: 245px;
  margin-left: 200px;
  font-weight: 400;
  font-size: 0.8em;
}

.game5{
  position: absolute;
  color: #C4C6D3;
  margin-top: 245px;
  margin-left: 340px;
  font-weight: 400;
  font-size: 0.8em;
}

.diamond{
  position: absolute;
  height: 25px;
  background-color: transparent;
  margin-top: 30px;
  margin-left: 75px;
}

.border7{
  position: absolute;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  margin-top: 400px;
  margin-left: 50px;
}

.diamond1{
  position: absolute;
  display: inline;
  height: 35px;
  background-color: transparent;
  margin-top: -3px;
  margin-left: -50px;
}

.circle{
  position: absolute;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  margin-top: 350px;
  margin-left: 65px;
}

#score{
  position: absolute;
  display: inline;
  color: white;
  margin-top: 280px;
  margin-left: 160px;
  font-weight: bolder;
  font-size: 2em;
}

.header {
  
  display: fixed;
  justify-content: space-between;
  align-items: center;
  margin-top: -10px;
}
        
.header img {
  display: fixed;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: 30px;
}

.header div {
  flex-grow: 1;
  text-align: left;
  margin-left: 10px;
}

.header div h2 {
  display: fixed;
  color: white;
  margin-top: -30px;
  font-size: 1.2em;
  margin-left: 50px;
  font-weight: bolder;
}

.header div p {
  font-weight: bolder;;
  font-size: 1em;
  color: white;
  margin-left: 130px;
  margin-top: -17px;
}

.border8{
  display: fixed;
  position: absolute;
  height: 60px;
  width: 420px;
  background: #656784;
  border: square;
  margin-top: 690px;
}

.binance{
  display: fixed;
  position: fixed;
  height: 50px;
  width: 50px;
  background-color: transparent;
  margin-top: 695px;
  margin-left: 10px;
}

.coin{
  display: fixed;
  position: fixed;
  height: 60px;
  width: 60px;
  background-color: transparent;
  margin-top: 695px;
  margin-left: 190px;
}

.joystick{
  display: fixed;
  position: fixed;
  height: 60px;
  width: 60px;
  background-color: transparent;
  margin-top: 695px;
  margin-left: 100px;
}

.share{
  display: inline;
  position: fixed;
  height: 100px;
  width: 100px;
  background-color: transparent;
  margin-top: 675px;
  margin-left: 270px;
}

.diamond0{
  display: inline;
  position: fixed;
  height: 90px;
  width: 100px;
  background-color: transparent;
  margin-top: 680px;
  margin-left: 330px;
}

.binance1{
  display: inline;
  position: fixed;
  height: 40px;
  width: 40px;
  background-color: transparent;
  margin-top: 15px;
  margin-left: 20px;
}

.setting {
  display: inline;
  position: fixed;
  height: 30px;
  width: 30px;
  background-color: transparent;
  margin-top: 20px;
  margin-left: 215px;
}

.pppp{
  position: absolute;
  font-weight: bolder;
  color: white;
  margin-top: 35px;
  margin-left: 120px;
}

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS