I am a beginner programmer. The HTML CSS of what I tried is attached below.
I need the output of look like this way
but unfortunately the displays look like this:
This is the code I tried - please correct the HTML codes and CSS styles so it shows like my 1st screen shot image I have uploaded.
.space { display: flex; gap: 20px; margin: 60px auto; width: 90%; justify-content: space-between; flex-wrap: wrap; /* Makes it responsive */}.icon{ align-items: flex-start;}.card { display: flex; flex-direction: column; align-self: center; justify-content: space-between; background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; width: 200px; height: 250px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s;}.card:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); background-color: #bcc3cb;}.card img.icon { width: 50px; height: 50px; margin-bottom: 20px;}.card img.arrow { width: 20px; height: 20px; margin-top: 20px;}.card p { font-size: 16px; font-weight: 500; color: #333; margin: 0;}<div class="space"><div class="card"><img class="icon" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png" alt="Icon"><p>School of Computing</p><img class="arrow" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/btn-next.png" alt="Arrow"></div><div class="card"><img class="icon" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png" alt="Icon"><p>School of Management & Law</p><img class="arrow" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/btn-next.png" alt="Arrow"></div><div class="card"><img class="icon" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png" alt="Icon"><p>School of Engineering</p><img class="arrow" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/btn-next.png" alt="Arrow"></div><div class="card"><img class="icon" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png" alt="Icon"><p>School of Languages</p><img class="arrow" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/btn-next.png" alt="Arrow"></div><div class="card"><img class="icon" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png" alt="Icon"><p>School of Life Science</p><img class="arrow" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/btn-next.png" alt="Arrow"></div><div class="card"><img class="icon" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png" alt="Icon"><p>School of Art & Design</p><img class="arrow" src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/btn-next.png" alt="Arrow"></div></div>i update the css