Created
December 31, 2023 14:29
-
-
Save paulwababu/e3ac69ade28489ef8b694716a698e962 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Irrihub - Unlocking Productivity</title> | |
| <link rel="icon" href="https://irri-hub.com/wp-content/uploads/2022/05/favic-150x150.png" sizes="32x32" /> | |
| <link rel="icon" href="https://irri-hub.com/wp-content/uploads/2022/05/favic.png" sizes="192x192" /> | |
| <link rel="apple-touch-icon" href="https://irri-hub.com/wp-content/uploads/2022/05/favic.png" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> | |
| <style> | |
| /* Base styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Arial', sans-serif; /* Replace with the specific font you're using */ | |
| } | |
| /* Navigation bar styles */ | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1em 2em; | |
| position: absolute; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .logo { | |
| font-size: 1.5em; | |
| color: #fff; /* Assuming the logo is white */ | |
| } | |
| .nav-links { | |
| list-style-type: none; | |
| } | |
| .nav-links li { | |
| display: inline; | |
| margin-left: 20px; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: #fff; /* Assuming the text is white */ | |
| font-weight: bold; /* Bold font weight for navigation links */ | |
| } | |
| .login-btn { | |
| background-color: #85c340; /* Replace with the color of your 'Log In' button */ | |
| color: white; | |
| border: none; | |
| padding: 0.8em 4.5em; /* Increase the padding to make the button longer */ | |
| border-radius: 20px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| } | |
| /* Hero section styles */ | |
| .hero { | |
| position: relative; | |
| background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://grekkon.co.ke/wp-content/uploads/2021/04/dam-liners-01.jpg') no-repeat center center/cover; | |
| color: white; | |
| text-align: center; | |
| padding: 150px 20px; /* Adjust padding as needed */ | |
| min-height: 100vh; /* Minimum height to fill the viewport */ | |
| } | |
| .hero h1 { | |
| font-size: 3em; /* Larger font size for the main heading */ | |
| margin-bottom: 0.5em; | |
| font-weight: bold; | |
| } | |
| .hero p { | |
| margin-bottom: 1.5em; | |
| font-size: 1.2em; /* Slightly larger font size for the subheading */ | |
| } | |
| .cta-buttons button { | |
| margin: 5px; | |
| padding: 0.8em 4.5em; | |
| background-color: #85c340; /* Replace with the color of your buttons */ | |
| color: white; | |
| border: none; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| font-weight: bold; | |
| font-size: 1em; | |
| } | |
| .cta-buttons button:hover { | |
| background-color: #3a9d56; /* Darker shade for hover effect */ | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 768px) { | |
| .nav-links, .login-btn { | |
| display: none; /* Hide navigation links and login button on smaller screens */ | |
| } | |
| .hero { | |
| padding: 120px 20px; | |
| } | |
| .hero h1 { | |
| font-size: 2.5em; | |
| } | |
| .hero p { | |
| font-size: 1em; | |
| } | |
| .cta-buttons button { | |
| width: auto; /* Allow buttons to resize with padding */ | |
| font-size: 0.9em; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero h1 { | |
| font-size: 2em; | |
| } | |
| .hero p { | |
| font-size: 0.8em; | |
| } | |
| } | |
| .footer { | |
| background-color: #333; /* Dark background for the footer */ | |
| color: #fff; /* White text color */ | |
| padding: 50px 0; | |
| } | |
| .footer-content { | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: start; | |
| max-width: 1200px; /* Maximum width of the footer content */ | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .footer-section h4 { | |
| margin-bottom: 10px; | |
| } | |
| .footer-section p { | |
| margin-bottom: 5px; | |
| } | |
| .footer-logo { | |
| margin-bottom: 10px; | |
| /* Set the size of your logo */ | |
| } | |
| @media (max-width: 768px) { | |
| .footer-content { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .footer-section { | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| } | |
| .green-text { | |
| color: #85c340; /* Adjust this color to the specific shade of green you want */ | |
| } | |
| .dam-liner-card { | |
| background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white for visibility of the hero image */ | |
| border-radius: 20px; /* Rounded corners for the card */ | |
| padding: 2em; /* Padding inside the card */ | |
| width: calc(100% - 4em); /* Card width with respect to its parent, adjusting for padding */ | |
| max-width: 700px; /* Maximum width of the card */ | |
| box-sizing: border-box; | |
| margin: 0 auto; /* Center the card */ | |
| position: absolute; | |
| bottom: -50px; /* Position the card at the bottom of the hero section */ | |
| left: 50%; | |
| transform: translateX(-50%); /* Center the card horizontally */ | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for depth */ | |
| } | |
| .dam-liner-card h2 { | |
| color: #333; /* Dark color for the heading for contrast */ | |
| margin-bottom: 0.5em; | |
| } | |
| .dam-liner-card p { | |
| color: #333; /* Dark color for the text for readability */ | |
| font-size: 1em; /* Adjust the font size as necessary */ | |
| line-height: 1.4; /* Line height for better readability */ | |
| margin-bottom: 1em; /* Space between paragraphs */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation Bar --> | |
| <nav> | |
| <div class="logo"> | |
| <img src="https://res.cloudinary.com/prometheusapi/image/upload/v1703852496/public/logo-bw_2x_w3karq.png" width="200px" alt="IrriHub Logo"> | |
| </div> | |
| <ul class="nav-links"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="company.html">Company</a></li> | |
| <li><a href="#" style="color: #85c340; border-bottom: 3px solid #85c340;">Products</a></li> | |
| <li><a href="impact.html">Impact</a></li> | |
| <li><a href="contact.html">Contact Us</a></li> | |
| </ul> | |
| <button class="login-btn">Log In</button> | |
| </nav> | |
| <!-- Main Hero Section --> | |
| <header class="hero"> | |
| <div class="dam-liner-card"> | |
| <h2>Dam Liner</h2> | |
| <p>At Irri-Hub Ke, we acknowledge the urgent need for rainwater harvesting due to climate change disruptions. With prolonged dry seasons and unpredictable floods becoming the norm, adaptation is crucial.</p> | |
| <p>We offer UV-protected HDPE liners, highly durable and resistant to tear, puncture, and stress crack, ensuring long-term use. Recommended thickness varies based on pan size and interior smoothness, providing a comprehensive solution for effective rainwater harvesting and storage in line with sustainable water management practices.</p> | |
| </div> | |
| </header> | |
| <footer class="footer"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <img src="https://irri-hub.com/wp-content/uploads/2022/04/irrihub.png" alt="Irrihub Logo" class="footer-logo"> | |
| <!-- Additional company info here --> | |
| </div> | |
| <div class="footer-section"> | |
| <h4 style="color: #85c340;">Get in Touch</h4> | |
| <p>Kilimani - Ngong Road <br><br> Next to Dima Driving School</p> | |
| <br> | |
| <p><span style="color: #85c340;"> Phone: </span> +254 739 587 934 <br><br> +254 112 148 880</p> | |
| <!-- More contact info here --> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Company</h4> | |
| <br> | |
| <h4>Products</h4> | |
| <br> | |
| <h4>Impact</h4> | |
| <br> | |
| <h4>Contact Us</h4> | |
| <!-- Additional links or info here --> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Climate Smart Drip Kits</h4> | |
| <br> | |
| <h4>Climate Smart Greenhouses</h4> | |
| <br> | |
| <h4>Climate Smart Irrigation</h4> | |
| <br> | |
| <h4>Climate Smart Solar</h4> | |
| <!-- Additional links or info here --> | |
| </div> | |
| <!-- Add more sections as needed --> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment