<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free Aqua India</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <img src="https://i.ibb.co/ZgW2bNy/free-aqua-india-logo.png" alt="Free Aqua India Logo">
            </div>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
          <p class="header-message">Advertise with purpose</p> <!-- New message added -->
        </div>
    </header>

    <section id="home">
        <div class="container">
            <h1>Put Your Brand In Everyone's Hand!</h1>
            <p class="message">Quench the thirst of your brand's growth while quenching the literal thirst of communities in need. Partner with us, where every drop of water distributed is not just hydration but also an opportunity to showcase your brand's commitment to social responsibility. Advertise with purpose – advertise with QuenchFlow.</p>
            <a href="#advertise" class="btn">Advertise with Us</a>
            <img src="https://i.ibb.co/YfVqhN9/free-aqua-india-image.jpg" alt="Free Aqua India Image">
        </div>
    </section>

    <!-- Add more sections here -->

    <footer>
        <div class="container">
            <p>&copy; 2024 Free Aqua India. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

header {
    background-color: #003366;
    color: #fff;
    padding: 20px 0;
}
.header-message {
    color: #FFFFFF; /* #000000 */
    font-size: 25px; /* Adjust the font size as needed */
    margin-top: 15px; /* Adjust the margin as needed */
    margin-left: 280px; /* Adjust the margin as needed */
}

.logo img {
    height: 100px; /* Adjust as needed */
}

nav ul {
    list-style: none;
    float: right;
}

nav ul li {
    display: inline;
    margin-left: 20px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

section#home {
    text-align: center;
    padding: 100px 0;
}

section#home h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #003366;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #001f4d;
}

footer {
    background-color: #003366;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}
/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

header {
    background-color: #003366;
    color: #fff;
    padding: 20px 0;
}

.logo img {
    height: 40px; /* Adjust as needed */
}

nav ul {
    list-style: none;
    float: right;
}

nav ul li {
    display: inline;
    margin-left: 20px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

section#home {
    text-align: center;
    padding: 100px 0;
}

section#home h1 {
    font-family: 'Canva Sans';
    font-size: 21px;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #003366;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:{
    background-color: #001f4d;
    margin-left: 26px; /* Adjust the margin as needed */
}
.btn {  color: #FFFFFF; /* #000000 */
    font-size: 15px; /* Adjust the font size as needed */
    margin-top: 15px; /* Adjust the margin as needed */
    margin-left: 230px; /* Adjust the margin as needed */
}
}
footer {
    background-color: #003366;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

/* Import Canva Sans font */
@font-face {
    font-family: 'Canva Sans';
    src: url('https://fonts.gstatic.com/s/canvasans/v10/pxiEypCsMh4BTTExzk1sUQ.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.