Skip to content

Commit

Permalink
update rental cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@vwolfley
vwolfley committed Apr 5, 2024
1 parent 03c31aa commit f7b19c8
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 65 deletions.
Binary file modified scoots/images/rentals/honda-dio-black2.webp
View file
Binary file not shown.
Binary file modified scoots/images/rentals/honda-dio-yellow.webp
View file
Binary file not shown.
Binary file modified scoots/images/rentals/wrangler-yellow-4.webp
View file
Binary file not shown.
64 changes: 41 additions & 23 deletions scoots/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,29 +111,47 @@ <h5>Reserve online, call, or come on by!</h5>
<h2 class="separator">Choose Your Ride</h2>
<div class="card-container">
<article class="card">
<img src="./images/rentals/honda-pioneer-green-4.webp" alt="Card 1" />
<img src="./images/rentals/honda-metro-blue.webp" alt="honda-metro" loading="lazy" />
<div class="card-body">
<h3>Side-by-Side ATVs</h3>
<p>Honda Pioneer 1000 - 4 person</p>
<h3>Honda Metro Scooter</h3>
<p>Honda Metropolitan (49cc) - 1 person</p>
</div>
</article>
<article class="card">
<img src="./images/rentals/honda-metro-blue.webp" alt="Card 2" />
<img src="./images/rentals/honda-dio-black1.webp" alt="honda-dio" loading="lazy"/>
<div class="card-body">
<h3>Honda Motor Scooters</h3>
<p>Honda Metropolitan (49cc) - 1 person</p>
<h3>Honda Dio Scooter</h3>
<p>Honda Dio (110cc) - 2 person</p>
</div>
</article>
<article class="card">
<img src="./images/rentals/honda-pcx150-white.webp" alt="honda-pcx" loading="lazy"/>
<div class="card-body">
<h3>Honda PCX150 Scooter</h3>
<p>Honda PCX150 (149cc) - 2 person</p>
</div>
</article>
<article class="card">
<img src="./images/rentals/wrangler-yellow-4.webp" alt="Card 3" />
<img src="./images/rentals/honda-pioneer-green-4.webp" alt="honda-pioneer" loading="lazy"/>
<div class="card-body">
<h3>Jeeps</h3>
<p>Jeep Wrangler - 4 door manuel with A/C - 5 person</p>
<h3>Honda Pioneer ATV</h3>
<p>Honda Pioneer 1000 - 4 person</p>
</div>
</article>
<article class="card">
<img src="./images/rentals/wrangler-red-2.webp" alt="jeep-2-door" loading="lazy"/>
<div class="card-body">
<h3>Jeep Wrangler - 2 door</h3>
<p>Jeep Wrangler - 2 door - open air - manuel - 4 person</p>
</div>
</article>
<article class="card">
<img src="./images/rentals/wrangler-yellow-4.webp" alt="jeep-4-door" loading="lazy"/>
<div class="card-body">
<h3>Jeep Wrangler - 4 door</h3>
<p>Jeep Wrangler - 4 door manuel with A/C - 5 person</p>
</div>
</article>
</div>
</section>
<section class="reservations-banner banner-two">
Expand All @@ -145,21 +163,21 @@ <h2 class="">Choose an Hourly or Multi-Day Rental</h2>
</p>
<button class="btn btn-primary"><a href="./reservations.html">Reservations</a></button>
</article>
<img src="./images/heros/scooter_rental_cozumel.webp" alt="scooter rental guy" />
<img src="./images/heros/scooter_rental_cozumel.webp" alt="scooter rental guy" loading="lazy" />
</section>

