```I decided to give myself a challenge and create a smiley face using only HTML and CSS. First I used HTML to create 6 divs. Then I used CSS to create the shapes and positions of the divs. The circles and ovals where made using the border radius property. All the positioning was done using margins and position properties. The most difficult part was creating the curve for the mouth, my solution was to use two overlapping circles and moving one slightly higher and changing the color to yellow to blend in with the face circle.
Below is the code I used to accomplish this.
HTML
<!DOCTYPE html>
SMILE
<h1>Smile!</h1>
<div class="grid">
<div class="face">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
<div class="mouth2"></div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
box {
display: flex;
justify-content: center;
justify-items: center;
width: 1024px;
height: 768px;
}
body {
background-image: url("images/bomb-g3fdef4030_1280.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
max-height: 1000px;
flex-shrink: 1;
}
h1 {
margin: 0 auto;
text-align: center;
font-size: 150px;
color: white;
flex-shrink: 1;
}
.face {
background-color: yellow;
height: 600px;
width: 600px;
border-radius: 50%;
display: flex;
justify-content: center;
margin-top: 80px;
margin-left: 30%;
flex-shrink: 1;
}
.left{
background-color: black;
height: 100px;
width: 50px;
border-radius: 50%;
margin-top: 25%;
margin-left: 25%;
margin-right: auto;
z-index: 100;
flex-shrink: 1;
}
.right{
background-color: black;
height: 100px;
width: 50px;
border-radius: 50%;
margin-top: 25%;
margin-right: 25%;
z-index: 100;
}
.mouth {
height: 450px;
width: 450px;
background-color: black;
border-radius: 100%;
position:relative; top: -550px; left: 495px
}
.mouth2 {
z-index: 5;
height: 455px;
width: 455px;
background-color: yellow;
border-radius: 100%;
position:relative; top: -1050px; left: 495px
}
Top comments (0)