Thank you page template html

‘Thank You’ Page With Redirects To Custom URLs

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.

  • Application Maker
  • Customer Feedback Form
  • Customer Satisfaction Survey
  • Donation Form
  • Evaluation Form
  • Informed Consent Form
  • Lead Capture Form
  • Online Job Application
  • Online Survey
  • Payment Form
  • Quiz Creator
  • Test Maker
  • Website Calculator
  • Application Templates
  • Employment Application Templates
  • Feedback Templates
  • Instagram Bio Templates
  • Order Form Templates
  • Payment Templates
  • Questionnaire Templates
  • Registration Templates
  • Request Form Templates
  • Test Templates
  • Thank you page Templates
  • Video & Audio Forms
  • Online Order Form Creator
  • Leader Development Screening Tests
  • Feedback Survey
  • On a Scale of 1 to 10
  • Likert Scale Examples
  • What Is Net Promoter Score
  • NPS Calculator
  • Feedback Questions
  • Customer Satisfaction Survey Questions
  • Create a Registration Form
  • Create a Survey
  • Create Online Order Form
  • Create Online Consent Form
  • Event Evaluation Form
  • Application Builder
  • Qualitative vs Quantitative Research
  • Event Survey Questions
  • Shirt Order Form Template
  • Math Quiz
  • Anime Quiz
  • Employment Application Form
  • Classical Enneagram Test
  • Personality Quiz Maker
  • Trivia Maker
  • Vocabulary Quiz Maker
  • Multiple Choice Quiz Maker
  • Online Order Form Creator
  • Leader Development Screening Tests
  • Feedback Survey
  • On a Scale of 1 to 10
  • Likert Scale Examples
  • What Is Net Promoter Score
  • NPS Calculator
  • Feedback Questions
  • Customer Satisfaction Survey Questions
  • Create a Registration Form
  • Create a Survey
  • Create Online Order Form
  • Create Online Consent Form
  • Event Evaluation Form
  • Application Builder
  • Qualitative vs Quantitative Research
  • Event Survey Questions
  • Shirt Order Form Template
  • Math Quiz
  • Anime Quiz
  • Employment Application Form
  • Classical Enneagram Test
  • Personality Quiz Maker
  • Trivia Maker
  • Vocabulary Quiz Maker
  • Multiple Choice Quiz Maker

Источник

How to create a Thank You page in HTML CSS? (source code)

Thank you page html css template

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:

GT Metrix performance & structure report for this thank you page

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.

Читайте также:  Can we run java program in android

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.

project files & folder structure

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 coconuts

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Read more ⤍
Autem aut eos accusantium vegetables

Auas beatae blanditiis adipisci exercitationem reprehenderit.

Read more ⤍
Repudiandae ducimus inventore garden, flowers

Nonmaiores animi cum placeat. Lorem ipsum dolor sit amet quas recusandae.

Read more ⤍

CSS

