*Hello, I want to have text below the image like in the example, but I can’t figure out what is wrong, i took the code from
W3Schools: https://www.w3schools.com
/css/tryit.asp?filename=trycss_ex_images_card
Can someone help? Thanks
Example Image: https://imgur.com/a/P86DVjW
What It Looks Like: https://imgur.com/a/JOXpAJI*
```{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #32053d;
}
header {
position: absolute;
top: 0;
Left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul
{
display: flex;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 20px;
}
header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active
{
background: #fff;
color: #4a2880;
}
h1 {
color: white;
margin-top: 250px;
margin-left: 270px;
}
p {
color:white;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
.sec {
margin-right: 80px;
}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
```<!DOCTYPE html>
<html>
<h1>ABC</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<center><img src="images/ArrowDown.webp" id="arrow" width="200"></center>
<div class="sec">
<center> <div class="polaroid">
<img src="Images/Darbs1.png" alt="Darbs1" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<center> <div class="polaroid">
<img src="images/Darbs1.png" alt="Darbs2" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<head>
<title>Projects</title>
<link rel="stylesheet" type="text/css" href="Website.css"
</head>
<body>
<header>
<a href="#" class="logo">Logo</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>```
>Solution :
The problem is with the css. You have set the p tag color:white that is why it is not showing. Set color:black
p {
color:black;
margin-left: 60px;
text-align: center;
font-size: 15px;
}