Skip to content

Commit

Permalink
update contact page
Browse files Browse the repository at this point in the history
  • Loading branch information
@vwolfley
vwolfley committed Mar 29, 2024
1 parent 97baa9a commit 119af6e
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 174 deletions.
92 changes: 90 additions & 2 deletions scoots/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,95 @@ <h1 id="nav-title">Scoots Rentals</h1>
<!-- /End Header & Navigation -->
<!-- Content -->
<main>

<section class="contact-hero">
<div class="overlay">
<h2>Contact Us</h2>
<p>Have a question or need more information? We are here to help!</p>
</div>
</section>
<section class="contact-area">
<h3>We’d Love To Hear From You!</h3>
<div class="contact-body">
<div class="contact-info">
<div class="address-block">
<h3>Visit us at both locations</h3>
<div class="address">
<address>
<h4>Scoots @ Playa del Carmen-Cozumel</h4>
<div>
<span class="label" aria-hidden="true">
<img src="images/svg/map-icon.svg" alt="map icon" />
</span>
<span>
<p>5 Ave N Entre Calle 2</p>
<p>77600 Cozumel, Q.R. Mexico</p>
</span>
</div>

<a href="tel:+525558691234" target="_self">
<span class="label" aria-hidden="true">
<img src="images/svg/phone-icon.svg" alt="phone icon" />
</span>
<span class="value" aria-label="Click here to call 808-652-7407">+52 555 869 1234</span>
</a>
</address>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5589.892018422959!2d-86.95356976523163!3d20.51161250714187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f4e59cceda3d799%3A0xbf8ea7e97451cfd8!2sCentro%2C%20San%20Miguel%20de%20Cozumel%2C%20Quintana%20Roo%2C%20Mexico!5e0!3m2!1sen!2sus!4v1711467670660!5m2!1sen!2sus"
width="600"
height="300"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>

<address>
<h4>Scoots @ Puerta Maya</h4>
<div>
<span class="label" aria-hidden="true"><img src="images/svg/map-icon.svg" alt="map icon" /> </span>
<span>
<p>5 Ave N Entre Calle 2</p>
<p>77600 Cozumel, Q.R. Mexico</p>
</span>
</div>
<a href="tel:+525559695678">
<span class="label" aria-hidden="true"><img src="images/svg/phone-icon.svg" alt="phone icon" /> </span>
<span class="value" aria-label="Click here to call 808-652-7407">+52 555 969 5678</span>
</a>
</address>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2079.9062928522703!2d-86.975759600473!3d20.475710187666206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1711467876877!5m2!1sen!2sus"
width="600"
height="300"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
</div>
</div>
<div class="contact-form">
<fieldset>
<legend>Email Contact</legend>
<label class="top">Name* <input type="text" id="name" name="name" placeholder="Name" required /></label>
<label class="top"
>Email*
<input
type="email"
id="email"
name="email"
placeholder="someone@gmail.com"
required
title="Please enter a valid email address"
/></label>
<label class="top">Subject* <input type="text" id="subject" name="subject" required /></label>
<label class="top">Message* <textarea id="message" name="message"></textarea></label>
</fieldset>
<button class="btn btn-primary"><a href="">Email us!</a></button>
</div>
</div>
</section>
</main>
<!-- /End Content -->
<!-- Footer -->
Expand Down Expand Up @@ -121,7 +209,7 @@ <h4>Scoots @ Puerta Maya</h4>
<div class="logo-block">
<img src="images//favicons/motorcycle.webp" alt="Scooter Logo" width="150" height="150" />
<p>Where every ride is an adventure waiting to happen!</p>
<button class="btn footer-btn"><a href="/">View Rentals</a></button>
<button class="btn btn-secondary"><a href="/">View Rentals</a></button>
</div>
<div class="social-media-block">
<ul class="social-media-links">
Expand Down
Binary file added scoots/images/heros/electric-scooter.webp
View file
Binary file not shown.
172 changes: 1 addition & 171 deletions scoots/pages/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,176 +216,6 @@ <h2 class="">
</div>
</div>

<!-- component -->
<div class="bg-gray-100 min-h-screen py-12 flex items-center justify-center">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Pricing Card 1 -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<div class="p-1 bg-blue-200"></div>
<div class="p-8">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Basic Plan</h2>
<p class="text-gray-600 mb-6">Ideal for small businesses</p>
<p class="text-4xl font-bold text-gray-800 mb-6">$19.99</p>
<ul class="text-sm text-gray-600 mb-6">
<li class="mb-2 flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
10 Users
</li>
<li class="mb-2 flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Basic Features
</li>
<li class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
24/7 Support
</li>
</ul>
</div>
<div class="p-4">
<button
class="w-full bg-blue-500 text-white rounded-full px-4 py-2 hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue active:bg-blue-800"
>
Select Plan
</button>
</div>
</div>

<!-- Pricing Card 2 -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<div class="p-1 bg-green-200"></div>
<div class="p-8">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Pro Plan</h2>
<p class="text-gray-600 mb-6">Perfect for growing businesses</p>
<p class="text-4xl font-bold text-gray-800 mb-6">$49.99</p>
<ul class="text-sm text-gray-600 mb-6">
<li class="mb-2 flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
25 Users
</li>
<li class="mb-2 flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Advanced Features
</li>
<li class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
24/7 Support
</li>
</ul>
</div>
<div class="p-4">
<button
class="w-full bg-green-500 text-white rounded-full px-4 py-2 hover:bg-green-700 focus:outline-none focus:shadow-outline-green active:bg-green-800"
>
Select Plan
</button>
</div>
</div>

<!-- Pricing Card 3 -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<div class="p-1 bg-purple-200"></div>
<div class="p-8">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Enterprise Plan</h2>
<p class="text-gray-600 mb-6">For large-scale enterprises</p>
<p class="text-4xl font-bold text-gray-800 mb-6">$99.99</p>
<ul class="text-sm text-gray-600 mb-6">
<li class="mb-2 flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Unlimited Users
</li>
<li class="mb-2 flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http
://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Premium Features
</li>
<li class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
24/7 Priority Support
</li>
</ul>
</div>
<div class="p-4">
<button
class="w-full bg-purple-500 text-white rounded-full px-4 py-2 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple active:bg-purple-800"
>
Select Plan
</button>
</div>
</div>
</div>
</div>

</body>
</html>
Loading

0 comments on commit 119af6e

Please sign in to comment.