-78%
Credits:
google.com/fonts
picjumbo.com
unsplash.com
fontawesome.io
Please note that images are not included in this package.
Creating a directory and listings template like "Globo" involves designing a clean, user-friendly layout that facilitates easy navigation and search for various listings. Below is a structured outline and sample HTML code snippets to help you get started with the "Globo" HTML template.
details.html (Details Page)
about.html (About Page)
contact.html (Contact Page)
Globo - Directory & Listings HTML Template
1. Project Structure
You might organize your project like this:css
globo/
├── index.html
├── listing.html
├── details.html
├── about.html
├── contact.html
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
└── README.md
2. HTML Structure
index.html (Home Page)html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Globo - Directory & Listings</title>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- Header -->
<header>
<nav>
<div class="logo">Globo</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="search-bar">
<input type="text" placeholder="Search for listings...">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</header>3. CSS Styles (assets/css/styles.css)
Here’s a basic CSS file to style your template. Adjust the styles as per your design preferences.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
}4. JavaScript (assets/js/scripts.js)
You can add interactivity as needed. Here’s a placeholder for your JS file.javascript
// Placeholder for future JavaScript functionalities
console.log('Globo template loaded.');
Additional Pages
listing.html (Listings Page)html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listings</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<nav>
<div class="logo">Globo</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listing Details</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<nav>
<div class="logo">Globo</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>html
<section>
<h2>About Us</h2>
<p>Information about the Globo directory and listings service.</p>
</section>
html
<section>
<h2>Contact Us</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit" class="cta-button">Send Message</button>
