Rocket
Mini tools
Brian Monyenye
@brianmonyenye Tasks: 23
🛠️ 1 tool
🙏 13 karma
Apprentice
Joined: September 2024
Follow
Brian Monyenye's tools
-
98213Released 1y ago100% FreeHere is an example of a simple landing page with a navigation bar, a hero section, and a contact form in HTML: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Landing Page</title> <link rel="stylesheet" href="styles.css"> <!-- link to external stylesheet --> </head> <body> <!-- Navigation Bar --> <nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <!-- Hero Section --> <section class="hero"> <h1>Welcome to Our Landing Page</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p> <button>Get Started</button> </section> <!-- Contact Form --> <section class="contact"> <h2>Get in Touch</h2> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="message">Message:</label> <textarea id="message" name="message"></textarea><br><br> <input type="submit" value="Send"> </form> </section> <!-- Script tags for external JavaScript files --> <script src="script.js"></script> </body> </html> ``` And here is an example of a simple stylesheet (in "styles.css" file): ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .navbar { background-color: #333; color: #fff; padding: 1em; text-align: center; } .navbar ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } .navbar li { margin-right: 20px; } .hero { background-image: url('hero-image.jpg'); background-size: cover; height: 100vh; display: flex; justify-content: center; align-items: center; color: #fff; } .hero button { background-color: #333; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; } .hero button:hover { background-color: #444; } .contact { padding: 2em; } .contact form { display: flex; flex-direction: column; align-items: center; } .contact label { margin-bottom: 10px; } .contact input, .contact textarea { padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; } .contact input[type="submit"] { background-color: #333; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; } .contact input[type="submit"]:hover { background-color: #444; } ``` This is just a basic example and you'll likely want to customize it to fit your needs. You'll also need to create the "hero-image.jpg" file and add it to the same directory as the HTML file. Remember to create a new file for the JavaScript code (e.g. "script.js") and add it to the same directory as the HTML file. Note: This code is not responsive, you may need to add media queries to make it responsive.