*, *::before, *::after < -webkit-box-sizing: border-box; box-sizing: border-box; >body < font-family: 'Roboto', sans-serif; background-color: #EBECF0; padding: 0; margin: 0; >img < max-width: 100%; >h1, h2, h3 < margin: 0; >h2 < font-size: 1.7em; font-weight: 700; >@media (min-width: 768px) < h2 < font-size: 3em; >> h3 < font-size: 1.5em; font-weight: 700; >@media (min-width: 768px) < h3 < font-size: 1.7em; >> p < font-size: 1.25em; margin: 0 0 20px; line-height: 1.7; font-weight: 400; >section:not(.banner) < padding: 90px 15px; background-color: #FFFFFF; >section:nth-child(even) < background-color: transparent; >.container < max-width: 1200px; margin: 0 auto; >.banner < display: -ms-grid; display: grid; -ms-grid-columns: minmax(auto, 1200px); grid-template-columns: minmax(auto, 1200px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 90px 15px; background-color: #E74133; background: -webkit-gradient(linear, left bottom, left top, from(rgba(231, 65, 51, 0.95))), url(./img/bg-banner.png) repeat; background: linear-gradient(0deg, rgba(231, 65, 51, 0.95)), url(./img/bg-banner.png) repeat; >.banner h1 < color: rgba(255, 255, 255, 0.85); font-size: 2em; font-weight: 700; >@media (min-width: 768px) < .banner h1 < font-size: 4em; >> .banner p < color: #FFFFFF; margin-bottom: 0; text-shadow: 1px 1px #222222; >.next-step .container < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; >.next-step .container .three-fourth < -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -ms-flex-preferred-size: 100%; flex-basis: 100%; >@media (min-width: 768px) < .next-step .container .three-fourth < -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -ms-flex-preferred-size: 75%; flex-basis: 75%; >> .next-step .container .one-fourth < -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-bottom: 30px; >@media (min-width: 768px) < .next-step .container .one-fourth < -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -ms-flex-preferred-size: 25%; flex-basis: 25%; margin-bottom: 0; >> .offer .container < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; >@media (min-width: 768px) < .offer .container < -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; >> .offer .container .one-fifth < -ms-flex-preferred-size: 100%; flex-basis: 100%; >@media (min-width: 768px) < .offer .container .one-fifth < -ms-flex-preferred-size: 20%; flex-basis: 20%; >> .offer .container .one-fifth img < width: 100%; height: auto; >@media (min-width: 768px) < .offer .container .one-fifth img < height: 100%; width: auto; -o-object-fit: cover; object-fit: cover; >> .offer .container .three-fifth < -ms-flex-preferred-size: 100%; flex-basis: 100%; background-color: #EBECF0; padding: 20px 15px; >@media (min-width: 768px) < .offer .container .three-fifth < -ms-flex-preferred-size: 60%; flex-basis: 60%; >> .offer .container .three-fifth a < text-transform: uppercase; color: #E74133; >.related-content < display: -ms-grid; display: grid; -ms-grid-columns: minmax(auto, 1200px); grid-template-columns: minmax(auto, 1200px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; >.related-content .post-container < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; >.related-content .post-container .post < -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-bottom: 60px; background-color: #d9e7ff; border: 1px solid #5895fc; border-radius: 4px; >@media (min-width: 768px) < .related-content .post-container .post < -ms-flex-preferred-size: 30%; flex-basis: 30%; margin-bottom: 0; >> .related-content .post-container .post h3 < min-height: 90px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 10px; >.related-content .post-container .post img < width: 100%; >.related-content .post-container .post p < margin: 20px 10px; >.related-content .post-container .post a < margin: 0 10px 30px; display: inline-block; text-decoration: none; color: #E74133; -webkit-transition: color 0.4s ease-in-out; transition: color 0.4s ease-in-out; >.related-content .post-container .post a:hover

If you’re familiar with SASS, you can use my style.scss file instead. But it’s not mandatory.

Читайте также:  Failed to create java virtual machine error

Download the whole project from GitHub

How to download a GitHub repository

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.

Do you need to hire a web developer?

Shihab, headshot

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.

Источник

Thank you HTML Template

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.

Thank you HTML Template

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

Читайте также:  Двумерный массив python ввод

HTML5

Online

Free Nicepage Builder

Keywords

More from Art & Design HTML Templates

Doing branding for business HTML Templates We design modern websites HTML Templates We design digital products and brands HTML Templates Innovative research solutions HTML Templates Quality and attractive designs HTML Templates We specialize in digital experiences HTML Templates We create memorable websites HTML Templates We produce awesome visuals HTML Templates We create strategy-led work HTML Templates Web designer resume HTML Templates Custom web development HTML Templates Web developer portfolio HTML Templates Campaigns, mobile and digital HTML Templates Happiness consulting HTML Templates Conceptual design HTML Templates Web design company HTML Templates Designer contacts HTML Templates We create beautiful websites HTML Templates Web design and development company HTML Templates Development from scratch HTML Templates

More from Art & Design Blocks

My Amazing Design Portfolio

Digital Agency Portfolio

Make Standout Social Content, Logos, And More

Design Portfolio

Million Visitor Growth

Creating An Iconic Brand Identity

Websites And Other Works

Visual And Product Design

Life Is Change, And We Adapt

In The City HTML Template

Beautiful, Unique And Exciting Design

