Welcome to the Mid-space Website Template! This project provides a responsive and customizable website structure suitable for research projects, portfolios, or any content-focused websites.
- Responsive Design: Accessible on desktops, tablets, and mobile devices.
- Visualizations: Easily showcase images with descriptions.
- Flexible Structure: Multiple sections including header, hero, summary, visualizations, contact, and footer.
- Customization: Simple to modify with HTML, CSS, and JavaScript.
- Accessibility: Semantic HTML and responsive design ensure accessibility for all users.
To use this template locally:
-
Clone the Repository
git clone https://github.com/rsdmu/mid-website-template.git
-
Navigate to the Project Directory
cd mid-website-template -
Open the Website
- Open
index.htmlin your preferred web browser.
- Open
- Homepage (
index.html): Overview of your project with navigation links. - Paper Page (
paper.html): Detailed information about your research paper or project. - Template Page (
template.html): A general-purpose template for additional pages.
-
Update Text Content:
- Replace placeholder texts (
<!-- Placeholder -->) with your own content in HTML files.
- Replace placeholder texts (
-
Replace Images:
- Add your own images to the
assets/images/directory. - Update the
srcattributes in HTML to point to your images. - Update the Favicon:
- Replace the existing favicon with your own by uploading your favicon file to the
assets/images/directory. - Update the
<link>tag in the<head>section of your HTML files to point to your favicon.<!-- Favicon --> <link rel="icon" href="assets/images/your-favicon.ico" type="image/x-icon">
- Ensure your favicon file is named appropriately (e.g.,
favicon.ico) or update thehrefpath accordingly.
- Replace the existing favicon with your own by uploading your favicon file to the
- Add your own images to the
-
Modify Styles:
- Edit
assets/css/styles.cssto customize the appearance as per your preferences.
- Edit
-
Adjust Scripts:
- Enhance or modify
assets/js/scripts.jsto add interactivity.
- Enhance or modify
To add a new page:
-
Duplicate an Existing HTML File:
- For example, duplicate
paper.htmland rename it tonew-page.html.
- For example, duplicate
-
Update the Content:
- Modify the content within the new HTML file as needed.
-
Update Navigation:
- Add a new
<li>in the navigation menu within the<nav>section to link to your new page.
<li class="new-page-link"><a href="new-page.html">New Page</a></li>
- Add a new
-
Customize as Needed:
- Ensure that all sections are appropriately filled with relevant content.
This project is licensed under the MIT License.
For more information, please contact [email protected] | www.rsdmu.com
- Roboto Font by Google Fonts
- Font Awesome for Icons
- AOS for Scroll Animations