-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (130 loc) · 8.9 KB
/
index.html
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
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sustainable Automation</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body>
<div id="nav" class="h-16 w-full fixed top-0 z-10 left-0 p-1">
<a href="./index.html" style="text-decoration: none;">
<h2 id="sustarch" class="absolute top-1/2 -translate-y-1/2 left-10 font-semibold text-base md:text-2xl text-white">Sustainable Home Automation</h2>
</a>
<div id="right" class="absolute right-0 top-1/2 -translate-y-1/2 mr-10 flex items-center gap-4 md:gap-6">
<a href="./aboutus.html" class="hidden md:visible">
<h4>About us</h4>
</a>
<h4 id="btn1" class="p-2 h-10 w-20 cursor-pointer border-white border-2 hidden items-center justify-center rounded-md md:flex">
<a href="./signin.html">Sign in</a>
</h4>
<i class="fa-solid fa-bell cursor-pointer text-base md:text-xl"></i>
</div>
</div>
<div id="mod2" class="h-screen w-full relative">
<div class="val1">
<img src="./images/iot2.jpg" alt="" id="img1" height="750rem" width="750rem" class= " rounded-xl ml-20 absolute" style="filter: blur(1px);">
<div class="flex flex-wrap justify-center gap-10" style="position: absolute; top: 15rem; left: 17rem;"> <!-- Changed to flex-wrap and justify-center for 2x2 alignment -->
<a href="lr.html">
<div class="card h-32 w-52 rounded-md relative bg-white/30 backdrop-blur-lg transition-all duration-300 hover:scale-105 md:h-32 md:w-52" style="background: linear-gradient(135deg, rgba(173, 216, 230, 0.4), rgba(173, 216, 230, 0.3)); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);">
<div class="p-4 flex flex-col items-center justify-center">
<h4 class="font-medium text-gray-800">Living Room</h4>
<div class="mt-2">
<p class="text-sm text-gray-600">Power Usage: 0 kWh</p>
<p class="text-sm text-gray-600">Active Devices: 0</p>
</div>
</div>
</div>
</a>
<div class="card h-32 w-52 rounded-md relative bg-white/30 backdrop-blur-lg transition-all duration-300 hover:scale-105 md:h-32 md:w-52" style="background: linear-gradient(135deg, rgba(173, 216, 230, 0.4), rgba(173, 216, 230, 0.3)); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);">
<a href="./br.html">
<div class="p-4 flex flex-col items-center justify-center">
<h4 class="font-medium text-gray-800">Kitchen</h4>
<div class="mt-2">
<p class="text-sm text-gray-600">Power Usage: 0 kWh</p>
<p class="text-sm text-gray-600">Active Devices: 0</p>
</div>
</div>
</a>
</div>
</div>
<div class="flex flex-wrap justify-center gap-10" style="position: absolute; top: 25rem; left: 17rem;"> <!-- Changed to flex-wrap and justify-center for 2x2 alignment -->
<div class="card h-32 w-52 rounded-md relative bg-white/30 backdrop-blur-lg transition-all duration-300 hover:scale-105 md:h-32 md:w-52" style="background: linear-gradient(135deg, rgba(173, 216, 230, 0.4), rgba(173, 216, 230, 0.3)); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);">
<div class="p-4 flex flex-col items-center justify-center">
<h4 class="font-medium text-gray-800">Bedroom</h4>
<div class="mt-2">
<p class="text-sm text-gray-600">Power Usage: 0 kWh</p>
<p class="text-sm text-gray-600">Active Devices: 0</p>
</div>
</div>
</div>
<div class="card h-32 w-52 rounded-md relative bg-white/30 backdrop-blur-lg transition-all duration-300 hover:scale-105 md:h-32 md:w-52" style="background: linear-gradient(135deg, rgba(173, 216, 230, 0.4), rgba(173, 216, 230, 0.3)); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);">
<div class="p-4 flex flex-col items-center justify-center">
<h4 class="font-medium text-gray-800">Bathroom</h4>
<div class="mt-2">
<p class="text-sm text-gray-600">Power Usage: 0 kWh</p>
<p class="text-sm text-gray-600">Active Devices: 0</p>
</div>
</div>
</div>
</div>
</div>
<img src="./images/iotdevices.jpg" alt="" id="img2" height="300rem" width="350rem" class="rounded-xl mt-0 absolute">
<img src="./images/iot3.jpg" alt="" id="img3" height="160rem" width="172rem" class="rounded-xl absolute">
<img src="./images/iot4.jpg" alt="" id="img4" height="160rem" width="172rem" class="rounded-xl absolute">
</div>
<div id="mod-1" class="h-[calc(100vh-4rem)] w-full flex items-center justify-center mt-6 pt-12">
<h2 class="absolute font-bold" id="tag1">Intelligent Living. Sustainable Earning.</h2>
<div class="flex flex-col md:flex-row items-center justify-center w-full md:w-3/4 space-x-4">
<div id="mod-1-det" class="flex mr-32 flex-col text-center w-full md:w-1/3">
<h3 class="text-3xl font-semibold">What Makes Us Different?</h3>
<img src="./images/green2.png" id="greenline" class="relative" alt="">
<div class="-mt-7">
<ul class="text-xl text-gray-700 mb-2 gap-2 list-disc pl-6">
<li>Automatically control your lights, fans, and other appliances based on real-time conditions.</li>
<li>Earn credits for reducing energy consumption and adopting eco-friendly habits.</li>
<li>Convert your earned credits into real-world rewards like tokens or discounts.</li>
<li>Our AI analyzes your usage patterns and suggests ways to optimize your energy usage.</li>
</ul>
</div>
</div>
<div class="flex flex-col text-center w-full md:w-1/3 mt-10 md:mt-0" id="features">
<h3 class="text-2xl font-semibold text-green-600">Save Energy, Save the Planet!</h3>
<p class="text-xl text-gray-600 mt-4">Join the revolution in energy conservation. With our advanced automation system, reduce your carbon footprint and lower energy bills effortlessly.</p>
<div class="mt-6">
<button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition duration-300">
Start Saving Now
</button>
</div>
</div>
</div>
</div>
</div>
<div class="flex-grow"></div>
<!-- Footer -->
<footer class="h-96 w-full relative bottom-0 flex flex-col items-center justify-center">
<!-- Logo -->
<img src="./images/logo.png" alt="Sustainable Architects Logo" id="ft-logo" class="w-36 h-36 object-contain mb-4">
<!-- Name -->
<h3 class="text-lg font-bold text-gray-800 mb-2">Sustainable Architects</h3>
<!-- Links -->
<ul class="flex space-x-6">
<li><a href="#about" class="text-gray-700 hover:text-green-600">About Us</a></li>
<li><a href="#services" class="text-gray-700 hover:text-green-600">Services</a></li>
<li></li>
<li><a href="#blog" class="text-gray-700 hover:text-green-600">Blog</a></li>
</ul>
<p class="relative" style="bottom: -3rem;">©Copyrights Reserved Sustainable Automation</p>
</footer>
</body>
<script src="script.js"></script>
<script src="gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/solid.min.js" integrity="sha512-H/FYzgm63CLJLwSgCNv7zmAHWnbw7GwOrnCjE15CD969yHWj7fGDiHHLZuZJLO9ZGIkBR/JL91/p/ddbtUUgQQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</html>