<section class="places-info">
<h2 class="separator">Choose Your Destination</h2>
<div class="card-container">
<article class="card">
<img src="./images/places/punta-sur-park.webp" alt="Card 1" />
<img src="./images/places/punta-sur-park.webp" alt="punta-sur-park" loading="lazy"/>
<div class="card-body">
<h3>Punta Sur Eco Beach Park</h3>
<p>If you're a wildlife lover, a trip to the Punta Sur Eco Park is a must.</p>
</div>
</article>
<article class="card">
<img src="./images/places/san_gervasio.webp" alt="Card 2" />
<img src="./images/places/san_gervasio.webp" alt="san_gervasio" loading="lazy"/>
<div class="card-body">
<h3>San Gervasio Ruins</h3>
<p>
Expand All @@ -168,21 +186,21 @@ <h3>San Gervasio Ruins</h3>
</div>
</article>
<article class="card">
<img src="./images/places/celarain-lighthouse.webp" alt="Card 3" />
<img src="./images/places/celarain-lighthouse.webp" alt="celarain-lighthouse" loading="lazy"/>
<div class="card-body">
<h3>Celarain Lighthouse</h3>
<p>Celarain Lighthouse is a restored lighthouse-turned-museum that’s located within Punta Sur Eco Beach Park</p>
</div>
</article>
<article class="card">
<img src="./images/places/museo-de-cozumel.webp" alt="Card 3" />
<img src="./images/places/museo-de-cozumel.webp" alt="museo-de-cozumel" loading="lazy"/>
<div class="card-body">
<h3>El Museo de la Isla de Cozumel</h3>
<p>If you want to learn more about Cozumel's history, check out this excellent museum in downtown San Miguel.</p>
</div>
</article>
<article class="card">
<img src="./images/places/snorkel-playa-cielo.webp" alt="Card 3" />
<img src="./images/places/snorkel-playa-cielo.webp" alt="snorkeling" loading="lazy"/>
<div class="card-body">
<h3>Snorkel Playa El Cielo</h3>
<p>
Expand All @@ -192,7 +210,7 @@ <h3>Snorkel Playa El Cielo</h3>
</div>
</article>
<article class="card">
<img src="./images/places/los-cinco-soles.webp" alt="Card 3" />
<img src="./images/places/los-cinco-soles.webp" alt="los-cinco-soles" loading="lazy"/>
<div class="card-body">
<h3>Los Cinco Soles</h3>
<p>
Expand All @@ -212,15 +230,15 @@ <h2 class="">Choose an Hourly or Multi-Day Rental</h2>
</p>
<button class="btn btn-primary"><a href="./reservations.html">Reservations</a></button>
</article>
<img src="./images/heros/scooter_rental_cozumel.webp" alt="scooter rental guy" />
<img src="./images/heros/scooter_rental_cozumel.webp" alt="scooter rental guy" loading="lazy"/>
</section>
</main>
<!-- /End Content -->
<!-- Footer -->
<footer>
<section>
<div class="footer-title">
<img src="images/logo.svg" alt="Scooter Logo" width="60" height="60" />
<img src="images/logo.svg" alt="Scooter Logo" width="60" height="60" loading="lazy"/>
<h2>Scoots Rentals</h2>
</div>
<div class="address-block">
Expand All @@ -230,7 +248,7 @@ <h3>Contact</h3>
<h4>Scoots @ Playa del Carmen-Cozumel</h4>
<div>
<span class="label" aria-hidden="true">
<img src="images/svg/map-icon.svg" alt="map icon" />
<img src="images/svg/map-icon.svg" alt="map icon" loading="lazy"/>
</span>
<span>
<p>5 Ave N Entre Calle 2</p>
Expand All @@ -240,7 +258,7 @@ <h4>Scoots @ Playa del Carmen-Cozumel</h4>

<a href="tel:+525558691234" target="_self">
<span class="label" aria-hidden="true">
<img src="images/svg/phone-icon.svg" alt="phone icon" />
<img src="images/svg/phone-icon.svg" alt="phone icon" loading="lazy"/>
</span>
<span class="value" aria-label="Click here to call 808-652-7407">+52 555 869 1234</span>
</a>
Expand All @@ -249,22 +267,22 @@ <h4>Scoots @ Playa del Carmen-Cozumel</h4>
<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 class="label" aria-hidden="true"><img src="images/svg/map-icon.svg" alt="map icon" loading="lazy"/> </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="label" aria-hidden="true"><img src="images/svg/phone-icon.svg" alt="phone icon" loading="lazy"/> </span>
<span class="value" aria-label="Click here to call 808-652-7407">+52 555 969 5678</span>
</a>
</address>
</div>
</div>

