How To Create Thanos css

Hello Friend's, this post will explain you how to create a  Thanos using  HTML and CSS,  I want to explain how to design  Thanos with CSS, HTML .   Just take a quick look at these two steps, use it and make your own  Thanos.

HTML Code 

<div class="face-container">
  <div class="eyebrow-left"></div>
  <div class="eyebrow-right"></div>
  <div class="eye-left">
    <div class="pupil"></div>
  </div>
  <div class="eye-right">
    <div class="pupil"></div>
  </div>
  <div class="mouth">
    <div class="tongue"></div>
    <div class="teeth-upper"></div>
    <div class="teeth-lower"></div>
  </div>
  <div class="ear-left"></div>
  <div class="ear-right"></div>
  <div class="chin">
    <div class="line line-01"></div>
    <div class="line line-02"></div>
    <div class="line line-03"></div>
    <div class="line line-04"></div>
  </div>
</div>
<div class="neck"></div>
<div class="neck-top"></div>
<div class="vest-top"></div>
<div class="vest-torso"></div>
<div class="vest-waist"></div>

<div class="shoulder-sides"></div>
<div class="shoulder-left">
  <div class="arm"></div>
</div>
<div class="forearm-left">
  <div class="thumb"></div>
  <div class="knuckle knuckle-01"></div>
  <div class="knuckle knuckle-02"></div>
  <div class="knuckle knuckle-03"></div>
  <div class="knuckle knuckle-04"></div>
</div>
<div class="shoulder-right">
  <div class="arm"></div>
</div>

<div class="gauntlet-container">
  <div class="knuckle"></div>
  <div class="thumb"></div>
  <div class="wrist">
    <div class="inner"></div>
  </div>
  <div class="stone-holder stone-01">
    <div class="stone"></div>
  </div>
  <div class="stone-holder stone-02">
    <div class="stone"></div>
  </div>
  <div class="stone-holder stone-03">
    <div class="stone"></div>
  </div>
  <div class="stone-holder stone-04">
    <div class="stone"></div>
  </div>
  <div class="stone-holder stone-05">
    <div class="stone"></div>
  </div>
  <div class="stone-holder stone-06">
    <div class="stone"></div>
  </div>
</div>
<div class="hips">
  <div class="leg-left"></div>
  <div class="leg-right"></div>
  <div class="boot-left"></div>
  <div class="boot-right"></div>
  <div class="boot-left-top"></div>
  <div class="boot-right-top"></div>
  <div class="foot-left"></div>
  <div class="foot-right"></div>
</div>

CSS Code 

