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>
Get this prompt + 9 more with Select$14 first month, then $19/mo · Cancel anytime$14 first month · then $19/mo
View Select
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
2
Favorites
297
Views
CODE-DAVINCI-002
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
Added over 1 month ago
