Airbnb Pitch Deck (ChatGPT Version)
ChatGPT helped me to rewrite and re-design the famous Airbnb pitch deck. The result was way better than expected. Skim through it right here. Additionally, you could download this PDF file or check the next section for the complete HTML code and ChatGPT Prompts. So here is the Airbnb Pitch Deck (ChatGPT Version).
Deck HTML Code & Prompts
Full HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Airbnb Pitch Deck</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
color: #fff;
text-align: center;
animation: fade-in 1s forwards;
}
h1 {
font-size: 5rem;
margin-bottom: 2rem;
}
p {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 1rem;
}
.icon {
display: inline-block;
width: 50px;
height: 50px;
margin: 1rem;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 2rem;
color: #ff5a5f;
}
.airbnb-logo {
max-width: 200px;
margin-top: 2rem;
}
.bg-red {
background-color: #ff5a5f;
}
.bg-black {
background-color: #222;
}
.bg-white {
background-color: #fff;
color: #222;
}
.bg-gray {
background-color: #eee;
color: #222;
}
.bg-blue {
background-color: #00a3e0;
}
.bg-yellow {
background-color: #ffcb3d;
color: #222;
}
.bg-green {
background-color: #009b72;
}
.button {
display: inline-block;
padding: 1rem 2rem;
border: none;
border-radius: 5px;
font-size: 1.5rem;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff5a5f;
}
.text-box {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media only screen and (max-width: 600px) {
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
.icon {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 1.5rem;
}
.airbnb-logo {
max-width: 150px;
}
.text-box {
padding: 1rem;
}
.button {
padding: 0.5rem
}
}
</style>
</head>
<body>
<div class="slide bg-red">
<h1>Welcome to Airbnb</h1>
<p>Airbnb connects people around the world to travel experiences they'll never forget.</p>
<div>
<i class="icon material-icons">explore</i>
<i class="icon material-icons">flight</i>
<i class="icon material-icons">beach_access</i>
<i class="icon material-icons">restaurant</i>
<i class="icon material-icons">museum</i>
<i class="icon material-icons">people</i>
</div>
</div>
<div class="slide bg-white">
<div class="text-box">
<h1>Our story</h1>
<p>Airbnb was founded in 2008 by Joe Gebbia, Brian Chesky, and Nathan Blecharczyk. The idea came about when they realized they could rent out air mattresses in their apartment to attendees of a design conference in San Francisco. Since then, Airbnb has grown into a global company with over 4 million listings in 191 countries.</p>
</div>
</div>
<div class="slide bg-gray">
<div class="text-box">
<h1>Our mission</h1>
<p>Airbnb's mission is to create a world where anyone can belong anywhere. We believe that when people feel like they belong, they can make the world a better place.</p>
</div>
</div>
<div class="slide bg-blue">
<div class="text-box">
<h1>How it works</h1>
<p>Hosts list their space on Airbnb, and guests can search for and book unique accommodations anywhere in the world. Airbnb takes a commission on every booking, making it a win-win for hosts and guests alike.</p>
</div>
</div>
<div class="slide bg-black">
<div class="text-box">
<h1>Our community</h1>
<p>Airbnb is more than just a platform for booking accommodations. It's a community of travelers and hosts who share a passion for exploring new places and meeting new people.</p>
</div>
</div>
<div class="slide bg-yellow">
<div class="text-box">
<h1>Our impact</h1>
<p>Airbnb has had a significant impact on the travel industry and on local communities. By providing an alternative to traditional hotels, Airbnb has helped to promote sustainable tourism and has provided economic opportunities for millions of people around the world.</p>
</div>
</div>
<div class="slide bg-green">
<div class="text-box">
<h1>Our growth</h1>
<p>Airbnb has experienced tremendous growth since its founding in 2008. In 2019, the company went public with a valuation of over $100 billion, making it one of the most successful IPOs in history.</p>
</div>
</div>
<div class="slide bg-white">
<div class="text-box">
<h1>Our future</h1>
<p>Airbnb is committed to continuing its mission of creating a world where anyone can belong anywhere. With new innovations and partnerships, we are constantly working to improve the travel experience for our guests and hosts.</p>
</div>
</div>
<div class="slide bg-black">
<div class="text-box">
<h1>Join us</h1>
<p>Join the millions of hosts and guests who have already joined the Airbnb community. Whether you're looking to book a unique accommodation or to share your space with travelers, Airbnb has something for everyone.</p>
<button class="button-primary">Sign up</button>
</div>
</div>
<div class="slide bg-white">
<div class="text-box">
<h1>Thank you</h1>
<p>Thank you for learning more about Airbnb. We hope to welcome you to our community soon!</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Airbnb_Logo_B%C3%A9lo.svg/1200px-Airbnb_Logo_B%C3%A9lo.svg.png" alt="Airbnb logo" width="200px">
</div>
</div>
<script>
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
function showSlide(slideIndex) {
slides[currentSlide].classList.remove("active");
slides[slideIndex].classList.add("active");
currentSlide = slideIndex;
}
const prevButton = document.querySelector("#prev-button");
prevButton.addEventListener("click", () => {
let prevSlide = currentSlide - 1;
if (prevSlide < 0) {
prevSlide = slides.length - 1;
}
showSlide(prevSlide);
});
const nextButton = document.querySelector("#next-button");
nextButton.addEventListener("click", () => {
let nextSlide = currentSlide + 1;
if (nextSlide >= slides.length) {
nextSlide = 0;
}
showSlide(nextSlide);
});
showSlide(0);
</script>
</body>
</html>ChatGPT Prompts
- Can you recreate the famous airbnb pitch deck in an html file with buttons and make it better? In terms of content and design?
- Can you recreate the most famous slide of the airbnb pitch deck using HTML with the same colors and font, but make it more advanced and modern.
- Just combine all in one html file
- I like it, can you work the colors more and add a few icons and maybe the airbnb logo?
- I like the colors and the font, i don’t like that the icons are under each other though, so can you fix that and then re-create the second slide and connect them with a “next slide” button?
- re-write all the other slides in a more modern way and combine them all in one html file
You might get a few freezes from ChatGPT if you’re not in their premium subscription. In that case, just keep saying “continue.”
Full Guide (Youtube Video)
Meet The Author Of This Article
I’m Al Anany, the founder and CEO of Albusi.
If you liked this article and guide, leave a comment! I’ll appreciate it. But most importantly, have a great day!
