One Page Website Template
Written in HTML and CSS
Template Overview
This template was orginially created for the 2022 New Media Caucus SymposiumFuture Bodies, I have adapted my orginal template into a more general one page website template open for anyoine to use under an MIT License. The repository for this template can be found here:
https://github.com/Chelsea-Thompto-Teaching-Examples/one-page-website-temp
Uses
Below, the template mimics a portfolio website but a one page site might be useful for any number of sites such as sites for projects, events, or organizations.
Details
This page relies on HTML tag IDs for navigation. Each section is given an ID that is then linked to the text at the top of the page. You can use hashtags in the "href" section of an "a" tag to link to a given ID. Additionally, the "Back To The Top" button uses CSS to stay on the screen at all times and is linked to an ID at the top of the page.
Projects
Overview
A section for featuring projects. A more advanced version of this site might have a dropdown menu at the top to navigate directly to a given project.
Project 1
A description for Project 1:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec enim diam vulputate ut pharetra. Tristique senectus et netus et malesuada. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Nec dui nunc mattis enim. Morbi tincidunt ornare massa eget. In hac habitasse platea dictumst quisque sagittis purus sit. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Urna duis convallis convallis tellus. Nisl purus in mollis nunc sed. Aliquam faucibus purus in massa tempor. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Eget mi proin sed libero enim.
Project 2
A description for Project 2:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec enim diam vulputate ut pharetra. Tristique senectus et netus et malesuada. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Nec dui nunc mattis enim. Morbi tincidunt ornare massa eget. In hac habitasse platea dictumst quisque sagittis purus sit. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Urna duis convallis convallis tellus. Nisl purus in mollis nunc sed. Aliquam faucibus purus in massa tempor. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Eget mi proin sed libero enim.
Project 3
A description for Project 3:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec enim diam vulputate ut pharetra. Tristique senectus et netus et malesuada. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Nec dui nunc mattis enim. Morbi tincidunt ornare massa eget. In hac habitasse platea dictumst quisque sagittis purus sit. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Urna duis convallis convallis tellus. Nisl purus in mollis nunc sed. Aliquam faucibus purus in massa tempor. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Eget mi proin sed libero enim.
Bio
First Last Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec enim diam vulputate ut pharetra. Tristique senectus et netus et malesuada. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Nec dui nunc mattis enim. Morbi tincidunt ornare massa eget. In hac habitasse platea dictumst quisque sagittis purus sit. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Urna duis convallis convallis tellus. Nisl purus in mollis nunc sed. Aliquam faucibus purus in massa tempor. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Eget mi proin sed libero enim.
Contact
The repository for this site can be found here:
https://github.com/Chelsea-Thompto-Teaching-Examples/one-page-website-temp
This template was rewritten as part of a larger project, byhand.website. This project is an open guide to creating websites by hand and can be explored here: