HOSTED SPACES
...
Custom Landing Page
Landing page templates
Template 1
3min
This is a white-label template. To make it match your brand and style you need to do further customisations on the provided template
Use the below link to see what the white-label template looks like. Keep in mind that every color/logo/placeholder can be customized to match your style & branding.
Tip: Use the Copy button on the top-right of the code editor to copy all code
We added the custom code for you to use in the code editor below. See how to use it here
Index.html
Script.js
Style.css
1<!-- START Include headers -->
2<link
3 rel="stylesheet"
4 href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
5/>
6<link
7 rel="stylesheet"
8 href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
9/>
10<script
11 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
12 crossorigin="anonymous"
13></script>
14<!-- END Include headers-->
15
16<!-- START NOT NEEDED -->
17<link rel="stylesheet" href="/style.css" />
18<script src="/script.js"></script>
19<!-- END NOT NEEDED -->
20
21<!-- START Landing page -->
22<div class="body">
23 <header class="header">
24 <div class="search-bar">
25 <div class="search-form">
26 <input class="form-control" type="text" placeholder="Search..." />
27 <button class="search-button">
28 <span class="material-symbols-outlined"> search </span>
29 </button>
30 </div>
31 <button class="close-icon">
32 <span class="material-symbols-outlined"> close </span>
33 </button>
34 </div>
35 <div class="logo-bar">
36 <div class="container">
37 <div class="logo-bar-inner">
38 <a class="logo" href=""
39 ><img
40 src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here"
41 alt="logo"
42 /></a>
43 <div class="search-wrape mobile">
44 <button class="search-btn">
45 <span class="material-symbols-outlined"> search </span>
46 </button>
47 </div>
48 <div class="toggle-icon"> </div>
49 </div>
50 </div>
51 </div>
52 <div class="navigation-menu">
53 <div class="container">
54 <div class="nav-menu">
55 <nav>
56 <ul>
57 <li><a href="">LINK</a></li>
58 <li><a href="">LINK</a></li>
59 <li><a href="">LINK</a></li>
60 </ul>
61 </nav>
62 </div>
63 </div>
64 </div>
65 </header>
66 <section class="home-banner">
67 <div class="banner-width container">
68 <div class="banner-wrape">
69 <div class="banner-row">
70 <div class="banner-col-sm">
71 <div class="banner-wrape">
72 <div class="banner-text">
73 <h1>Title <strong>Subtitle</strong></h1>
74 </div>
75 </div>
76 </div>
77 <div class="banner-col-lg">
78 <div class="banner-image">
79 <figure>
80 <img
81 src="https://placehold.co/1115x530/2166ae/FFF?text=Banner%20Image"
82 alt="banner-img"
83 />
84 </figure>
85 </div>
86 </div>
87 </div>
88 </div>
89 </div>
90 </section>
91 <section class="intro-section">
92 <div class="container">
93 <div class="intro-width">
94 <div class="intro-text">
95 <h2>Intro title</h2>
96 <h5>Intro subtitle</h5>
97 <p>
98 Some intro description. Lorem ipsum dolor, sit amet consectetur
99 adipisicing elit. Doloremque id mollitia dolorum quam. Aspernatur
100 omnis vitae debitis consequatur aliquam exercitationem facilis? Vero
101 maiores aut dignissimos aspernatur quod pariatur odit quasi!
102 </p>
103 </div>
104 </div>
105 </div>
106 </section>
107 <section class="info-section">
108 <div class="container">
109 <div class="info-parent">
110 <div class="overview-data">
111 <div class="overview-row">
112 <div class="overview-col">
113 <div class="overview-wrape">
114 <div class="overview-box">
115 <h3>Title</h3>
116 <p>Subtitle</p>
117 <a class="btn-default" href="">Browse</a>
118 </div>
119 </div>
120 </div>
121 <div class="overview-col">
122 <div class="overview-wrape">
123 <div class="overview-box">
124 <h3>Title</h3>
125 <p>Subtitle</p>
126 <a class="btn-default" href="">Explore</a>
127 </div>
128 </div>
129 </div>
130 </div>
131 </div>
132 <div class="framework-data">
133 <div class="framework-row">
134 <div class="framework-col">
135 <div class="framework-wrape">
136 <div class="framework-box">
137 <figure>
138 <img
139 src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
140 alt="framework-icon-1"
141 />
142 </figure>
143 <div class="framework-text">
144 <h4>Title</h4>
145 <p>Description</p>
146 <a class="start-btn" href="">Start ></a>
147 </div>
148 </div>
149 </div>
150 </div>
151 <div class="framework-col">
152 <div class="framework-wrape">
153 <div class="framework-box">
154 <figure>
155 <img
156 src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
157 alt="framework-icon-2"
158 />
159 </figure>
160 <div class="framework-text">
161 <h4>Title</h4>
162 <p>Description</p>
163 <a class="start-btn" href="">Start ></a>
164 </div>
165 </div>
166 </div>
167 </div>
168 <div class="framework-col">
169 <div class="framework-wrape">
170 <div class="framework-box">
171 <figure>
172 <img
173 src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
174 alt="framework-icon-3"
175 />
176 </figure>
177 <div class="framework-text">
178 <h4>Title</h4>
179 <p>Description</p>
180 <a class="start-btn" href="">Start ></a>
181 </div>
182 </div>
183 </div>
184 </div>
185 </div>
186 </div>
187 </div>
188 </div>
189 </section>
190 <section class="buttons-link-section">
191 <div class="container">
192 <div class="buttons-link-group">
193 <div class="buttons-link">
194 <a class="btn-default" href="">Button</a>
195 </div>
196 </div>
197 </div>
198 </section>
199 <footer class="footer">
200 <div class="container">
201 <div class="footer-wrape">
202 <a class="foot-logo" href="#"
203 ><img
204 src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here"
205 alt="logo"
206 /></a>
207 </div>
208 </div>
209 <div class="copyright">
210 <div class="container">
211 <div class="copyright-inner">
212 <p>
213 © Copyright 2023 | | <a href="#">Link</a> |
214 <a href="#">Link</a> | <a href="#">Link</a> by
215 <a href="#">Nobody</a>
216 </p>
217 <ul>
218 <li>
219 <a href=""
220 ><span class="material-symbols-outlined"> grid_guides </span>
221 </a>
222 </li>
223 <li>
224 <a href=""
225 ><span class="material-symbols-outlined"> grid_guides </span>
226 </a>
227 </li>
228 <li>
229 <a href=""
230 ><span class="material-symbols-outlined"> grid_guides </span>
231 </a>
232 </li>
233 <!-- Your social links -->
234 </ul>
235 </div>
236 </div>
237 </div>
238 </footer>
239</div>
240<!-- END Landing page-->
241
🤔
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.
Updated 12 Jun 2024
Did this page help you?