Skip to content

Commit

Permalink
layout adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@rebeccapeltz
rebeccapeltz committed Mar 27, 2024
1 parent 17606a4 commit 6b41b63
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 88 deletions.
47 changes: 22 additions & 25 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>(Title)</title>
<title>(Site Name)</title>
<!-- Favicon-->
<!-- <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> -->
<link rel="icon" type="image/png" href="(favicon image)" />
Expand All @@ -19,7 +19,7 @@
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="./">Starter</a>
<a class="navbar-brand" href="./">(Site Name)</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
Expand All @@ -34,51 +34,48 @@
</div>
</nav>
<!-- Page Content-->
<div class="row d-flex justify-content-center gx-4 gx-lg-5 gy-4 my-3 py-4 ">
<div class="card text-dark bg-light mx-4 mb-5" style="max-width: 35rem;">
<div class="container px-4 px-lg-5">
<div class="row d-flex justify-content-center gx-4 gx-lg-5 gy-4 py-4 ">
<div class="card text-dark bg-light mx-4 mb-5">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-secondary" href="#!">Call to Action!</a>
</div>
</div>
<div class="card text-dark bg-light mx-4 mb-5" style="max-width: 35rem;">
<div class="card text-dark bg-light mx-4 mb-5">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-secondary" href="#!">Call to Action!</a>
</div>
</div>
<div class="card text-dark bg-light mx-4 mb-5" style="max-width: 35rem;">
<div class="card text-dark bg-light mx-4 mb-5">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mx-4 mb-5" style="max-width: 35rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
card's content. </p>
<a class="btn btn-secondary" href="#!">Call to Action!</a>
</div>
</div>
</div>
</div>

<!-- Footer-->
<footer class="py-5 bg-dark">
<div class="container px-lg-5">
<p class="m-2 text-center text-white">Copyright &copy; (Copyright Name) 2024</p>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- Footer-->
<footer class="py-5 bg-dark">
<div class="container px-lg-5">
<p class="m-2 text-center text-white">Copyright &copy; (Copyright Name) 2024</p>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>

</html>
8 changes: 4 additions & 4 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Starter</title>
<title>(Site Name)</title>
<!-- Favicon-->
<!-- <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> -->
<link rel="icon" type="image/png" href="(favicon image)" />
Expand All @@ -19,7 +19,7 @@
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="./">Starter</a>
<a class="navbar-brand" href="./">(Site Name)</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
Expand All @@ -34,7 +34,7 @@
</div>
</nav>

<div class="card text-white bg-secondary my-2 py-2 text-center">
<div class="card text-white bg-secondary py-3 text-center">
<div class="card-body">
(Content)
</div>
Expand Down Expand Up @@ -143,7 +143,7 @@ <h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
</div>
</section>

<div class="card text-white bg-secondary my-2 py-2 text-center">
<div class="card text-white bg-secondary py-3 text-center">
<div class="card-body">
(Content)
</div>
Expand Down
17 changes: 0 additions & 17 deletions css/stickyfooter.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,3 @@ html {
background-color: #333741;
color: #fff;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

/* body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
} */
67 changes: 45 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>(Title)</title>
<title>(Site Name)</title>
<!-- Favicon-->
<!--use a small image for favicon-->
<link rel="icon" type="image/png" href="(favicon image)" />
Expand All @@ -17,7 +17,7 @@
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="./">Starter</a>
<a class="navbar-brand" href="./">(Site Name)</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
Expand Down Expand Up @@ -46,15 +46,15 @@ <h1 class="font-weight-light">(Page Header)</h1>
</div>
<!-- Content Row-->
<div class="row gx-4 gx-lg-5">
<div class="col-md-4 mb-5">
<div class="col-md-3 mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://fakeimg.pl/600x400" alt="...">
<img class="card-img-top" src="https://fakeimg.pl/300x200" alt="...">
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<h5 class="fw-bolder">Fancy Product 1</h5>
<!-- Product price-->
$40.00 - $80.00
</div>
Expand All @@ -65,50 +65,73 @@ <h5 class="fw-bolder">Fancy Product</h5>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="col-md-3 mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" height="250" src="https://fakeimg.pl/600x400" alt="...">
<!-- Product details-->
<img class="card-img-top" src="https://fakeimg.pl/300x200" alt="...">
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price-->
<h5 class="fw-bolder">Fancy Product 2</h5>
$40.00 - $80.00
</div>
</div>
<!-- Product actions-->

<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-5">

<div class="col-md-3 mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://fakeimg.pl/600x400" alt="...">
<!-- Product details-->
<img class="card-img-top" src="https://fakeimg.pl/300x200" alt="...">
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price-->
<h5 class="fw-bolder">Fancy Product 3</h5>
$40.00 - $80.00
</div>
</div>
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
</div>
</div>
</div>

<div class="col-md-3 mb-5">
<div class="card h-100">
<img class="card-img-top" src="https://fakeimg.pl/300x200" alt="...">
<div class="card-body p-4">
<div class="text-center">
<h5 class="fw-bolder">Fancy Product 4</h5>
$40.00 - $80.00
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
</div>
</div>
</div>

<!-- <div class="col-md-3 mb-5">
<div class="card h-100">
<img class="card-img-top" src="https://fakeimg.pl/300x200" alt="...">
<div class="card-body p-4">
<div class="text-center">
<h5 class="fw-bolder">Fancy Product 5</h5>
$40.00 - $80.00
</div>
</div>
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
</div>
</div>
</div> -->
</div>
</div>

<!-- Call to Action-->
<div class="card text-white bg-secondary my-5 py-4 text-center">
<div class="card-body"><p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p></div>
</div>
</div>
<!-- Footer-->
<footer class="py-5 bg-dark">
<div class="container px-4 px-lg-5"><p class="m-0 text-center text-white">Copyright &copy; (Copyright Name) 2024</p></div>
Expand Down
33 changes: 13 additions & 20 deletions services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,31 @@
<html lang="en">

<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="(favicon)">

<title>Sticky Footer Navbar Template for Bootstrap</title>
<meta name="description" content="" />
<meta name="author" content="" />
<title>(Site Name)</title>
<!-- Favicon-->
<!-- <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> -->
<link rel="icon" type="image/png" href="(favicon image)" />

<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="./css/stickyfooter.css" rel="stylesheet">
</head>

<!-- Bootstrap core CSS -->
<link href="./css/styles.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="./css/stickyfooter.css" rel="stylesheet">
</head>

<body>

<!-- <header> -->
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="./">Starter</a>
<a class="navbar-brand" href="./">(Site Name)</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
Expand All @@ -44,7 +45,6 @@
<!-- Begin page content -->
<main role="main" class="container">
<h1 class="mt-5">(Header)</h1>

<p>
Mauris congue tellus neque, a egestas elit interdum sed. Proin congue, eros vel pellentesque porta, nisi
libero dignissim quam, ac tristique quam nisl quis lacus. Mauris ac hendrerit justo. Fusce odio est,
Expand All @@ -63,13 +63,6 @@ <h1 class="mt-5">(Header)</h1>
</div>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>

</body>

</html>

0 comments on commit 6b41b63

Please sign in to comment.