PromptBase
🤖 GPT
🌐 Looking to build your own website but feeling overwhelmed by the coding process? 🚀
This prompt is your ultimate solution to effortlessly kickstart your online presence !🌟
💯 Website Generator will provide you with a solid foundation for your website, complete with a ready-to-use HTML, JavaScript and CSS codebase. 💪💡
💫 MODERN | CLEAN | RESPONSIVE | WITH ANIMATION | READY-TO-USE 🤳
Here is the website example created by the prompt:
👉👉 https://travel-demo-delta.vercel.app/
...more
$2.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
Updated: Over 1 month ago
Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
151 ($0.00030 / call)
Example input
[theme] = Travel website
Example output
Theme: Travel
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Travel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#destinations">Destinations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Home Section -->
<section id="home" class="bg-primary text-white text-center py-5">
<div class="container">
<h1 class="display-4">Explore the World</h1>
<p class="lead">Plan your next adventure with us</p>
</div>
</section>
<!-- Destinations Section -->
<section id="destinations" class="py-5">
<div class="container">
<h2 class="text-center mb-5">Popular Destinations</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<img src="https://source.unsplash.com/400x300/?beach" class="card-img-top" alt="Beach">
<div class="card-body">
<h5 class="card-title">Beach Paradise</h5>
<p class="card-text">Relax and unwind on beautiful sandy beaches.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="https://source.unsplash.com/400x300/?mountain" class="card-img-top" alt="Mountain">
<div class="card-body">
<h5 class="card-title">Mountain Adventures</h5>
<p class="card-text">Conquer the highest peaks and enjoy breathtaking views.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="https://source.unsplash.com/400x300/?city" class="card-img-top" alt="City">
<div class="card-body">
<h5 class="card-title">City Life</h5>
<p class="card-text">Experience the vibrant culture and bustling city life.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="https://source.unsplash.com/400x300/?nature" class="card-img-top" alt="Nature">
<div class="card-body">
<h5 class="card-title">Nature Retreat</h5>
<p class="card-text">Immerse yourself in the beauty of untouched nature.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="https://source.unsplash.com/400x300/?desert" class="card-img-top" alt="Desert">
<div class="card-body">
<h5 class="card-title">Desert Safari</h5>
<p class="card-text">Embark on an adventurous journey through the desert.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="https://source.unsplash.com/400x300/?island" class="card-img-top" alt="Island">
<div class="card-body">
<h5 class="card-title">Tropical Island</h5>
<p class="card-text">Discover the paradise of a tropical island.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="bg-light py-5">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at est hendrerit, gravida urna sed, blandit
augue. Nulla consectetur elit ac neque tincidunt, eget suscipit turpis euismod.</p>
<p>Phasellus convallis, tellus vel laoreet feugiat, arcu lectus semper enim, id tincidunt lorem nunc ac ligula.
Aenean sed justo et lacus consectetur hendrerit. Mauris tincidunt sem sed metus feugiat commodo.</p>
</div>
<div class="col-lg-6">
<img src="https://source.unsplash.com/400x300/?people" class="img-fluid" alt="People">
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container">
<h2 class="text-center mb-5">Contact Us</h2>
<div class="row">
<div class="col-lg-6 mx-auto">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
<div class="container">
<p>© 2023 Travel Website. All rights reserved.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js:
$(document).ready(function() {
// Add smooth scrolling to navbar links
$('a.nav-link').on('click', function(event) {
if (this.hash !== '') {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
}
});
});
style.css:
/* Add your custom CSS code here */
/* General Styles */
body {
font-family: Arial, sans-serif;
}
.section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 40px;
}
.navbar-brand {
font-size: 24px;
font-weight: bold;
}
.navbar-nav .nav-link {
font-size: 16px;
}
/* Home Section */
#home {
background-image: url("https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1332&q=80");
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
}
#home .section-title {
margin-bottom: 20px;
}
#home .section-description {
margin-bottom: 40px;
font-size: 20px;
}
/* Destinations Section */
.destination {
position: relative;
overflow: hidden;
margin-bottom: 30px;
}
.destination img {
transition: transform 0.3s ease;
}