Assignment - Create your own cat

Lane11 · September 11, 2021, 8:39pm

@kenn.eth
Hi, I don’t know why but when I paste my html code for my cat into Philips template from GitHub, my cat doesn’t appear ??

kenn.eth · September 12, 2021, 3:33pm

hey @Lane11 ! Can you show me if there is any error showing in the console ?
What I notice in your HTML is that you are not loading Filip JS libraries.

Lane11 · September 12, 2021, 3:58pm

@kenn.eth
Here I downloaded the repository from GitHub: https://github.com/Ivan-on-Tech-Academy/academy-kitties-template/ and instead of Filip’s cat div I pasted my cat div and the cat doesn’t appear.
In the picture you can see that I created my css file: MyCat.css to create my cat.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Academy kitties </title>
  <script type="text/javascript" src="assets/js/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <script src="assets/bootstrap/js/popper.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">
</head>
  <body>
    <div class="container p-5" style="margin-top: 12vh;margin-bottom: 10vh;">
        <div align="center">
        <h1 class="c-white">Kitties-Factory</h1>
        <p class="c-white">Create your custom Kitty</p>
    </div>
        <div class="row">
            <div class="col-lg-4 catBox m-2 light-b-shadow">
                <div class="cat">
                    <div class="tail"></div>
                    <div id="body">
                        
                        <div class="hands">
                                <div class="hand_paw1L"></div>
                                <div class="hand_paw2L"></div>
                                <div class="hand_paw3L"></div>
                                
                            <div class="hand left_hand"></div>
                            <div class="hand_pawBigL"></div>
                                <div class="hand_paw1R"></div>
                                <div class="hand_paw2R"></div>
                                <div class="hand_paw3R"></div>
                                
                            <div class="hand right_hand"></div>
                            <div class="hand_pawBigR"></div>
                        </div>
            
                        <div class="legs">
                            <div class="leg left_leg">
                                <div class="Paw1L"></div>
                                <div class="Paw2L"></div>
                                <div class="Paw3L"></div>
                                <div class="BigPaw"></div>
                            </div>
                            <div class="leg right_leg">
                                <div class="Paw1R"></div>
                                <div class="Paw2R"></div>
                                <div class="Paw3R"></div>
                                <div class="BigPawR"></div>
                            </div>
                        </div>
                    </div>
            
                    <div class="ears">
                        <div class="ear left_ear">
                            <div class="in_earL"></div>
                         </div>
                         <div class="ear right_ear">
                             <div class="in_earR"></div>
                         </div>
                    </div>
                    
                    <div id="face">
            
                        <div class="mouth">
            
                        </div>
                            <div class="Right_1st_mustache"></div>
                            <div class="Right_2st_mustache"></div>
                            <div class="Right_3st_mustache"></div>
                            <div class="Left_1st_mustache"></div>
                            <div class="Left_2st_mustache"></div>
                            <div class="Left_3st_mustache"></div>
                    
                        <div class="nose"></div>
                            <div class="eyes">
                                <div class="eye">
                                    <div class="pupils"></div>
                                </div>
                                
                                <div class="eye">
                                    <div class="pupils"></div>
                                </div>
                            </div>
                    </div>
                </div>
                <br>
                <div class="dnaDiv" id="catDNA">
                    <b>
                        DNA:
                        <!-- Colors -->
                         <span id="dnabody"></span>
                         <span id="dnamouth"></span>
                         <span id="dnaeyes"></span>
                         <span id="dnaears"></span>
                        
                         <!-- Cattributes -->
                         <span id="dnashape"></span>
                         <span id="dnadecoration"></span>
                         <span id="dnadecorationMid"></span>
                         <span id="dnadecorationSides"></span>
                         <span id="dnadanimation"></span>
                         <span id="dnaspecial"></span>
                    </b>
                </div>
            </div>
            <div class="col-lg-7 cattributes m-2 light-b-shadow">

<!-- Cat colors -->
<div id="catColors">
                <div class="form-group">
                    <label for="formControlRange"><b>Head and body</b><span class="badge badge-dark ml-2" id="headcode"></span></label>
                    <input type="range" min="10" max="98" class="form-control-range" id="bodycolor">
                </div>
            </div>

            </div>

            </div>
            <br>

        </div>



    </div>
    <footer align="left">
        <p>Ivan on Tech Academy Bootcamp July 2020</p>
    </footer>

  </body>
  <script src="assets/js/colors.js"></script>
  <script src="assets/js/catSettings.js"></script>
  <script src="assets/js/catFactory.js"></script>

</html>

kenn.eth · September 12, 2021, 4:08pm

If you notice in the header you are loading this css files. But not yours MyCat.css

Lane11:

  <link rel="stylesheet" href="assets/css/mystyle.css">
  <link rel="stylesheet" href="assets/css/cats.css">
  <link rel="stylesheet" href="assets/css/colors.css">
  <link rel="stylesheet" href="assets/css/factory.css">
  <link rel="stylesheet" href="assets/css/frontend.css">

Ok so you just have to include your MyCat.css library in the header like this.

<link rel="stylesheet" href="assets/css/MyCat.css">

Lane11 · September 12, 2021, 4:46pm

Wow, I didn’t notice that. Thank you man

Pedrojok01 · September 21, 2021, 9:05am

Hey guys, here is my kitty:
firefox_7K2IVVSn8H

And my code:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Kitties</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div id="cat">
            <div class="head">
                <div id ="ears">
                    <div class="ear_left">
                        <div class="inner_ear_left"></div>
                    </div>
                    <div class="ear_right">
                        <div class="inner_ear_right"></div>
                    </div>
                </div>
                <div id="face">
                    <div class="forehead">
                        <div class ="forehead line_left"></div>
                        <div class ="forehead line_right"></div>
                    </div>
                    <div class ="eyes">
                        <div class ="eye left">
                            <div class="pupils left">
                                <div class="inner_pupil left">
                                    <div class="smaller_inner_pupil left"></div>
                                </div>
                            </div>
                        </div>
                        <div class ="eye right">
                            <div class="pupils right">
                                <div class="inner_pupil right">
                                    <div class="smaller_inner_pupil right"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="face_body">
                    <div class="face_body_background">
                      <div id="nose"></div>
                      <div id="mouth">
                        <div id="mouth_upper"></div>
                        <div id="mouth_lower_right"></div>
                        <div id="mouth_lower_left"></div>
                      </div>
                      <div id="hairs">
                        <div class="hair left top"></div>
                        <div class="hair left middle"></div>
                        <div class="hair left bottom"></div>
                        <div class="hair right top"></div>
                        <div class="hair right middle"></div>
                        <div class="hair right bottom"></div>
                      </div>
                    </div>
                </div>
            </div>    
            <div class="body">
                <div class="collar"></div>
                <div id="core_body">
                    <div class="body_inner"></div>
                </div>
                <div id="feet">
                    <div class="foot front left"></div>
                    <div class="foot front right"></div>
                    <div class="foot back left"></div>
                    <div class="foot back right"></div>
                </div>
                <div id="tail">
                    <div class="tail_ball"></div>
                </div>
            </div>    
        </div>
    </body>
</html>

#cat{
    position: absolute;
    left: 50px;
    top: 50px;
}

#ears, #face, #mouth, #nose, #hair, #body, #mouth_lower_left, #mouth_lower_right, #core_body, #tail{
    position: absolute;
}

#face{
    background-color: #aaa6a2;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.forehead{
    background-color: #DDD0C9;
    width: 15px;
    height: 50px;
    border-radius: 40%;
    position: absolute;
    top: 6px;
    left: 91px;
}

.forehead.line_left{
    width: 13px;
    height: 33px;
    top: 5px;
    left: -17px;
    transform: rotate(2deg);
}

.forehead.line_right{
    width: 13px;
    height: 33px;
    top: 5px;
    left: 19px;
    transform: rotate(-2deg);
}


/***EYES***/

.eyes{
    position: relative;
    top: 35px;
    display: flex;
}

.eye{
    background-color: white;
    width: 50px;
    height: 41px;
    border-radius: 50%;
    margin: 23px;
    position: relative;
}

.eye.left{
    transform: rotate(15deg);
}

.eye.right{
    transform: rotate(-15deg);
}

.pupils{
    background-color: black;
    width: 36px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 10px;
}

.inner_pupil{
    background-color: #f8ad90;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
}

.inner_pupil.left{
    top: 8px;
    left: 6px;
}

.inner_pupil.right{
    top: 5px;
    left: 7px;
}

.smaller_inner_pupil{
    background-color: #f8ad90;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    position: absolute;
}

.smaller_inner_pupil.left{
    top: 7px;
    left: 2px;
}

.smaller_inner_pupil.right{
    top: 7px;
    left: -1px;
}


/***EARS***/

.ear_right{
    border-radius: 90% 0 90% 0;
    background: #aaa6a2;
    width: 100px;
    height: 100px;
    position: absolute;
    left:110px;
    rotate: -10deg;
}

.inner_ear_right{
    border-radius: 100% 0% 100% 0%;
    background-color: #f8ad90;
    width: 90px;
    height: 90px;
    position: relative;
    top: 11px;
    left: -0.5px;
}

.ear_left{
    border-radius: 90% 0 90% 0;
    background: #aaa6a2;
    width: 100px;
    height: 100px;
    position: absolute;
    transform: scale(1,-1) rotate(-10deg);
    left: 0;
}

.inner_ear_left{
    border-radius: 100% 0% 100% 0%;
    background-color: #f8ad90;
    width: 90px;
    height: 90px;
    position: relative;
    top: -0.5px;
    left: 11px; 
}

/**FACE BODY**/

#face_body{
    position: relative;
    z-index: 0;
}
  
.face_body_background{
    position: absolute;
    background-color: #DDD0C9;
    border-radius: 50%;
    width: 150px;
    height: 90px;
    left: 25px;
    top: 95px;
 }
  
#nose{
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #D88485;
    border-radius: 50% 50% 0% 0%;
    position: absolute;
    left: 55px;
    top: 20px;
}
  
#mouth{
    position: relative;
}
  
#mouth_upper{
    position: absolute;
    width: 3px;
    height: 10px;
    background-color: black;
    left: 74.25px;
    top: 38px;
}
  
#mouth_lower_left{
    width: 3px;
    height: 12px;
    background-color: black;
    transform: rotate(45deg); 
    left: 70.25px;
    top: 45px;
}

#mouth_lower_right{
    width: 3px;
    height: 12px;
    background-color: black;
    transform: rotate(-45deg); 
    left: 79.25px;
    top: 45px;
}
  
  
#hairs{
    position: relative;
}
  
.hair{
    width: 70px;
    border-top: 2.5px solid black;
    position: absolute;
}
  
.hair.top.left{
    transform-origin: 85px -2px;
    transform: rotate(20deg); 
}
  
.hair.bottom.left{
    transform-origin: 85px -2px;
    transform: rotate(-20deg); 
}
  
.hair.top.right{
    transform-origin: -15px 2px;
    transform: rotate(20deg); 
}
  
.hair.bottom.right{
    transform-origin: -15px 2px;
    transform: rotate(-20deg); 
}
  
.hair.left{
    left: -36px;
    top: 39px;
}
  
.hair.right{
    left: 117px;
    top: 39px;
}



