Where am I going wrong, i am new to coding

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.