.face-container {
  width: 68px;
  height: 100px;
  background: #BA4F8F;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 41px;
  border-radius: 120px 120px 120px 120px;
}
.face-container .eye-left,
.face-container .eye-right {
  width: 10px;
  height: 10px;
  background: #842963;
  position: absolute;
  border-radius: 30%;
  top: 33px;
}
.face-container .eye-left .pupil,
.face-container .eye-right .pupil {
  width: 5px;
  height: 5px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50% 50% 0 0;
  margin: auto;
}
.face-container .eye-left {
  left: 20px;
}
.face-container .eye-right {
  right: 20px;
}
.face-container .eyebrow-left,
.face-container .eyebrow-right {
  width: 20px;
  height: 4px;
  background: #842963;
  position: absolute;
  top: 30px;
}
.face-container .eyebrow-left {
  left: 11px;
  transform: rotate(20deg);
}
.face-container .eyebrow-right {
  right: 11px;
  transform: rotate(-20deg);
}
.face-container .mouth {
  width: 40px;
  height: 18px;
  background: #371630;
  position: absolute;
  top: 60px;
  left: 14px;
  border-radius: 2px 2px 12px 12px;
  overflow: hidden;
  z-index: 40;
}
.face-container .mouth .teeth-upper,
.face-container .mouth .teeth-lower {
  position: absolute;
  background: #fff;
  left: 0;
  width: 100%;
  height: 4px;
}
.face-container .mouth .teeth-upper {
  top: 0;
}
.face-container .mouth .teeth-lower {
  bottom: 0;
}
.face-container .mouth .tongue {
  width: 20px;
  height: 6px;
  background: #BA4F8F;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.face-container .ear-left,
.face-container .ear-right {
  width: 10px;
  height: 20px;
  background: #BA4F8F;
  position: absolute;
  border-radius: 20px;
  top: 50px;
}
.face-container .ear-left {
  left: -5px;
}
.face-container .ear-right {
  right: -5px;
}
.face-container .chin {
  width: 90px;
  height: 64px;
  background: #BA4F8F;
  position: absolute;
  top: 50px;
  left: -10px;
  border-radius: 30px 30px 40px 40px;
  z-index: 20;
  overflow: hidden;
  border-bottom: 6px solid #842963;
}
.face-container .chin .line {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 30px;
  background: #842963;
}
.face-container .chin .line-01 {
  left: 26px;
  height: 26px;
}
.face-container .chin .line-02 {
  left: 37px;
}
.face-container .chin .line-03 {
  right: 26px;
  height: 26px;
}
.face-container .chin .line-04 {
  right: 37px;
}

.neck {
  width: 105px;
  height: 60px;
  background: #BA4F8F;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 110px;
  border-radius: 20px;
  z-index: 10;
}

.neck-top {
  width: 125px;
  height: 92px;
  background: #efc400;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 106px;
  border-radius: 25px;
  z-index: 9;
}

.vest-top {
  width: 250px;
  height: 162px;
  background: #354255;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 110px;
  border-radius: 50px 50px 25px 25px;
  z-index: 8;
}

.vest-torso {
  width: 26px;
  height: 87px;
  background: #efc400;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 198px;
  z-index: 9;
}

.vest-waist {
  width: 80px;
  height: 16px;
  background: #efc400;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 269px;
  z-index: 9;
}

.shoulder-sides {
  width: 298px;
  height: 90px;
  background: #efc400;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 129px;
  z-index: 7;
  border-radius: 30px;
}

.shoulder-left,
.shoulder-right {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background: #BA4F8F;
  margin: 0 auto;
  top: 130px;
  z-index: 6;
}
.shoulder-left .arm,
.shoulder-right .arm {
  position: relative;
  top: 90px;
  width: 50px;
  height: 95px;
  background: #BA4F8F;
}

.shoulder-left {
  left: -278px;
  right: 0;
}
.shoulder-left .arm {
  left: 20px;
  border-radius: 0px 0px 80px 200px;
}

.shoulder-right {
  right: -278px;
  left: 0;
}
.shoulder-right .arm {
  right: -28px;
  border-radius: 0px 0px 200px 80px;
}

.forearm-left {
  position: absolute;
  top: 235px;
  left: -162px;
  right: 0;
  margin: 0 auto;
  z-index: 300;
  background: #BA4F8F;
  width: 110px;
  height: 70px;
  transform: rotate(-11deg);
  border-radius: 0 30px 30px 0;
}
.forearm-left .knuckle,
.forearm-left .thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: absolute;
  background: #BA4F8F;
}
.forearm-left .thumb {
  top: -10px;
  left: 65px;
}
.forearm-left .knuckle-01 {
  top: -2px;
  left: 83px;
}
.forearm-left .knuckle-02 {
  top: 14px;
  left: 90px;
}
.forearm-left .knuckle-03 {
  top: 31px;
  left: 90px;
}
.forearm-left .knuckle-04 {
  top: 45px;
  left: 84px;
}

.hips {
  position: absolute;
  top: 284px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 110px;
  height: 45px;
  z-index: 6;
  background: #354255;
  border-radius: 0px 0px 22px 22px;
}
.hips .leg-left,
.hips .leg-right {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 35px;
  background: #354255;
}
.hips .leg-left {
  left: 5px;
}
.hips .leg-right {
  right: 5px;
}
.hips .boot-left,
.hips .boot-right {
  position: absolute;
  top: 85px;
  width: 45px;
  height: 48px;
  background: #efc400;
}
.hips .boot-left {
  left: 3px;
  transform: rotate(-3deg);
}
.hips .boot-right {
  right: 3px;
  transform: rotate(3deg);
}
.hips .boot-left-top,
.hips .boot-right-top {
  position: absolute;
  top: 83px;
  width: 54px;
  height: 8px;
  background: #8f4b00;
  border-radius: 3px;
}
.hips .boot-left-top {
  transform: rotate(-3deg);
  left: -3px;
}
.hips .boot-right-top {
  transform: rotate(3deg);
  right: -3px;
}
.hips .foot-left,
.hips .foot-right {
  position: absolute;
  top: 123px;
  width: 20px;
  height: 10px;
  background: #efc400;
}
.hips .foot-left {
  left: -10px;
  border-radius: 20px 0 0 0;
}
.hips .foot-right {
  right: -10px;
  border-radius: 0 20px 0 0;
}

