Skip to content

kit-sdq/MinimalLandingPageTemplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Minimal Landing Page Template

Desktop Image Mobile Image

Customization

Logo

Change the logo by replacing the src of the image on line 14.

<img src="https://via.placeholder.com/150" alt="Logo">

Title

Change the tile by replacing the text on line 6.

<title>Document Title</title>

Adding a link

To add a new link copy the folowing code and paste it into div#link-list, so that the link is placed in the desired place.

<a href="" class="link-N icon">
  <i class="fa-solid fa-vials"></i>
</a>
<a href="" class="link-N text">
  <span class="title">Title</span> <span class="desc">Longer describtion</span>
</a>

Change the href of both links to the desired location. In the i change the icon to be the desired Font Awesome icon. Change the text in the spans with class title and desc to the desired text. title is the short description that is always displayed on mobile and colorful on desktop. desc is the longer description that is only displayed on desktop.

Add this code to the style section:

.link-N {
  --col: #000;
}

Change the value of the --col variable to the desired color of the icon. You can change the N in the class name to any desired text. Make sure to also adjust this class accordingly in the html you pasted previously.

About

Template for landing pages of, e.g., scientific projects, see https://jplag.github.io/MinimalLandingPage/

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages