Skip to content
Snippets Groups Projects
Commit b1773f46 authored by Liam Driscoll's avatar Liam Driscoll
Browse files

Changes to CSS.

parent 4f379783
No related branches found
No related tags found
1 merge request!28Changes to CSS.
Hide whitespace changes
Inline Side-by-side
static/Manage_Coworking_Spaces.css
+ 28
− 4
View file @ b1773f46
......@@ -47,25 +47,42 @@ a {
/* [#1] Page header styling. Uses [#2].
header #pageHeader
main #headerMain
div #headerDiv
nav #headerNav .navBar
ul .Right, ul .Left
li a
*/
#headerMain {
#headerDiv {
text-align: center;
background-color: white;
padding: 20px 0px;
display: flex;
align-items: center;
justify-content: flex-start;
}
#headerMain a {
#headerDiv a {
font-size: 30px;
font-weight: bold;
color: black;
}
#headerText {
width: 100%;
margin-left: -220px;
}
#headerImg {
width: 180px;
height: 65px;
margin-top: -10px;
margin-right: 20px;
margin-bottom: -17.5px;
margin-left: 20px;
}
#headerNav {
width: 100%;
position: absolute;
......@@ -76,6 +93,11 @@ header #pageHeader
padding: 7.5px 10px;
}
#headerNav img {
width: 55px;
height: 20px;
}
/* [#2] Page navigation styling. Used in [#1] and [#4]. */
.navBar {
......@@ -101,6 +123,9 @@ header #pageHeader
/* [#3] Page main styling.
main #pageMain
form #recordForm
label
input .formTextInput
*/
......@@ -109,7 +134,6 @@ main #pageMain
/* [#4] Page footer styling. Uses [#2].
footer #pageFooter
main #footerMain
nav #footerNav .navBar
ul .Center
li a
......
static/Manage_Coworking_Spaces.html
+ 43
− 38
View file @ b1773f46
......@@ -9,12 +9,19 @@
<body onLoad="pageLoad()">
<header id="pageHeader" class="pageHeader">
<main id="headerMain">
<a href="Manage_Coworking_Spaces.html">Manage Coworking Spaces</a>
</main>
<div id="headerDiv">
<a href="Manage_Coworking_Spaces.html">
<img id="headerImg" class="headerImg"
src="Tramshed-Logo-Main-Black.png"></img></a>
<a id="headerText" class="headerText"
href="Manage_Coworking_Spaces.html">
Manage Coworking Spaces</a>
</div>
<nav id="headerNav" class="navBar">
<ul class="Left">
<li><a href="Manage_Coworking_Spaces.html">Home</a></li>
<li><a href="Manage_Coworking_Spaces.html">
<img id="navImg" class="navImg"
src="Tramshed-Logo-Main-White.png"></img></a></li>
<li><a href="Manage_Coworking_Spaces.html">Left</a></li>
<li><a href="Manage_Coworking_Spaces.html">Home</a></li>
<li><a href="Manage_Coworking_Spaces.html">Left</a></li>
......@@ -31,29 +38,29 @@
</nav>
</header>
<main id="recordSection">
<main id="pageMain">
<br>
<form id="recordForm" title="Record Form">
<label>Name: <input name="record_name" id="recordName"
type="text"></label><br>
<label>Address: <input name="record_address" id="recordAddress"
type="text"></label><br>
<label>Main Photograph: <input name="record_MP" id="recordMainPhotos"
type="text"></label><br>
<label>Additional Photographs: <input name="record_AP" id="recordAdditionalPhotos"
type="text"></label><br>
<label>Description: <input name="record_description" id="recordDescription"
type="text"></label><br>
<label>Website: <input name="record_website" id="recordWebsite"
type="text"></label><br>
<label>Email: <input name="record_email" id="recordEmail"
type="text"></label><br>
<label>Phone Number: <input name="record_PN" id="recordPhoneNumber"
type="text"></label><br>
<label>Opening Hours: <input name="record_OH" id="recordOpeningHours"
type="text"></label><br>
<label>Checkin Instructions: <input name="record_CI" id="recordCheckinInstructions"
type="text"></label>
<label>Name: <input id="recordName" class="formTextInput"
name="record_name" type="text"></label><br>
<label>Address: <input id="recordAddress" class="formTextInput"
name="record_address" type="text"></label><br>
<label>Main Photograph: <input id="recordMainPhotos" class="formTextInput"
name="record_MP" type="text"></label><br>
<label>Additional Photographs: <input id="recordAdditionalPhotos" class="formTextInput"
name="record_AP" type="text"></label><br>
<label>Description: <input id="recordDescription" class="formTextInput"
name="record_description" type="text"></label><br>
<label>Website: <input id="recordWebsite" class="formTextInput"
name="record_website" type="text"></label><br>
<label>Email: <input id="recordEmail" class="formTextInput"
name="record_email" type="text"></label><br>
<label>Phone Number: <input id="recordPhoneNumber" class="formTextInput"
name="record_PN" type="text"></label><br>
<label>Opening Hours: <input id="recordOpeningHours" class="formTextInput"
name="record_OH" type="text"></label><br>
<label>Checkin Instructions: <input id="recordCheckinInstructions" class="formTextInput"
name="record_CI" type="text"></label>
<br><br>
<button id="addButton" type="submit">Add</button>
......@@ -68,19 +75,17 @@
</main>
<footer id="pageFooter">
<main id="footerMain">
<nav id="footerNav" class="navBar">
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Left</a></li>
</ul>
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Center</a></li>
</ul>
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Right</a></li>
</ul>
</nav>
</main>
<nav id="footerNav" class="navBar">
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Left</a></li>
</ul>
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Center</a></li>
</ul>
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Right</a></li>
</ul>
</nav>
</footer>
<script src="Manage_Coworking_Spaces.js"></script>
......
static/Manage_Coworking_Spaces.js
+ 5
− 5
View file @ b1773f46
......@@ -5,19 +5,19 @@ function onSubmitLoad() {
function headerLoad() {
let headerMain = document.querySelector('#headerMain');
let headerMainHeight = headerMain.offsetHeight;
let headerDiv = document.querySelector('#headerDiv');
let headerDivHeight = headerDiv.offsetHeight;
let headerNav = document.querySelector('#headerNav');
let headerNavHeight = headerNav.offsetHeight;
let pageHeaderHeight = headerMainHeight + headerNavHeight;
let pageHeaderHeight = headerDivHeight + headerNavHeight;
document.getElementById("pageHeader").style.height = pageHeaderHeight + "px";
}
window.onscroll = function() {parallaxNavScroll()};
function parallaxNavScroll() {
let headerMain = document.querySelector('#headerMain');
let headerHeight = headerMain.offsetHeight;
let headerDiv = document.querySelector('#headerDiv');
let headerHeight = headerDiv.offsetHeight;
if (document.body.scrollTop > headerHeight || document.documentElement.scrollTop > headerHeight) {
document.getElementById("headerNav").style.top = "0";
document.getElementById("headerNav").style.position = "fixed";
......
static/Tramshed-Logo-Main-Black.png 0 → 100644
+ 0
− 0
View file @ b1773f46
static/Tramshed-Logo-Main-Black.png

84.3 KiB

static/Tramshed-Logo-Main-White.png 0 → 100644
+ 0
− 0
View file @ b1773f46
static/Tramshed-Logo-Main-White.png

77.1 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment