Minimal Landing Page Template

Customization

Logo

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

MinimalLandingPageTemplate/index.html

Line 14 in 07bbb76

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

Title

Change the tile by replacing the text on line 6.

MinimalLandingPageTemplate/index.html

Line 6 in 07bbb76

<title>Document Title</title>

The two headings can be changed on lines 17 and 18.

MinimalLandingPageTemplate/index.html

Lines 17 to 18 in 14af47a

	<h1>Heading 1</h1>
	<h2>Heading 2</h2>

Adding a link

To add a new link copy the following 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.

Lastly change the --link-count variable to the new total link count:

MinimalLandingPageTemplate/index.html

Line 45 in 14af47a

--link-count: 3;

Icon size

The icon size on the desktop can be changed here:

MinimalLandingPageTemplate/index.html

Line 46 in 14af47a

--big-icon-size: 80px;