<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Download Table</title>
<style>
body{
background: #f4f7fb;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.table-container{
width: 80%;
margin: 50px auto;
}
table{
width: 100%;
border-collapse: collapse;
overflow: hidden;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
background: #ffffff;
}
th{
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
padding: 18px;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
}
td{
padding: 16px;
border-bottom: 1px solid #e5e7eb;
font-size: 16px;
color: #333;
}
tr:nth-child(even){
background-color: #f9fafb;
}
tr:hover{
background-color: #eef2ff;
transition: 0.3s;
}
.download-btn{
display: inline-block;
padding: 10px 18px;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
transition: 0.3s ease;
box-shadow: 0 4px 10px rgba(16,185,129,0.3);
}
.download-btn:hover{
transform: translateY(-2px);
background: linear-gradient(135deg, #059669, #047857);
box-shadow: 0 6px 14px rgba(16,185,129,0.4);
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tr>
<th>Description</th>
<th>Download</th>
</tr>
<tr>
<td>Company Brochure PDF</td>
<td>
<a href="files/brochure.pdf" class="download-btn" download>
⬇ Download
</a>
</td>
</tr>
<tr>
<td>Project Source ZIP</td>
<td>
<a href="files/project.zip" class="download-btn" download>
⬇ Download
</a>
</td>
</tr>
<tr>
<td>User Manual Document</td>
<td>
<a href="files/manual.docx" class="download-btn" download>
⬇ Download
</a>
</td>
</tr>
</table>
</div>
</body>
</html>