Skip to content

Commit

Permalink
using single header and footer desin across all pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@kithenry
kithenry committed Aug 12, 2024
1 parent b45e6a9 commit 3e78d5e
Show file tree
Hide file tree
Showing 10 changed files with 156 additions and 204 deletions.
5 changes: 5 additions & 0 deletions .vscode/extensions.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"recommendations": [
"yandeu.five-server"
]
}
35 changes: 35 additions & 0 deletions about/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../assets/css/index.css">
<title>Contact Me</title>
</head>

<body>
<header>

</header>
<div class="container-fluid p-0">
<div class="container">
<p>
This is the about page
</p>
</div>
</div>
<footer>

</footer>
<script src="../assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>

</html>
23 changes: 21 additions & 2 deletions assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ header .header-container {
}

header .site-title {
font-family: var(--title-font);
font-family: var(--base-font);
text-transform: capitalize;
font-size: 36px;
}
Expand All @@ -95,6 +95,8 @@ header a:hover {
color: var(--color-secondary);
}



.green-line {
width: 100%;
height: 10px;
Expand Down Expand Up @@ -196,7 +198,7 @@ header a:hover {
font-size: 20px;
}

.about-text a.button {
.button {
text-transform: uppercase;
font-family: var(--header-font);
border: 2px solid var(--color-light);
Expand All @@ -207,6 +209,23 @@ header a:hover {
display: inline-block;
color: var(--color-light);
max-width: max-content;
transition: all .5s ease-in-out;
}

.button:hover {
background-color: var(--color-light);
color: var(--color-dark);
}

.button-plain-bg {
color: var(--color-secondary)!important;
border-color: var(--color-secondary);
border-radius: 0;
}

.button-plain-bg:hover {
color: var(--color-light)!important;
background-color: var(--color-secondary);
}


Expand Down
13 changes: 13 additions & 0 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
document.addEventListener("DOMContentLoaded", function () {
fetch('/assets/snippets/header.html')
.then(response => response.text())
.then(data => {
document.querySelector('header').innerHTML = data;
});

fetch('/assets/snippets/footer.html')
.then(response => response.text())
.then(data => {
document.querySelector('footer').innerHTML = data;
});
});
4 changes: 2 additions & 2 deletions assets/snippets/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="container header-container text-nowrap text-white">

<div class="p-2 site-title">
<div class="p-2 ps-0 site-title">
<h2 class="">
K(e)ith N. Henry
</h2>
Expand Down Expand Up @@ -39,4 +39,4 @@ <h2 class="">
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
</div>
</div>
45 changes: 45 additions & 0 deletions assets/snippets/starterpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,51 @@
</head>

<body>
<header>
<div class="container header-container text-nowrap text-white">

<div class="p-2 ps-0 site-title">
<h2 class="">
K(e)ith N. Henry
</h2>
</div>



<ul id="navlinks" class="p-3 pt-4 navlinks list-unstyled list-inline">
<li class="pe-2">
<a href="" class="p-0">Articles</a>
</li>
<li class="pe-2">
<a href="" class="p-0">Home</a>
</li>
<li class="">
<a href="" class="p-0">Contact</a>
</li>
</ul>

<div class="hamburger-menu">
<button class="btn collapse-btn text-white p-0 pb-4 mb-3" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-bars"></i>
</button>

</div>
</div>
<div class=" green-line">
<div class="collapse" id="collapseExample">

<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
</div>
</header>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
Expand Down
76 changes: 18 additions & 58 deletions contact/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,35 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../assets/css/index.css">
<title>Contact Me</title>
</head>
<body style="min-height: vh;">
<header class="bg-primary">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="widget no-border m-0">
<ul
class="list-unstyled text-white icon-sm sm-text-center d-flex flex-row justify-content-start align-items-center">

<li class="p-2 ps-0 pe-4"><a href="#"><i class='fa fa-facebook text-white'></i></a></li>
<li class="p-2 pe-4"><a href="#"><i class='fa fa-google-plus text-white'></i></a></li>
<li class="p-2 pe-4"><a href="#"><i class='fa fa-linkedin text-white'></i></a></li>
<li class="p-2 pe-4"><a href="#"><i class='fa fa-twitter text-white'></i></a></li>

</ul>
</div>
</div>
<div class="col-md-8">
<div class="widget no-border m-0">
<body>
<header>

</div>
</div>
<div class="col-md-2">
<div class="widget no-border rm-0">
</div>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<div class="container-fluid p-0">
<div class="container">
<a class="nav-brand col-md-4 ms-0 p-2" href="#">
<!-- <img src="Assets/BEI.png" alt="BEI logo Image" width="120" height="65" class="me-2"> -->
K(e)ith N. Henry
</a>
<ul
class="navbar-nav col-md-8 list-unstyled d-flex flex-row me-0 justify-content-end align-items-center">
<li class="nav-link p-2 pe-5">Home</li>
<!-- <li class="nav-link p-2 pe-5">Gallery</li>
<li class="nav-link p-2 pe-5">Pages</li>
<li class="nav-link p-2">Blog</li> -->
</ul>
<p>
This is the about page
</p>
</div>
</nav>
This is the contact me page
</div>
<footer>
<div class="container-fluid p-0 bg-primary">
<div class="container">
<div class="row">
<div class="col-md-6">K(e)ith N. Henry</div>
<div class="col-md-6 ">

</div>
</div>
<div class="row ">
<p>
Copyright 2024
</p>
</div>
</div>
</div>
</footer>
</footer>
<script src="../assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>

</html>
66 changes: 10 additions & 56 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,69 +8,22 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/index.css">
<title>K(e)ith N. Henry</title>
<style>

html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}

</style>
</head>

<body>
<div class="container-fluid p-0">

<header class="bg-primary">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="widget no-border m-0">
<ul
class="list-unstyled text-white icon-sm sm-text-center d-flex flex-row justify-content-start align-items-center">

<li class="p-2 ps-0 pe-4"><a href="#"><i class='fa fa-facebook text-white'></i></a></li>
<li class="p-2 pe-4"><a href="#"><i class='fa fa-google-plus text-white'></i></a></li>
<li class="p-2 pe-4"><a href="#"><i class='fa fa-linkedin text-white'></i></a></li>
<li class="p-2 pe-4"><a href="#"><i class='fa fa-twitter text-white'></i></a></li>
<header>

</ul>
</div>
</div>
<div class="col-md-8">

</div>
<div class="col-md-2">

</div>
</div>
</div>
</header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<div class="container">
<p class="col-md-4 ms-0 p-2 text-white no-decoration m-0" href="#">
<!-- <img src="Assets/BEI.png" alt="BEI logo Image" width="120" height="65" class="me-2"> -->
K(e)ith N. Henry
</p>
<ul
class="navbar-nav col-md-8 list-unstyled d-flex flex-row me-0 justify-content-end align-items-center">
<li class="nav-link p-2 pe-5">Home</li>
<!-- <li class="nav-link p-2 pe-5">Gallery</li>
<li class="nav-link p-2 pe-5">Pages</li>
<li class="nav-link p-2">Blog</li> -->
</ul>
</div>
</nav>

<div class="main-content">
<section p-3 p-sm-0>
<div class="container">
<div class="row mt-5">
<div class="col-sm-6 pt-3">
<div class="row mt-3">
<div class="col-sm-6 py-3">
<div class="card ">
<div class="card-body">
<h5 class="card-title">My Projects</h5>
Expand All @@ -87,11 +40,11 @@ <h5 class="card-title">My Projects</h5>
<li class="list-group-item">Software</li>

</ul>
<a href="projects/index.html" class="btn btn-primary">Explore</a>
<a href="projects/index.html" class="btn button button-plain-bg">Explore</a>
</div>
</div>
</div>
<div class="col-sm-6 pt-3">
<div class="col-sm-6 py-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Articles</h5>
Expand All @@ -102,7 +55,7 @@ <h5 class="card-title">Articles</h5>
<li class="list-group-item">Software</li>

</ul>
<a href="writing/index.html" class="btn btn-primary">Explore</a>
<a href="writing/index.html" class="btn button button-plain-bg ">Explore</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -151,10 +104,11 @@ <h5 class="card-title">Blog</h5>
</div>
</div>
</footer>
<script src="assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>


</body>

Expand Down
Loading

0 comments on commit 3e78d5e

Please sign in to comment.