cssで画像を並べ、文字を任意の位置に置きたい(模写コーディング）

下記画像のようなコーディングをしたいのですが、どのようにすればいいでしょうか。ご教授お願いいたします。
![

自力で理解できたのは以下の通りです。（HTMLはこのままで問題ないかと思われます）

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <link rel="stylesheet" href="../../tools/style/reset.css" />
8    <link rel="stylesheet" href="./assets/stylesheets/style.css" />
9    <title>pc-site</title>
10  </head>
11  <body>
12    <div class="l-wrapper">
13      <header class="l-header">
14        <img class="l-header__logo" src="./assets/images/logo.png" alt="ロゴ">
15        <nav>
16          <ul class="nav__list">
17            <li>
18              <a href="" class="nav__menu">home</a>
19            </li>
20            <li>
21              <a href="" class="nav__menu">about</a>
22            </li>
23            <li>
24              <a href="" class="nav__menu">access</a>
25            </li>
26            <li>
27              <a href="" class="nav__menu">contact</a>
28            </li>
29          </ul>
30        </nav>
31      </header>
32      <div class="hero"></div>
33      <main class="l-main">
34        <h1 class="title">PC カリキュラム</h1>
35        <div class="l-contents">
36          <section class="latest__work">
37            <h2 class="gallery">最新の作品</h2>
38            <ul class="gallery__list">
39              <li>
40                <img class="production" src="./assets/images/production_01.jpg" alt="夕焼けと海">
41              </li>
42              <li>
43                <img class="production" src="./assets/images/production_02.jpg" alt="砂浜と貝殻">
44              </li>
45              <li>
46                <img class="production" src="./assets/images/production_03.jpg" alt="砂浜とドリンク">
47              </li>
48              <li>
49                <img class="production" src="./assets/images/production_04.jpg" alt="桟橋">
50              </li>
51              <li>
52                <img class="production" src="./assets/images/production_05.jpg" alt="小船">
53              </li>
54              <li>
55                <img class="production" src="./assets/images/production_06.jpg" alt="夕日の空">
56              </li>
57            </ul>
58          </section>
59          <section class="self__introduction">
60            <h2 class="introduction__title">自己紹介</h2>
61            <p class="text">
62              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
63            </p>
64          </section>
65        </div>
66      </main>
67      <footer class="l-fotter">
68        <div class="copyright">
69          <div class="copyright__inner">
70            <p class="copyright__text">
71              <small>© 2019 example.inc</small>
72            </p>
73          </div>
74        </div>
75      </footer>
76    </div>
77  </body>
78</html>

CSS
1@charset "UTF-8";
2
3.wrapper {
4    width: 750px;
5    background-color: #ddd;
6}
7
8.header {
9    display: flex;
10    height: 90px;
11    padding: 0 20px;
12    background-color: #FF9900;
13    justify-content: space-between;
14    align-items: center;
15    box-shadow: 0px 4px 4px #bbbbbb;
16}
17
18.top-box {
19    width: 165px;
20    height: 55px;
21    border-radius: 10px;
22    background-color: #fff;
23}
24
25.circle-conteiner {
26    display: flex;
27    justify-content: flex-end;
28}
29
30.circle {
31    width: 60px;
32    height: 60px;
33    margin-left: 20px;
34    border-radius: 50%;
35    background-color: #fff;
36}
37
38.main-base {
39    display: flex;
40    flex-wrap: wrap;
41    padding: 40px;
42}
43
44.main-box {
45    width: 200px;
46    height: 200px;
47    margin: 0px 20px 20px 0px;
48    border-radius: 10px;
49    background-color: #fff;
50    box-shadow: 2px 2px 2px #bbbbbb;
51}
52
53.footer {
54    height: 120px;
55    background-color: #000022;
56}