How to Make Doraemon with HTML and CSS

by ImdadullahJune 01, 2020


With Follow these steps you can make Doraemon Cartoon with HTML and CSS



Steps: 
  • Open your Text editor Tool
  • Make index.html and style.css
  • Now Write HTML Basic Structure and link the css
  • Now Download the File from From Here
  • All set Now Paste the Downloaded File to your Directory
  • And now copy these code given below and paste it to your  HTML file.

For HTML:-

<!DOCTYPE html>
<html lang="ja">
<link rel="stylesheet" type="text/css" href="doraemon.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <div id="doraemon">
        <div id="face">
            <div id="head_light"></div>


            <div id="eyes">
                <div class="eye eye_left"></div>
                <div class="black_eye black_left"></div>

                <div class="eye eye_right"></div>
                <div class="black_eye black_right"></div>
            </div>

            <div id="base">
                <div id="base_white"></div>
                <div id="nose">
                    <div id="nose_light"></div>
                </div>
                <div id="nose_line"></div>
                <div id="mouth"></div>
                <div id="mouth_rewrite"></div>
                <div id="firefox_mouth"></div>

                <div class="whiskers whi_right_top rotate160"></div>
                <div class="whiskers whi_right"></div>
                <div class="whiskers whi_right_bottom rotate20"></div>

                <div class="whiskers whi_left_top rotate20"></div>
                <div class="whiskers whi_left"></div>
                <div class="whiskers whi_left_bottom rotate160"></div>
            </div>

        </div>


        <div id="choker">
            <div id="belt"></div>
            <div id="bell">
                <div id="bell_line"></div>
                <div id="bell_circle"></div>
                <div id="bell_under"></div>
                <div id="bell_light"></div>
            </div>
        </div>


        <div id="body">
            <div id="doutai"></div>
            <div class="base_white2 doutai_center"></div>
            <div id="pocket">
                <div id="circle"></div>
                <div id="circle_rewrite"></div>
            </div>
        </div>


        <div id="hand_right">
            <div id="arm_right"></div>
            <div class="hand_circle hand_right"></div>
            <div class="arm_rewrite_right"></div>
        </div>


        <div id="hand_left">
            <div id="arm_left"></div>
            <div class="hand_circle hand_left"></div>
            <div class="arm_rewrite_left"></div>
        </div>


        <div id="foot">
            <div id="foot_left"></div>
            <div id="foot_right"></div>
            <div id="foot_rewrite"></div>
        </div>


        <div id="shadow_doutai_arm"></div>
        <div id="shadow_doutai_left"></div>
        <div id="shadow_doutai_right"></div>
        <div id="shadow_belt"></div>
    </div>
</body>

</html>


For CSS:-

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#doraemon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



If you face any problem with these Steps you can follow this Video.