CSS And HTML Issue With Image Styles-CodePudding

*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 >
  <center> <div >
            <img src="Images/Darbs1.png" alt="Darbs1" style="width:100%">
            <div >
            <p>Code</p>
            </div>
          </div> </center>
          
         <center> <div >
            <img src="images/Darbs1.png" alt="Darbs2" style="width:100%">
            <div >
            <p>Code</p>
            </div>
          </div> </center>         
    <head>
     <title>Projects</title>
     <link rel="stylesheet" type="text/css" href="Website.css"
 </head>
 <body>
     
     <header>
         <a href="#" >Logo</a>
         <ul>
             <li><a href="#" >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>```

CodePudding user response：

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;
    
}

CodePudding user response：

I approve of Usama's answer, the description is written in white on a white background. You can add a specific rule:

.polaroid .container p {
    color:black;
}

PS: Can you reformat your code? Use 4 spaces or the button {} in the text editor