PromptBase
🤖 GPT
Generates valid html of a landing page with hero unit and a submittable form. Hero unit consists of title, lead text, call to action button and image background. All text and links acn be modified in prompt. Form has three example fields, name, email and gender, but you can delete them and add your own. All fields can be required or not, have a label, placeholder and a type (type of input that should be used, i.e. text, radio, checkbox). You can modify the colors used for buttons and body background, or remove the section from the prompt to use default Bootstrap values.
...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
Completion - Codex (code-davinci-002)
Token size
216 ($0.00430 / call)
Example input
Address:
- label: Address
- placeholder: enter your address
- required
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body {
background-color: #f0f8ea;
}
.btn-primary {
background-color: #e4572e;
border-color: #e4572e;
}
.btn-primary:hover {
background-color: #DDA999;
border-color: #DDA999;
}
.jumbotron {
background-image: url("https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover;
background-position: center;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="http://fakeaction.com" role="button">Get a tour</a>
</div>
<form action="http://fakesignup.com" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="address" class="form-control" id="address" name="address" placeholder="Enter your address" required>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="male" value="male" checked>
<label class="form-check-label" for="male">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">
Female
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="non-binary" value="non-binary">
<label class="form-check-label" for="non-binary">
Non-binary
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>