/**BODY**/

.collar{
    background-color: #9b563b;
    width: 117px;
    height: 19px;
    border-radius: 21%;
    top: 175px;
    left: 43px;
    position: absolute;
}

#core_body{
    background-color: #aaa6a2;
    width: 250px;
    height: 110px;
    border-radius: 50% 70% 80% 100%;
    top: 185px;
    left: 40px;
    transform: rotate(8deg);
    z-index: -1;
}

.body_inner{
    background-color: #DDD0C9;
    position: absolute;
    width: 180px;
    height: 78px;
    border-radius: 80% 80% 80% 80%;
    top: 15px;
    left: 30px;
    transform: rotate(2deg); 
    z-index: 3;
}



/**FEET**/

.foot{
    position: absolute;
    width: 38px;
    height: 80px;
    background-color: #c4c2c1;
    border-radius: 0% 0% 60% 60%;
}

.foot.front.left{
    top: 235px;
    left: 50px;
    z-index: -2;
    transform: rotate(8deg); 
}

.foot.front.right{
    top: 260px;
    left: 85px;
    height: 60px;
    z-index: 0;
    transform: rotate(5deg); 
    border-radius: 20% 40% 60% 60%;
}

.foot.back.left{
    top: 250px;
    left: 213px;
    z-index: -2;
} 

.foot.back.right{
    top: 262px;
    left: 248px;
    height: 70px;
    transform: rotate(3deg); 
    border-radius: 60% 40% 60% 60%;
    z-index: -2;
}



/**TAIL**/

#tail{
    background-color: #c4c2c1;
    width: 100px;
    height: 23px;
    border-radius: 0% 50% 50% 0%;
    left: 250px;
    top: 190px;
    z-index: -2;
    transform: rotate(-50deg); 
}

.tail_ball{
    background-color: #f8ad90;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: -15px;
    left: 80px;
    position: absolute;
}

germanglezar · September 25, 2021, 1:40am

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="dog">
            <div class="body"></div>
            <div class="leg1"></div>
            <div class="leg2"></div>
            <div class="leg3"></div>
            <div class="leg4"></div>
            <div class="tail"></div>
            <div class="ear1"></div>
            <div class="ear2"></div>
            <div class="nose"></div>
            <div class="eye"></div>
            <div class="tongue"></div>
            </div>
        </div>
    </body>

</html>

.dog{
    background-color: #7b5040;
    width: 220px;
    height: 150px;
    position: absolute;
    top: 40%;
    left: 35%;
    border-radius: 0px 0px 0px 120px;
}
.body{
    background-color: #7b5040;
    width: 481px;
    height: 231px;
    position: relative;
    top: 100px;
    left: 100px;
    border-radius: 0px 0px 0px 120px;
}
.leg1,.leg2,.leg3,.leg4{
    background-color: #7b5040;
    width: 50px;
    height: 120px;
    position: relative;
}
.leg1{
    left: 180px;
    top: 90px; 
}
.leg2{
    left: 270px;
    bottom: 29px; 
}
.leg3{
    left:430px;
    bottom:150px; 
}
.leg4{
    left:520px;
    bottom:270px; 
}
.tail{
    width: 21px;
    height: 0px;
    border-radius: 10px;
    border-bottom: 111px solid #7b5040;
    position: relative;
    bottom: 657px;
    left: 540px;
    transform: rotate(
30deg);
    transform-origin: bottom;
}
.ear1{
    width: 2px;
    height: 12px;
    border-left: 22px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 111px solid #7b5040;
    position: relative;
    bottom: 941px;
    left: 168px;
    transform: rotate(
8deg);
    transform-origin: bottom;
}
.ear2{
    width: 2px;
    height: 12px;
    border-left: 22px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 111px solid #7b5040;
    position: relative;
    bottom: 1063px;
    left: 139px;
    transform-origin: bottom;
}
.nose{
    background-color: black;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    position: relative;
    bottom: 1070px;
    right: 5px;
}
.eye{
    background-color: black;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: relative;
    bottom: 1069px;
    left: 144px;
}
.tongue{
    background-color: rgb(216, 34, 34);
    width: 20px;
    height: 8px;
    border-radius: 10px;
    position: relative;
    bottom: 1046px;
    left: -7px;
    transform: rotate(
45deg);
}

WMXgTW6wh · October 10, 2021, 3:07am

Here’s my chibi lion.

liondrawing

I wanted to try something a little different. This is an SVG styled with CSS. It’s all in one DIV but different pieces have IDs and classes for future animation and changes in styling.

Here was my process in case this helps.

Adobe Flash - created line drawing, exported to PNG
Photoshop - colored and created layers, saved as PSD
Illustrator - created vector shapes from layers, exported to SVG

To use CSS to style the SVG, you have to include the SVG code in the HTML doc instead of calling “image.svg”.

experiment.html

