html.de right

by Porexii

HTML

<!doctype html>
<html> 
  
<head>
        
        <link rel="stylesheet" href="main.css"> 
        
    </head>
    

<body>
    <h1> CodingVersuch</h1>
    </body>
    <div id="roboter">

<div id="kopf">

  <div class="auge" id="rechtesauge"></div>
  
  <div class="auge" id="linkesauge"></div>
  
  <div id="nase"></div>
  
  <div id="mund"></div>
  
  </div>
 
 <div class="arm" id="rechterarm"></div>
 
 <div id="rumpf"></div>
 
 <div class="arm" id="linkerarm"></div>
 
  <div class="arm" id="schriftzug"><p>
      <div id="whyami"> SUPREME</div>
     </div>
    </div>
    

</html>

CSS

body {
    font-family: Arial;
}
p {
    font-size: 1em;
}
.auge {
    background-color:blue;
    width:20%;
    height:20%;
    border-radius: 50%;
}
.arm {
    background-color: #cacaca;
    position: absolute;
    top: 35%;
    width: 5%;
    height: 40%;
}

#kopf {
    width:30%;
    height:30%;
    border-radius: 15%;
    background-color: #dadada;
    position: absolute;
    left: 33%;
    top: 5%;
}
#rechtesauge {
    position: absolute;
    left: 20%;
    top: 20%;
}
#linkesauge {
    position: absolute;
    left: 60%;
    top: 20%;
}
#nase {
    position: absolute;
    left: 45%;
    top: 50%;
    width: 10%;
    height: 10%;
    background-color: black;
}
#mund {
    position: absolute;
    width: 65%;
    height: 15%;
    left: 20%;
    top: 70%;
    background-color: red;
}
#rumpf {
    position: absolute;
    left: 25%;
    top: 35%;
    width: 45%;
    height: 55%;
    background-color: #dadada;
    text-align:center;
    padding-top: 30px;
}

#rechterarm {
    position:absolute;
    left:20%;
}
#linkerarm {
    position: absolute;
    left: 70%;
}
#schriftzug {
  position: absolute;
  left:33%;
  top:40%;
  width:30%;
  height:20%;
  background-color:red;
  text-align:center;
  
  }
#whyami {

 top:100px; 
 left:108px;
 font-size: 25px;
 font-weight:bold;
 text-align:center;
    
}