Skip to content

Commit

Permalink
home page updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@vwolfley
vwolfley committed Mar 29, 2024
1 parent 40bc2cd commit 97baa9a
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 41 deletions.
Binary file added scoots/images/heros/scooter_rental_cozumel.webp
View file
Binary file not shown.
40 changes: 34 additions & 6 deletions scoots/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ <h2>
</h2>
<p>Scooter, ATV & Jeep Rentals Cozumel, Mexico</p>

<button class="btn btn-call"><a href="#">Learn More</a></button>
<button class="btn btn-primary"><a href="#">Learn More</a></button>
</section>
</div>
</div>
Expand All @@ -97,8 +97,8 @@ <h3>Rev up your island getaway with Scoots Rentals!</h3>
<h4>Open DAILY from 8am - 5pm</h4>
<h5>Reserve online, call, or come on by!</h5>
<div>
<button class="btn footer-btn"><a href="./reservations.html">Reservations</a></button>
<button class="btn footer-btn"><a href="./contact.html">Contact</a></button>
<button class="btn btn-primary"><a href="./reservations.html">Reservations</a></button>
<button class="btn btn-primary"><a href="./contact.html">Contact</a></button>
</div>
</section>

Expand Down Expand Up @@ -131,6 +131,17 @@ <h3>Jeeps</h3>
</article>
</div>
</section>
<section class="reservations-banner banner-two">
<article>
<h2 class="">Choose an Hourly or Multi-Day Rental</h2>
<p>
Whether you are in Cozumel for 2 hours or 7 days, you can get an option to choose an hourly or daily rental option so you can
enjoy the flexibility of exploring the island however you want.
</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" />
</section>

<section class="places-info">
<h2 class="separator">Choose Your Destination</h2>
Expand Down Expand Up @@ -169,18 +180,35 @@ <h3>El Museo de la Isla de Cozumel</h3>
<img src="./images/places/snorkel-playa-cielo.webp" alt="Card 3" />
<div class="card-body">
<h3>Snorkel Playa El Cielo</h3>
<p>Off the southern coast of the island is a beach called Playa El Cielo, famous for the thousands of underwater starfish scattered across the fine white sand.</p>
<p>
Off the southern coast of the island is a beach called Playa El Cielo, famous for the thousands of underwater starfish
scattered across the fine white sand.
</p>
</div>
</article>
<article class="card">
<img src="./images/places/los-cinco-soles.webp" alt="Card 3" />
<div class="card-body">
<h3>Los Cinco Soles</h3>
<p>Los Cinco Soles is at the far end of downtown and widely considered to have the best selection of handcrafts, silver, and naturally grown vanilla.</p>
<p>
Los Cinco Soles is at the far end of downtown and widely considered to have the best selection of handcrafts, silver,
and naturally grown vanilla.
</p>
</div>
</article>
</div>
</section>
<section class="reservations-banner banner-one">
<article>
<h2 class="">Choose an Hourly or Multi-Day Rental</h2>
<p>
Whether you are in Cozumel for 2 hours or 7 days, you can get an option to choose an hourly or daily rental option so you can
enjoy the flexibility of exploring the island however you want.
</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" />
</section>
</main>
<!-- /End Content -->
<!-- Footer -->
Expand Down Expand Up @@ -233,7 +261,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
2 changes: 2 additions & 0 deletions scoots/pages/attributions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,7 @@ <h1>Attributions</h1>
Image by <a href="https://pixabay.com/users/trinity_elektroroller-12692579/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4986729">Trinity_Elektroroller</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4986729">Pixabay</a>
</p>
<p>Image by <a href="https://pixabay.com/users/mariya_m-12752456/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6955411">Mariya</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6955411">Pixabay</a></p>

