I am trying to make a round face with eyes looking on the right side.
This is my HTML and CSS, can anyone help me figure out what is it that is wrong here in my code.
Please post actual code.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the âpreformatted textâ tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Also, the whites of the eyes are not the same size (or shape) and not centered left and right. You should probably fix that first.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style.css">
<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>BOB Excersice</title>
</head>
<body>
<div class="face">
<div class="eye-container">
<div class="eye"></div>
<div class="pupil"></div>
<div>
<div class="eye"></div>
<div class="pupil"></div>
</div>
</div>
</div>
</body>
</html>
This is the HTML
body{
background-color: lightskyblue;
}
.face{
background-color: lightcoral;
height: 250px;
width: 250px;
border-radius:150px;
margin-left: 150px;
margin-top: 150px;
}
.eye-container{
display: flex;
padding-left: 40px;
padding-top: 40px;
}
.eye{
height: 60px;
width: 60px;
background-color: white;
border-radius: 50px;
margin:20px;
}
.pupil{
height: 10px;
width: 10px;
background-color: black;
margin: 10px 0px 10px 10px;
}
This is CSS
Also, the size of the white âeyesâ are shifting when Iâm trying to put âpupilâ CSS properties.
I first would suggest you nest two eye divs within the eye-container div. Next, I would nest a pupil div in each of the eye divs.
Doing the above will have the pupils pointing to the upper left. If you can get this far, then see if you can play with the position of the pupils by changing the eye class.
Hint to accomplish the second part:
Set the eyeâs display property to flex and use applicable justify-content and align-items property values for it. You will also need to remove the left padding from the eye-container div to center the eyes.
2 Likes
I gave it a try and here is the result.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style.css">
<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>BOB Excersice</title>
</head>
<body>
<div class="face">
<div class="eye-container">
<div class="eye">
<div class="pupil"></div>
</div>
<div class="eye">
<div class="pupil"></div>
</div>
<div>
</div>
</div>
</div>
</body>
</html>
body{
background-color: lightskyblue;
}
.face{
background-color: lightcoral;
height: 250px;
width: 250px;
border-radius:150px;
margin-left: 150px;
margin-top: 150px;
}
.eye-container{
display: flex;
justify-content: center;
/* padding-left: 20px; */
padding-top: 40px;
}
.eye{
height: 60px;
width: 60px;
background-color: white;
border-radius: 50px;
margin:20px;
display: flex;
justify-content: center;
}
.pupil{
height: 20px;
width: 20px;
background-color: black;
border-radius: 20px;
margin: 20px 0px 0px 40px;
}
Looks like you accomplished what you wanted to do.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style.css">
<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>BOB Excersice</title>
</head>
<body>
<div class="face">
<div class="eye-container">
<div class="eye">
<div class="pupil"></div>
</div>
<div class="eye">
<div class="pupil"></div>
</div>
</div>
</div>
</body>
</html>
Thank You, Randell
This is my first time in the self-taught programmers community looking for the help and the way you helped me made me think differently, I really appreciate it.