<div class="logo-block">
<img src="images//favicons/motorcycle.webp" alt="Scooter Logo" width="150" height="150" />
<img src="images//favicons/motorcycle.webp" alt="Scooter Logo" width="150" height="150" loading="lazy"/>
<p>Where every ride is an adventure waiting to happen!</p>
<button class="btn btn-secondary"><a href="/">View Rentals</a></button>
</div>
Expand Down
50 changes: 41 additions & 9 deletions scoots/rentals.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,51 +73,83 @@ <h1 id="nav-title">Scoots Rentals</h1>
<div class="overlay">
<h2>Rentals</h2>
<p>Which vehicle is right for you?</p>
</div>
</section>
<section class="rental-benefits">
<h2>Why Scoots Rentals?</h2>
<ul>
<li><svg class="check-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>Unlimited mileage</li>
<li><svg class="check-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>Liability insurance is included</li>
<li><svg class="check-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>Free delivery to Cozumel hotels or Airbnbs for 2+ day rentals</li>
<li><svg class="check-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>Rentals may be returned to either physical location</li>
<li><svg class="check-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>Easy payment options</li>
</ul>
</div>
</section>
<section class="rental-rides-info">
<h2 class="separator">Choose your scooter</h2>
<div class="card-container">
<article class="card">
<img src="./images/rentals/honda-metro-cream.webp" alt="Card 1" />
<img src="./images/rentals/honda-metro-cream.webp" alt="honda-metro" loading="lazy"/>
<div class="card-body">
<h3>Honda Metropolitan</h3>
<p>Experience the freedom and convenience of exploring your vacation destination on a Honda Metropolitan scooter. With exceptional fuel efficiency, easy maneuverability, and a touch of adventure, the Metropolitan is perfect for navigating bustling streets and discovering hidden gems.</p>
</div>
<button class="btn btn-reserve"><a href="./reservations.html">Reserve me today!</a></button>
</article>
<article class="card">
<img src="./images/rentals/honda-dio-black1.webp" alt="Card 2" />
<img src="./images/rentals/honda-dio-black1.webp" alt="honda-dio" loading="lazy"/>
<div class="card-body">
<h3>Honda Dio</h3>
<p>Embark on your vacation adventures with the Honda Dio scooter, offering a perfect blend of style, agility, and reliability. Explore with ease as you zip through city streets, enjoy exceptional fuel efficiency, and embrace the thrill of discovery on two wheels.</p>
</div>
<button class="btn btn-reserve"><a href="./reservations.html">Reserve me today!</a></button>
</article>
<article class="card">
<img src="./images/rentals/honda-pcx150-white.webp" alt="Card 3" />
<img src="./images/rentals/honda-pcx150-white.webp" alt="honda-pcx" loading="lazy" />
<div class="card-body">
<h3>Honda PCX150</h3>
<p>Unleash the power of exploration with the Honda PCX150 scooter, combining sleek design, advanced technology, and impressive performance. Effortlessly navigate urban landscapes, enjoy long rides with excellent fuel economy, and elevate your vacation experience with the comfort and convenience of the PCX150.</p>
</div>
<button class="btn btn-reserve"><a href="./reservations.html">Reserve me today!</a></button>
</article>
</div>
</section>
<section class="rental-rides-info">
<h2 class="separator">Choose your vehicle</h2>
<div class="card-container">
<article class="card">
<img src="./images/rentals/honda-pioneer-green-4.webp" alt="Card 1" />
<img src="./images/rentals/honda-pioneer-green-4.webp" alt="honda-pioneer" loading="lazy"/>
<div class="card-body">
<h3>Honda Pioneer ATV</h3>
<p>Take your vacation to the next level with the Honda Pioneer ATV, designed for off-road adventures and rugged terrain. Experience unmatched versatility, reliability, and power as you explore trails, mountains, and remote destinations with ease.</p>
</div>
<button class="btn btn-reserve"><a href="./reservations.html">Reserve me today!</a></button>
</article>
<article class="card">
<img src="./images/rentals/wrangler-yellow-4.webp" alt="Card 2" />
<img src="./images/rentals/wrangler-red-2.webp" alt="jeep-wrangler-2-door" loading="lazy"/>
<div class="card-body">
<h3>Jeep Wrangler - 4 door</h3>
<h3>Jeep Wrangler - 2 door</h3>
<p>Embrace the thrill of exploration on an unforgettable vacation journey with the iconic Jeep Wrangler 2-Door. Experience rugged capability, open-air freedom, and off-road prowess as you conquer diverse terrain with confidence. Unleash your adventurous spirit and create lasting memories in the legendary Jeep Wrangler.</p>
</div>
<button class="btn btn-reserve"><a href="./reservations.html">Reserve me today!</a></button>
</article>
<article class="card">
<img src="./images/rentals/wrangler-red-2.webp" alt="Card 3" />
<img src="./images/rentals/wrangler-yellow-4.webp" alt="jeep-wrangler-4-door" loading="lazy" />
<div class="card-body">
<h3>Jeep Wrangler - 2 door</h3>
<h3>Jeep Wrangler - 4 door</h3>
<p>Maximize your vacation adventures with the spacious and versatile Jeep Wrangler 4-Door. Whether conquering rugged trails or cruising scenic highways, enjoy the perfect blend of comfort, capability, and iconic style. Elevate your travel experience and embrace the freedom to explore with the Jeep Wrangler 4-Door.</p>
</div>
<button class="btn btn-reserve"><a href="./reservations.html">Reserve me today!</a></button>
</article>
</div>
</section>
Expand Down
Loading

0 comments on commit f7b19c8

Please sign in to comment.