How to make a download page using html and css?

Question

How to make a download page using html and css?

1 Answer

Kuddus · Answer 1 · 2024-09-20T00:31:34+0000

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>

How to make a download page using html and css?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Related questions