-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (201 loc) · 13.2 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.png">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/7433d3320f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./CSS/responsive.css">
<title>Google Meet Clone</title>
</head>
<body>
<!-- header section -->
<header class="text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-row md:flex-row items-center">
<a href="#" class="flex w-40">
<img src="./images/logo.svg" alt="logo" class="cursor-pointer">
</a>
<nav aria-label="navigational links"
class="md:ml-auto md:mr-auto md:flex md:flex-wrap md:items-center md:text-base md:justify-center hidden">
<a href="https://workspace.google.com/intl/en_in/?utm_source=google&utm_medium=cpc&utm_campaign=1011352-Workspace-APAC-IN-en-BKWS-EXA-HV&utm_content=text-ad-none-none-DEV_c-CRE_608344336739-ADGP_Hybrid+%7C+BKWS+-+EXA+%7C+Txt+~+G+Suite_1-KWID_43700071931903936-kwd-35154496839&userloc_9302611-network_g&utm_term=KW_google%20suits&gclid=Cj0KCQjw94WZBhDtARIsAKxWG--hDQkZ4ujQiyJjaOAGwqlzkbz8arPgJzMwgXBnBm0dbhqm3r1FIqQaAoLQEALw_wcB&gclsrc=aw.ds"
class="mr-10 cursor-pointer hover:text-gray-900">Solutions</a>
<a href="https://workspace.google.com/intl/en_in/pricing.html" target="_blank"
class="mr-10 cursor-pointer hover:text-gray-900">Plans & Pricing</a>
<a href="https://workspace.google.com/intl/en_in/contact-form/?source=gafb-pricing-enterprise-en-IN"
target="_blank" class="mr-10 cursor-pointer hover:text-gray-900">Contact Sales</a>
<a href="https://workspace.google.com/intl/en_in/training/"
class="mr-10 cursor-pointer hover:text-gray-900">Resources</a>
</nav>
<button type="button" id="header_join_btn"
class="md:inline-flex md:items-center md:bg-white md:text-blue-600 md:border md:border-gray-300 md:py-2 md:px-4 md:mx-2 md:focus:outline-none md:hover:bg-white md:hover:border md:hover:border-blue-600 md:rounded md:text-base md:mt-4 md:mt-0 hidden">Join
a meeting</button>
<button type="button"
class="md:inline-flex md:items-center md:bg-blue-600 md:text-white md:border-0 md:py-2 md:px-4 md:focus:outline-none md:hover:bg-blue-800 md:rounded md:text-base md:mt-4 md:mt-0 hidden">Start
a meeting</button>
</div>
</header>
<section class="text-gray-600 body-font">
<div class="container mx-auto flex md:px-16 px-5 md:py-24 py-12 md:flex-row flex-col items-center">
<div
class="lg:flex-grow md:w-1/2 md:pr-24 md:pr-16 flex flex-col md:items-start text-left mb-16 md:mb-0 items-center text-center premium_meeting">
<h1 class="md:title-font md:text-4xl text-2xl mb-10 font-medium text-gray-900 w-3/4 home-text">
Premium video meetings for everyone.
</h1>
<p class="mb-8 leading-relaxed w-[90%] md:text-lg text-normal text-gray-600 font-normal">
We re-engineered the service we built for secure, high-quality
business meetings, Google Meet, to make it available for all, on any
device.
</p>
<div class="flex md:flex-row md:justify-center items-center flex-col start_meeting">
<button type="button"
class="md:inline-flex text-white bg-blue-600 border-0 py-2 px-6 md:mb-0 mb-4 focus:outline-none hover:bg-blue-800 rounded text-lg flex justify-center">
<i class="fa-solid fa-video pr-2 py-1.5"></i>
Start a meeting
</button>
<input type="text" id="join_meeting_input"
class="md:ml-2 pl-5 inline-flex font-normal placeholder:text-gray-500 bg-white border border-gray-300 py-2 px-2 outline-gray-500 rounded text-lg relative"
placeholder="Enter a meeting code">
<p class="md:ml-4 mt-2.5 text-gray-500 font-semibold cursor-pointer text-[17px]">Join</p>
</div>
<a href="https://support.google.com/accounts/answer/27441?hl=en" class="mt-10 font-medium">
Don't have an account?
<span class="text-blue-500 cursor-pointer">Get Started Now</span>
</a>
</div>
<div class="md:max-w-lg md:w-full md:w-1/2 w-5/6 first-image-parent">
<img src="./images/image1.webp" alt="first image" id="first-image"
class="object-cover object-center rounded">
</div>
</div>
</section>
<!-- mid section -->
<hr class="border border-1 md:mx-24 mx-12">
<h2 class="text-center mt-10 font-semibold font-poppins">See what you can do with Google Meet</h2>
<i class="fa-solid fa-angle-down flex items-center justify-center mb-10 mt-2 sm:text-xl"></i>
<section class="text-gray-600 body-font">
<div
class="container mx-auto flex md:px-16 px-5 md:pt-10 pt-12 md:py-24 py-12 md:flex-row flex-col items-center">
<div
class="lg:flex-grow md:w-1/2 md:-mt-12 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-10 font-medium text-gray-900 w-3/4">Meet Safely</h1>
<p class="mb-8 leading-relaxed w-[90%] md:text-lg text-normal text-gray-600 font-normal">
Meet uses the same protections that Google uses to secure your information and safeguard your
privacy. Meet video conferences are encrypted in transit, and our array of safety measures are
continuously updated for added protection.
</p>
<div class="flex justify-center">
<a href="https://support.google.com/a/answer/7582940?hl=en"
class="text-blue-600 font-semibold cursor-pointer">
Learn more about security and compliance
</a>
</div>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img src="./images/image2.webp" alt="second image" class="object-cover object-center rounded">
</div>
</div>
</section>
<section class="text-gray-600 body-font">
<div class="container mx-auto flex md:pt-10 pt-12 md:px-12 md:py-24 py-12 md:flex-row flex-col items-center">
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img src="./images/image3.webp" alt="third image" class="object-cover object-center rounded">
</div>
<div
class="lg:flex-grow md:w-1/2 md:-mt-12 lg:pl-24 md:pl-16 px-5 flex flex-col md:items-start md:text-left items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-10 font-medium text-gray-800">Meet from anywhere</h1>
<p class="mb-8 leading-relaxed w-[90%] md:text-lg text-normal text-gray-600 font-normal">
Get the whole crew together in Google Meet, where you can present business proposals, collaborate on
chemistry assignments, or just catch up face to face. <br><br> Businesses, schools, and other
organizations can live stream meetings to 100,000 viewers within their domain.
</p>
<a href="https://workspace.google.com/intl/en_in/pricing.html" class="flex justify-center">
<p class="text-blue-600 font-semibold cursor-pointer">See plans and pricing for organization</p>
</a>
</div>
</div>
</section>
<!-- third section -->
<section class="text-gray-600 body-font">
<div class="container mx-auto flex md:px-12 px-5 pt-12 md:py-24 py-12 md:flex-row flex-col items-center">
<div
class="lg:flex-grow md:w-1/2 md:-mt-12 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-10 font-medium text-gray-900 w-3/4">Meet on any device
</h1>
<p class="mb-8 leading-relaxed w-[90%] md:text-lg text-normal text-gray-600 font-normal">
Invited guests can join an online video conference from their computer using any modern web
browser—no software to install. On mobile devices, they can join from the Google Meet app. Guests
can even join meetings from Google Nest Hub Max.
</p>
<a href="https://edu.google.com/chromebooks/overview/" class="flex justify-center">
<p class="text-blue-600 font-semibold cursor-pointer">Enable hybrid work with Chrome OS devices</p>
</a>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img src="./images/image4.webp" alt="fourth image" class="object-cover object-center rounded">
</div>
</div>
</section>
<!-- fourth section -->
<section class="text-gray-600 body-font">
<div
class="container mx-auto flex md:pt-10 pt-12 md:px-12 px-5 md:py-24 py-12 md:flex-row flex-col items-center">
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img src="./images/image5.webp" alt="fifth image" class="object-cover object-center rounded">
</div>
<div
class="lg:flex-grow md:w-1/2 md:-mt-44 md:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-10 font-medium text-gray-800">Meet clearly</h1>
<p class="mb-8 leading-relaxed w-[90%] md:text-lg text-normal text-gray-600 font-normal">Google Meet
adjusts to your network speed, ensuring high quality video calls wherever you are. New AI
enhancements keep your calls clear even when your surroundings aren’t.</p>
</div>
</div>
</section>
<!-- fifth section -->
<section class="text-gray-600 body-font">
<div
class="container mx-auto flex md:px-16 px-5 md:pt-10 pt-12 md:py-24 py-12 md:flex-row flex-col items-center">
<div
class="lg:flex-grow md:w-1/2 md:-mt-12 -mt-10 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-10 font-medium text-gray-900 w-3/4">Meet with everyone
</h1>
<p class="mb-8 leading-relaxed w-[90%] md:text-lg text-normal text-gray-600 font-normal">With live
captions powered by Google’s speech recognition technology, Google Meet makes meetings more
accessible. For non-native speakers, hearing impaired participants, or just noisy ee shops, live
captions make it easy for everyone to follow along (available in English only).
</p>
<a href="https://support.google.com/meet/answer/7313544?hl=en" class="flex justify-center">
<p class="text-blue-600 font-semibold cursor-pointer">Learn more about accessibility features</p>
</a>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img src="./images/image6.webp" alt="sixth image" class=" object-cover object-center rounded">
</div>
</div>
</section>
<!-- footer -->
<footer class="text-gray-600 body-font bg-gray-200">
<div class="container md:px-5 py-8 pt-10 mx-auto flex items-center justify-center md:flex-row flex-col">
<a href="#" class="flex w-40">
<img src="./images/logo.svg" alt="footer logo" class="cursor-pointer">
</a>
<nav class="md:mx-10 md:mt-0.5 mx-10 mt-4 flex flex-wrap items-center text-base justify-center"
aria-label="footer elements">
<a href="https://about.google/"
class="md:mr-5 mr-3 text-gray-500 font-medium cursor-pointer hover:text-gray-600">About
Google</a>
<a href="https://about.google/products/"
class="md:mr-5 mr-3 text-gray-500 font-medium cursor-pointer hover:text-gray-600">Google
Products</a>
<a href="https://policies.google.com/privacy?hl=en" target="_blank"
class="md:mr-5 mr-3 text-gray-500 font-medium cursor-pointer hover:text-gray-600">Privacy</a>
<a href="https://policies.google.com/terms?hl=en" target="_blank"
class="md:mr-5 mr-3 text-gray-500 font-medium cursor-pointer hover:text-gray-600">Terms</a>
</nav>
</div>
</footer>
<script src="./main.js"></script>
</body>
</html>