Compare commits
4 Commits
2f85fe1fd9
...
9b7ca99c2f
| Author | SHA1 | Date |
|---|---|---|
 Fred Boniface
|
9b7ca99c2f | |
|
Fred Boniface
|
02e6c1e409 | |
|
Fred Boniface
|
3622984ca9 | |
|
Fred Boniface
|
6f4b38d99a |
174
css/styles.css
174
css/styles.css
|
|
@ -12,3 +12,177 @@ body {
|
|||
text-align: left;
|
||||
color: #495568;
|
||||
}
|
||||
|
||||
|
||||
/* NAVBAR STYLING BELOW */
|
||||
|
||||
/* Navbar Style */
|
||||
.navbar {
|
||||
overflow: hidden;
|
||||
background-color: #6b98f2;
|
||||
font-family: sans-serif;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Navbar Title & Logo */
|
||||
.navbar img {
|
||||
float: left;
|
||||
text-align: center;
|
||||
padding: 15px 15px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* Navbar Links Style */
|
||||
.navbar a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 17px 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Hide 'Home' link by default, prefer icon */
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navbar Logo Link Style */
|
||||
.navbar a.logo {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
/* Navbar Links Style */
|
||||
.navbar i {
|
||||
float: right;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 17px 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Navbar Hover Style */
|
||||
.navbar a:hover, .dropdown:hover {
|
||||
background-color: #115bf0;
|
||||
}
|
||||
|
||||
/* Droplist Hover Style */
|
||||
.droplist a:hover {
|
||||
background-color: #00349c;
|
||||
}
|
||||
|
||||
/* Navbar Active Class */
|
||||
.navbar a.active, .navbar img.active, .navbar button.active {
|
||||
background-color: #3075ff;
|
||||
}
|
||||
|
||||
/* Hide Hamburger Icon */
|
||||
.navbar .icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Dropdown Container Class */
|
||||
.dropdown {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Dropdown Button Styling */
|
||||
.dropdown .dropbutton {
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
padding: 17px 17px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Dropdown Content Styling */
|
||||
.droplist {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #115bf0;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Style the links inside the dropdown */
|
||||
.droplist a {
|
||||
float: none;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
|
||||
.dropdown:hover .droplist {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* When the screen is less than 600 pixels wide, hide all links and replace 'Home' icon with link. Show the link that contains should open and close the topnav (.icon) */
|
||||
@media screen and (max-width: 600px) {
|
||||
.navbar a, .navbar img, .dropdown .dropbutton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: block
|
||||
}
|
||||
|
||||
.navbar a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
.navbar i {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Navbar Active Class */
|
||||
.navbar a.active, .navbar img.active, .navbar button.active {
|
||||
background-color: #3075ff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
|
||||
@media screen and (max-width: 600px) {
|
||||
.navbar.responsive {position: relative;}
|
||||
.navbar.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.navbar.responsive a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navbar.responsive i {
|
||||
display: none
|
||||
}
|
||||
|
||||
.navbar.responsive .dropdown {float: none;}
|
||||
.navbar.responsive .droplist {position: relative;}
|
||||
.navbar.responsive .dropdown .dropbutton {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<script src="/js/navbar.js"></script>
|
||||
<title>Fred Boniface - Hello</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="navbar" id="navbar">
|
||||
<a class="logo" href="/index.html"><img src="/static-objects/navbar/home.svg" alt="Home" width="26" height="26"></a>
|
||||
<div class="mobile">
|
||||
<a href="/index.html">Home</a>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropbutton">Identity ⤵</button>
|
||||
<div class="droplist">
|
||||
<a href="/identity">⤷ Key Downloads</a>
|
||||
<a href="/identity/about.html">⤷ About PGP</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropbutton">FDS ⤵</button>
|
||||
<div class="droplist">
|
||||
<a href="/fds">⤷ About FDS</a>
|
||||
<a href="/fds/ultrasonic">⤷ Ultrasonic</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/projects">Projects</a>
|
||||
<a href="/about.html">About</a>
|
||||
<i>Fred Boniface</i>
|
||||
<a href="javascript:void(0);" class="icon" onclick="hamburger()">☰</a>
|
||||
</div>
|
||||
|
||||
<h1 class="page-title">Hello</h1>
|
||||
<div class="page-main-content">
|
||||
<p>
|
||||
Hi, I am Fred Boniface - a <?php echo getAge(1993,11); ?> year old Rail
|
||||
Professional with many interests outside of work and while I do have
|
||||
many opinions about the state of the rail industry at present, this
|
||||
website aims to be about my personal life and interests, rather than my
|
||||
work.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I am married to Jade and we have two children, Lucy & Ava-Rose - both
|
||||
in school. I will get around to adding some images to this page - I
|
||||
promise.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To keep this homepage simple and easy to digest, I won't waffle on
|
||||
about too much here, but there is more to read about each topic on
|
||||
the relevant page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer>© Frederick Boniface 2022</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
index.php
43
index.php
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<?php
|
||||
include "./php/age.php";
|
||||
include "./page-blocks/head-content.php";
|
||||
include "./page-blocks/footer.php";
|
||||
?>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<?php insert_head(); ?>
|
||||
<title>Fred Boniface - Hello</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="page-title">Hello</h1>
|
||||
<div class="page-main-content">
|
||||
<p>
|
||||
Hi, I am Fred Boniface - a <?php echo getAge(1993,11); ?> year old Rail
|
||||
Professional with many interests outside of work and while I do have
|
||||
many opinions about the state of the rail industry at present, this
|
||||
website aims to be about my personal life and interests, rather than my
|
||||
work.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I am married to Jade and we have two children, Lucy & Ava-Rose - both
|
||||
in school. I will get around to adding some images to this page - I
|
||||
promise.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To keep this homepage simple and easy to digest, I won't waffle on
|
||||
about too much here, but there is more to read about each topic on
|
||||
the relevant page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php insert_footer(); ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
|
||||
function hamburger() {
|
||||
var x = document.getElementById("navbar");
|
||||
if (x.className === "navbar") {
|
||||
x.className += " responsive";
|
||||
} else {
|
||||
x.className = "navbar";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<?php
|
||||
function insert_footer() {
|
||||
echo "<footer>© Frederick Boniface 2022</footer>";
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<?php
|
||||
function insert_head() {
|
||||
echo '<meta http-equiv="content-type" content="text/html; charset=UTF-8">';
|
||||
echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
|
||||
echo '<link rel="stylesheet" type="text/css" href="./css/styles.css">';
|
||||
}
|
||||
|
|
@ -1 +1,24 @@
|
|||
<?php
|
||||
<div class="navbar" id="navbar">
|
||||
<a class="logo" href="/index.html"><img src="/static-objects/navbar/home.svg" alt="Home" width="26" height="26"></a>
|
||||
<div class="mobile">
|
||||
<a href="/index.html">Home</a>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropbutton">Identity ⤵</button>
|
||||
<div class="droplist">
|
||||
<a href="/identity">⤷ Key Downloads</a>
|
||||
<a href="/identity/about.html">⤷ About PGP</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropbutton">FDS ⤵</button>
|
||||
<div class="droplist">
|
||||
<a href="/fds">⤷ About FDS</a>
|
||||
<a href="/fds/ultrasonic">⤷ Ultrasonic</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/projects">Projects</a>
|
||||
<a href="/about.html">About</a>
|
||||
<i>Fred Boniface</i>
|
||||
<a href="javascript:void(0);" class="icon" onclick="hamburger()">☰</a>
|
||||
</div>
|
||||
Loading…
Reference in New Issue