Skip to content

Commit

Permalink
Complete footer and home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@uzaaaiiir
uzaaaiiir committed Jun 5, 2023
1 parent 4a46014 commit c5bf945
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 19 deletions.
18 changes: 15 additions & 3 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,9 +163,6 @@ body {
font-family: 1rem;
}

.subheading {
}

/*********************************/
/* -------- HERO SECTION --------*/
/*********************************/
Expand All @@ -176,11 +173,22 @@ body {
filter: grayscale(80%);
}

/* FOOTER */
.footer-address {
font-family: "Poppins", sans-serif;
font-weight: 300;
color: #e2e8f0;
}

/**********************************/
/* -------- MEDIA QUERIES --------*/
/**********************************/

@media (max-width: 87em) {
.nav-logo {
max-width: 248;
}

.heading-primary {
font-size: 3rem;
}
Expand All @@ -191,6 +199,10 @@ body {
}

@media (max-width: 50em) {
.nav-logo {
max-width: 75%;
}

.heading-primary {
font-size: 2.8rem;
}
Expand Down
70 changes: 54 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@400;700&family=Raleway:wght@400;500;600;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@400;700&family=Poppins:wght@200;300;400;500;600&family=Raleway:wght@400;500;600;700&display=swap"
rel="stylesheet" />

<!-- Bootstrap and Stylesheets -->
Expand All @@ -27,7 +27,7 @@
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<a href="#" class="navbar-brand">
<img src="/assets/logos/logo-transparent-png.png" alt="" width="258rem" />
<img src="/assets/logos/logo-transparent-png.png" alt="" width="245" class="nav-logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
Expand Down Expand Up @@ -158,54 +158,60 @@ <h2 class="pb-3 heading-secondary">Check out the best haircuts in Ottawa</h2>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card">
<div class="card rounded-0">
<div class="card-img">
<img src="/assets/haircuts-carousel/man-img-1.jpg" class="img-fluid grayscale-img">
<img src="/assets/haircuts-carousel/man-img-1.jpg"
class="img-fluid grayscale-img">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card rounded-0">
<div class="card-img">
<img src="/assets/haircuts-carousel/man-img-2.jpg" class="img-fluid grayscale-img">
<img src="/assets/haircuts-carousel/man-img-2.jpg"
class="img-fluid grayscale-img">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card rounded-0">
<div class="card-img">
<img src="/assets/haircuts-carousel/man-img-3.jpg" class="img-fluid grayscale-img">
<img src="/assets/haircuts-carousel/man-img-3.jpg"
class="img-fluid grayscale-img">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card rounded-0">
<div class="card-img">
<img src="/assets/haircuts-carousel/man-img-4.jpg" class="img-fluid grayscale-img">
<img src="/assets/haircuts-carousel/man-img-4.jpg"
class="img-fluid grayscale-img">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card rounded-0">
<div class="card-img">
<img src="/assets/haircuts-carousel/man-img-5.jpg" class="img-fluid grayscale-img">
<img src="/assets/haircuts-carousel/man-img-5.jpg"
class="img-fluid grayscale-img">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card rounded-0">
<div class="card-img">
<img src="/assets/haircuts-carousel/man-img-6.jpg" class="img-fluid grayscale-img">
<img src="/assets/haircuts-carousel/man-img-6.jpg"
class="img-fluid grayscale-img">
</div>
</div>
</div>
Expand All @@ -224,10 +230,42 @@ <h2 class="pb-3 heading-secondary">Check out the best haircuts in Ottawa</h2>
</div>
</section>

<section></section>
<div class="container-fluid bg-dark mt-5">

<!-- </main> -->
<footer class="container py-5">
<div class="row">
<div class="col-12 col-md">
<img src="/assets/logos/logo-transparent-png.png" alt="" height="100rem">
<small class="d-block mb-3 text-body-secondary">&copy; 2017–2023</small>
</div>
<div class="col-9 col-lg">
<p class="footer-address my-0">123 Market St. #22B</p>
<p class="footer-address my-0">Ottawa, ON, Canada</p>
<p class="footer-address">K1Y XXX</p>
<ul class="list-unstyled text-small">
<li><a class="link-secondary text-decoration-none py-1" href="#">(434)546-4356</a></li>
<li><a class="link-secondary text-decoration-none py-1" href="#">contact@lift.agency</a></li>
</ul>
</div>
<div class="col-6 col-lg justify-content-center">
<h5 style="font-family: Poppins, sans-serif; color: white" class="mb-3">HOURS</h5>
<div class="d-flex align-items-center mb-2">
<h6 class="footer-address me-3 mb-1">MON-FRI</h6>
<p class="footer-address mb-1">11AM - 8PM</p>
</div>
<div class="d-flex align-items-center mb-2">
<h6 class="footer-address me-3 mb-1">SAT</h6>
<p class="footer-address mb-1">11AM - 8PM</p>
</div>
<div class="d-flex align-items-center mb-2">
<h6 class="footer-address me-3 mb-1">SUN</h6>
<p class="footer-address mb-1">11AM - 8PM</p>
</div>

</div>
</div>
</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
Expand Down

0 comments on commit c5bf945

Please sign in to comment.