Html and css, Sorting your friends. Says pass but result not satisfactory

Language Help CSS
1

index.html

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<div class="friend" id="best_friend">Friend 1</div>
		<div class="friend">Friend 2</div>
		<div class="family">The Fam </div>
		<div class="enemy">"Friend 3"</div>
		<div class="enemy">"Friend 4"</div>
		<div class="enemy" id="archnemesis">"Friend 5"</div>
	</body>
</html>

stylesheet.css

/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
	height:100px;
	width:100px;
	border-radius:100%;
	border:2px solid black
}
.friend {
    border:2px dashed #008000;
}
.family {
    border:2px dashed #0000ff;
}
.enemy {
    border:2px dashed #ff0000;
}
#best_friend {
    border:4px solid #00c957;
}
#archnemesis {
    border:4px solid #cc0000;
}

I think I’m messing up the border radius.

Thank you for your time.

2

How do I paste my index.html code?

3

what is the wrong with the border-radius? They are circles, as they are suppose to be

as for posting html code:

4

Friend names are not properly aligned within the circle like they should be. Instead they are half outside the circle and half inside. That’s all that’s wrong.

5

well, horizontal align is easy:

div { text-align: center; }

as for vertical align, you can look at exercise of sorting your friends, they use paragraphs which they give a margin-top.

or you can read this centering guide, which is simply fantastic

1 Like
6

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