This ‘Thank you’ page allows you to provide image links to resources that may be of interest to your respondents.
Add this ‘Thank you’ page template to your account, customize images, text and redirect links, and insert the URL of the page into the After Submit settings of your Expert and Ultimate accounts. Read more on How to Customize Your ‘Thank you’ Page.
How to create a Thank You page in HTML CSS? (source code)
When people buy something on our website or subscribe to the newsletter, we generally redirect them to a “Thank You” page. It’s a great opportunity to engage with our audience more closely & build business relationships.
In this post, I will give you a thank you page template. And I will show you how I created this only using HTML & CSS.
This template is fully mobile responsive, fast loading & well-structured. When I say well-structured, it means that I used semantic HTML where/when necessary and I did not even include a wrapper just for the sake of limiting the max-width value. See the GTmetrix report in the screenshot below:
Also, it’s an opportunity for you to practice & learn HTML CSS and aligning elements.
Anyways, before you start, let’s see the live demo of this page.
Source code for this thank you page template
Before I give you the HTML & CSS, it’s important to understand the project structure. Otherwise, the file paths may mismatch.
See my files & folder structure in the infographic below.
You can name the root or main project folder whatever you like (I named it ‘thank-you’). In the root, you have to create one folder called “img” that will contain all the images/assets. Also, you need to create two other files named “index.html & style.css.”
However, index.html generally refers to the home page (front page). So you can rename this to “thank-you.html” if you already have a file named “index.html.” Either way, let’s get started.
HTML
Thanks for subscribing/ purchasing/ your order
Your order has been received. You'll get this to your .
You should receive an order confirmation email shortly. .
For subscription: Thank you for subscribing to our email.
In the meantime, feel free to explore our website and learn.
Wait! We have a bonus for you!
As a token of our appreciation, we'd like to offer you a 10% discount.
For subscription: We've created an exclusive ebook .
To download your free ebook, simply click on the button below.
Download ebook
Visit our blog
Throughout the years, we have been doing our own research.
Consectetur adipisicing elit
Lorem ipsum dolor sit amet consectetur adipisicing elit.
If you’re familiar with SASS, you can use my style.scss file instead. But it’s not mandatory.
Download the whole project from GitHub
I already have given you the HTML, CSS & assets. Therefor if you need to download the entire project, you can do it from my GitHub repository.
Or use the following command in your terminal: git clone https://github.com/shihabiiuc/thank-you.git
Build HTML CSS projects
Conclusion
I created this template from scratch. It can be used as a “Thank You” page after buying a project/service or subscribing to a newsletter or something along those lines.
I also gave you the initial content for the page. You can edit them to match your requirements. Also, you can delete or add sections as you see fit.
Popular posts
About Shihab
With over 20K monthly readers, my goal is to help small businesses to create a stunning online presence.
At the same time, I’ve been creating resources for web developers, designers & freelancers in general.
Professional HTML templates. Responsive, fully customizable with easy Drag-n-Drop Nicepage editor. Adjust colors, fonts, header and footer, layout and other design elements, as well as content and images.
Customize with Nicepage
When using HTML Builder you will be able to adjust colors, fonts, header and fooer, layout, columns and other design elements, as well as content and images.
Your browser does not support HTML5 video.
Your browser does not support HTML5 video.
Edit Template Offline
1. Download and Install the Nicepage version for Windows, Mac, WordPress and Joomla from the download page 2. Create a new page or select existing 3. Click Add new block, search for id 474176 and click enter
Edit Template Online
Create Awesome Websites
WordPress
Windows App
Joomla
Mac OS App
HTML5
Online
Free Nicepage Builder
Keywords
More from Art & Design HTML Templates
More from Art & Design Blocks
More from Text On Image Blocks
You are downloading Nicepage. Problems? Click Here
Run Nicepage.exe from the Download Panel
You are downloading Nicepage. Problems? Click Here
In today’s tutorial, we will create thank you page using bootstrap 5. For this section we will see bootstrap 5 thank you template, than you page design shadow style and border.
Bootstrap 5 Thank You Page Example
htmllang="en">head> metacharset="UTF-8"> metahttp-equiv="X-UA-Compatible"content="IE=edge"> metaname="viewport"content="width=device-width, initial-scale=1.0"> title>Bootstrap 5 Thank You Example title> linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"> head> body> divclass="vh-100 d-flex justify-content-center align-items-center"> div> divclass="mb-4 text-center"> svgxmlns="http://www.w3.org/2000/svg"class="text-success"width="75"height="75"fill="currentColor"class="bi bi-check-circle-fill"viewBox="0 0 16 16"> pathd="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" /> svg> div> divclass="text-center"> h1>Thank You ! h1> p>We've send the link to your inbox. Lorem ipsum dolor sit, p> buttonclass="btn btn-primary">Back Home button> div> div> body> html>