\n\n\n\n

The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.
\n<\/p>\n\n

body {\ndisplay: flex;\njustify-content: center; \nalign-items: center;\nheight: 100vh;\n}\n.pumpkin {\nposition: relative;\ndisplay: flex;\nalign-items: center;\n}  \n.left{\nwidth: 110px;\nheight: 160px;\nbackground: rgb(255, 117, 24);\nborder-radius: 50%;\n}\n.right{\nwidth: 110px;\nheight: 160px;\nbackground: rgb(255, 117, 24);\nborder-radius: 50%;\n}  \n.center{\nwidth: 110px;\nheight: 160px;\nbackground: rgb(255, 117, 24);\nborder-radius: 50%;\n}\n<\/pre>\n\n\n\n
This outputs 3 Perfect orange Ovals side by side.  What is going on here?  First, we centre the pumpkin div in the centre of the page using the body tag. We doing this with the first 3 lines. Next, we use height: 100vh; To tell the code that the body tag is taking up 100% of the screen. Without this it will the body tag will only be as big as the content, meaning that the Ovals will be centred across the top of the page.  So here is what it looks like.<\/p>\n\n

\nNext, We want the circles to overlap, this can be done fairly easily by giving the left and right Ovals a negative margin.
\n<\/p>\n\n
.left{\nwidth: 110px;\nheight: 160px;\nbackground: rgb(255, 117, 24);\nborder-radius: 50%;\nmargin-right: -45px;\n}\n.right{\nwidth: 110px;\nheight: 160px;\nbackground: rgb(255, 117, 24);\nborder-radius: 50%;\nmargin-left: -45px;\n}\n<\/pre>\n\n\n\n
So here we moving the right Ovel over to the left by 45 pixels and the left Ovel to the right by 45 pixels. (I'm not going to add a photo of this stage as I still have not got a way to deal with storing photos) <\/p>\n\n
Now for the harder part (Some, ok a lot of Google was used)
\n<\/p>\n\n
.stem {\nposition: absolute;\ntop: -30px;\nleft: 50%;\ntransform: translateX(-50%); \/* Center the stem horizontally with in the contanter *\/\nwidth: 30px;\nheight: 60px;\nbackground-color: brown;\nborder-radius: 3px;\nz-index: -1;\n}\n.curve{\nposition: absolute;\ntop: -47px;\nleft: 43%;\ntransform: translateX(-50%); \/* Center the stem horizontally with in the contanter *\/\ntransform: rotate(-15deg);\nwidth: 30px;\nheight: 30px;\nbackground-color: brown;\nborder-radius: 3px;\nz-index: -1;\n}\n<\/pre>\n\n\n\n
So width , height, border-radius and background-color are pretty self-explanatory.  So im going to skip over it.  Starting with position: absolute;  what this does is remove the div from the flow of the website. Instead, it is based on the nearest anchor point.  position: absolute;  Can be placed over any element. Next, to centre the Stem horizontally we use left: 50% and transform: translateX(-50%); It makes sense when you think about it but you do have to think about it to start left: 50% Centers the left edge of the stem within the pumpkin div. I want the centre of the stem to be in the centre of the pumpkin. transform: translateX(-50%); moves the stem back over towards the left side by half the stem size. top: -47px; Does pretty much what you expect. It moves the top edge upwards by 47 px. z-index is a thing I have found recently, basically the height of the element. I want the z-index to be behind the pumpkin so I give it a z-index : -1 while the pumpkin has the default index of 0. This is what it looks like.<\/p>\n\n
<\/p>\n\n
Finally the Eyes, mouth and background. Let's start with the eyes,
\n<\/p>
\n\n\n    \n    \n