<p>https://www.traveltomtom.net/destinations/north-america/mexico/scooter-rental-cozumel</p>
</body>
</html>
121 changes: 86 additions & 35 deletions scoots/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ footer section {

.social-media-block {
grid-row: 5;
margin-bottom: .2em;
margin-bottom: 0.2em;
}
.footer-nav {
grid-row: 4;
Expand Down Expand Up @@ -259,7 +259,7 @@ footer section {
.address {
display: flex;
flex-direction: column;
font-size: .8em;
font-size: 0.8em;
gap: 0.8em;
}
.address h4 {
Expand Down Expand Up @@ -338,21 +338,8 @@ address div p {
.social-media-link a:hover .icon-yelp {
fill: #af0606;
}
.footer-btn {
color: #ffffff;
background-color: var(--accent4-color);
}
.btn.footer-btn{
padding: .6rem 1.6rem;
}
.footer-btn:hover {
background-color: #fda4af;
}
.footer-btn a {
text-decoration: none;
color: #ffffff;
}
.footer-nav h3{

.footer-nav h3 {
margin: 0 0 0.5em 0;
}
.footer-nav ul {
Expand Down Expand Up @@ -380,6 +367,10 @@ address div p {
border-radius: 5px; */
}

/* *********************************
Button Styles
********************************* */

.btn {
border-radius: 0.375rem;
border-width: 1px;
Expand All @@ -389,9 +380,36 @@ address div p {
font-weight: 500;
line-height: 1.5rem;
cursor: pointer;
padding: .8rem 1.8rem;
padding: 0.8rem 1.8rem;
font-size: 1.125rem;
line-height: 1.75rem;
cursor: pointer;
}
.btn.btn-secondary {
padding: 0.6rem 1.6rem;
}

.btn-primary {
color: #ffffff;
background-color: #4f46e5;
}
.btn-primary:hover {
background-color: #6366f1;
}
.btn-primary a {
text-decoration: none;
color: #ffffff;
}
.btn-secondary {
color: var(--text-color-header);
background-color: var(--accent3-color);
}
.btn-secondary:hover {
background-color: #bef264;
}
.btn-secondary a {
text-decoration: none;
color: var(--text-color-header);
}

/* *********************************
Expand Down Expand Up @@ -440,18 +458,6 @@ address div p {
color: #6b7280;
}

.btn-call {
color: #ffffff;
background-color: #4f46e5;
}
.btn-call:hover {
background-color: #6366f1;
}
.btn-call a {
text-decoration: none;
color: #ffffff;
}

.hero-image {
object-fit: cover;
width: 100%;
Expand Down Expand Up @@ -562,7 +568,8 @@ h5 {
}
}
/* ********************************* */
.home-rides-info, .places-info {
.home-rides-info,
.places-info {
display: flex;
flex-direction: column;
justify-content: center;
Expand Down Expand Up @@ -607,7 +614,7 @@ h5 {
}
.card:nth-child(2) {
width: 450px;
}
}

.card h3 {
font-size: 1.1em;
Expand All @@ -625,10 +632,54 @@ h5 {
.card-body {
padding: 0 0 10px;
}
.places-info img{
.places-info img {
width: 100%;
height: 275px;
}
.places-info .card:nth-child(2){
.places-info .card:nth-child(2) {
width: 375px;
}
}

/* Reservations Banner */
.reservations-banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 50px;
}
.reservations-banner.banner-one article {
text-align: center;
padding: 20px;
order: 1;
}
.reservations-banner.banner-two article {
text-align: center;
padding: 20px;
order: 2;
}
.reservations-banner.banner-one img {
width: 400px;
height: auto;
order: 2;
}
.reservations-banner.banner-two img {
width: 400px;
height: auto;
order: 1;
}
.banner-one {
background-color: var(--accent3-color);
color: var(--text-color-header);
}
.banner-two {
background-color: var(--accent2-color);
color: var(--text-color-header);
}

@media (min-width: 768px) {
.reservations-banner {
display: flex;
flex-direction: row;
}
}

0 comments on commit 97baa9a

Please sign in to comment.