globallane1/services.html at main · CodeAnup/globallane1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
            <div class="container-fluid">
                <a class="navbar-brand d-flex align-items-center" href="#">
                    <img src="Globallane.png" alt="Global Lane Logo" class="logo me-2" style="height: 40px;">
                    <span> Global Lane</span>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav" style="padding: 9px 0 9px 0;">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item"><a class="nav-link" href="index.html" style="padding-right: 30px;">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="about.html" style="padding-right: 40px;">About Us</a></li>
                        <li class="nav-item"><a class="nav-link" href="products.html" style="padding-right: 40px;">Products</a></li>
                        <li class="nav-item"><a class="nav-link" href="services.html" style="padding-right: 40px;">Services</a></li>
                        <li class="nav-item"><a class="nav-link" href="trade-resources.html" style="padding-right: 40px;">Trade Resources</a></li>
                        <li class="nav-item"><a class="nav-link" href="contact.html" style="padding-right: 40px;">Contact</a></li>
                        <li class="nav-item"><a class="nav-link" href="client-portal.html" style="padding-right: 40px;">Client Portal</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="position-relative">
        <img src="top.jpg" alt="Car Image" class="w-100" style="height: 125px; object-fit: cover;">
        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark" style="opacity: 0.4;"></div> <!-- Black overlay with 40% opacity -->
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center text-white">
            <h1 class="display-4 text-center">Services</h1>
        </div>
    </div>

    <div class="container py-5">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            <div class="col">
                <div class="card text-center h-100 shadow-sm p-4">
                    <i class="fa-solid fa-leaf animate-bounce text-orange-500" style="font-size: 35px;color: rgb(255, 145, 0);"></i>
                    <h3 class="text-primary pt-2 py-2">Quality Control</h3>
                    <p>Strict quality control guarantees our agricultural products meet top standards through thorough inspection and testing.</p>
                </div>
            </div>

            <div class="col">
                <div class="card text-center h-100 shadow-sm p-4">
                    <i class="fa-solid fa-globe animate-bounce" style="font-size: 35px; color: rgb(255, 145, 0);"></i>

                    <h3 class="text-primary pt-2 py-2">Global Shipping</h3>
                    <p>Reliable global shipping ensures timely delivery of agricultural products with efficient logistics and tracking across borders.</p>
                </div>
            </div>

            <div class="col">
                <div class="card text-center h-100 shadow-sm p-4">
                    <i class="fa-solid fa-hand-holding-heart animate-bounce text-orange-500" style="font-size: 35px;color: rgb(255, 145, 0);"></i>
                    <h3 class="text-primary pt-2 py-2">Customer Support</h3>
                    <p>Exceptional customer support provides assistance and resolves issues quickly, ensuring a smooth and satisfactory experience for all clients.</p>
                </div>
            </div>

            <div class="col">
                <div class="card text-center h-100 shadow-sm p-4">
                    <i class="fa-solid fa-truck animate-bounce text-orange-500" style="font-size: 35px;color: rgb(255, 145, 0);"></i>
                    <h3 class="text-primary pt-2 py-2">Home Delivery</h3>
                    <p>Convenient home delivery of fresh agricultural products, ensuring timely arrival with safe and secure handling.</p>
                </div>
            </div>

            <div class="col">
                <div class="card text-center h-100 shadow-sm p-4">
                    <i class="fa-solid fa-credit-card animate-bounce text-orange-500" style="font-size: 35px;color: rgb(255, 145, 0);"></i>
                    <h3 class="text-primary pt-2 py-2">Payment Safety</h3>
                    <p>Secure payment systems with advanced encryption ensure your transactions are safe, reliable, and fully protected.</p>
                </div>
            </div>

            <div class="col">
                <div class="card text-center h-100 shadow-sm p-4">
                    <i class="fa-solid fa-money-check-dollar animate-bounce text-orange-500" style="font-size: 35px;color: rgb(255, 145, 0);"></i>
                    <h3 class="text-primary pt-2 py-2">Currency Converter</h3>
                    <p>Easily convert currencies to view prices in your local currency for a seamless shopping experience.</p>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row">
                <!-- Company Info -->
                <div class="col-md-4">
                    <h5>About Global Lane</h5>
                    <p>Global Lane is dedicated to providing the highest quality agricultural products to clients around the world, ensuring sustainability and excellence in everything we do.</p>
                </div>
                <!-- Quick Links -->
                <div class="col-md-4">
                    <h5>Quick Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="about.html" class="text-white">About Us</a></li>
                        <li><a href="products.html" class="text-white">Products</a></li>
                        <li><a href="services.html" class="text-white">Services</a></li>
                        <li><a href="contact.html" class="text-white">Contact</a></li>
                        <li><a href="client-portal.html" class="text-white">Client Portal</a></li>
                    </ul>
                </div>
                <!-- Contact Info -->
                <div class="col-md-4">
                    <h5>Contact Us</h5>
                    <p>Email: <a href="mailto:info@globallane.com" class="text-white">info@globallane.com</a></p>
                    <p>Phone: +123 456 7890</p>
                    <div class="social-icons">
                        <a href="#" class="text-white me-2"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-white me-2"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-white me-2"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <hr class="bg-white">
            <div class="text-center">
                <p>&copy; 2024 Global Lane. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>