<html>
  <head>
    <link rel="stylesheet" href="experiment.css">
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
  </head>
  <body>
    <div id="bigcat">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1561 1095" preserveAspectRatio="xMinYMin meet" class="svg-content">
        <g id="body">
          <path class="cls-1" d="M636,1458c-5.36-1.49-10.73-3-16.08-4.49-13.62-3.92-20.27-13.42-22-27.11-1.1-8.67-2.62-17.29-4-25.92a6,6,0,0,0-2.19-3.66,53.54,53.54,0,0,0,.4,7.18c1.41,7.8,2.51,15.72,4.7,23.31s-4,15.09-10.5,20.38c-7,5.64-15.7,4.52-24,4.14-4.6-.2-9.19-.87-13.76-1.53-16.72-2.43-24.57-18-26.64-31.53-1.38-9-3.13-18-4.5-27a103.84,103.84,0,0,1-.94-12.08q-.39-12.56-.48-25.14c0-6.58-1.08-12.57-5.73-17.83-5.9-6.7-5.36-6.68.65-13.34,8.55-9.49,16.64-19.4,24.93-29.13l2.67-3.15c14.17,10.09,28.69,18.6,44.4,24.58,15.41,5.86,31.17,11.08,48,11.25,8.92.09,18,1.22,26.73-.16,14-2.23,28-5.07,41.35-9.66,13.49-4.64,26.27-11.46,39.08-17.87,5-2.48,9.21-6.41,13.71-9.78,2.62-2,4.32-1.85,6.57,1,15,18.82,33,33.94,54.77,44.64,10.61,5.21,21.66,7.8,33.19,8.91,8.77.85,17.6,2.06,26.35,1.77,17.18-.58,34.18-2.63,50.87-7.35,20.39-5.78,37.5-17.25,53.49-30.32a385.55,385.55,0,0,0,34.87-32.77c15-15.78,27.06-33.91,38.3-52.56,1.07-1.78,3.09-3.79,5-4.16,20.56-4,40.22-11,59.56-18.64,11.45-4.52,22.35-10.74,32.86-17.25a315.68,315.68,0,0,0,31.89-22.6c15.19-12.26,27.19-27,34.07-45.8,3.26-8.87,3.93-17.82,4.46-27a44.55,44.55,0,0,1,1-5.31h1c12.34,23.24,21.74,47.67,29.53,72.77a79.06,79.06,0,0,0,5.73,12.71c6.36,12.23,12.08,24.89,19.54,36.41,9,13.86,21.5,24.85,34.17,35.34,13.13,10.88,26.43,21.63,40.38,31.4,15.5,10.87,32.79,18.44,50.8,24.43a198.86,198.86,0,0,0,74.3,9.68c11.52-.64,23-2.63,34.42-4.28,5.64-.81,11.22-2.1,16.77-3.44,14.14-3.43,27.75-8.39,39.59-17,11-8,21.53-16.56,32.15-25,3.63-2.89,6.82-6.34,10.44-9.24a9,9,0,0,1,4.92-1.68,22.89,22.89,0,0,1,5.84,1c8.58,2,8.64,2,4,9.71a243.22,243.22,0,0,1-37,47.33c-20.2,19.83-43.41,35-69.94,44.74-12.56,4.6-25.58,8.06-38.54,11.45-5.2,1.37-10.81,1.36-16.25,1.65-9.28.48-18.58,1.16-27.85.91a220.9,220.9,0,0,1-27.16-2.49c-35.57-5.45-69.72-16.51-104-27.05-19.93-6.13-39.56-13.27-59.28-20.07-1.56-.54-2.79-2-4.19-3.08-.36,5.44-.57,11.33-1.18,17.19-.92,8.88-1.87,17.78-3.28,26.6-2.59,16.29-5.34,32.56-8.38,48.77-2.17,11.53-4.55,23-7.53,34.38-3.42,13-13.46,16.92-23.34,17.6-13.75.94-27.61.53-41.41.29a104.65,104.65,0,0,1-16.2-2.06c-4.44-.77-8.86-1.91-10.36-7.17-.11-.39-1.11-.53-1.69-.79-.1-1-.19-2-.29-3l-.81.23L1125,1443c-4.69,1.67-9.36,4.63-14.09,4.72a182.17,182.17,0,0,1-28.05-2.08c-7-.94-10.54-6.84-10.48-14.47.05-5.91-.5-11.82-.69-17.74-.25-7.74-5.38-11.18-11.77-13.57q-16.77-6.28-33.54-12.6a4.13,4.13,0,0,1-2.36-2.53l7-1.19,0,.47q-15.13,0-30.26,0c-9.33,0-18.65.15-28,.06q-43.86-.45-87.73-1c-19.95-.27-39.9-.55-59.84-1.1-16.42-.44-32.83-1.15-49.22-2-15.87-.82-31.73-1.92-47.58-3-7.76-.53-15.49-1.3-23.24-1.9-1.79-.14-3.59,0-5.92,0,0,2.06-.15,3.67,0,5.24,1.22,11.66,2.26,23.35,3.88,35,.87,6.22.76,12.11-1.29,18a29.18,29.18,0,0,1-18.16,18.49c-7.18,2.63-15,3.54-22.5,5.26a11.66,11.66,0,0,0-2.18,1Zm486.13-20.87h1.41c0-8.22.49-16.48-.17-24.64-.49-6.19-4.41-10.39-10.57-12.56q-24.84-8.72-49.5-18c-2.58-1-4.82-3.08-7-5a68.77,68.77,0,0,1-5.29-5.74l-1.11.86c1.56,2.46,3.11,4.93,4.88,7.73l-9.44.68c5.9,1.38,10.39,2.06,14.62,3.49,16.83,5.7,33.63,11.5,50.34,17.52,9.09,3.28,11.78,7.59,11.79,17.24Q1122.15,1428,1122.13,1437.13Zm-555.55-79.5c4,5.56,8.46,10.47,15.19,12.15,4,1,7.1,2.34,7.06,7.31l1.9-4.74c6.94-.79,13.73-1.4,19.58-6.16C593.34,1374.82,579.53,1368.88,566.58,1357.63Z" transform="translate(-126 -363)"/>
        </g>
        <g id="tail">
          <g>
            <path class="cls-2" d="M1687,1168c-.33,1-.16,5.11-.49,6.11.33,3.34.16,3.55.49,6.89v9c-.66,2.63-1.11,5.33-2,7.87-3.57,10.08-7.28,20.12-10.93,30.17-3.31,5.25-5.8,11.21-12.09,13.87l-8,5.1-12,4.84-3,1.15h-10l-6.91-2.21-10.27-3.69-12.87-7-9-7-8-14v-17c2.26-7.24,3.55-11.61,5.89-18.83.59-1.82,2.48-6.41,3.27-8.17a43.55,43.55,0,0,1,16.89-15.82l10-5,5-2c1.64-1.73,4-3.2,4.75-5.26,1.33-3.75,1.68-7.85,2.44-11.8q3.38-16.53,6.77-33.06h5l8,4.17,7,3.82,8,7,6,8q5,9.49,10,19c1.64,6,3.26,12,4.94,18a12.21,12.21,0,0,0,1,2.09Z" transform="translate(-126 -363)"/>
            <path class="cls-3" d="M1687,1171v10l-1-10Z" transform="translate(-126 -363)"/>
            <path class="cls-4" d="M1687,1168v3h-1Z" transform="translate(-126 -363)"/>            
          </g>
        </g>
        <g id="head">
          <g>
            <path class="cls-1" d="M529,1250a7.2,7.2,0,0,0-2.2-.93c-8.29-.4-16.6-.44-24.86-1.14-11.52-1-23-2.14-34.5-3.7-15.87-2.18-31.7-4.66-47.51-7.25-32.15-5.27-63.39-13.39-90.67-32.2q-46.22-31.89-54.9-87.64c-2.87-18.61-3-37.3-2.24-56a345.48,345.48,0,0,1,6.49-52,355.33,355.33,0,0,1,10.22-41.4c1.44-4.46,2.22-9.17,4.05-13.45.59-1.39,3.63-2.6,5.45-2.47,11.23.77,22.41,2.28,33.64,2.91,15.06.85,29-4.3,42.81-9.38,15.76-5.83,29.91-14.75,41.16-27.27,6.55-7.28,11.44-16.06,17.09-24.16.46-.65,1-1.24,1.86-2.27,1.57,1.8,3,3.32,4.28,4.95,8.88,11.25,21.95,14.32,34.8,17.81,14.47,3.94,29,7.23,44.19,6.51a112.07,112.07,0,0,0,32.2-6.43c20.63-7.28,37.73-19.82,53.73-34.22.49-.43,1.06-.77,2.38-1.73,1.23,6,2.51,11.51,3.46,17.06,2.49,14.46,8.63,27.33,16,39.91,6,10.32,15.7,15.65,25.46,21a133.55,133.55,0,0,0,19.93,8.69c7.68,2.67,15.69,3.9,23.87,1.95a16.82,16.82,0,0,1,3.49-.17c13.52-.28,26.25-4.31,38.56-9.22,6-2.42,11.06-7.41,16.65-11.07,1.57-1,3.54-1.46,6.5-2.64-19.33,44.8-15,85.69,10.62,125.53-4.57,2.69-10.22,5.49-15.29,9.11-12.13,8.63-24.07,17.54-36,26.53-16.08,12.18-28.37,27.84-39.68,44.3a155.86,155.86,0,0,0-22.84,49.53c-.94,3.67-1.88,3.63-5.73,3a95.55,95.55,0,0,0-24-.61,99.08,99.08,0,0,0-21.15,4.69A129.87,129.87,0,0,0,559,1232.79c-6.19,5.52-12,11.46-18,17.21Z" transform="translate(-126 -363)"/>
            <path class="cls-1" d="M126,704c.86-1.41,2.26-2.74,2.49-4.24,2.3-15.12,7.22-29.25,13.44-43.28,8.76-19.75,23.32-32.83,42.32-41.51,11.58-5.29,23.46-10,35.5-14.19,8.74-3,17.9-2.36,27-.26,3.21.74,3.64,2.35,3.21,4.91-4.27,25.42,1.37,49.27,11.53,72.37,1.58,3.58,3.76,6.9,5.61,10.37a2.79,2.79,0,0,1,.4,1.77c-4.39,18.82-5.26,38-5.81,57.19,0,.12-.2.24-.88,1-14-9.51-27.73-20-43.89-26l-.78,1.29c1.3.82,2.59,1.65,3.89,2.46,12.67,7.86,25.25,15.87,38.06,23.51,5.94,3.54,4.16,9.51,4.7,14.27,2,17.82,5.28,35.36,10.91,52.36,3.06,9.25,7.08,18.22,11,27.15,1.53,3.46,1.64,5.54-1.94,7.78-8.44,5.29-16.27,11.65-25.05,16.24-3.71,2-9.26,1.13-13.84.55-28.59-3.65-52.81-17.3-74.91-34.7a99.84,99.84,0,0,1-28.12-35.71c-5.36-11.11-8-22.84-11.06-34.52-1.44-5.56-1.21-11.55-2-17.32-.2-1.55-1.19-3-1.82-4.48V715c.3-3,3.65-6,0-9Z" transform="translate(-126 -363)"/>
            <path class="cls-1" d="M923.65,783.45c-28.81,8.77-58.54,15.53-81.37,38.79-4.44-7.65-8.6-15-12.9-22.17-7.3-12.25-14.45-24.64-25.25-34.32-2.64-2.37-2.75-4.64-.43-7.29,5.81-6.6,11.47-13.34,17.35-19.88,20.28-22.55,41.47-44.17,67.7-59.88,10.92-6.54,22.53-12,34-17.43,5.87-2.79,12.18-4.7,18.36-6.81a29,29,0,0,1,7.21-1.43,58.12,58.12,0,0,1,38.86,11.17c9.53,6.83,19.29,13.58,27.68,21.68,5.67,5.46,10.11,12.77,13.38,20a94.94,94.94,0,0,1,8,37.16c.56,23.54-2.19,46.2-11.08,68.25-12.92,32-34,56-65.55,70.4-13.55,6.18-27.8,5.87-42.09,4.94-14.53-.94-29-2.75-43.55-3.35-9.28-.39-9.07.21-11.95-8.15-5.1-14.84-10.5-29.58-15.85-44.34a47.49,47.49,0,0,0-3-5.62c10.34-11.59,23.55-19.24,37.73-25s28.64-10.33,43-15.42C923.87,784.32,923.76,783.88,923.65,783.45Z" transform="translate(-126 -363)"/>
          </g>
        </g>
        <g id="eyes">
          <circle id="white_left" data-name="white left" class="cls-5" cx="257.52" cy="660.08" r="30.66"/>
          <circle id="white_right" data-name="white right" class="cls-5" cx="479" cy="670.2" r="30.66"/>
          <g id="eyes-2" data-name="eyes">
            <g>
              <path class="cls-6" d="M382.22,1062.34c-16.65,1.44-38.7-13.1-39-37.52-.26-19.59,17.29-36,37.59-36.93,23.71-1,39.92,18.56,40.44,35.78C421.9,1045.22,402.21,1063.81,382.22,1062.34Zm6-67.82c-3.74,1.17-7.85,1.71-11.16,3.62-9.1,5.28-8.67,16,.49,21.05,9.85,5.46,18.3,2.81,26.43-6.31,3.21-3.61,2-7.47-.66-10.91C399.57,997.15,394.43,995.27,388.22,994.52Zm-17.58,28.17a7.49,7.49,0,0,0-7.77-7.74,7.57,7.57,0,0,0-7.6,7.47,8.18,8.18,0,0,0,7.58,8.22A8,8,0,0,0,370.64,1022.69Z" transform="translate(-126 -363)"/>
              <path class="cls-6" d="M603.49,997.62c21.55-1.75,39,17.08,39.74,34.66,1,22.69-18.1,39-36.46,39.62-23.17.84-41-15.52-41.3-37.69C565.19,1014.87,583.27,996.64,603.49,997.62Zm1.58,5.71c-3.44,1-7.17,1.48-10.26,3.14-7.87,4.2-9.32,14.47-3.11,19.53,9.08,7.4,23.3,5.23,29.86-4.52,2.35-3.5,1.88-6.88-.37-10.16C617.35,1005.74,611.83,1003.72,605.07,1003.33Zm-20.25,41a7.49,7.49,0,0,0,7.33-7.76c.05-4.9-2.87-7.91-7.58-7.82s-7.3,2.89-7.4,7.57A7.68,7.68,0,0,0,584.82,1044.34Z" transform="translate(-126 -363)"/>
              <path class="cls-7" d="M642.16,1093.41c-.53-1.57-1.63-3.23-1.43-4.7a6.2,6.2,0,0,1,2.67-4.17c5.43-2.85,11.07-5.28,16.63-7.89,3.61-1.68,7.1-3.75,10.87-4.94,1.73-.55,4,.62,6,1-.92,1.8-1.39,4.48-2.85,5.23-8.7,4.47-17.62,8.51-26.49,12.64a20.39,20.39,0,0,1-3.32.94Z" transform="translate(-126 -363)"/>
              <path class="cls-7" d="M312.58,1052.41c1,.77,2.7,1.41,3,2.47s-.37,2.82-1.18,3.84-2.21,1.36-3.4,1.94c-8.32,4-16.65,8-25,12-2.33,1.11-5,2.06-6.5-1-1.68-3.31,1.2-4.31,3.42-5.38q12.72-6.15,25.48-12.22C309.59,1053.53,310.84,1053.11,312.58,1052.41Z" transform="translate(-126 -363)"/>
              <path class="cls-7" d="M305.24,1079.45c-1-.73-2.94-1.55-2.93-2.36,0-1.53.76-3.66,1.93-4.45a66.27,66.27,0,0,1,8.79-4.42c6.39-3,12.71-6.23,19.25-8.9,1.62-.66,4,.45,6,.75-1,1.77-1.49,4.38-3,5.16-8.63,4.52-17.48,8.61-26.28,12.82C308,1078.54,306.87,1078.85,305.24,1079.45Z" transform="translate(-126 -363)"/>
              <path class="cls-7" d="M666.31,1097.27c-.65-.48-2.52-1.16-2.68-2.13-.21-1.26.55-3.51,1.56-4q14.91-7.55,30.1-14.48c1-.47,3.75.39,4,1.22.48,1.33.09,4.16-.81,4.61-10,5-20.26,9.74-30.44,14.53A9.88,9.88,0,0,1,666.31,1097.27Z" transform="translate(-126 -363)"/>
            </g>
          </g>
        </g>
        <g id="mane">
          <path class="cls-8" d="M1212,1060.16c-9.68-36.85-28.26-68.74-54.16-96.49-2.07-2.21-2.16-3.53-.26-5.79,19.9-23.67,34.49-50.12,41-80.56,9.33-43.33-.93-82.49-26-118.27A227.82,227.82,0,0,0,1091,687.13c-.38-.19-.59-.69-1.61-2l6.2.49c.61-3.65,1.7-7.36,1.76-11.08.34-20.49-.24-40.92-5.1-61-9.29-38.41-33.51-64.45-67.67-82.59-25.8-13.7-53.44-21-82.14-25.06a5.36,5.36,0,0,1-1-.13c-8.12-2.94-14.8-2-18.69,6.78-.13.28-.86.29-2.57.79a63.57,63.57,0,0,1,3.35-6.28c13.05-18.45,12.8-39.29-.88-56.54-10.16-12.81-23.57-21.52-37.85-28.87-38.81-20-80-27.28-123.37-22.52-23.51,2.59-45.56,10.24-66.85,20.33a60.83,60.83,0,0,1-13.83,4.92c9.91-7.85,22.4-10.44,33.93-16.71-2.35-2.08-4.27-4.06-6.45-5.67-26.8-19.81-57-31.38-89.84-36-7.23-1-14.55-1.33-21.83-2.05a10,10,0,0,1-2.56-1H573a31.34,31.34,0,0,1-4.6,1.17c-32.9,3.45-63.18,14-89.82,33.88A100.72,100.72,0,0,0,447,436.75c-.49,1.05-1.06,2.07-1.64,3.07-.16.27-.5.43-.75.65-.32-.06-.76,0-.92-.18-12.17-14.25-28.82-13.89-45.11-13a82.62,82.62,0,0,0-42.46,14.43c-17.23,11.76-32.5,25.44-41.3,44.88-4.79,10.59-8.27,21.57-7.42,33.52.09,1.2-1.84,2.77-3.13,3.8-22.75,18.23-41.42,39.46-49.55,68.22-7.26,25.71-4.7,50.94,4.58,75.68,2.08,5.55,4.56,11,7.23,17.34,1.4-5.17,2.49-9.43,3.72-13.66a17.8,17.8,0,0,1,1.6-3c.38,1.19.82,2.35,1.11,3.56a9.37,9.37,0,0,1,.08,2c-2,9-4.83,17.85-5.82,26.93-1.83,16.75-3.91,33.65-3.47,50.43a206.92,206.92,0,0,0,13.79,70.27c4.58,11.69,10.52,22.83,15.8,34.25a23.31,23.31,0,0,1,1,3.57L293,860,287,849c-11.23,7.81-22.2,14.92-32.61,22.78-24.87,18.77-46.53,40.6-62.35,67.76-9.67,16.6-14.93,34.52-17.13,53.56-5.27,45.78,7.45,86.6,33.71,123.69,2.89,4.08,2.08,6.5-.67,9.86-12.86,15.69-26.29,31-35,49.64-5.2,11.18-9.3,22.64-10.09,35.07,0,.56-.59,1.08-.9,1.61v9c.35,2.52.84,5,1,7.57,1.3,19.35,6,37.66,16.61,54.13,8.2,12.8,20.87,20.07,34.56,24.87,17,6,34.53,10.33,51.83,15.41a24.28,24.28,0,0,1,5.12,1.72c26.53,14.89,54,27.77,83,37.1,7.63,2.45,15.92,3,23.93,4.17,5.63.85,11.3,1.37,17,2h22c6.22-1.25,12.52-2.19,18.65-3.8,23.87-6.24,44.85-18,63.81-33.63a190.82,190.82,0,0,0,36.76-40.25c.47-.69.91-1.4,1.5-2.31,6.56,4.08,12.49,7.93,18.58,11.52,18.8,11.06,38.65,19.31,60.41,22.46,47.58,6.91,90.76-4.28,130-31.61.14-.09.27-.19.4-.29,8.52-6.38,8.47-6.34,15.18,1.92,15.61,19.18,34.61,34.08,57.78,42.76,9.11,3.41,19.24,4.12,28.9,6.06,24.28,2.21,48.48,2,72.12-4.65,21.34-6,39.67-17.73,56.63-31.61a308.83,308.83,0,0,0,69.37-80.49c1.1-1.83,1.44-4.12,2.29-6.68,13.81-3.94,28.82-7.58,43.39-12.51,36.18-12.25,69.18-30.23,96.51-57.34,13.75-13.63,23-30,25.79-49.5.06-.39.6-.7.91-1v-21C1214.68,1071.39,1213.49,1065.74,1212,1060.16ZM667.05,737l-6.74,5.63c-.4-.49-.8-1-1.19-1.48l6.8-5.56Zm-10.72,467.74c-4.06-.5-9.25-1.41-14.47-1.74-22.59-1.44-42.68,6.5-61.75,17.4-18.48,10.58-32.84,25.91-46.45,42-1.28,1.52-2.64,3-4,4.46l-1.48.54.45-1.7c3.31-4.33,6.62-8.66,10.43-13.66-3.54-.37-6.53-.81-9.55-1-12.59-.73-25.23-.88-37.75-2.19-18.33-1.91-36.68-4-54.81-7.18-19.84-3.49-39.64-7.57-59.09-12.79a157.86,157.86,0,0,1-64.4-34.57c-22.28-19.68-34.62-44.68-40.24-73.17-2.55-12.91-4.33-26.31-3.92-39.4.66-20.84,3.46-41.61,5.28-62.41a13.64,13.64,0,0,0-.59-3.75,87,87,0,0,0,2.71-8.43c2.2-10.15,3.92-20.42,6.42-30.49,1.69-6.85,4.4-13.44,6.62-20.15.51-1.55.89-3.15,1.44-5.1l-11.07-2.91c0-.45,0-.9,0-1.35a17.46,17.46,0,0,1,4.28.05,159,159,0,0,0,51.37,4.67c38.72-2.73,70.61-18.08,92.24-51.59,3.93-6.1,5.57-11.82,2.65-19.48-5.21-13.65-4.54-28-.67-42,.26-1,1.27-1.72,1.93-2.58a11.59,11.59,0,0,1,.19,3.35,81.65,81.65,0,0,0,.21,39.84c3.34,12.84,11.1,21.5,23.12,26.77,15.34,6.72,31.49,9.93,48,12,32.66,4.09,59.71-9,85.12-27.3,4.7-3.37,8.89-7.46,13.52-10.94,3.37-2.53,4-5.56,3.62-9.55-2.11-22.61-.72-45.13,6.3-66.69a110.73,110.73,0,0,1,23.25-39.41c6.22-6.92,13.08-13.28,19.71-19.83a31.06,31.06,0,0,1,3.78-2.8l.91.9c-1.1,1.21-2.1,2.53-3.3,3.62-12.15,11-23.16,22.91-31.59,37.07-7.56,12.7-13.36,26.07-14.77,40.89-1.26,13.17-2.92,26.43-2.53,39.6.73,24.42,6.17,47.81,18.52,69.39,5.75,10,15.09,15.11,24.2,20.82,36.19,22.67,90.12,10.16,114.6-20,4.46-5.51,8-11.71,12.13-17.54a32,32,0,0,1,3.13-3.37l1.25.85a78.43,78.43,0,0,1-4.81,8.07c-9.63,12.62-17.42,26.17-21.86,41.53a119.47,119.47,0,0,0-3,52.19c2.77,18,8.27,34.74,18.54,49.84a21.48,21.48,0,0,1,1.48,3.34c12.89-5.44,25.91-10.59,40-12.42C735,1079.64,681.68,1126.87,656.33,1204.76ZM998.8,855.86c-15.12,16.94-34.36,29.36-57.57,32.4-10.71,1.41-21.85-.41-32.8-.77-2.81-.09-5.63-.21-8.44-.32a125.08,125.08,0,0,0-34.15-.17c.92,8,1.81,15.52,2.69,23.09l-1.62.26C856.54,849.64,833.59,795.3,788,751.84c1.73,1.29,3.46,2.57,5.18,3.87l5.85,4.44,9.27-10c9.14-10.11,17.88-20.6,27.52-30.2s19.76-18.3,30-27C886.47,675.47,910,663,935.1,653.58c14.08-5.3,28.5-5.11,41.88,2.74,10,5.88,19.88,12.09,29.41,18.73,17.41,12.12,26.13,29.72,29.68,50.09C1044.71,774.68,1032,818.6,998.8,855.86Z" transform="translate(-126 -363)"/>
        </g>
        <g id="nose">
          <path class="cls-9" d="M484,1073c8.19,3.57,16.39,7.13,24.55,10.75a14,14,0,0,1,2.5,1.89c-5.88,13.51-17.77,17.41-30.68,19.67-1.18,6.19,2.3,10.81,4.67,15.75l-7.6-8.79c-5.33,10.82-15.73,11.9-27.52,11.06,0,11.16-.42,22,.22,32.68a22.71,22.71,0,0,0,4.67,12c8.31,10.43,31.8,10.57,40.74.62,5.57-6.19,7.56-13.78,8.25-21.88-16.68-2.91-31.91,1.32-46.86,7.49,14.41-9.1,30.15-11.67,46.91-9.91v-16.51a36.72,36.72,0,0,1-6,0c-5-.9-10.31-1.37-12.91-6.85,15,8.76,29.2,4.74,43.19-2.76a3.94,3.94,0,0,1,1.36-.17l.66,1.42c-3.67,1.82-7.2,4-11,5.37-4.17,1.48-8.61,2.18-12.16,3-.82,9.46-.9,18.61-2.53,27.47-2.33,12.65-9.66,20.89-23.37,21.85-.37,0-.71.54-1.06.83H467a14.75,14.75,0,0,0-2.08-1.09c-10.48-3.53-17-10.15-17.11-21.8-.05-10.61,0-21.23,0-31.7-3.73-1.77-8-2.9-11.05-5.46-5-4.16-9.21-9.25-13.75-14v-3c1.21,1.2,2.72,2.21,3.58,3.62,5,8.2,11.95,14,21.3,15.94,14.61,3.09,27.08-1.07,29.71-15.7-3.58-2-7.35-3.71-10.74-6-6.53-4.41-10.29-10.47-8.66-18.6.35-1.75,2.41-3.62,4.15-4.5,2.67-1.34,5.75-1.88,8.66-2.76Z" transform="translate(-126 -363)"/>
        </g>
        <g id="bottommouth">
          <path class="cls-10" d="M488,1145h17v5c-.67,2-1.22,4-2,5.94-5.21,12.43-6.36,17.92-22.84,20.06a18.44,18.44,0,0,0-3.14,1h-9c-7.24-2.28-13.11-6.34-17-13v-4c3.81-2.25,7.39-5.09,11.46-6.63C470.84,1150.21,479.47,1147.75,488,1145Z" transform="translate(-126 -363)"/>
        </g>
        <g id="topmouth">
          <g>
            <path class="cls-11" d="M476,1112h2c3,7.16,7.33,13.13,15.31,15,3.44.82,7.12.67,10.69,1v16c-2.09.33-4.17.78-6.27,1-7.81.72-16,.21-23.37,2.35-7.82,2.26-14.94,7-22.36,10.67h-3l0-3.07c0-2.8.13-5.61,0-8.41-.24-4.84-.65-9.68-1-14.52v-6c4.43-1,8.81-2.25,13.28-3C468.25,1122,473,1118.15,476,1112Z" transform="translate(-126 -363)"/>
            <path class="cls-12" d="M448,1132c.33,4.84.74,9.68,1,14.52.13,2.8,0,5.61,0,8.41l-1,.07Z" transform="translate(-126 -363)"/>
          </g>
        </g>
      </svg>
    </div>
  </body>
