PromptBase
🤖 GPT
You want to create your website, but you don't know how to code it and what artistic direction to take?
Don't worry, thanks to this prompt; you will be able to do all this for any website idea in record time!
(Also compatible with GPT-3 and GPT-4: Instantly generate messages to produce the best answers with GPT-3 and 4)
...more
$3.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.
Over 1 month ago
Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
152 ($0.00030 / call)
Example input
Wrote the lines of HTML code to create a homepage using Bootstrap responsive design.
Example output
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ma page d'accueil Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Ma marque</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">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<h1>Bienvenue sur ma page d'accueil</h1>
<p>Ceci est un exemple de page d'accueil créée avec Bootstrap</p>
<button type="button" class="btn btn-primary">En savoir plus</button>
</div>
<div class="col-md-6">
<img src="https://via.placeholder.com/500x350" alt="Image d'accueil" class="img-fluid">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
This code uses Bootstrap's CDN (Content Delivery Network) to load the necessary CSS and JavaScript files. The page includes a responsive navigation bar with three links, as well as a header section with an image and text. The layout is managed using the Bootstrap grid, with two columns for the header. The page is also made responsive by using Bootstrap classes such as "img-fluid" for the image and "mt-5" for the top padding.