Where am I going wrong, i am new to coding

HTML-CSS
1

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.

Help
Help1362×1473 278 KB

4 
<!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

5 
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.

6

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
7

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;
}
9 
<!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>
10

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.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.