</html>

experiment.css

#bigcat {
    display: inline-block;
  	position: relative;
  	width: 75%;
  	padding-bottom: 100%;
  	vertical-align: middle;
  	overflow: hidden;
}

.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

#body {
    stroke: black;
    stroke-width: 2;
}

#head {
    stroke: black;
    stroke-width: 1;
}

#tail {
    stroke: black;
    stroke-width: 2;
}

#mane {
    stroke: black;
    stroke-width: 2;
}

#nose {
    stroke: black;
    stroke-width: 2;
}

#topmouth {
    stroke: black;
    stroke-width: 2;
}

#bottommouth {
    stroke: black;
    stroke-width: 2;
}

.cls-1 {
    fill: #fdf4c1;
}

.cls-2 {
    fill: #f96;
}

.cls-3 {
    fill: #f96;
}

.cls-4 {
    fill: #f96;
}

.cls-5 {
    fill: #fff;
}

.cls-6 {
    fill: #030303;
}

.cls-7 {
    fill: #3f3f3f;
}

.cls-8 {
    fill: #f3985d;
}

.cls-9 {
    fill: #3e3e3e;
}

.cls-10 {
    fill: #fbbcbc;
}

.cls-11 {
    fill: #fedede;
}

.cls-12 {
    fill: #bfbfbf;
}

