1 Answer

0 votes
by (487 points)

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>

312 questions

91 answers

6 comments

5,034 users

2 Online Users
0 Member 2 Guest
Today Visits : 7541
Yesterday Visits : 2524
Total Visits : 6983331
...