Computer scienceFrontendCSSFlexbox

Orientation and Display order

Theory

Profile

Report a typo

There is a profile page. It includes the last three orders, profile info, and the profile picture.

All the settings were thrown off for some reason, so now your task is to write a code the result of which will look like the picture below.

The profile card with image of a cat and list of orders

Write HTML and CSS code
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile</title>
</head>

<body>
<div class="profile">
<div class="last-orders">
<div class="order">
<div class="product">
<img src="https://i.ibb.co/mzPvpR3/headphones.jpg">
<div class="product-name">
<p>Headphones</p>

</div>
</div>
</div>
<div class="order">
<div class="product">
<img src="https://i.ibb.co/FB8HTVQ/lawn-mower.jpg">
<div class="product-name">
<p>Lawnmower</p>

</div>
</div>
</div>
<div class="order">
<div class="product">
<img src="https://i.ibb.co/z5SP336/laptop.jpg">
<div class="product-name">
<p>Laptop</p>

</div>
</div>
</div>
Completed 0 of 2
First required option applied
Second required option applied
___

Create a free account to access the full topic