GahuckImGoofy · October 21, 2021, 5:53pm

I’m definitely not an artist here is my code:
index.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <div class = "dog">
            <div class = "ears">
                <div class = "ear left_ear"></div>
                <div class = "ear right_ear"></div>
            </div>
            <div id = "body">
                <div class = "face">
                    <div class = "eyes">
                        <div class = "eye">
                            <div class = "pupils"></div>
                        </div>
                    <div class = "eye">
                        <div class = "pupils"></div>
                    </div>
                    <div class = "whiskers">
                        <div class = "whisker left_whiskers">
                        <div class = "whisker left_whisker_1"></div>
                        <div class = "whisker left_whisker_2"></div>
                        <div class = "whisker left_whisker_3"></div>
                    </div>
                        <div class = "right whiskers">
                            <div class = "whisker right_whisker_1"></div>
                            <div class = "whisker right_whisker_2"></div>
                            <div class = "whisker right_whisker_3"></div>
                        </div>
                    </div>
                </div>
                    <div class = "mouth"></div>
                    <div class = "nose"></div>
                </div>
                <div class = "torso"></div>
            </div>
            <div id = "legs">
                <div class = "leg left_leg"></div>
                <div class = "leg right_leg"></div>
            </div>
            <div class = "tail"></div>
        </div>
        
    </body>
</html>

style.css:

#body{
    background-color: orange;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: brown;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 22.5px;
    position: relative;
}
.pupils{
    background-color: black;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}
.ears{
    position: relative;
}
.ear{
    border-radius: 90px 40px 80px 5px;
    background-color: orange;
    height: 90px;
    width: 100px;
    position: absolute;
}
.left_ear{
    transform: scale(1,-1);
    left: -45px;
    top: -35px;
}
.right_ear{
    left: 135px;
    top: -25px;
    transform: rotate(180deg);
}
.mouth{
    background-color: black;
    position: relative;
    height: 2px;
    width: 85px;
    border-radius: 25% 0 25% 0;
    margin: 55px;
}
.nose{
    background-color: brown;
    position: relative;
    height: 25px;
    width: 10px;
    border-radius: 51% 51% 50% 55%;
    top: -100px;
    left: 90px;
    transform: scale(1,-1) rotate(90deg);
}
.whiskers{
    background-color: brown;
    border-radius: 25% 0 25% 0;
    position: relative;
}
.left_whisker_1{
    height: 2px;
    width: 75px;
    background-color: brown;
    top: 100px;
    left: -10px;
    position: absolute;
    border-radius: 50% 10% 55% 10%;
    margin: -1px;
}

.left_whisker_2{
    background-color: brown;
    height: 2px;
    position: absolute;
    width: 75px;
    top: 101px;
    left: -25px;
    border-radius: 50% 10% 55% 10%;
    margin: 5px;
}
.left_whisker_3{
    background-color: brown;
    height: 2px;
    width: 75px;
    top: 101px;
    left: -20px;
    position: absolute;
    border-radius: 50% 10% 55% 10%;
    margin: 10px;
}
.right_whisker_1{
    height: 2px;
    width: 75px;
    background-color: brown;
    top: 100px;
    left: -230px;
    position: absolute;
    border-radius: 50% 10% 55% 10%;
    margin: -1px;
}
.right_whisker_2{
    background-color: brown;
    height: 2px;
    position: absolute;
    width: 75px;
    top: 101px;
    left: -245px;
    border-radius: 50% 10% 55% 10%;
    margin: 5px;
}
.right_whisker_3{
    background-color: brown;
    height: 2px;
    width: 75px;
    top: 101px;
    left: -240px;
    position: absolute;
    border-radius: 50% 10% 55% 10%;
    margin: 10px;
}
.torso{
    background-color: orange;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 55% 55% 55% 55%;
    top: -70px;
}
.legs{
    position: absolute;
}
.leg{
    height: 150px;
    width: 20px;
    background-color: darkorange;
    border-radius: 145% 10% 85% 10%;
    position: relative;
}
.left_leg{
    transform: scale(1,-1) rotate(-15deg);
    left: 18px;
    top: 5px;
}
.right_leg{
    transform: rotate(168deg);
    top: -147px;
    left: 160px;
    position: relative;
}
.tail{
    height: 5px;
    width: 315px;
    background-color: darkorange;
    margin: -20%;
    left: 270px;
    border-radius: 50%;
    display: flex;
    position: relative;
    z-index: -1;
}

blockchain.PE · October 22, 2021, 2:20am

BEHOLD

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat">
            <div class="ears">
                <div class="ear left_ear"></div>
                <div class="ear right_ear"></div>
            </div>
            <div id="head">
                <div class="eyes">
                    <div class="eye_left"></div>
                    <div class="eye_right"></div>
                </div>
                <div class="nose"></div>
                <div class="mouth"></div>
                <div class="smile"></div>
                <div class="whiskers">
                    <div class="whisker" style="transform:rotate(20deg)"></div>
                    <div class="whisker" style="transform:rotate(-20deg)"></div>
                    <div class="whisker"></div>
                    <div class="whisker"></div>
                    <div class="whisker" style="transform:rotate(-20deg)"></div>
                    <div class="whisker" style="transform:rotate(20deg)"></div>
                </div>
            </div>
            <div id="body"></div>
            <div class="paws">
                <div class="paw_back"></div>
                <div class="paw_front"></div>
                <div class="paw_back"></div>
                <div class="paw_front"></div>
            </div>
            <div id="tail"></div>
        </div>
    </body>
</html>

.cat{
    position: absolute;
    top: 55px;
}

