Skip to content

Commit

Permalink
Style the contact section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Carlos-n21
Carlos-n21 committed Nov 5, 2024
1 parent fa49fc0 commit 1928d64
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 17 deletions.
40 changes: 40 additions & 0 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,46 @@ h2 {
border: none;
}

/* Footer / contact */
#contact {
background-color: var(--primary-color);
color: white;
padding-bottom: 3rem;
}

#contact h2 {
color: white;
}

#contact .sub-heading-color {
color: var(--highlight-color-light);
}

#contact i {
color: var(--secondary-color);
font-size: 1.2rem;
margin-right: 15px;
}

#contact .social-links i {
color: var(--highlight-color-light);
size: 1.9rem;
transition: color 0.3s ease-in-out;
}

#contact .social-links i:hover {
color: var(--secondary-color);
}

#contact .table-dark * {
background-color: transparent;
}

.opening {
font-family: var(--secondary-font);
font-size: 28px;
}

/* medium devices (tablets, 760px and up) */
@media screen and (min-width: 760px) {
/* make all card the same height for consistency */
Expand Down
77 changes: 66 additions & 11 deletions game-library.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<a class="nav-link active" aria-current="page" href="game-library.html">Games</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Contact</a>
<a class="nav-link" href="index.html#contact">Contact</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -299,16 +299,71 @@ <h3 class="card-title sub-heading-color">Kids parties</h3>

<!-- Footer / contact section -->
<!-- mt-auto added to push footer to the bottom of the page -->
<footer class="mt-auto">
<div class="container">
<div class="row justify-content-center">
<div class="col-12">Contact section heading</div>
<!-- COntact info -->
<div class="col-12 col-md-6 col-xl-4">Contact info & social links</div>
<div class="col-12 col-md-6 col-xl-4">Opening times</div>
</div>
</div>
</footer>
<footer id="contact" class="mt-auto">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h2 class="display-6">Contact us!</h2>
</div>
<!-- COntact info -->
<div class="col-12 col-md-6 col-xl-4">
<h3 class="sub-heading-color">Contact info</h3>
<address>
<strong><i class="fa-solid fa-location-dot"></i> Broadwalk Games</strong><br>
123 Boardwalk<br>
Boardwalk City, 12345
</address>
<p><i class="fa-solid fa-phone"></i> 012 345 6789<br>
<i class="fa-regular fa-paper-plane"></i> [email protected]
</p>
<div class="social-links my-4">
<a href="https://www.instagram.com/" target="_blanck" aria-label="Visit our Instagram (opens new tab)" rel="noopener"><i class="fa-brands fa-instagram" ></i>
</a>
<a href="https://x.com/?lang=en-gb" target="_blanck" aria-label="Visit our Instagram (opens new tab)" rel="noopener"><i class="fa-brands fa-x-twitter"></i>
</a>
<a href="https://en-gb.facebook.com/" target="_blanck" aria-label="Visit our Facebook (opens new tab)" rel="noopener"><i class="fa-brands fa-square-facebook"></i>
</a>
</div>
</div>

<!-- opening times -->
<div class="col-12 col-md-6 col-xl-4">
<p class="sub-heading-color opening">Opening times</p>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Open</th>
<th scope="col">Close</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mon</th>
<td>Closed</td>
<td></td>
</tr>
<tr>
<th scope="row">Tue - THur</th>
<td>11an</td>
<td>11pm</td>
</tr>
<tr>
<th scope="row">Fri - Sat</th>
<td>11am</td>
<td>12am</td>
</tr>
<tr>
<th scope="row">Sun</th>
<td>12pm</td>
<td>7pm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</footer>


<!-- Bootstrap JS -->
Expand Down
61 changes: 55 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<a class="nav-link" href="game-library.html">Games</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Contact</a>
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
Expand All @@ -64,7 +64,7 @@ <h1 class="display-3">Boardwalk Games</h1>
<p class="lead display-6 sub-heading-color">Your next adventure is waiting!</p>
<p class="my-4">Welcome to Boardwalk Games, Your Ultimate Gaming Getaway! Escape into the world of board games and café delights. Whether you're a casual gamer seeking a cosy nook to unwind, a board game enthusiast ready for your next challenge, or a student gamer looking for a fun, affordable hangout, we've got you covered.</p>
</div>
<div class="col-12 col-xl-6">Carousel
<div class="col-12 col-xl-6">
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
Expand All @@ -76,7 +76,7 @@ <h1 class="display-3">Boardwalk Games</h1>
<div class="carousel-item">
<img src="assets/images/boardwalk-games-carousel-image-3.webp" class="d-block w-100" alt="The inside of Boardwalk Games with bookshelves filled with boardgames, and wooden tables to play at">
</div>
<div class="carousel-item"></div>
<div class="carousel-item">
<img src="assets/images/boardwalk-games-carousel-image-4.webp" class="d-block w-100" alt="The back-room at Boardwalk Games set up for a Dungeons and Dragons evening">
</div>
<div class="carousel-item">
Expand Down Expand Up @@ -115,19 +115,68 @@ <h1 class="display-3">Boardwalk Games</h1>

<!-- Footer / contact section -->
<!-- mt-auto added to push footer to the bottom of the page -->
<footer class="mt-auto">
<footer id="contact" class="mt-auto">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h2 class="display-6">Contact us!</h2>
</div>
<!-- COntact info -->
<div class="col-12 col-md-6 col-xl-4">
<h3 class="sub-heading-color">Contact info & social links</h3>
<h3 class="sub-heading-color">Contact info</h3>
<address>
<strong><i class="fa-solid fa-location-dot"></i> Broadwalk Games</strong><br>
123 Boardwalk<br>
Boardwalk City, 12345
</address>
<p><i class="fa-solid fa-phone"></i> 012 345 6789<br>
<i class="fa-regular fa-paper-plane"></i> [email protected]
</p>
<div class="social-links my-4">
<a href="https://www.instagram.com/" target="_blanck" aria-label="Visit our Instagram (opens new tab)" rel="noopener"><i class="fa-brands fa-instagram" ></i>
</a>
<a href="https://x.com/?lang=en-gb" target="_blanck" aria-label="Visit our Instagram (opens new tab)" rel="noopener"><i class="fa-brands fa-x-twitter"></i>
</a>
<a href="https://en-gb.facebook.com/" target="_blanck" aria-label="Visit our Facebook (opens new tab)" rel="noopener"><i class="fa-brands fa-square-facebook"></i>
</a>
</div>
</div>

<!-- opening times -->
<div class="col-12 col-md-6 col-xl-4">Opening times</div>
<div class="col-12 col-md-6 col-xl-4">
<p class="sub-heading-color opening">Opening times</p>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Open</th>
<th scope="col">Close</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mon</th>
<td>Closed</td>
<td></td>
</tr>
<tr>
<th scope="row">Tue - THur</th>
<td>11an</td>
<td>11pm</td>
</tr>
<tr>
<th scope="row">Fri - Sat</th>
<td>11am</td>
<td>12am</td>
</tr>
<tr>
<th scope="row">Sun</th>
<td>12pm</td>
<td>7pm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</footer>
Expand Down

0 comments on commit 1928d64

Please sign in to comment.