Web Development Agency

The Best Web Design Agency

IT Software Service & Agency

We Help Businesses Grow

My Passion And Focus Is Web Development

Mobile App Marketing Agency

Digital Studio Works

We Know How To Create Revolutionary Experiences

Forward-Thinking Studio HTML Template

More from Text On Image Blocks

We Create A Cleaner, Greener World

Fresh Ingredient

Dreadlock Services For All Textures Of Hair

Ocean Shore

Find Yourself Outside

We Have Been Baking With Organic Grain

We Make Businesses The Best They Can Be

New Product Sale

Sweet Chicken

Grow Your Audience HTML Template

Furniture Showroom Design

Raster Dreadlock Salon

Mobile App Marketing Agency

Shoes Sale

A New Step Into The Future

Chefs Ideas

Solar Power Works By Converting Energy

Impressing Ideas

General Information About Reserving With Us

Magic And Sweets HTML Template

Music For You

Family Recipes

How This Course Works

Monopolies In The Country

Help And Advice

Help With Setup

Comprehensive Luxury Interior Design Studio

We Help Your Site Grow

Develop Your Brand Position

Cozy Camping HTML Template

Super New Look

Web Software Developers

Happiness And Mindfulness Courses

List Of Ingredients

Experts & Consultants

A Combination Of Magic And Pizza

How Coaching Work

Art Director Profile

Creating Sales

Need More Money HTML Template

Our Classes Train Mobility, Strength, Conditioning And More

Developers Give Advice

Coming Soon Design

Traditional Yoga Practice

Straightforward Pricing

We Combine Meaning With Magic

Full Service Grooming Studio

Strategy Development Solution

Home Repair Options

Fast Professional Help HTML Template

You are downloading Nicepage. Problems? Click Here

Run Nicepage.exe from the Download Panel

You are downloading Nicepage. Problems? Click Here

Run Nicepage.dmg from the Download Panel

Источник

Bootstrap 5 Thank You Page Example

bootstrap 5 thank you page example

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

 html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Bootstrap 5 Thank You Example title> link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> head> body> div class="vh-100 d-flex justify-content-center align-items-center"> div> div class="mb-4 text-center"> svg xmlns="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"> path d="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> div class="text-center"> h1>Thank You ! h1> p>We've send the link to your inbox. Lorem ipsum dolor sit, p> button class="btn btn-primary">Back Home button> div> div> body> html> 

bootstrap 5 thank you template

bootstrap 5 thank you template

2. Bootstrap 5 design thank you page.

 html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Bootstrap 5 Thank You Example title> link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> head> body> div class="vh-100 d-flex justify-content-center align-items-center"> div class="card col-md-4 bg-white shadow-md p-5"> div class="mb-4 text-center"> svg xmlns="http://www.w3.org/2000/svg" class="text-success" width="75" height="75" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16"> path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" /> path d="M10.97 4.97a.235.235 0 0 0-.02.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-1.071-1.05z" /> svg> div> div class="text-center"> h1>Thank You ! h1> p>We've send the link to your inbox. Lorem ipsum dolor sit,lorem lorem p> button class="btn btn-outline-success">Back Home button> div> div> body> html> 

bootstrap 5 thank you page card

bootstrap 5 thank you page card

3. Bootstrap 5 thank you page design with shadow and border.

 html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Bootstrap 5 Thank You Example title> link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> head> body> div class="vh-100 d-flex justify-content-center align-items-center"> div class="col-md-4"> div class="border border-3 border-success">div> div class="card bg-white shadow p-5"> div class="mb-4 text-center"> svg xmlns="http://www.w3.org/2000/svg" class="text-success" width="75" height="75" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16"> path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" /> path d="M10.97 4.97a.235.235 0 0 0-.02.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-1.071-1.05z" /> svg> div> div class="text-center"> h1>Thank You ! h1> p>We've send the link to your inbox. Lorem ipsum dolor sit,lorem lorem p> button class="btn btn-outline-success">Back Home button> div> div> div> div> body> html> 

bootstrap 5 thank you page style

bootstrap 5 thank you page style

Источник

Оцените статью