Computer scienceFrontendCSSBasic propertiesPositioning

Clear

Theory

Make It Right

Report a typo

Jake is making his own social network where users can share their work experiences. Jake wants to place the user cards in two columns, like in the image below.

Four cards in the grid

Please help Jake position the cards, so that his social network can soon be up and running.

Tip: You only need to use one float value and one clear value.

Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cards</title>
</head>
<body>
<div class="main-container">
<div class="user-card card-one">
<img class="user-avatar" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png">
<p class="user-name">Alice Robins</p>
<p class="user-profession">Architect</p>
<button class="btn-follow">Follow</button>
</div>
<div class="user-card card-two">
<img class="user-avatar" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png">
<p class="user-name">Robert Langdon</p>
<p class="user-profession">Web Developer</p>
<button class="btn-follow">Follow</button>
</div>
<div class="user-card card-three">
<img class="user-avatar" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png">
<p class="user-name">Rachel Bayless</p>
<p class="user-profession">Data Science</p>
<button class="btn-follow">Follow</button>
</div>
<div class="user-card card-four">
<img class="user-avatar" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png">
<p class="user-name">Patrick Wood</p>
<p class="user-profession">Woodworker</p>
<button class="btn-follow">Follow</button>
</div>
</div>
</body>
</html>
Completed 3 of 8
Card one has the correct float value.
Card two has the correct float value.
___

Create a free account to access the full topic