.gauntlet-container {
  position: absolute;
  top: 230px;
  right: 0;
  left: 160px;
  margin: 0 auto;
  background: #fda700;
  height: 80px;
  width: 95px;
  transform: rotate(10deg);
  border-radius: 20px 0 0 20px;
  z-index: 300;
}
.gauntlet-container .thumb,
.gauntlet-container .knuckle {
  width: 30px;
  height: 25px;
  background: #fda700;
  border-radius: 50%;
  position: absolute;
}
.gauntlet-container .knuckle {
  top: -2px;
  left: -5px;
}
.gauntlet-container .thumb {
  top: -12px;
  left: 19px;
  width: 24px;
  height: 25px;
}
.gauntlet-container .wrist {
  position: absolute;
  top: 0;
  left: 93px;
  width: 7px;
  height: 80px;
  transform: rotate(1deg);
  background: #fda700;
}
.gauntlet-container .wrist .inner {
  width: 14px;
  height: 80px;
  background: #ffc800;
  position: absolute;
  top: 0;
  left: -14px;
}
.gauntlet-container .stone-holder {
  border-radius: 12px;
  width: 18px;
  height: 10px;
  position: absolute;
  transform: rotate(2deg);
  background: #ffc800;
}
.gauntlet-container .stone-holder .stone {
  width: 60%;
  height: 60%;
  border-radius: 30%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.gauntlet-container .stone-01 {
  top: 11px;
  left: 6px;
}
.gauntlet-container .stone-01 .stone {
  background: #bf00ae;
}
.gauntlet-container .stone-02 {
  top: 29px;
  left: 6px;
}
.gauntlet-container .stone-02 .stone {
  background: #6b00f5;
}
.gauntlet-container .stone-03 {
  top: 48px;
  left: 6px;
}
.gauntlet-container .stone-03 .stone {
  background: #ff0000;
}
.gauntlet-container .stone-04 {
  top: 65px;
  left: 6px;
}
.gauntlet-container .stone-04 .stone {
  background: #ff2600;
}
.gauntlet-container .stone-05 {
  top: 3px;
  left: 24px;
  width: 14px;
}
.gauntlet-container .stone-05 .stone {
  background: #00c54f;
}
.gauntlet-container .stone-06 {
  top: 31px;
  left: 36px;
  width: 33px;
  height: 35px;
  border-radius: 18px;
}
.gauntlet-container .stone-06 .stone {
  border-radius: 50%;
  background: #f0ff00;
}

Responsive Website Layout With CSS and HTML

Most of the modern day Websites use responsive web designs, now you must be thinking what responsive actually means, a responsive website can adapt different screen sizes and can adjust their design and layout accordingly.

In this tutorial, we will learn how to make a responsive website design using HTML and CSS but first, we will learn how a basic website layout looks like, see the below image

 The above-shown layout is a simple website layout we will first build the above layout and then we will convert it into a responsive one. The HTML frame for the layout is shown below

<!DOCTYPE html>
<html>
<head><title>Responsive</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="header-wrap">
        <div class="header">
            <!--header-->
        </div>
    </div>
    <div class="main-wrap">
        <div class="main-container">
            <div class="main" class="flt-left">
                <!--main-->
            </div>
            <div class="sidebar" class="flt-right">
                <!--sidebar-->
            </div>
            <div class="clear"></div>
        </div>    
    </div>
    <div class="footer-wrap">
        <div class="footer">
            <!--footer-->
        </div>
    </div>
</body>
</html>

Now let's do the designing part and give our boring HTML some colours.So lets make a CSS file named style.css and type the below code in it

body{
    margin:0;
    padding:0;
}
.flt-left{
    float:left;
}
.flt-right{
    float:right;
}
.clear{
    clear:both;
}
.header-wrap{
    width:100%;
}
.header{
    padding:20px 0 20px 0;
    background: lightcoral;
    max-width:1000px;
    margin:auto;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}
.main-wrap{
    width:100%;
    margin:0;
}
.main-container{
    max-width:1000px;
    margin:auto;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}
.main{
    width:73%;
    background:lightgreen;
    margin:0;
}
.sidebar{
    width:20%;
    background: lightsalmon;
    margin:0;
}
.footer-wrap{
 width:100%;
 margin:0;
 padding:0;
}
.footer{
 padding:20px 0 20px 0;
    background: lightcoral;
    max-width:1000px;
    margin:auto;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

Now we have successfully built our layout but it is still not responsive so we will make it responsive, make a new CSS file named response.css and type the below code in it

@media screen and (max-width: 700px){
 body{
  margin:0;
  padding:0
 }
 p{
  padding:0;
  margin:0;
 }
 .header{
  margin:auto;
  width:100%;
 }
 .main{
  float:none;
  margin:auto;
  width:100%;
  padding:20px 0 20px 0;
 }
 .sidebar{
  float:none;
  margin:auto;
  width:100%;
  padding:20px 0 20px 0;
 }
 
}

Now we have successfully built a responsive layout, the above layout will automatically adapt different screen sizes.

 Thank you for reading.

 leave a message on our Facebook page. You can also comment your questions below.

Also, don't forget to subscribe to our Newsletter.

If you like this article, then please share it and help us grow.