Connect with us!

Emoji Sloth Face using HTML and CSS tutorial for beginners using VSCode Editor

Salow
February 3, 2022
CSS

Sloth is one of the cute animal. Have you ever wondered how to create one using HTML5 and CSS3.

Have you ever wondered how to create one using HTML5 and CSS3.

The most important properties we use to create website card are:

The background property of CSS sets the background of an element.

The linear-gradient() property is a CSS function creates an image consisting of a progressive transition between two or more colors.

Here is the CSS class for implementing it.

Table of Contents

Emoji Sloth Face Code Block

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #head {
        border-radius: 50%;
        background-color: #eebc8c;
        width: 230px;
        height: 200px;
        box-shadow: 0px 18px 35px 0px rgba(0, 0, 0, 0.06);
        padding: 20px;
        position: relative;
        z-index: 100;
      }
      #face {
        border-radius: 50%;
        background-color: rgb(255, 255, 255);
        width: 210px;
        height: 180px;
        margin: auto;
        overflow: hidden;
      }
      #face-inside {
        width: 225px;
        margin: auto;
        text-align: center;
        font-weight: bold;
      }
      #eyebrows {
        width: 150px;
        margin: auto auto 6em auto;
      }
      #eyebrows:before,
      #eyebrows:after {
        width: 35px;
        height: 25px;
        border-radius: 100%;
        background: black;
        content: "";
        display: block;
      }
      #eyebrows:before {
        float: left;
      }
      #eyebrows:after {
        float: right;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Icon Design</h1>
    <div id="head">
      <div id="face">
        <div id="face-inside">
          <div id="hair"></div>
          <div id="eyebrows"></div>
          <h1>ㅅ</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Here is the output:

Sloth using HTML and CSS

Video Tutorial for creating Sloth Emoji

Emoji Sloth

Thank you for reading this article. I hope that it helps you creating your own sloth emoji using CSS and HTML. Good luck and happy coding !