Hello, friends.
Today I am going to show you how to make a download page using html and css.
At first make a folder named Files and a html file named download.html.
Then just copy this html code and paste into download.html file and save.
Afer that, the folder we made and the html file we will upload into hosting server ( in web directory).
Then we will make a link for homepage in index.html file.
And thus we will be able to make a download page for our website.
Note: The file we want to make downloadable, we will keep in Files folder and put its link in download.html file.
Code for download.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Downloader</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: top;
height: 100vh;
}
.container {
width: 80%;
text-align: center;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
h1 {
color: #333;
}
.file-list {
margin-top: 20px;
}
.file-list a {
display: block;
margin: 10px 0;
padding: 10px;
text-decoration: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
transition: background-color 0.3s;
}
.file-list a:hover {
background-color: #45a049;
}
.file-list a:active {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
<h1>Download Files</h1>
<div class="file-list">
<a href="Files/CL_App.docx" download>নৈমিত্তিক ছুটির আবেদন</a>
<a href="Files/LearningReport.docx" download>শিখন অগ্রগতি রিপোর্ট</a>
<a href="Files/LessonChalk.docx" download>পাঠদান সম্পর্কিত</a>
</div>
</div>
</body>
</html>