FarmPure/index.html at main · RutujaKumbhar17/FarmPure · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FarmPure</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('./image/background1.jpg');
            background-size: cover; /* Image covers the entire background */
            background-position: center; /* Centers the background image */
            background-repeat: no-repeat; /* Prevents the image from repeating */
            background-attachment: fixed; /* Keeps the background fixed during scrolling */
            color: white; /* Makes text readable against a dark background */
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center; /* Center-align all text on the page */
            flex-direction: column;
        }

        /* Header Section */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background-color: #6a4a3c;
            color: white;
            width: 100%;
        }

        .header h1 {
            margin: 0;
            font-size: 36px; /* Increase the font size for the header */
            color: white;
        }

        .buttons {
            display: flex;
            gap: 15px;
        }

        .buttons a {
            text-decoration: none;
            padding: 12px 20px;
            background-color: white;
            color: #6a4a3c;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
        }

        .buttons a:hover {
            background-color: #f5f5f5;
        }

        /* Main Content */
        .content {
            text-align: center;
            padding: 60px 20px;
            width: 100%;
        }

        .dynamic-text {
            color: white;
            font-size: 28px;
            font-style: italic;
            margin-top: 20px;
            height: 30px; /* Ensures proper spacing */
            transition: opacity 0.5s ease-in-out;
        }

        .content p {
            max-width: 900px;
            margin: 30px auto;
            line-height: 1.6;
            color: white;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <!-- Header -->
    <div class="header">
        <h1>FarmPure</h1>
        <div class="buttons">
            <a href="login_signup.html" title="Login Page">Login</a>
            <a href="login_signup.html" title="Sign Up Page">Sign Up</a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="content">
        <h1>WELCOME TO FarmPure</h1>
        <div class="dynamic-text" id="dynamicText"></div> <!-- For dynamic text -->

        <p>Welcome to FarmPure, your trusted farm-to-kitchen service that brings the freshest, most natural produce
            straight to your doorstep. At FarmPure, we work directly with local farmers to deliver handpicked fruits,
            vegetables, and groceries that are grown with care and sustainability. Our mission is to provide you with
            nutritious, farm-fresh products while supporting local agriculture and reducing environmental impact.
            Experience the purity of fresh, wholesome food that goes from farm to your kitchen, effortlessly and
            conveniently, with FarmPure.</p>
    </div>

    <!-- JavaScript for Dynamic Text -->
    <script>
        const dynamicText = [
            "Fresh from the farm, to your home!",
            "Supporting local farmers sustainably.",
            "Wholesome food for your family.",
            "Bringing nature closer to your kitchen.",
        ];
        let index = 0;

        function updateDynamicText() {
            const textElement = document.getElementById("dynamicText");
            textElement.textContent = dynamicText[index];
            index = (index + 1) % dynamicText.length; // Loop through the array
        }

        // Initial call and interval for updating text
        updateDynamicText();
        setInterval(updateDynamicText, 1500); // Change text every 1.5 seconds
    </script>
</body>

</html>