How can i break the paragraph property of tables

H

Haydar Damn

Guest
enter image description here

I am a new learner and can you tell me my bad habits with my code and why this space between image and "Ford" text never closes.


<!DOCTYPE html>
<html>
<title>FiyaskoCar|En Pahalı Arabalar</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.container {
position: relative;
width: 100%;
}



.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
}

.text {
color: white;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}


figure
{

display: flex;
flex-flow: column;

max-width: 323px;
margin: auto;
}
a
{
text-decoration:none;
}


table {
border-spacing: 90px 0;

}

figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 5px;
text-align: center;
}
.special
{
width: 299px; height: 166px;

}




</style>


</head>
<body bgcolor="#6B0808" text-color="white" >

<font size = "6">
<center> <img src=logo.png align="middle" height="140" width="140"/> </center>
<hr width="500">

<center>
<p style="background-color:hsla(9, 100%, 64%, 0.5);"><font face = "Comic sans MS" size="5">Fiyasko<span style="color:red">Car</span>
Burada her şey ÇOK PAHALI!!!
</p></font>

<table>
<tr>
<figure>


<td>
<div class="container">
<a href = homepage.html><img src=fordcar.png class="special">
<div class="overlay">
<div class="text">Ford</div>
</div>
</div>

<figcaption>Ford</figcaption></a>

</td>



<td> <div class="container">
<a href = homepage.html><img src=volkswagencar.png class="special">
<div class="overlay">
<div class="text">Volkswagen</div>
</div>
</div>

<figcaption>Volkswagen</figcaption> </td></a>



<td> <div class="container">
<a href = homepage.html><img src=bmwcar.jpg class="special">
<div class="overlay">
<div class="text">BMW</div>
</div>
</div>
<figcaption>BMW</figcaption>

</td></a>
</figure>
</table>



</font>
<hr>
</body>
</html>

Continue reading...
 
Top