#head{
    background-color: white;
    outline: 8px solid;
    width: 200px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    z-index: 3;
}
.eyes{
    position: relative;
    top: 15px;
    left: 25px;
    display: flex;
}
.eye_left{
    background-color: black;
    border-radius: 50%;
    width: 15px;
    height: 17px;
    margin: 30px;
}
.eye_right{
    background-color: black;
    border-radius: 50%;
    width: 14px;
    height: 18px;
    margin: 30px;
}
.nose{
    position: relative;
    left: 85px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 50%;
    width: 35px;
    height: 22px;
}
.mouth{
    background-color: black;
    position: relative;
    left: 95px;
    width: 8px;
    height: 10px;
}
.smile{
    background-color: black;
    position: relative;
    left: 65px;
    width: 80px;
    height: 20px;
    border-radius: 0 0 100% 100%;
}
.ears{
    position: relative;
    bottom: 15px;
    z-index: 1;
}
.ear{
    position: absolute;
    background-color: white;
    outline: 8px solid;
    height: 100px;
    width: 120px;
    border-radius: 90% 0 90% 0;
}
.left_ear{
    left: 20px;
    transform: rotate(121deg);
}
.right_ear{
    left: 70px;
    transform: rotate(139deg);
}
#body{
    position: absolute;
    background-color: white;
    outline: 8px solid;
    left: 120px;
    top: 48px;
    width: 275px;
    height: 140px;
    border-radius: 30%;
    z-index: 2;
}
.paws{
    position: relative;
    top: 13px;
    left: 123px;
    display: flex;
}
.paw_back{
    background-color: white;
    outline: 8px solid;
    width: 30px;
    height: 54px;
    border-radius: 25% 25% 33% 33%;
    margin: 15px;
    z-index: 1;
    position: relative;
}
.paw_front{
    background-color: white;
    outline: 8px solid;
    width: 30px;
    height: 54px;
    border-radius: 25% 25% 33% 33%;
    margin: 15px;
    z-index: 3;
    position: relative;
}
#tail{
    position: absolute;
    background-color: white;
    outline: 8px solid;
    left: 369px;
    top: 51px;
    width: 200px;
    height: 20px;
    border-radius: 30%;
    transform: rotate(-20deg);
    z-index: 1;
}
.whiskers{
    position: absolute;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    width: 152px;
    align-items: center;
    justify-content: space-between;
    bottom: 47px;
    left:25px;
}
.whiskers:first-child{
    align-self: center;
}
.whisker{
    width: 70px;
    height: 4px;
    background-color: black;
    margin: 3px;
}```

Attiss · October 26, 2021, 2:54pm

the majesty…

Screen Shot 2021-10-26 at 21.53.16

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat">




            <div class="ears">
                <div class="ear left_ear">
                    <div class="ear left_inner_ear"></div>
                </div>

                <div class="ear right_ear">
                      <div class="ear right_inner_ear"></div>
                </div>
            </div>

            <div class="tail"></div>

            <div class="legs">
                <div class="leg left_leg"></div>
                <div class="leg right_leg" style="left: 130px;"></div>
            </div>

            <div class="body">
                <div class="belly"></div>

                <div class="arms">
                    <div class="arm right_arm">
                        <div class="paw right_paw"></div>
                        <div class="fingers right_fingers"></div>
                    </div>
                    <div class="arm left_arm" style="right: 95px;">
                        <div class="paw left_paw" style="right: 7px;">
                            <div class="fingers left_fingers" style="top: 3px;left: 10px;"></div>
                        </div>
                    </div>
                </div>


            </div>

            <div class="head">



                <div class="eyes">
                    <div class="eye">
                          <div class="pupils">
                              <div class="eye_reflect"></div>
                          </div>
                    </div>

                    <div class="eye">
                          <div class="pupils">
                              <div class="eye_reflect"></div>
                          </div>
                    </div>
                </div>

                <div class="nose"></div>

                <div class="rightwhiskers">
                    <div class="R_whisker right_whisk1" style="
                        top: 122px;
                        transform: rotate(-5deg);
                   "></div>
                    <div class="R_whisker right_whisk2"></div>
                    <div class="R_whisker right_whiskk3" style="
                       top: 138px;
                       transform: rotate(5deg);
                    "></div>
                </div>
                <div class="leftwhiskers">
                    <div class="L_whisker left_whisk1" style="
                        top: 122px;
                        transform: rotate(5deg);
                   "></div>
                    <div class="L_whisker left_whisk2"></div>
                    <div class="L_whisker left_whisk3" style="
                       top: 138px;
                       transform: rotate(-5deg);
                    "></div>
                </div>

                <div class="mouth">

                      <div class="lips"></div>
                      <div class="cleft"</div>
                </div>


            </div>





        </div>

    </body>
</html>

.head {
    background-color: rgb(199, 193, 72);
    width: 190px;
    height: 190px;
    border-radius: 50% 50% 65% 65%;
    top: 24px;
    position: absolute;
}

.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}

.pupils{
    position: absolute;
    background-color: black;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    top: 11px;
    left: 10px;
}

.eye_reflect{
    position: absolute;
    background-color: white;
    width: 7px;
    height: 6;
    border-radius: 50%;
    left: 19;
    top: 5;
}

.ears{
    position: relative;
}

.ear{
    border-radius: 90% 0 90% 0;
    background-color: rgb(199, 193, 72);
    height: 100px;
    width: 100px;
    position: absolute;
}

.left_ear{
    transform: scale(1,-1) rotate(-10deg);
    left: 0px;
}

.left_inner_ear{
    background-color: black;
    /* transform: scale(1,-1) rotate(-10deg); */
    transform: scale(.85, .85);
    left: 0px;
}

.right_ear{
    transform: rotate(-10deg);
    left: 100px;
}

.right_inner_ear{
    background-color: black;
    /* transform: scale(1,-1) rotate(-10deg); */
    transform: scale(.85, .85);
    left: 0px;
}

.nose {
    background-color: black;
    position: relative;
    height: 23px;
    width: 23px;
    left: 89px;
    border-radius: 100% 100% 0% 2000%;
    transform: rotate(135deg);
}

.R_whisker {
    position:absolute;
    flex: 1 1;
    border-bottom: 2px solid black;
    width:85px;
    margin: auto;
    top:130;
    left:110;
}
.L_whisker {
    position:absolute;
    flex: 1 1;
    border-bottom: 2px solid black;
    width:85px;
    margin: auto;
    top:130;
    right:110;
}

.lips {
    width: 22px;
    height: 14px;
    border: 2px solid black;
    border-color: #fbfbfb00 rgb(0 0 0) rgb(0 0 0);
    border-radius: 50% 50% 60% 60%;
    position: relative;
    top: 21;
    left: 87;
}

.cleft{
    border-left: 2px solid black;
    height: 19px;
    position: relative;
    left: 99;
    top: 0;
}

.body {
    border: solid 2px;
    border-color: rgb(138 109 4/ 50%);
    background-color: rgb(199 193 100);
    width: 150px;
    height: 167px;
    border-radius: 30% 30% 40% 40%;
    position: relative;
    left: 23;
    top: 195;
    /* opacity: .92; */
}

.belly{
    width: 80px;
    height: 107px;
    border-radius: 70% 70% 70% 70%;
    background-color: rgb(255 240 184);
    position: absolute;
    top: 40;
    left: 35;
}

.arms{
    position:absolute;
    display:flex;
  }
  .arm {
    position: relative;
    background-color: rgb(199 193 72);
    border: solid 2px;
    border-color:rgb(35 15 15 / 0%) rgb(138 109 4 / 30%);
    width: 33px;
    height: 95px;
    border-radius: 15% 15% 40% 40%;
    margin:53;
    right:44;
  }
  .paw {
    position:relative;
    background-color: rgb(199 193 72);
    border: solid 2px;
    border-color: rgb(138 109 4/ 50%);
    width: 43px;
    height: 30px;
    border-radius: 60% 60% 40% 40%;
    top:80;
    right:7;
  }
  .fingers {
    width: 15px;
    height: 22px;
    border: solid 4px rgb(255 255 255);
    border-color: rgb(20 20 20 / 0%) rgb(20 20 20 / 35%) rgb(80 70 40 / 0%);
    border-radius:  60px 60px 30px 30px;
    position:relative;
    top:51;
    left:5;
  }

.legs{
    position:relative;
}
.leg {
    width:50px;
    height:30px;
    border: solid 1px;
    border-color: rgb(138 109 4/ 50%);
    background-color:rgb(199 193 120);
    border-radius: 50% 50% 30% 30%;
    position: absolute;
    top: 320;
    left: 20;
}

.tail {
    width: 28px;
    height: 73px;
    border-radius: 100% 500% 70% 70%;
    background-color: rgb(199 193 140);
    position: absolute;
    top: 260;
    left: 180;
    transform: rotate(45deg);
}

Kippie · November 12, 2021, 4:50am

Decided to create the fabled sea demons of classic cat folklore…fish.

fish-prototype_01a

The HTML code:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="fish">
            <div class="fins">
                <div class="fin left_fin" style="
                transform: scale(1,-1) rotate(-1deg);
                "></div>
                <div class="fin right_fin" style="
                left: 280px;"></div>
                <div class="tailfin top_fin"></div>
                <div class="tailfin bottom_fin" style="
                transform: scale(1,-1) rotate(-1deg);
                top: 290px;"></div>
                <div class="dorsalfin"></div>
            </div>
            <div id="body">
                <div class="eyes">
                    <div class="eye">
                        <div class="pupil"></div>
                    </div>
                    <div class="eye">
                        <div class="pupil"></div>
                    </div>
                </div>
                <div class="mouth">
                </div>
            </div>
        </div>
    </body>
</html>

The CSS code:

#body{
    background-color: rgb(79, 153, 153);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    left: 110px;
    top:150px;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}
.pupil{
    background-color: black;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 20px;
    margin-top: 18px;
    position: absolute;
}
.fins{
    position: relative;
}
.fin{
    border-radius: 50px 10px 50px 10px;
    background-color: rgb(104, 168, 147);
    height: 80px;
    width: 120px;
    position: absolute;
    top: 200px;
}
.tailfin{
    border-radius: 5px 150px 5px 90px;
    background-color: rgb(80, 116, 136);
    height: 125px;
    width: 100px;
    position: absolute;
    left: 100px;
    top: 55px;
}
.dorsalfin{
    border-radius: 90px 1px 75px 1px;
    background-color: rgb(51, 79, 94);
    height: 125px;
    width: 80px;
    position: absolute;
    left: 160px;
    top: 80px;
    transform: rotate(-25deg);
}
.mouth{
    background-color: black;
    width: 40px;
    height: 55px;
    border-radius: 50%;
    margin: 10px;
    margin-top: 18px;
    position: absolute;
    left: 70px;
}

Melshman · November 14, 2021, 6:38pm

Whew! The cat design on this course derailed me for a while. I went and learned CSS Grid, then found no shortage of rabbit holes when I started digging further into ways put together great front-ends. I’ve decided to pursue this sort of proto-bug character. It’s an SVG file, and has had id’s and classes applied to it in a way that will allow me to meaningfully manipulate its constituent elements with JS.

The browser console on the side of the screenshot is me working out how to access the elements of the drawing through the DOM. Here we see our Kritter sporting a sort of ‘dark mode’ look. Very rare, indeed!

Konzaih · November 22, 2021, 3:20pm

I’ve decided to create a Frog after a picture I’ve seen online.

index.html:

<html>
  <head>
      <link rel="stylesheet" href="style.css">
  </head>
    
  <div class="background-bottom"></div>
  <div class="background">
  
  <!-- body of frog-->  
  <div class="frog">
    <div class="body"></div>
      <div class="jaw"></div>

    <!-- head of frog-->
    <div class="head">
      <div class="nose">
        <div class="nose_left"></div>
        <div class="nose_right"></div>
      </div>
      <div class="eyes">
        <div class="eyelid_left"></div>
        <div class="eye_left">
          <div class="pupil_left"></div>
          <div class="shine_left"></div>
        </div>  
        <div class="eyelid_right"></div>
        <div class="eye_right">
          <div class="pupil_right"></div>
        </div>
        <div class="shine_right"></div>
        <div class="moon_left"></div>
        <div class="moon_right"></div>
      </div>
    </div>  

    <!--arms of frog-->
    <div class="arm_left">
      <div class="forearm_left"></div>
      <div class="armdetail_left"></div>
      <div class="hand_left">
        <div class="finger1">
          <div class="fingertip1"></div>
        </div>
        <div class="finger2">
          <div class="fingertip2"></div>
        </div>
        <div class="finger3">
          <div class="fingertip3"></div>
        </div>
      </div>
    </div> 
    <div class="arm_right">
      <div class="forearm_right"></div>
      <div class="armdetail_right"></div>
      <div class="hand_right">
        <div class="finger4">
          <div class="fingertip4"></div>
        </div>
        <div class="finger5">
          <div class="fingertip5"></div>
        </div>
        <div class="finger6">
          <div class="fingertip6"></div>
        </div>
      </div>
    </div>  

    <!--legs of frog-->
    <div class="leg_left">
      <div class="shadow_left"></div>
    </div>
    <div class="foot_left">
      <div class="foot_shadow_left"></div>
    </div>
    <div class="toe_left"></div>
    <div class="leg_right">
      <div class="shadow_right"></div>
    </div>
    <div class="foot_right">
      <div class="foot_shadow_right"></div>
    </div>
    <div class="toe_right"></div>
  </div>
</div>  
</html>

styling.css:

/*sorted according to index.html*/
.background-bottom {
  background-color: #e6ead2;
  width: 65%;
  height: 350px;
  left: 270px;
  top: 250px;
  border-radius: 0 0 50% 50%;
  position: absolute;
}
.background {
  background-color: #e6ead2;
  width: 100%;
  height: 470px;
  position: relative;
}
.frog {
  align-content: center;
}

/*body of the frog*/
.body {
  background-color: #d4d4d4;
  width: 400px;
  height: 182px;
  left: 625px;
  top: 300px;
  border-radius: 0% 0% 150px 150px;
  position: relative;
  z-index: 10;
}
.jaw {
  background-color: rgb(231, 230, 230);
  width: 550px;
  height: 175px;
  left: 550px;
  top: 190px;
  border-radius: 50%;
  position: absolute;
  z-index: 10;
}

/*head part including eyes, nose*/
.head {
  background-color: #cae256;
  width: 630px;
  height: 100px;
  left: 500px;
  top: 200px;
  border-radius: 30% 30% 50% 50%;
  border-bottom: 18px solid white;
  position: absolute;
  z-index: 15;
}
.nose {
  position: relative;
}
.nose_left {
  background-color: #8fd747;
  width: 20px;
  height: 20px;
  left: 285px;
  top: 70px;
  border-radius: 50%;
  position: absolute;
}
.nose_right {
  background-color: #8fd747;
  width: 20px;
  height: 20px;
  left: 325px;
  top: 70px;
  border-radius: 50%;
  position: absolute;
}
.shine_left {
  background-color: rgb(255, 255, 255);
  opacity: 50%;
  width: 20px;
  height: 20px;
  left: 55px;
  top: 25px;
  border-radius: 50%;
  position: absolute;
}
.shine_right {
  background-color: rgb(255, 255, 255);
  opacity: 50%;
  width: 20px;
  height: 20px;
  left: 315px;
  top: -15px;
  border-radius: 50%;
  position: absolute;
}
.eyes {
  background-color: #8fd747;
  width: 200px;
  height: 45px;
  left: 220px;
  top: -45px;
  position: relative;
}
.pupil_left {
  background-color: rgb(0, 0, 0);
  width: 20px;
  height: 55px;
  left: 40px;
  top: 20px;
  border-radius: 600% 600%;
  transform: rotate(90deg);
  position: absolute;
}
.pupil_right {
  background-color: rgb(0, 0, 0);
  width: 20px;
  height: 55px;
  left: 40px;
  top: 20px;
  border-radius: 600% 600%;
  transform: rotate(90deg);
  position: absolute;
}
.eye_left {
  background-color: #eb5530;
  outline: 10px solid #cae256;
  border: 10px solid black;
  width: 100px;
  height: 100px;
  left: -180px;
  top: -50px;
  border-radius: 50%;
  position: absolute;
}
.eye_right {
  background-color: #eb5530;
  outline: 10px solid #cae256;
  border: 10px solid black;
  width: 100px;
  height: 100px;
  left: 250px;
  top: -50px;
  border-radius: 50%;
  position: absolute;
}
.eyelid_left {
  background-color: #cae256;
  width: 195px;
  height: 150px;
  border-radius: 0 150% 0 0;
  left: -125px;
  top: -60px;
  position: absolute;
}
.eyelid_right {
  background-color: #cae256;
  width: 195px;
  height: 150px;
  left: 110px;
  top: -60px;
  border-radius: 150% 0 0;
  position: absolute;
}
.moon_left {
  box-shadow: 13px 13px 0 0 black;
  opacity: 10%;
  width: 100px;
  height: 100px;
  left: -174px;
  top: -47px;
  border-radius: 50%;
  transform: rotate(15deg);
  position: absolute;
}
.moon_right {
  box-shadow: 13px 13px 0 0 black;
  opacity: 10%;
  width: 100px;
  height: 100px;
  left: 255px;
  top: -49px;
  border-radius: 50%;
  position: absolute;
  transform: rotate(15deg);
}

/*arms of the frog*/
.arm_left {
  background-color: #cae256;
  width: 250px;
  height: 65px;
  left: 380px;
  top: 335px;
  border-radius: 50% 0 0 50%;
  transform: rotate(-25deg);
  position: absolute;
  z-index: 6;
}
.forearm_left {
  background-color: #cae256;
  width: 75px;
  height: 150px;
  left: -40px;
  top: 20px;
  border-radius: 120px 0 0 180px;
  transform: rotate(25deg);
  position: relative;
  z-index: 2;
}
.armdetail_left {
  border-bottom: 25px solid #8fd747;
  border-right: 25px solid transparent;
  width: 80px;
  height: 0;
  left: -30px;
  top: 89px;
  transform: rotate(-65deg);
  position: absolute;
  z-index: 3;
}
.hand_left {
  background-color: #fdb83a;
  width: 70px;
  height: 80px;
  left: -34px;
  top: 102px;
  border-radius: 90px 0 0 0;
  position: absolute;
  z-index: 4;
}
.finger1 {
  background-color: #fdb83a;
  width: 30px;
  height: 70px;
  left: -20px;
  top: 60px;
  position: absolute;
  transform: rotate(35deg);
  z-index: 4;
}
.finger2 {
  background-color: #fdb83a;
  width: 30px;
  height: 105px;
  left: 25px;
  top: 60px;
  position: absolute;
  transform: rotate(-5deg);
  z-index: 4;
}
.finger3 {
  background-color: #fdb83a;
  width: 30px;
  height: 75px;
  left: 62px;
  top: 60px;
  position: absolute;
  transform: rotate(-35deg);
  z-index: 4;
}
.fingertip1 {
  background-color: #fdb83a;
  width: 40px;
  height: 30px;
  left: -5px;
  top: 40px;
  border-radius: 50%;
  border-bottom: 10px solid rgba(0, 0, 100, 0.075);
  position: absolute;
  z-index: 4;
}
.fingertip2 {
  background-color: #fdb83a;
  width: 40px;
  height: 30px;
  left: -5px;
  top: 85px;
  border-radius: 90% 90%;
  border-bottom: 10px solid rgba(0, 0, 100, 0.075);
  position: absolute;
  z-index: 4;
}
.fingertip3 {
  background-color: #fdb83a;
  width: 40px;
  height: 30px;
  left: -5px;
  top: 50px;
  border-radius: 50%;
  border-bottom: 10px solid rgba(0, 0, 100, 0.075);
  position: absolute;
  z-index: 4;
}
.arm_right {
  background-color: #cae256;
  width: 250px;
  height: 65px;
  left: 1000px;
  top: 335px;
  border-radius: 50% 0 0 50%;
  transform: rotate(205deg);
  position: absolute;
  z-index: 6;
}
.forearm_right {
  background-color: #cae256;
  width: 75px;
  height: 150px;
  left: -50px;
  top: -110px;
  border-radius: 180px 0 0 120px;
  transform: rotate(-25deg);
  position: relative;
  z-index: 2;
}
.armdetail_right {
  border-bottom: 25px solid #8fd747;
  border-left: 25px solid transparent;
  width: 80px;
  height: 0;
  left: -36px;
  top: -47px;
  transform: rotate(-115deg);
  position: absolute;
  z-index: 3;
}
.hand_right {
  background-color: #fdb83a;
  width: 70px;
  height: 85px;
  left: -40px;
  top: -120px;
  border-radius: 0 0 0 90px;
  position: absolute;
  z-index: 4;
}
.finger4 {
  background-color: #fdb83a;
  width: 30px;
  height: 70px;
  left: -20px;
  top: -55px;
  position: absolute;
  transform: rotate(-35deg);
  z-index: 4;
}
.finger5 {
  background-color: #fdb83a;
  width: 30px;
  height: 105px;
  left: 25px;
  top: -95px;
  position: absolute;
  transform: rotate(5deg);
  z-index: 4;
}
.finger6 {
  background-color: #fdb83a;
  width: 30px;
  height: 75px;
  left: 62px;
  top: -55px;
  position: absolute;
  transform: rotate(35deg);
  z-index: 4;
}
.fingertip4 {
  background-color: #fdb83a;
  width: 40px;
  height: 30px;
  left: -5px;
  top: -25px;
  border-radius: 50%;
  border-top: 10px solid rgba(0, 0, 100, 0.075);
  position: absolute;
  z-index: 4;
}
.fingertip5 {
  background-color: #fdb83a;
  width: 40px;
  height: 30px;
  left: -5px;
  top: -25px;
  border-radius: 90% 90%;
  border-top: 10px solid rgba(0, 0, 100, 0.075);
  position: absolute;
  z-index: 4;
}
.fingertip6 {
  background-color: #fdb83a;
  width: 40px;
  height: 30px;
  left: -5px;
  top: -25px;
  border-radius: 50%;
  border-top: 10px solid rgba(0, 0, 100, 0.075);
  position: absolute;
  z-index: 4;
}

/*legs of the frog*/
.leg_left {
  background-color: #00929a;
  width: 380px;
  height: 130px;
  left: 330px;
  top: 260px;
  border-radius: 90%;
  transform: rotate(20deg);
  position: absolute;
  overflow: hidden;
  z-index: 5;
}
.shadow_left {
  background-color: #01666b;
  opacity: 50%;
  width: 360px;
  height: 60px;
  top: 95px;
  position: absolute;
}
.foot_left {
  background-color: #00929a;
  width: 475px;
  height: 61px;
  left: 271px;
  top: 409px;
  border-radius: 50% 0 0 50%;
  position: absolute;
  overflow: hidden;
  z-index: 5;
}
.foot_shadow_left {
  background-color: #01666b;
  opacity: 50%;
  width: 410px;
  height: 60px;
  left: 70px;
  top: 50px;
  position: absolute;
}
.toe_left {
  background-color: #00929a;
  width: 81px;
  height: 81px;
  left: 260px;
  top: 425px;
  border-radius: 50% 0% 50% 50%;
  transform: rotate(-6deg);
  position: absolute;
}
.leg_right {
  background-color: #00929a;
  width: 360px;
  height: 130px;
  left: 950px;
  top: 260px;
  border-radius: 90%;
  transform: rotate(160deg);
  position: absolute;
  overflow: hidden;
  z-index: 5;
}
.shadow_right {
  background-color: #01666b;
  opacity: 50%;
  width: 360px;
  height: 60px;
  top: -40px;
  position: absolute;
}
.foot_right {
  background-color: #00929a;
  width: 475px;
  height: 61px;
  left: 911px;
  top: 409px;
  border-radius: 0 50% 50% 0;
  position: absolute;
  overflow: hidden;
  z-index: 5;
}
.foot_shadow_right {
  background-color: #01666b;
  opacity: 50%;
  width: 405px;
  height: 60px;
  top: 50px;
  position: absolute;
}
.toe_right {
  background-color: #00929a;
  width: 80px;
  height: 80px;
  left: 1315px;
  top: 423px;
  border-radius: 0% 50% 50% 50%;
  transform: rotate(6deg);
  position: absolute;
}

alp257 · November 27, 2021, 12:33pm

It was a good assignment to learn and gain experience with frontend UI development
I expanded what was started in the video.

HTML Code:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat">
            <div class="ears">
                <div class="ear ear_left"></div>
                <div class="ear ear_right"></div>
            </div>
            <div id="face">
                <div class="eyes">
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                    <div class = "eye">
                        <div class="pupils"></div>
                    </div>
                </div>
                <div class="whiskers">
                    <div class="whisker_left_group">
                        <div class="whisker whisker_first_pair"></div>
                        <div class="whisker whisker_second_pair"></div>
                        <div class="whisker whisker_third_pair"></div>
                    </div>
                    <div class="whisker_right_group">
                        <div class="whisker whisker_first_pair"></div> 
                        <div class="whisker whisker_second_pair"></div>
                        <div class="whisker whisker_third_pair"></div>
                    </div>
                </div>
                <div class="nose"></div>
                <div class="mouth"></div>
            </div>
            <div class="body">
                <div class="tail"></div>
                <div class="paws">
                    <div class="paw paw_left"></div>
                    <div class="paw paw_right"></div>
                </div>
            </div>
        </div>

    </body>
</html>

CSS Code:

#face {
    background-color: #f5f590;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
}

.eyes {
    position: relative;
    top: 30px;
    display: flex;
}

.eye {
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}

.pupils {
    background-color: black;
    width: 28px;
    height: 35px;
    border-radius: 50%;
    position: relative;
    top: 10px;
    left: 12px;
}

.ears {
    position: relative;
}

.ear {
    background-color: #f5f590;
    border-radius: 90% 10% 90% 10%;
    height: 100px;
    width: 100px;
    position: absolute;
}

.ear_left {
    transform: scale(1, -1);
    left: 0px;
}

.ear_right {
    left: 100px;
}

.whiskers {
    position: relative;
}

.whisker {
    background-color: rgb(51, 113, 138);
    height: 2px;
    width: 50px;
    position: absolute;
}

.whisker_left_group {
    position: relative;
    right: 10px;
}

.whisker_right_group {
    position: relative;
    left: 165px;
}

.whisker_first_pair {
    top: 20px;
}

.whisker_second_pair {
    top: 35px;
}

.whisker_third_pair {
    top: 50px;
}

.nose {
    background-color: coral;
    height: 20px;
    width: 20px;
    position: relative;
    margin: auto;
    border-radius: 30% 30% 90% 90%;
}

.mouth {
    background-color: rgb(201, 141, 198);
    height: 10px;
    width: 25px;  
    position: relative;
    top: 30px;
    margin: auto;
    border-radius: 5% 5% 95% 95%;
}

.body {
    background-color: #f5f590;
    width: 200px;
    height: 220px;
    border-radius: 90% 90% 35% 35%;
    position: relative;
    top: -15px;
}

.tail {
    background-color: #f5f590;
    width: 40px;
    height: 160px;
    position: relative; 
    margin: auto;
    margin-right: 0;
    top: 85px;
    left: 40px;
    border-radius: 100% 30% 100% 30%;
    transform: rotate(45deg);
}

.paws {
    position: relative;
    display: flex;
}

.paw {
    background-color: #f1e57f;
    width: 45px;
    height: 32px;
    margin: 27px;
    border-radius: 90% 90% 10% 10%;
}

With kind regards

cgironda · November 29, 2021, 9:00am

Well, here you have what I did with a little bit of help.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crypto Kitties Project</title>
    <link rel="icon" type="image/png" href="https://moralis.io">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <!-- <head>Crypto Kitties Project</head> -->
</head>
<body>
    <div class="cartoon hb">
        <div class="shorts ha hb"></div>
        <div class="shoe"></div>
        <div class="shoe"></div>
        <div class="arms r ha"></div>
        <div class="sleeves ha hb"></div>
        <div class="body ha hb"></div>
        <div class="head hb">
            <div class="eye ha r"></div>
            <div class="nose r"></div>
            <div class="mouth r"></div>
            <div class="ear r h"></div>
            <div class="ear r h"></div>
        </div>
        <div class="hands r"></div>
    </div>    
</body>
</html>

CSS code:

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height:  100vh;
    background-color: #f6f6f6;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%230397f9' fill-opacity='0.13' fill-rule='evenodd'/%3E%3C/svg%3E");
    color: black;
    font-family: Rubik, sans-serif;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cartoon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vmin;
    height: 80vmin;
}

.cartoon div {
    position: absolute;
    box-sizing: border-box;
}
    
.b {
    border: 0.5vmin solid;
}

.r {
    border-radius: 100%;
}

.hb::before,
.ha::after {
content: "";
display: block;
position: absolute;
box-sizing: border-box;
}

/****/
.cartoon {
    --fur: #222;
    --skin: #e3e3e0;
    --nose: #c00;
    --shirt: rgb(186, 234, 249);
    --pants: #6edbfc;
}

.head {
    width: 32%;
    height: 32%;
    background: var(--skin);
    border-radius: 50%;
    top: 14%;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: inset 0 12vmin 0 2vmin var(--fur);
}

.head::before {
    width: 110%;
    height: 38%;
    background: var(--skin);
    border-radius: 50%;
    bottom: 0%;
    left: -5%;
}

.eye {
    width: 28%;
    height: 32%;
    background: var(--skin);
    top: 20%;
    left: 25%;
    box-shadow: 5.66vmin 0 var(--skin);
}
.eye::after {
    width: 3vmin;
    height: 3vmin;
    background: var(--skin);
    box-shadow: inset 0.75vmin -0.75vmin 0 1vmin var(--fur), 6.75vmin -0.75vmin 0 -1vmin var(--skin), 6vmin 0 var(--fur);
    border-radius: 50%;
    top: 58%;
    left: 6%;
    transform: translate(90%, -75%);
}

.nose{
    /* border-radius:50px 50px 50px 50px / 100px 100px 50px 50px; */
    border-radius: 50% 50% 50% 50% / 100% 100% 50% 50%;
    width: 10%;
    height: 10%;
    background: var(--nose);
    top: 60%;
    left: 50%;
    transform: translate(-50%, 0);
}

.mouth{
	width: 55%;
    height: 25%;
	top: 78%;
	left: 48%;
	margin-left: -25%;
	z-index: 2;
	overflow: hidden;
    transform: translate(0%, -10%);
}

.mouth:before{
	content: "";
	display: block;
	left: -4%;
	bottom: 60%;
    position: absolute;
	width: 50%;
	height: 70%;
	border-radius: 50%;
    border: 2px solid #000;
}

.mouth:after{
	content: "";
	display: block;
	position: absolute;
    left: 48%;
	bottom: 60%;
	border: 2px solid #000;
	width: 50%;
	height: 70%;
	border-radius: 50%;
} 

.ear {
    width: 60%;
    height: 70%;
    top: -16%;
    left: -4%;
    border-radius: 90% 0 90% 0;
    transform: rotate(100deg);
    overflow: hidden;
    box-shadow: inset -14.5vmin 0 var(--fur);
    /* overflow: hidden; */
    z-index: -1;
}

.ear + .ear {
    transform: scaleX(-1) rotate(100deg);
    left: 44%;
    top: -16%;
}

.body {
    height: 31%;
    width: 8%;
    background: var(--shirt);
    top: 45%;
    left: 50%;
    transform: translate(-50%, 0);
}
    
.body::before {
    width: 30%;
    height: 100%;
    left: -20%;
    background: var(--shirt);
    transform: skewX(-3deg);
    transform-origin: bottom right;
}
    
.body::after {
    width: 30%;
    height: 100%;
    right: -20%;
    background: var(--shirt);
    transform: skewX(3deg);
    transform-origin: bottom left;
}

.shorts {
    width: 10%;
    height: 5%;
    background: var(--pants);
    top: 75%;
    left: 50%;
    transform: translate(-50%, 0);
}
    
.shorts::before {
    width: 60%;
    height: 490%;
    background: var(--pants);
    transform-origin: top left;
    transform: skewX(-5deg)
}
    
.shorts::after {
    right: 0;
    width: 60%;
    height: 490%;
    background: var(--pants);
    transform-origin: top right;
    transform: skewX(5deg)
}
    
.shoe {
    width: 9%;
    height: 4%;
    background: var(--fur);
    border-radius: 100% 50% 0 0;
    bottom: 0;
    left: 40%;
    transform: skewX(-3deg);
}
    
.shoe + .shoe {
    left: auto;
    right: 40%;
    transform: scaleX(-1) skewX(-3deg);
}
    
.sleeves {
    width: 7%;
    height: 7%;
    background: var(--shirt);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    
.sleeves::before,
.sleeves::after {
    width: 100%;
    height: 200%;
    background: var(--shirt);
    transform: rotate(30deg);
    left: -50%;
    top: -20%;
}
    
.sleeves::after {
    transform: rotate(-40deg);
    left: 50%;
}
    
.arms {
    width: 23%;
    height: 30%;
    border: 3vmin solid var(--fur);
    border-bottom: 2vmin solid transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
}
    
.arms::after {
    width: 4.8vmin;
    height: 4.8vmin;
    background: var(--fur);
    border-radius: 50%;
    top: 82%;
    left: 70%;
}
    
.hands {
    width: 6%;
    height: 6%;
    background: var(--fur);
    top: 73%;
    left: 42%;
}

The output is: Screen Shot 2021-11-29 at 17.11.18

Jamesrgx · December 11, 2021, 10:53am

I don’t know what this is…but I like it
(Definitely going to circle back on the html/css)

Screenshot 2021-12-11 11.48.13 AM

Langren · December 17, 2021, 9:11pm

<html>
    <head>
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <div class="cat">
            <div class="ears">
                <div class="ear left_ear">
                    <div class="ear inner_ear_left"></div>
                </div>
                <div class="ear right_ear">
                    <div class="ear inner_ear_right"></div>
                </div>
            </div>
            <div class="face"></div>
            <div class="mouths">
                <div class="mouth_left"></div>
                <div class="mouth_right"></div>
            </div>
            <div class="teeths">
                <div class="tooth"></div>
                <div class="tooth"></div>
                <div class="tooth"></div>
                <div class="tooth"></div>
                <div class="tooth"></div>
            </div>
            <div class="nose"></div>
            <div class="tail"></div>
           
           <div id="body"> 
            <div class="eyes">
                <div class="eye">
                    <div class="pupils"></div>
                </div>
                <div class="eye">
                    <div class="pupils"></div>
                </div> 
            </div>
            <div class="feet">
                    <div class="foot">
                        <div class="innerfoot"></div>
                        <div class="innerfoot"></div>
                    </div>
                    <div class="foot">
                        <div class="innerfoot"></div>
                        <div class="innerfoot"></div>
                    </div>
                    <div class="foot">
                        <div class="innerfoot"></div>
                        <div class="innerfoot"></div>
                    </div>
                    <div class="foot">
                        <div class="innerfoot"></div>
                        <div class="innerfoot"></div>
                    </div>
                </div> 
        </div> 
        </div>
        <div class="floor"></div>
    </body>
</html>

Langren · December 17, 2021, 9:12pm

#body{
    background-color: rgb(165 151 151);
    width: 300px;
    height: 200px;
    border-radius: 50% 30% 30% 20%;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex; 
}
.eye{
    background-color: rgb(194, 18, 18);
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    margin: 20px;
    position: relative; 
}
.pupils{
    background-color: blue;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: 10px;
    position: absolute;
    top: 6px;
    right: 1px;
}
.ears{
    position: relative;
}
.ear{
    border-radius: 90% 0 90% 0;
    background-color: rgb(168, 137, 137);
    height: 100px;
    width: 100px;
    position: absolute;
}
.left_ear{
    transform: scale(1, -1) rotate(0deg);
    left: -25;
}
.right_ear{
    left: 84px;
}
.tail{
    background-color: rgb(137 88 88);
    height: 3px;
    width: 100px;
    margin: 100px;
    position: absolute;
    left: 200px;
    top: 50px;
}
.mouths{
    border-radius: 20% 0 20% 0;
    background-color: rgb(56, 107, 21);
    height: 10px;
    width: 50px;
    position: absolute;
    top: 150px;
    left: 60;
}
.mouth_left{
    transform: scale(1, -1) rotate(0deg);
    left: -25;
}
.mouth_right{
    left: 84px;
}
.teeths{
    position: relative;
    top: 148px;
    display: flex;
    left: 51;
}
.tooth{
    background-color: rgb(42, 53, 197);
    width: 2px;
    height: 5px;
    border-radius: 50% 50% 50% 50%;
    margin: 4;
    position: relative;
}
.nose{
    border-radius: 20% 20% 99% 99%;
    background-color: rgb(173 97 97);
    height: 25px;
    width: 20px;
    position: absolute;
    top: 119px;
    left: 76;
}
.inner_ear_left{
    border-radius: 90% 0 90% 0;
    background-color: rgb(85, 77, 73);
    height: 90px;
    width: 90px;
    position: relative;
}
.inner_ear_right{
    border-radius: 90% 0 90% 0;
    background-color: rgb(85, 77, 73);
    height: 90px;
    width: 90px;
    position: relative;
}
.feet{
    position: relative;
    top: 70px;
    display: flex;
}
.foot{
    border-radius: 20% 18% 90% 70%;
    background-color: rgb(19, 11, 7);
    height: 58px;
    width: 40px;
    margin: 18px;
    left: -5px;
    position: relative; 
}
.innerfoot{
    border-radius: 20% 18% 90% 70%;
    background-color: rgb(233, 221, 216);
    height: 28px;
    width: 10px;
    margin: 18px;
    left: -5px;
    top: 10px;
    position: relative;
}
.floor{
    background-color: rgb(10, 10, 10);
    height: 3px;
    width: 450px;
    margin: 100px;
    position: relative;
    top: -70px;
    left: -100px;  
}
.face{
    border-radius: 50%;
    background-color: rgb(231 221 217);
    height: 100px;
    width: 100px;
    margin: 18px;
    left: 18;
    top: 55px;
    position: absolute;
}

Langren · December 17, 2021, 9:15pm

Screenshot 2021-12-17 221447