first commit
This commit is contained in:
Boris
Binary file not shown.
102
Semester 1/Web Development and HCI/Assignment 1/contact.html
Normal file
102
Semester 1/Web Development and HCI/Assignment 1/contact.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Contact Me</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="George Wilkinson">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="default-style" content="./src/styles/style.css">
|
||||
<link rel="stylesheet" href="./src/styles/main.css" content="text/css">
|
||||
<link rel="stylesheet" href="./src/styles/index.css" content="text/css">
|
||||
<link rel="stylesheet" href="./src/styles/contact.css" content="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main Content-->
|
||||
<div id="main">
|
||||
|
||||
<!-- Top Bar -->
|
||||
<div id="top-bar">
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div id="toggle-navbar">
|
||||
|
||||
<input type="checkbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<ul>
|
||||
<a href="./index.html"><li>Home</li><div></div></a>
|
||||
<a href="./projects.html"><li>Projects</li><div></div></a>
|
||||
<a href="./contact.html"><li>Contact</li><div></div></a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Content of Top Bar -->
|
||||
<div id="top-content">
|
||||
|
||||
<!-- Title Header -->
|
||||
<div id="title-header">
|
||||
<header>
|
||||
<h1>George Wilkinson</h1>
|
||||
<h2>Contact Me</h2>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Start -->
|
||||
<div id="content">
|
||||
|
||||
<!-- About Me Card -->
|
||||
<div class="card" id="contacts">
|
||||
<div class="card-header">
|
||||
<header><h2>Contact Links</h2></header>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<ul id="contact-flex">
|
||||
<a href="https://www.linkedin.com/in/george-wilkinson-509661249/"><li>LinkedIn</li></a>
|
||||
<div class="flex-divider"></div>
|
||||
<a href="mailto:G.Wilkinson2@edu.salford.ac.uk"><li>E-mail</li></a>
|
||||
<div class="flex-divider"></div>
|
||||
<a href="https://discord.com/invite/SaPudKa"><li>Discord: Boris#0355</li></a>
|
||||
<a href=""><li></li></a>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card" id="message">
|
||||
<div class="card-header">
|
||||
<header><h2>Leave a Message</h2></header>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<form method="POST">
|
||||
<input type="text" id="name" name="Name" placeholder="Full Name" minlength="2">
|
||||
<input type="email" id="email" name="Email" placeholder="E-mail Address" minlength="4">
|
||||
<textarea id="message-content" name="Message Content"></textarea>
|
||||
<input type="submit" id="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content End -->
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<p>By George Wilkinson</p>
|
||||
<p>Date Modified: Mon 6th Oct</p>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
100
Semester 1/Web Development and HCI/Assignment 1/index.html
Normal file
100
Semester 1/Web Development and HCI/Assignment 1/index.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>George's Portfolio</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="George Wilkinson">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="default-style" content="./src/styles/style.css">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
|
||||
<link rel="stylesheet" href="./src/styles/main.css" content="text/css">
|
||||
<link rel="stylesheet" href="./src/styles/index.css" content="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main Content-->
|
||||
<div id="main">
|
||||
|
||||
<!-- Top Bar -->
|
||||
<div id="top-bar">
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div id="toggle-navbar">
|
||||
|
||||
<input type="checkbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<ul>
|
||||
<a href="./index.html"><li>Home</li><div></div></a>
|
||||
<a href="./projects.html"><li>Projects</li><div></div></a>
|
||||
<a href="./contact.html"><li>Contact</li><div></div></a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Content of Top Bar -->
|
||||
<div id="top-content">
|
||||
|
||||
<!-- Title Header -->
|
||||
<div id="title-header">
|
||||
<header><h1>George Wilkinson</h1></header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Start -->
|
||||
<div id="content">
|
||||
|
||||
<!-- About Me Card -->
|
||||
<div class="card" id="about">
|
||||
<div class="card-header">
|
||||
<header><h2>About Me</h2></header>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Computer Science with Cyber Security Student, at the <a href="https://salford.ac.uk">University of Salford</a> </p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li><a href="https://www.linkedin.com/in/george-wilkinson-509661249/">LinkedIn</a></li>
|
||||
<li><a href="mailto:G.Wilkinson@edu.salford.ac.uk">E-mail</a></li>
|
||||
<li><a href="./contact.html">More</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card" id="project-ov">
|
||||
<div class="card-header">
|
||||
<header><h2>Current Projects</h2></header>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<ul>
|
||||
<li>Using Proxmox to create an efficient Virtual Environment</li>
|
||||
<li>Dockerised NGINX WebServer running under Ubuntu in Proxmox</li>
|
||||
<li>Virtualised Home Assistant Automation</li>
|
||||
<li>Using Machine Learning with Frigate to enable home CCTV</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li><a href="./projects.html">More Detail</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content End -->
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<p>By George Wilkinson</p>
|
||||
<p>Date Modified: Mon 6th Oct</p>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
221
Semester 1/Web Development and HCI/Assignment 1/projects.html
Normal file
221
Semester 1/Web Development and HCI/Assignment 1/projects.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Contact Me</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="George Wilkinson">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="default-style" content="./src/styles/style.css">
|
||||
<link rel="stylesheet" href="./src/styles/index.css" content="text/css">
|
||||
<link rel="stylesheet" href="./src/styles/index.css" content="text/css">
|
||||
<link rel="stylesheet" href="./src/styles/projects.css" content="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main Content-->
|
||||
<div id="main">
|
||||
|
||||
<!-- Top Bar -->
|
||||
<div id="top-bar">
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div id="toggle-navbar">
|
||||
|
||||
<input type="checkbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<ul>
|
||||
<a href="./index.html"><li>Home</li><div></div></a>
|
||||
<a href="./projects.html"><li>Projects</li><div></div></a>
|
||||
<a href="./contact.html"><li>Contact</li><div></div></a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Content of Top Bar -->
|
||||
<div id="top-content">
|
||||
|
||||
<!-- Title Header -->
|
||||
<div id="title-header">
|
||||
<header>
|
||||
<h1>George Wilkinson</h1>
|
||||
<h2>Projects</h2>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Start -->
|
||||
<div id="content">
|
||||
|
||||
<div class="card-divider" id="prox-header">
|
||||
<h2>Main Proxmox Hypervisor Node</h2>
|
||||
</div>
|
||||
|
||||
<div class="card" id="prox-build">
|
||||
<div class="card-header">
|
||||
<header>
|
||||
<h3>Building</h3>
|
||||
</header>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
My main proxmox node is currently my largest project to date. I needed bulk network storage and local hypervisor compute
|
||||
that was low power, cost effective, and quiet. I chose to build on a consumer platform with an enterprise chassis,
|
||||
so I would have the best of both worlds for efficiency, form factor and cooling. Built on the last generation of
|
||||
the AM4 platform, I was able to build the compute end of the project for about £320. This included a
|
||||
<a href="https://www.amd.com/en/products/apu/amd-ryzen-7-5700g">Ryzen 5700G</a>,
|
||||
<a href="https://www.asrock.com/mb/AMD/B550%20Pro4/index.asp">ASRock B550</a>,
|
||||
<a href="https://www.corsair.com/uk/en/c/memory/ddr4-ram">2x32GB + 2x16GB Corsair DDR4</a> and a
|
||||
<a href="https://noctua.at/en/nh-l9a-am4">Noctua L9a</a>. For the chassis, I ended up using a
|
||||
<a href="https://www.supermicro.com/products/chassis/2U/?chs=825">SuperMicro CSE-825</a>, which is
|
||||
compatible with full-size ATX consumer board sizes, and has 8x3.5" hot-swap drive bays. The final piece of the project
|
||||
was storage - I needed a large amount of redundant storage with fast reads, something that isn't usually cheap. I
|
||||
managed to pick up 10 4TB
|
||||
<a href="https://documents.westerndigital.com/content/dam/doc-library/en_us/assets/public/western-digital/product/data-center-drives/ultrastar-sata-series/data-sheet-ultrastar-7k4000.pdf">HGST SAS drives</a>
|
||||
from an e-waste company with around 50k hours on each drive. Since my chassis can hold 8 at a time, this leaves me
|
||||
with 2 cold spares if any choose to fail. At the same time I bought a 2 port Mini-SAS 8087
|
||||
<a href="https://docs.broadcom.com/doc/12353331">LSI 9207-8i PCIe HBA</a> to connect the chassis backplane to my motherboard. On top
|
||||
of this hardware, I of course chose to use <a href="https://proxmox.com">Proxmox</a>, as it is a FOSS
|
||||
operating system and supports ZFS natively, unlike some alternatives like <a href=https://www.vmware.com/uk/products/esxi-and-esx.html">EXSi</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer" style="flex-direction: column;">
|
||||
<figure>
|
||||
<figure>
|
||||
<a target="_blank" href="./src/images/proxmox-01.jpg"><img src="./src/images/proxmox-01.jpg" alt="Server Internals"/></a>
|
||||
<figcaption>fig 1. Completed Build in the rack</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="prox-storage">
|
||||
<div class="card-header">
|
||||
<header><h2>Storage</h2></header>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Set up in a ZFS Striped Mirror array, I achieve 16TB of usable space out of 32TB, with 1-4 drive failure depending
|
||||
on which drive fails. 50% usable space is quite the loss, but all the negatives of decreased space are made up by
|
||||
the massive random IO/s increases, giving me much higher performance for cloud storage and app performance. To give some
|
||||
reference, the highest speed I have seen is 1.6GB/s (12800Mbps), around 180x the average residential UK download speed
|
||||
( according to Virgin Media: <a href="https://www.virginmedia.com/blog/broadband/average-broadband-speed">Here</a> ).
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<figure>
|
||||
<a target="_blank" href="./src/images/proxmox-02.jpg"><img src="./src/images/proxmox-02.jpg" alt="Proxmox Host Array"/></a>
|
||||
<a target="_blank" href="./src/images/proxmox-03.jpg"><img src="./src/images/proxmox-03.jpg" alt="Proxmox Host Storage"/></a>
|
||||
<figcaption>fig 2. ZFS Striped Mirror Array. fig 3. Storage Displayed in Panel.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card" id="prox-features">
|
||||
<div class="card-header">
|
||||
<header><h2>VM List</h2></header>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
<ul id="vm-list">
|
||||
<li><section class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-01" />
|
||||
<label for="vm-01">OpenMediaVault ( OMV )</label>
|
||||
<section class="collapse-list-content">
|
||||
<h5>4CPU, 8GB RAM</h5>
|
||||
<p>Under OMV, I import a virtual disk for network attached storage. This is used by other servers and clients
|
||||
in my house, and in some cases outside of my house. This is due to Proxmox having a less than ideal solution
|
||||
to network sharing, and can cause instability. OMV has a clean network GUI where I can configure network shares
|
||||
and expand their size on the fly, which is useful in a dynamic environment like this.
|
||||
</p>
|
||||
</section>
|
||||
</section></li>
|
||||
|
||||
<li><section class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-02" />
|
||||
<label for="vm-02">Ubuntu Server ( Docker )</label>
|
||||
<section class="collapse-list-content">
|
||||
<h5>4CPU, 30GB RAM</h5>
|
||||
<p>
|
||||
Under this Ubuntu VM, I run a single node Docker stack for ~50 containers, including
|
||||
<ul id="container-list">
|
||||
<li>NGINX WebServer & Proxy Manager<br/>For hosting web applications through a reverse proxy at a datacentre.</li>
|
||||
<li>Authentik<br/>Provides Proxy, OAuth2 and LDAP configuration for web applications.</li>
|
||||
<li>Gitea<br/>Hosts a personal Git repository for projects.</li>
|
||||
<li>Grafana & InfluxDB<br/>Provides real-time monitoring and logging of device metrics.</li>
|
||||
<li>Immich<br/>Google Photos alternative, entirely self-hosted and open source.</li>
|
||||
<li>IPv6NAT<br/>Provides an address translation service to allow for a fully IPv6 docker stack.</li>
|
||||
<li>VaultWarden<br/>Fully self-hosted, lightweight password manager.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</section>
|
||||
</section></li>
|
||||
|
||||
<li><section class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-03" />
|
||||
<label for="vm-03">Home Assistant OS</label>
|
||||
<section class="collapse-list-content">
|
||||
<h5>2CPU, 4GB RAM</h5>
|
||||
<p>
|
||||
With HaOS, I have set up integrations with several IoT devices on my network, such as TP-Link Tapo bulbs, light strips, etc.
|
||||
I am also working on integration with Grafana, Frigate & CCTV cameras to provide a centralised app to control & monitor
|
||||
smart home devices. I used to run Home Assistant dockerised on my Docker VM, but I found the VM was much better supported
|
||||
and stable.
|
||||
</p>
|
||||
</section>
|
||||
</section></li>
|
||||
|
||||
<li><section class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-04" />
|
||||
<label for="vm-04">Proxmox Backup Server ( PBS ) ( In Progress )</label>
|
||||
<section class="collapse-list-content">
|
||||
<h5>1CPU, 4GB RAM</h5>
|
||||
<p>
|
||||
While I already backup my Virtual Machines to an external server, using some storage on a friend's Proxmox node,
|
||||
using PBS locally, I can backup & snapshot my Virtual Machines to a different drive on my machine. This isn't ideal from
|
||||
a 3-2-1 perspective but having frequent local rolling backups can be incredibly useful if anything were to go wrong inside
|
||||
the VM itself. I am currently working on implementing a good local storage solution to store my images, so for now it is
|
||||
turned off.
|
||||
</p>
|
||||
</section>
|
||||
</section></li>
|
||||
|
||||
<li><section class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-05" />
|
||||
<label for="vm-05">Windows Server 2019</label>
|
||||
<section class="collapse-list-content">
|
||||
<h5>4CPU, 4GB RAM</h5>
|
||||
<p>
|
||||
Using an evaluation release of Windows Server, I use this to perform any operations / run any programs needed on this node
|
||||
that cannot be done on linux. This is rare, but useful when required. I have also used this in the past to have a graphical
|
||||
Windows environment outside of my network to configure network settings, since my Proxmox panel is behind a reverse proxy.
|
||||
</p>
|
||||
</section>
|
||||
</section></li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<figure>
|
||||
<a target="_blank" href="./src/images/proxmox-04.jpg"><img src="./src/images/proxmox-04.jpg" alt="Proxmox Host Panel"/></a>
|
||||
<figcaption>fig 4. VM List & Host Summary in Panel.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content End -->
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<p>By George Wilkinson</p>
|
||||
<p>Date Modified: Fri 24th Nov</p>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,73 @@
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
input, textarea {
|
||||
background-color: #2e3440;
|
||||
color: #eceff4;
|
||||
border: 2px solid #3b425266;
|
||||
box-shadow: 0 2px 5px 0 #2e3440;
|
||||
}
|
||||
#submit:hover {
|
||||
background-color: #4c566a;
|
||||
}
|
||||
.flex-divider {
|
||||
background-color: #eceff4;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: light ) {
|
||||
input, textarea {
|
||||
background-color: #2e3440;
|
||||
color: #eceff4;
|
||||
border: 2px solid #3b425266;
|
||||
box-shadow: 0 2px 5px 0 #2e3440;
|
||||
}
|
||||
#submit:hover {
|
||||
background-color: #4c566a;
|
||||
}
|
||||
.flex-divider {
|
||||
background-color: #2e3440;
|
||||
}
|
||||
}
|
||||
|
||||
#contact-flex {
|
||||
text-align: center;
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
#contact-flex a {
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.flex-divider {
|
||||
width: 60%;
|
||||
height: 1px;
|
||||
margin: 5% auto 5% auto;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
max-width: 80%;
|
||||
min-width: 80%;
|
||||
margin: auto;
|
||||
border-radius: 0.7em;
|
||||
padding: 0 0.5em;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
#submit {
|
||||
width: fit-content !important;
|
||||
min-width: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#submit:hover {
|
||||
transform: scale(1.05) !important;
|
||||
transition: transform 0.75s cubic-bezier(0.1,-0.2,0.05,1.2);
|
||||
transition-duration: 0.75s;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #4c566a;
|
||||
color: #eceff4;
|
||||
}
|
||||
* :link {
|
||||
color: #aab;
|
||||
}
|
||||
#toggle-navbar li, .card, .card-divider, .collapse-list label {
|
||||
border: 2px solid #3b425266;
|
||||
background-color: #434c5e;
|
||||
box-shadow: 0 2px 5px 0 #2e3440;
|
||||
}
|
||||
#toggle-navbar li:hover {
|
||||
background-color: #4c566a;
|
||||
}
|
||||
#toggle-navbar a:link, a:visited, a:focus {
|
||||
color: white;
|
||||
}
|
||||
#toggle-navbar div {
|
||||
background: #88c0d0;
|
||||
}
|
||||
ul li div {
|
||||
background-color: #2e3440;
|
||||
}
|
||||
#toggle-navbar li ~ div {
|
||||
box-shadow: 0 0 5px 5px #434c5e;
|
||||
}
|
||||
.collapse-list label:hover,
|
||||
.collapse-list label:focus {
|
||||
background: #4c566a;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background-color: #e5e9f0;
|
||||
color: #2e3440;
|
||||
}
|
||||
* :link {
|
||||
color: #5e81ac;
|
||||
}
|
||||
#toggle-navbar li, .card, .card-divider, .collapse-list label {
|
||||
border: 2px solid #4c566a;
|
||||
background-color: #d8dee9;
|
||||
box-shadow: 0 2px 5px 0 #434c5e;
|
||||
}
|
||||
#toggle-navbar li:hover {
|
||||
background-color: #eeeeff;
|
||||
}
|
||||
#toggle-navbar a:link, a:visited, a:focus {
|
||||
color: black;
|
||||
}
|
||||
#toggle-navbar div {
|
||||
background: #5e81ac;
|
||||
}
|
||||
#toggle-navbar li ~ div {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.collapse-list label:hover,
|
||||
.collapse-list label:focus {
|
||||
background: #eeeeff;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: scroll;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10vh;
|
||||
height: 100%;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
#top-bar {
|
||||
height: fit-content;
|
||||
max-height: 20%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 2vw;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
min-height: 15vh;
|
||||
max-height: 25vh;
|
||||
}
|
||||
|
||||
#title-header {
|
||||
display: inline;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
display: block;
|
||||
font-size: 4vh;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#top-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: -1em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#toggle-navbar {
|
||||
display: inline;
|
||||
position: relative;
|
||||
height: auto;
|
||||
z-index: 1;
|
||||
margin-right: auto;
|
||||
margin-left: 5vw;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#toggle-navbar li:hover ~ div {
|
||||
transform: scaleX(250%);
|
||||
transform-origin: 0% 0%;
|
||||
transition: transform 1s cubic-bezier(0.1,-0.1,0.02,1.8);
|
||||
|
||||
transition-duration: 1s;
|
||||
}
|
||||
|
||||
#toggle-navbar li:hover {
|
||||
transform: scale(1.03) !important;
|
||||
transition: transform 0.5s cubic-bezier(0.1,-0.2,0.05,1.2);
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
#toggle-navbar a {
|
||||
outline: none;
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
padding: 4px;
|
||||
height: fit-content;
|
||||
line-height: 3rem;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
margin: 15px 0 15px 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#toggle-navbar input {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#toggle-navbar div {
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 4px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#toggle-navbar li ~ div {
|
||||
max-width: 90% !important;
|
||||
min-width: 10% !important;
|
||||
bottom: 5px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
#toggle-navbar ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.1em;
|
||||
position: relative;
|
||||
margin-top: 1.5em;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
transform-origin: 0% 0%;
|
||||
transform: translate(0, -600%);
|
||||
transition: transform 0.5s cubic-bezier(0.77,-0.2,0.02,1.2);
|
||||
}
|
||||
|
||||
#toggle-navbar li
|
||||
{
|
||||
padding: 10px 0;
|
||||
font-size: 2.25vh;
|
||||
width: 10vh;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.4vh 1.1vw 0.4vh 1.1vw;
|
||||
}
|
||||
|
||||
#toggle-navbar input:checked ~ ul
|
||||
{
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#toggle-navbar a:active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 3em;
|
||||
width: 100%;
|
||||
font-size: 75%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
margin: 3px 10px;
|
||||
}
|
||||
|
||||
footer p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 10px;
|
||||
column-gap: 2em;
|
||||
justify-content: center;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
#content h2 {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
padding: 1% 1% 1% 1%;
|
||||
max-width: 80%;
|
||||
margin: 0.5em;
|
||||
min-width: 80%;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
padding: 2% 2% 2% 2%;
|
||||
max-width: 15vw;
|
||||
flex-basis: 50%;
|
||||
margin: 0.5em;
|
||||
min-width: 15em;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.card > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.card header {
|
||||
display: inline-block;
|
||||
margin: 1em auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card header h2 {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
bottom: 0px;
|
||||
margin: auto;
|
||||
min-height: 10%;
|
||||
}
|
||||
|
||||
.card-footer ul {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.card-footer li, .card-footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: scale(1.01);
|
||||
transition-duration: 0.2s;
|
||||
transform-box: border-box;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
.card {
|
||||
max-width: 40vw !important;
|
||||
}
|
||||
|
||||
#card-content {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin: auto;
|
||||
font-size: 0.75rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#vm-list {
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapse-list > input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: -100vw;
|
||||
}
|
||||
|
||||
.collapse-list .collapse-list-content {
|
||||
overflow-y: hidden;
|
||||
height: 0;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.collapse-list > input[type="checkbox"]:checked ~ .collapse-list-content {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.collapse-list {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.collapse-list label {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.2em;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.collapse-list p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#container-list li {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
BIN
Semester 1/Web Development and HCI/Assignment Writeup.pdf
Normal file
BIN
Semester 1/Web Development and HCI/Assignment Writeup.pdf
Normal file
Binary file not shown.
BIN
Semester 1/Web Development and HCI/Assignment.odt
Normal file
BIN
Semester 1/Web Development and HCI/Assignment.odt
Normal file
Binary file not shown.
BIN
Semester 1/Web Development and HCI/George_Wilkinson.zip
Normal file
BIN
Semester 1/Web Development and HCI/George_Wilkinson.zip
Normal file
Binary file not shown.
11
Semester 1/Web Development and HCI/Test Directory/index.html
Normal file
11
Semester 1/Web Development and HCI/Test Directory/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MY BALLLLLS</title>
|
||||
</head>
|
||||
<body>
|
||||
<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
|
||||
<p>Did you ever stop the think, and forget to start again?</p>
|
||||
</blockquote>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
body {
|
||||
background-color: #444;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.titleBar {
|
||||
text-align: center;
|
||||
border: 2px;
|
||||
border-radius: 2px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.titleBar h1 {
|
||||
font-size: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.centreBox {
|
||||
height: 30vh;
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
top: 10%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border: 2px;
|
||||
border-radius: 2px;
|
||||
border-color: white;
|
||||
border-style: solid;
|
||||
}
|
||||
p {
|
||||
font-size: 30px;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
## Lecture 1 (13:00) - Introduction
|
||||
|
||||
### Learning Outcomes
|
||||
|
||||
- HTML CSS
|
||||
- Markup Validation
|
||||
- Accessibility (Cross Platform & Device)
|
||||
- Debugging
|
||||
- HCI
|
||||
|
||||
### Assessments
|
||||
|
||||
- Design, develop and test website, HTML5 & CSS, desktop and mobile, documenting design and testing ^401105
|
||||
- **8/12/2023** Deadline
|
||||
- **50%** of overall module mark ( 10 Credits )
|
||||
- Content 10%
|
||||
- Design 10%
|
||||
- HTML Structure 10%
|
||||
- Advanced use of HTML 20%
|
||||
- CSS 30%
|
||||
- Validation and Accessibility 20%
|
||||
|
||||
### Other Module Content
|
||||
|
||||
- Server Side Programming
|
||||
- **PHP**, **ASP.NET**, **Perl**
|
||||
- Client Side Programming
|
||||
- **JavaScript**
|
||||
- Databases
|
||||
- Frameworks
|
||||
- Web Services
|
||||
|
||||
### Reading List
|
||||
|
||||
#### Useful Websites
|
||||
|
||||
- <https://w3.org>
|
||||
- <https://w3schools.com>
|
||||
- <https://developer.mozilla.org>
|
||||
- <https://diveintohtml5.info>
|
||||
|
||||
#### Books
|
||||
|
||||
- HTML & CSS (Duckett, J)
|
||||
- HTML Pocket Primer
|
||||
- HTML Mobile Pocket Primer
|
||||
|
||||
### Weekly Class Test
|
||||
|
||||
- Complete by following Wednesday
|
||||
- Covers content learned through the week
|
||||
|
||||
### Scope
|
||||
|
||||
- World Wide Web
|
||||
- Information Space based on Hypertext / Hypermedia
|
||||
- Internet (an intranet) as a comms channel
|
||||
- Web Developments
|
||||
- Content
|
||||
- Design and Artwork
|
||||
- Technical Implementation / Software Development
|
||||
|
||||
## Lecture 2 (15:00) - Structure
|
||||
|
||||
#### HTML
|
||||
|
||||
- Hypertext Markup Language
|
||||
- Standardised system for tagging text files, achieving font, colour, graphic and hyperlink effects on webpages.
|
||||
- Describes the structure of a webpage
|
||||
- Made up of **elements** and **tags**
|
||||
- Tags come in pairs
|
||||
- Each element contains content between two tags
|
||||
- Text documents
|
||||
- Scripting language
|
||||
|
||||
#### Attributes
|
||||
|
||||
- Provides additional information about the contents of an element
|
||||
- Defined on opening tag
|
||||
- Contains a name and a value
|
||||
|
||||
## Workshop 1 (13:00)
|
||||
|
||||
#### Find Example of a Bad and Good Website
|
||||
|
||||
- Bad Website
|
||||
- <https://www.art.yale.edu/>
|
||||
- This website has clashing colours, inconsistent fonts, a confusing layout, and no form that it sticks to.
|
||||
- <https://manchester.craigslist.org/>
|
||||
- Not necessarily bad structure, but the lack of proper design practices makes it a less than good looking website to the end user.
|
||||
- Good Website
|
||||
- <https://github.com/explore>
|
||||
- Colours and font is consistent, website is clean and easy to navigate. No pop-ups or distracting content
|
||||
- <https://hub.docker.com/search?q=&type=image>
|
||||
- Layout is extremely intuitive and familiar to most users, colours do not clash, and fonts are consistent.
|
||||
|
||||
### Good Web Design Principles:
|
||||
|
||||
- Cohesion & Simplicity - is not confusing, has no clashing elements. Pop-ups are kept to an absolute minimum as to not distract the user to the content of the website.
|
||||
- Consistency - font and colour does not vary when not needed.
|
||||
- Emphasis - elements that are important to convey to the user are marked as such, allowing the user to be directed intuitively.
|
||||
|
||||
### Technical Challenges
|
||||
|
||||
#### Major Technical Challenges
|
||||
|
||||
- Accessibility - Creating the website to work on all devices and display content reliably.
|
||||
- Security - Having the bare website exposed to the internet with no proxy leaves it vulnerable. Using HTTP with TLS on the world web is essential. Isolation of services.
|
||||
|
||||
#### Shallowest Learning Curve in WebDev
|
||||
|
||||
- CSS, the main thing to learn is how it interacts with the page.
|
||||
@@ -0,0 +1,100 @@
|
||||
## Lecture 1 (13:00) - Text
|
||||
|
||||
### IPv4 and DNS
|
||||
|
||||
- DNS translates an IPv4 address (12 digit, period separation), to a URI (google.com, salford.ac.uk). This allows a user to input a human readable address, and have it translated to the location of the webserver.
|
||||
|
||||
### Markup
|
||||
|
||||
- Structural
|
||||
- Headers
|
||||
- Paragraphs
|
||||
- Divs
|
||||
- Body
|
||||
- Semantic
|
||||
- Extra info such as emphasis, quotation, etc.
|
||||
- 6 levels of heading <\hX><\\hX>
|
||||
- Paragraph is started with a line break
|
||||
|
||||
```html
|
||||
<sup><\sup> (superscript)
|
||||
```
|
||||
|
||||
```html
|
||||
<sub><\sub> (subscript)
|
||||
```
|
||||
|
||||
```html
|
||||
<hr> (Horizonal Break)
|
||||
```
|
||||
|
||||
```html
|
||||
<strong><\strong> (Strong emphasis)
|
||||
```
|
||||
|
||||
```html
|
||||
<em><\em> (Subtle Emphasis)
|
||||
```
|
||||
|
||||
```html
|
||||
<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh"><p>Did you ever stop the think, and forget to start again?<\p><\blockquote>
|
||||
```
|
||||
|
||||
```html
|
||||
<abbr title="professor">Prof<\abbr>
|
||||
```
|
||||
|
||||
```html
|
||||
<acronym title = "National Aeronautics and Space Administration">NASA<\acronym>
|
||||
```
|
||||
|
||||
## Lecture 2 (15:00)
|
||||
|
||||
```html
|
||||
<cite> (Citation)
|
||||
```
|
||||
|
||||
```html
|
||||
<dfn> (Definition)
|
||||
```
|
||||
|
||||
```html
|
||||
<address> (Author Address)
|
||||
```
|
||||
|
||||
```html
|
||||
<del> or <s> (Linethrough)
|
||||
```
|
||||
|
||||
```html
|
||||
<ins> (Insert / Underline)
|
||||
```
|
||||
|
||||
- Any content inside a `<div>`, is relative to the division, not the screen / viewport.
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
|
||||
(Unordered List)
|
||||
```
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ol>
|
||||
|
||||
(Ordered List)
|
||||
```
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt></dt> (Definition Title>)
|
||||
<dd></dd> (Definition Data)
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
<dl>
|
||||
```
|
||||
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Week 2 Practice Page</title>
|
||||
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>Week 2 Practice Page</h1>
|
||||
</header>
|
||||
<section>
|
||||
<!-- Site Content Start -->
|
||||
<header>
|
||||
<h1>Welcome to my Webpage</h1>
|
||||
</header>
|
||||
<p>I am learning Computer Science w/ Cyber Security at the University of Salford. I decided to study my course at Salford because I enjoy money and dynamic disciplines</p>
|
||||
<br>
|
||||
<p>My course is provided by the School of Computing, Science & Engineering, which is basedin the Newton Building. The Newton Building was not built recently, and would benefitfrom some improvements. If it were my decision I would create a new building for all SEE students and keep the old one for workshops we dont care about.</p>
|
||||
<!-- Site Content End -->
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,143 @@
|
||||
## Lecture 1 (13:00) - Links
|
||||
|
||||
### HTML Links
|
||||
|
||||
- Link from:
|
||||
- Another website
|
||||
- Another page on the same website
|
||||
- Another part of the same page
|
||||
- A new window
|
||||
- Email Client
|
||||
- Etc.
|
||||
- href links to other web pages must contain the full URI. ex.
|
||||
|
||||
```html
|
||||
<a href="https://tgj.services">Balls</a>
|
||||
```
|
||||
|
||||
- href links to different pages on the same website can be relative. ex.
|
||||
|
||||
```html
|
||||
<a href="../index.html">Home</a>
|
||||
```
|
||||
|
||||
- href links to mail must be a mailto link. ex.
|
||||
|
||||
```html
|
||||
<a href="mailto:noreply@tgj.services">Email for a Reply</a>
|
||||
```
|
||||
|
||||
- href links to open in a new window must contain a blank target. ex.
|
||||
|
||||
```html
|
||||
<a href="htps://tgj.services" target="_blank">Nuts</a>
|
||||
```
|
||||
|
||||
- href links to a part of the same page must contain the ID of the element. ex.
|
||||
|
||||
```html
|
||||
<h1 id="top">Test Webpage</h1>
|
||||
<a href="#top">Jump to Top</a>
|
||||
```
|
||||
|
||||
- href links can link to IDs of elements in other pages of the same websites by combining the above methods. ex.
|
||||
|
||||
```html
|
||||
<a href="../index.html#contact">Contact Information</a>
|
||||
```
|
||||
|
||||
## Lecture 2 (15:00) - Images & Tables
|
||||
|
||||
### Images
|
||||
|
||||
- Uses the `<img>` tag to embed an image
|
||||
|
||||
```html
|
||||
<img src="path/to/image.jpg" alt="Test Image" title="Hover title" width="600" height="450" />
|
||||
```
|
||||
|
||||
- `src` is the path to the image file
|
||||
- `alt` is the alternative text that shows when the image cannot load
|
||||
- `title` is the text that will appear on image hover
|
||||
- `width` is the width of the image in pixels
|
||||
- `height` is the height of the image in pixels
|
||||
- The `<img>` tag does not have a closing tag, since it has no content inside, but it is closed with a `/>
|
||||
|
||||
#### Image Rules
|
||||
|
||||
##### Formats
|
||||
|
||||
- **jpeg**
|
||||
- **gif**
|
||||
- **png**
|
||||
- JPEG allows for good compression of images, making it an effective format for non-transparent images.
|
||||
|
||||
##### Correct Size
|
||||
|
||||
- Images may be stretched or too small to see
|
||||
- Using relative view sizes preferable
|
||||
|
||||
##### Use Correct Resolution
|
||||
|
||||
- Images generally use 72 pixels per inch
|
||||
- If resolution is too large, they will have to be downloaded by the end user, causing slow load times.
|
||||
- ex. `JPEG@300ppi` = **1526kb** -> `JPEG@72ppi` = **368kb** | 4.1x Size Decrease
|
||||
|
||||
#### Vector Images
|
||||
|
||||
- Composed of coordinate points ( instructions on how to draw ) rather than pixel values.
|
||||
- They can be resized to any resolution without being blurry or pixelated.
|
||||
- Can be very small images.
|
||||
- Formats include SVG, EPS, WMF.
|
||||
|
||||
#### Transparency
|
||||
|
||||
- GIF and PNG allow for transparency values between 0 and 255, allowing for fully opaque or fully transparent, and 254 values in-between.
|
||||
|
||||
#### Figure and Figure Caption
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="images/oters.jpg" alt="Picture of otters sleeping">
|
||||
<br />
|
||||
<figcaption> Sea otters hold hands when they sleep </figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### Tables
|
||||
|
||||
- Tables are useful for grid information. Ex.
|
||||
- Sports Results
|
||||
- Stock Reports
|
||||
- Train Timetables
|
||||
- Tables are not designed for site layout.
|
||||
|
||||
#### Tags
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Today</th> //Table Heading (Vertical )
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Numbers: </th> //Table Heading for Row ( Horizontal )
|
||||
<td>1</td> //Table Data
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr> //Table Row
|
||||
</table>
|
||||
```
|
||||
|
||||
- `<table>` creates a new table
|
||||
- `<tr>` defines a new table row
|
||||
- `<td>` contains table cell data
|
||||
- `<th>` contains table cell data in bold, a semantic element used for screen readers and styling
|
||||
|
||||
```html
|
||||
<td colspan="2"></td>
|
||||
<td rowspan="2"></td>
|
||||
```
|
||||
|
||||
- The first cell element will span over 2 separate columns.
|
||||
- Similarly, the second element will span vertically across 2 rows
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Week 3 Practice Page</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<link href="styles/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header class="Title" >
|
||||
<h1>Week 3 Practice Page</h1>
|
||||
</header>
|
||||
<section>
|
||||
<!-- Content Start -->
|
||||
<header>
|
||||
<h1>Welcome to My Site</h1>
|
||||
<p>These pages are the work of George Wilkinson</p>
|
||||
</header>
|
||||
<p>
|
||||
I am learning Computer Science at the
|
||||
<a href="https://www.salford.ac.uk">University of Salford</a>.
|
||||
I decided to study my course at Salford because:
|
||||
</p>
|
||||
<ol>
|
||||
<li>The staff are so friendly</li>
|
||||
<li>It is easy to get to by train</li>
|
||||
<li>They use GNU/Linux (some of the time)</li>
|
||||
</ol>
|
||||
<p>
|
||||
My course is provided by the <a href="https://www.cse.salford.ac.uk">
|
||||
School of Computing, Science & Engineering</a>, which is
|
||||
based in the Newton Building. The Newton Building was not built
|
||||
recently, and would benefit from some improvements. If it were
|
||||
my decision i would:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Improve the lighting in the second floor computer labs</li>
|
||||
<li>Fix the heating!</li>
|
||||
<li>Decorate the staff offices</li>
|
||||
<li>Improve the building entrance</li>
|
||||
</ul>
|
||||
<h2>Computer Science</h2>
|
||||
<p>
|
||||
During the first semester of my first year the degree has
|
||||
several modules. Among the modules I am studying are:
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Computer Architecture</dt>
|
||||
<dd>This includes a study of the architecture and operation
|
||||
of a simple CPU</dd>
|
||||
<dt>Study Skills</dt>
|
||||
<dd>This module covers Personal Development Planing</dd>
|
||||
<dt>Web Page Design</dt>
|
||||
<dd>This is all about HTML5 and CSS</dd>
|
||||
</dl>
|
||||
<!-- Content End -->
|
||||
</section>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="mailto:G.Wilkinson2@edu.salford.ac.uk">George Wilkinson</a>
|
||||
</address>
|
||||
<p class="modifydate" >Last Modified: Friday 6th October 2023</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 1px
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flexbox;
|
||||
}
|
||||
|
||||
address {
|
||||
display: absolute;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.modifydate {
|
||||
display: absolute;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
## Lecture 1 (13:00) - Tables and Forms Cont.
|
||||
|
||||
#### Big Tables
|
||||
|
||||
`<thead></thead>` - Table Head
|
||||
`<tbody></tbody` - Table Body
|
||||
`<tfoot></tfoot>` - Table Footer
|
||||
|
||||
### Forms
|
||||
|
||||
#### Form Structure
|
||||
|
||||
Forms require a:
|
||||
|
||||
- Action attribute - a URL for the page on the server that will receive the form data
|
||||
- Method attribute - usually GET or POST.
|
||||
|
||||
```html
|
||||
<form action='send_email.php' method='GET'>
|
||||
<p>Form Controls Appear</p>
|
||||
</form>
|
||||
```
|
||||
|
||||
```html
|
||||
<form action="htps://example.com/login.php">
|
||||
<p>Username:
|
||||
<input type="text" name="username" size="15" maxlength="30" />
|
||||
</p>
|
||||
<p>Password
|
||||
<input type="password" name="password" size="15" maxlength="30" />
|
||||
</p>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Input
|
||||
|
||||
- **type** is the control type of the input.
|
||||
- `type="password"` identifies the input would be protected, and plaintext is hidden.
|
||||
- **name** identifies the field in the sent data
|
||||
- **maxlength** limits the character input length
|
||||
|
||||
#### Text Area
|
||||
|
||||
```html
|
||||
<form action="https://example.com/comments.php" >
|
||||
<p>What did you think of this gig?</p>
|
||||
<textarea name="comments" cols="20" rows="4">
|
||||
Enter your Comments
|
||||
</textarea>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Radio Buttons
|
||||
|
||||
```html
|
||||
<form action="https://example.com/genre.php" >
|
||||
<p>Please select your favourite genre: <br />
|
||||
<input type="radio" name="genre" value="Rock" checked="checked" />Rock
|
||||
<input type="radio" name="genre" value="Pop" />Rock
|
||||
<input type="radio" name="genre" value="Jazz" />Rock
|
||||
</p>
|
||||
</form>
|
||||
```
|
||||
|
||||
- One radial button **must** be checked
|
||||
- Each button in a group should have the same name
|
||||
|
||||
#### Checkbox
|
||||
|
||||
```html
|
||||
<form action="https://example.com/profile.php" >
|
||||
<p>Please select your favourite genre: <br />
|
||||
<input type="checkbox" name="service" value="itunes" checked="checked" />iTunes
|
||||
<input type="checkbox" name="service" value="lastfm" />Last.fm
|
||||
<input type="checkbox" name="service" value="spotify" />Spotify
|
||||
</p>
|
||||
</form>
|
||||
```
|
||||
|
||||
- No elements *have* to be checked, but it is good practice.
|
||||
|
||||
## Lecture 2 (15:00)
|
||||
|
||||
#### Drop-Down List
|
||||
|
||||
```html
|
||||
<form action="https://example.com/profile.php">
|
||||
<p>What device do you listen to music on?</p>
|
||||
<select name="devices" size="3" multiple="multiple">
|
||||
<option value="ipod" selected="selected">iPod</option>
|
||||
<option value="radio">Radio</option>
|
||||
<option value="computer">Computer</option>
|
||||
</select>
|
||||
</form>
|
||||
```
|
||||
|
||||
- `<option>` elements used to define each option.
|
||||
- `<select>` elements allow users to select an option from a drop down list.
|
||||
- **size** dictates the font size of the list items.
|
||||
- **multiple** sets the capability to select multiple items in the list.
|
||||
- **selected** sets the default selected value(s) in the list
|
||||
|
||||
#### File Inputs
|
||||
|
||||
```html
|
||||
<form action="https://example.com/upload.php" method="POST">
|
||||
<p>Upload your song in MP3 format: </p>
|
||||
<input type="file" name="user-song" />< br/>
|
||||
<input type="submit" value="Upload" />
|
||||
</form>
|
||||
```
|
||||
|
||||
- **value** in `<input type="submit"../>` sets the content of the submit box
|
||||
|
||||
#### Submit Button
|
||||
|
||||
```html
|
||||
<form action="https://www.example.com/subscribe.php">
|
||||
<p>Subscribe to our email list</p>
|
||||
<input type="text" name="email" />
|
||||
<input type="submit" name="subscribe" value="Subscribe" />
|
||||
```
|
||||
|
||||
#### Image Button
|
||||
|
||||
```html
|
||||
<form action="https://example.com/subscribe.php">
|
||||
<p>Subscribe to our email list</p>
|
||||
<input type="text" name="email" />
|
||||
<input type="image" src="images/subscribe.png" />
|
||||
</form
|
||||
```
|
||||
|
||||
#### Labelling Controls
|
||||
|
||||
```html
|
||||
<label>Age: <input type="text" name="age" /></label><br />
|
||||
|
||||
Gender:
|
||||
<input id="female" type="radio" name="gender" value="f" />
|
||||
<label for="female">Female</label>
|
||||
|
||||
<input id="male" type="radio" name="gender" value="m">
|
||||
<label for="male">Male</label>
|
||||
```
|
||||
|
||||
#### Grouping Elements
|
||||
|
||||
```html
|
||||
<fieldset>
|
||||
<legend>Contact Details</legend>
|
||||
<label>Email: <br />
|
||||
<input type="text" name="email" /></label><br />
|
||||
<label>Mobile: <br />
|
||||
<input type="text" name="mobile" /></label><br />
|
||||
<label>Telephone: <br />
|
||||
<input type="text" name="telephone" /></label><br />
|
||||
</fieldset>
|
||||
```
|
||||
|
||||
#### Form Validation
|
||||
|
||||
- Used to be handled by JS, but is now implemented in HTML5
|
||||
- Reduces traffic load by handling checks clientside
|
||||
|
||||
```html
|
||||
<form action="http://example.com/login.php" method="post">
|
||||
<label for="un">Username: </label>
|
||||
<input type="text" name="user" required="required" id="un" />
|
||||
<br />
|
||||
<label for="pw">Password: </label>
|
||||
<input type="password" name="pwd" required="required" id="pw" />
|
||||
<input type="submit" value="submit" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Date Input
|
||||
|
||||
```html
|
||||
<form action="https://example.com/bookings" method="post">
|
||||
<label for="dep">Departure Date: </label>
|
||||
<input type="date" name="depart" id="dep" />
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
```
|
||||
15
Semester 1/Web Development and HCI/Week 4/homework.html
Normal file
15
Semester 1/Web Development and HCI/Week 4/homework.html
Normal file
@@ -0,0 +1,15 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Title</h1>
|
||||
<section>
|
||||
<h1>Heading</h1>
|
||||
<p>This is a paragraph</p>
|
||||
</section>
|
||||
<p1>And this is another paragraph.</p1>
|
||||
</body>
|
||||
</html>
|
||||
21
Semester 1/Web Development and HCI/Week 4/homework.svg
Normal file
21
Semester 1/Web Development and HCI/Week 4/homework.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg width="250" height="250">
|
||||
|
||||
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="4" fill="white" />
|
||||
|
||||
<circle cx="100" cy="170" r="3" stroke="black" stroke-width="4" fill="white" />
|
||||
|
||||
<circle cx="100" cy="150" r="3" stroke="black" stroke-width="4" fill="white" />
|
||||
|
||||
<circle cx="100" cy="130" r="3" stroke="black" stroke-width="4" fill="white" />
|
||||
|
||||
<circle cx="100" cy="150" r="60" stroke="black" stroke-width="4" fill="white" />
|
||||
|
||||
<circle cx="85" cy="40" r="5" stroke="black" stroke-width="2" fill="white" />
|
||||
|
||||
<circle cx="115" cy="40" r="5" stroke="black" stroke-width="2" fill="white" />
|
||||
|
||||
<rect width="200" height="230" stroke="black" fill="none"/>
|
||||
|
||||
<polygon points="95,50 105,55 90,75" stroke="black" stroke-width="2" fill="orange" />
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 807 B |
@@ -0,0 +1,123 @@
|
||||
## Lecture 1 (13:00) - HTML5 and Layout
|
||||
|
||||
- XHTML (2000) succeeded HTML4, allowing XML integration such as SVG, MathML and CML.
|
||||
|
||||
### HTML5
|
||||
|
||||
- Flexible parsing and compatibility
|
||||
- Moved towards platform combining HTML5, CSS and JS
|
||||
- Improved semantic elements
|
||||
- New input attributes ex. date, time, email, url
|
||||
- Global attributes ex. id, tabindex, style
|
||||
|
||||
### Doctypes
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
```html
|
||||
<?xml version="1.0" ?>
|
||||
```
|
||||
|
||||
### Comments
|
||||
|
||||
```html
|
||||
<!-- This is a comment -->
|
||||
```
|
||||
|
||||
### ID Attribute
|
||||
|
||||
- Global attribute.
|
||||
- Must be unique between elements.
|
||||
- Must start with a letter or underscore.
|
||||
- Can be used by CSS or JS to identify elements.
|
||||
|
||||
### Class Attribute
|
||||
|
||||
- Any HTML element can also carry a class attribute.
|
||||
- Identifies collections of elements to manipulate as a group.
|
||||
- Element can have multiple classes, separated with spaces.
|
||||
- Class name should describe the class it belongs to.
|
||||
|
||||
### Block Elements
|
||||
|
||||
- Some elements will always appear to start in new lines.
|
||||
- Examples include `<h1>`, `<p>`, `<ul>`, `<li>`.
|
||||
|
||||
### Inline Elements
|
||||
|
||||
- Some elements will always appear to continue on the same line.
|
||||
- Examples include `<a>`, `<b>`, `<em>`, `<img>`.
|
||||
|
||||
### Grouping Elements
|
||||
|
||||
#### Block
|
||||
|
||||
- `<div>` Element allows for a group of elements to be grouped together within a single block element.
|
||||
- Without styling each div, they will start on new lines.
|
||||
- HTML5 introduced alternatives for semantic reasons.
|
||||
- `<article>` `<section>` `<header>` `<aside>` `<nav>`
|
||||
- Good practice to break a page into smaller sections.
|
||||
|
||||
#### Span
|
||||
|
||||
- `<span>` element is the inline equivalent of `<div>`
|
||||
- Most commonly used in order to be able to controlthe appearance with CSS.
|
||||
|
||||
## Lecture 2 (15:00)
|
||||
|
||||
### Page Information
|
||||
|
||||
- `<meta>` contained in `<head>`, contains information about the page.
|
||||
- Not visible to user, but used in search engine rankings and info.
|
||||
- Common attributes are defined in pairs.
|
||||
|
||||
#### Name, Value `<meta>`
|
||||
|
||||
##### Description
|
||||
|
||||
- Description of page
|
||||
- Used & Displayed by search engines
|
||||
- max. 155 characters.
|
||||
|
||||
##### Keywords
|
||||
|
||||
- Comma separated list of search terms
|
||||
- Not used by search engines anymore
|
||||
|
||||
##### Robots
|
||||
|
||||
- Indicated whether search engines should include page
|
||||
- `noindex` - Don't include this page.
|
||||
- `nofollow` - Include this page but not linked pages.
|
||||
|
||||
### Special Characters
|
||||
|
||||
- Some characters reserved by HTML
|
||||
- To display them, they must be escaped.
|
||||
- ex. `<`, `>`
|
||||
- Or by using ASCII / Unicode Values
|
||||
- ex. `<`, `>`
|
||||
|
||||
### Traditional HTML Layout vs. HTML5
|
||||
|
||||
|
||||
|
||||
#### HTML5 Elements
|
||||
|
||||
- `<header>`, `<footer>`. Used as either header or footer at the top or bottom of a page, respectively. Can also be used for an individual `<section>` or `<article>` within the page.
|
||||
- `<nav>`. Contains major navigational blocks ex. Primary site navigation.
|
||||
- `<article>`. Container for syndicated or singular sections ex. news or blog article.
|
||||
- `<aside>`. Contained within `<article>` and contains relevant but not necessary information.
|
||||
- `<section>`. Groups related items together ex. Grouping `<article>` elements, or splitting them up.
|
||||
- `<hgroup>`. Groups heading elements ( `h1`, `h2`, etc.. ) into one header.
|
||||
- `<figure>`. Contains information referenced by the main flow of the document. Can be used for Images, Videos,Graphs, Diagrams, Code Samples, Text etc. Can use a `<figcaption>` element to define a caption.
|
||||
|
||||
#### Sectioning Elements
|
||||
|
||||
- HTML5 elements must strictly be used as designed.
|
||||
- Where no element is valid, `<div>` is still used.
|
||||
- Any content outside of `<header>`, `<footer>` and `<aside>` is considered content, hence there is no "`<content>`" tag.
|
||||
- `<main>` element is used to specify content however, but can only be used once and cannot be nested inside `<section>` or any similar element.
|
||||
-
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Week 5 Practice Page</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<link href="styles/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header id="branding" >
|
||||
<h1>Week 5 Practice Page</h1>
|
||||
</header>
|
||||
<section id="content">
|
||||
<!-- Content Start -->
|
||||
<h2>Contact Me</h2>
|
||||
<p>Use the following Form to send me an email:</p>
|
||||
<form action="mailto:admin@example.com" enctype="text/plain" method="POST">
|
||||
<p>Name: <input name="Name" type="text" id="Name"></p>
|
||||
<p>Email Address <input name="Email" type="text" id="Email"></p>
|
||||
<p>Comment:</p>
|
||||
<p><textarea name="Comment" id=""Comment></textarea></p>
|
||||
<p><input type="submit" name="Submit" value="Submit"></p>
|
||||
</form>
|
||||
<!-- Content End -->
|
||||
</section>
|
||||
<nav id="navigation">
|
||||
<h1>Navigation</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="newton.html">Newton Building</a></li>
|
||||
<li><a href="contact.html">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer id="siteinfo">
|
||||
<address>
|
||||
<a href="mailto:G.Wilkinson2@edu.salford.ac.uk">George Wilkinson</a>
|
||||
</address>
|
||||
<p>Last Modified: Friday 20th October 2023</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Week 5 Practice Page</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<link href="styles/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header id="branding" >
|
||||
<h1>Week 5 Practice Page</h1>
|
||||
</header>
|
||||
<section id="content">
|
||||
<!-- Content Start -->
|
||||
<header>
|
||||
<h1>Welcome to My Site</h1>
|
||||
<p>These pages are the work of George Wilkinson.
|
||||
At the bottom of the page you will find some of my favourite
|
||||
<a href=#quotes>quotes and sayings.</a></p>
|
||||
</header>
|
||||
<p>
|
||||
I am learning Computer Science at the
|
||||
<a href="https://www.salford.ac.uk">University of Salford</a>.
|
||||
I decided to study my course at Salford because:
|
||||
</p>
|
||||
<ol>
|
||||
<li>The staff are so friendly</li>
|
||||
<li>It is easy to get to by train</li>
|
||||
<li>They use GNU/Linux (some of the time)</li>
|
||||
</ol>
|
||||
<p>
|
||||
My course is provided by the <a href="https://www.cse.salford.ac.uk">
|
||||
School of Computing, Science & Engineering</a>, which is
|
||||
based in the Newton Building. The Newton Building was not built
|
||||
recently, and would benefit from some improvements. If it were
|
||||
my decision i would:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Improve the lighting in the second floor computer labs</li>
|
||||
<li>Fix the heating!</li>
|
||||
<li>Decorate the staff offices<ul>
|
||||
<li>paint the walls,</li>
|
||||
<li>replace the carpet,</li>
|
||||
<li>replace the curtains with blinds.</li>
|
||||
</ul></li>
|
||||
<li>Improve the building entrance</li>
|
||||
</ul>
|
||||
<h2>Computer Science</h2>
|
||||
<p>
|
||||
During the first semester of my first year the degree has
|
||||
several modules. Among the modules I am studying are:
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Computer Architecture</dt>
|
||||
<dd>This includes a study of the architecture and operation
|
||||
of a simple <abbr title="Central Processing Unit">CPU</abbr>.</dd>
|
||||
<dt>Study Skills</dt>
|
||||
<dd>This module covers Personal Development Planing</dd>
|
||||
<dt>Web Page Design</dt>
|
||||
<dd>This is all about <abbr title="HyperText Markup Language">HTML</abbr> 5 and <abbr title="Cascading Style Sheets">CSS</abbr>.</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section id="quotes">
|
||||
<header>
|
||||
<h1>Quotes and Sayings</h1>
|
||||
<p>Here are some of my favourites:</p>
|
||||
<ul class="quotations">
|
||||
<li>
|
||||
<blockquote><p>If you don't write it down, it never happened.</p></blockquote>
|
||||
</li>
|
||||
<li>
|
||||
<blockquote><p>There are only 10 types of people in the world - those who understandbinary, and those who don't.</p></blockquote>
|
||||
</li>
|
||||
<li>
|
||||
<blockquote><p>If you can't find the bug, you are looking in the wrong place.</p></blockquote>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<!-- Content End -->
|
||||
</section>
|
||||
<nav id="navigation">
|
||||
<h1>Navigation</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="newton.html">Newton Building</a></li>
|
||||
<li><a href="contact.html">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer id="siteinfo">
|
||||
<address>
|
||||
<a href="mailto:G.Wilkinson2@edu.salford.ac.uk">George Wilkinson</a>
|
||||
</address>
|
||||
<p>Last Modified: Friday 20th October 2023</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Newton Building</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header>
|
||||
<h1>Workshop 5 Practice Site</h1>
|
||||
</header>
|
||||
<section id="content">
|
||||
<!-- Content Start -->
|
||||
<h1>Newton Building</h1>
|
||||
<p>
|
||||
The Newton Building contains a large amount of specialist equipment that is used by students. This includes flight simulators, wind tunnels and music studios.
|
||||
</p>
|
||||
<figure>
|
||||
<img src="src/images/flightsiminside.jpg" height="267" width="400" alt="Inside the flight simulator" />
|
||||
<figcaption>
|
||||
Inside one of the flight simulators.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<!-- Content End -->
|
||||
</section>
|
||||
<nav id="navigation">
|
||||
<h1>Navigation</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="newton.html">Newton Building</a></li>
|
||||
<li><a href="contact.html">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer id="siteinfo">
|
||||
<address>
|
||||
Created by <a href="mailto:g.wilkinson2@edu.salford.ac.uk">George Wilkinson</a>
|
||||
</address>
|
||||
<p>Last Modified 20/10/23</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,216 @@
|
||||
## Lecture 1 (13:00) - Intro to CSS
|
||||
|
||||
### Style Rules
|
||||
|
||||
- CSS associates rules with HTML elements
|
||||
- These rules govern how content of specified elements should be displayed
|
||||
- Selector - Indicates the element(s) the rule applies on
|
||||
- Declaration - Indicates how said elements should be formatted
|
||||
|
||||
#### Example 1
|
||||
|
||||
```css
|
||||
p {
|
||||
font-family: Arial;
|
||||
}
|
||||
```
|
||||
|
||||
- `p` here is the selector - it indicates all `<p>` elements should be selected.
|
||||
- `{ font-family: Arial; }` is the declaration - indicating that all selected elements should be styled in the font family of Arial.
|
||||
|
||||
#### Example 2
|
||||
|
||||
```css
|
||||
h1, h2, h3 {
|
||||
font-family: Arial;
|
||||
color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
- Selector: `h1, h2, h3` are selected
|
||||
- Declaration: `font-family: Arial; color: yellow;`. All text will be yellow Arial text.
|
||||
|
||||
### Using External CSS
|
||||
|
||||
- In the `<head>` of the HTML page, we can link a CSS file for the browser to use for the current page. It takes 3 attributes:
|
||||
- **href** - path to CSS file
|
||||
- **type** - the type of document being linked (`text/css`)
|
||||
- **rel** - relationship to the HTML files (`stylesheet`)
|
||||
|
||||
#### Example
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Using External CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="src/styles/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Content Here -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
- The `<link />` element links a **stylesheet** of type **"text/css"** at location **"src/styles/style.css"**, relative to the HTML file.
|
||||
|
||||
### Using Internal CSS
|
||||
|
||||
- We can also include CSS directly in the HTML file using the `<style>` tag.
|
||||
- This is usually done in the `<head>` element, but can also be done inline.
|
||||
- Implementing CSS this way still requires a mime type to be defined ("text/css")
|
||||
|
||||
#### Example
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Using Internal CSS</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: arial;
|
||||
background-color: rgb(185,179,175);
|
||||
}
|
||||
h1 {
|
||||
color: rgb(255,255,255);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Content Here -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Internal Vs External CSS
|
||||
|
||||
- When building a website with more than one page, external CSS should be used.
|
||||
- Allows all pages to be similar & familiar.
|
||||
- Avoids redundant code.
|
||||
- Abstracts content from style.
|
||||
- Allows entire site to be updated from a single file.
|
||||
- CSS can be cached.
|
||||
- Internal CSS is, in the majority of cases, bad practice. Under certain circumstances such as the following, it may be useful.
|
||||
- Single page sites (still bad practice)
|
||||
- One page requires additional / special rules
|
||||
|
||||
### CSS Selectors
|
||||
|
||||
| Selector | Matches | Example |
|
||||
|-|-|-|
|
||||
| Universal | All Elements | * { } |
|
||||
| Type | Element Names | h1, h2 { } |
|
||||
| Class | Class Names | h1.titlebar { } |
|
||||
| ID | ID Attr. Value | \#introduction |
|
||||
| Child | Direct Child Element | li>a { } |
|
||||
| Descendant | (Nested) Child Element | p a { } |
|
||||
| Adjacent Sibling | Direct Adjacent Element | h1+p { } |
|
||||
| General Sibling | Non-Direct Adjacent Element | h1~p { } |
|
||||
|
||||
### Cascading
|
||||
|
||||
- If two or more rules apply to the same element we must be careful to ensure which rule will take precedence
|
||||
- Last Rule
|
||||
- Specificity
|
||||
- Important
|
||||
|
||||
#### Last Rule
|
||||
|
||||
- If two selectors are identical, the last one will take precedence.
|
||||
|
||||
##### Example
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
i {
|
||||
color: green;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
i {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
In this example, `i` would be coloured blue, since it is the last selector of `i` to appear in the stylesheet.
|
||||
|
||||
#### Specificity
|
||||
|
||||
- If one selector is more specific than the others, the more specific rule will take precedence over more general ones.
|
||||
|
||||
##### Example
|
||||
|
||||
```css
|
||||
* {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
p {
|
||||
color: red
|
||||
}
|
||||
|
||||
p#intro {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
In this example, `p#intro` text would be coloured green, even though `*` (all text) is coloured blue, and `p` is coloured red. This is due to `p#intro` being a smaller scope than the rest.
|
||||
|
||||
#### Important
|
||||
|
||||
- Adding `!important` after a property value will ensure that it is used over other values, even if it should be considered less specific, or not the last.
|
||||
|
||||
### Inheritance
|
||||
|
||||
- Certain properties will be inherited by most child elements to minimise redundant code and simplify stylesheets.
|
||||
- `font-family` assigned at the `<body>` of an element will ensure any `<p>` elements have the same font family, unless specified otherwise.
|
||||
- Other properties such as `border` or `background-color` are not inherited by default, but can be forced to do so by using a property value of `inherit`.
|
||||
- `padding` is not inherited by default, but we can force this by typing `padding: inherit;`.
|
||||
|
||||
### CSS and Browsers
|
||||
|
||||
- Some browsers may not have the same CSS rules, and there are certain quirks between them.
|
||||
- ex. Firefox does not have the same scrollbar rule as chromium / IE based browsers. Chromium browsers use `::-webkit` CSS code, which Firefox does not have, instead opting for just a `scrollbar-width` and `scrollbar-color` element.
|
||||
- <https://browsershots.org> and <https://crossbrowsertesting.com> can both help to develop and debug these quirks.
|
||||
|
||||
### Defining Colour (Color)
|
||||
|
||||
#### RGB(A)
|
||||
|
||||
- We can specify an RGB(A) value with a function:
|
||||
- `rgba(102, 205, 170, 0.2)`, where the values correspond to Red, Green, Blue and Alpha (transparency).
|
||||
- All values are decimal converted to 8 bit binary positive integers, ranging from 0 to 255.
|
||||
|
||||
#### HSLA
|
||||
|
||||
- We can define colour by using HSLA too:
|
||||
- `hsla(159.612, 51%, 60%, 0.2)`, where the values correspond to Hue, Saturation, Lightness and Alpha
|
||||
|
||||
#### Hex Codes
|
||||
|
||||
- We can specify hexadecimal RGB codes this way, using 2 characters for each channel.
|
||||
- `#66CDAA32`, where `#RRGGBBAA` is used for RGBA, or `#RRGGBB` for RGB, we just convert from the decimal format of `rgba()`, to hexadecimal.
|
||||
- All values are 2-bit hex values converted to 8-bit binary positive integers, ranging from 0 to 255.
|
||||
|
||||
- `#66CDAA32` - `rgba(102, 205, 170, 0.2)` - `hsla(159.612, 51%, 60%, 0.2)`
|
||||
#### Colour Names
|
||||
|
||||
- In CSS, there are 140 hard coded colour names that can be found in several places.
|
||||
- [MDN HTML Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords)
|
||||
|
||||
### CSS Property Overview
|
||||
|
||||
#### Color
|
||||
|
||||
- This property is used to change the foreground colour (text) inside an element
|
||||
|
||||
#### Background-color
|
||||
|
||||
- This property changes the background colour inside the box. If unset, this is set to transparent by default, using the browsers colour.
|
||||
@@ -0,0 +1,135 @@
|
||||
## Lecture 1 (13:00)
|
||||
|
||||
### Box Dimensions
|
||||
|
||||
- A box is sized just big enough for its contents by default.
|
||||
- Dimensions are usually specified using either relative or absolute dimensions.
|
||||
- Most common dimensions are px, %, or ems.
|
||||
|
||||
#### Relative Dimensions / Measurements
|
||||
|
||||
- Relative length units scale better between different rendering mediums.
|
||||
|
||||
| Unit | Description |
|
||||
|-----|-------------|
|
||||
| em | Relative to the font-size of the element (2em means 2times the size of the current font) |
|
||||
| ex | Relative to the x-height of the current font (rarely used) |
|
||||
| ch | Relative to width of the "0" (zero) |
|
||||
| rem | Relative to font-size of the root element |
|
||||
| vw | Relative to 1% of the width of the viewport |
|
||||
| vh | Relative to 1% of the height of the viewport |
|
||||
| vmin | Relative to 1% of viewport's smaller dimension |
|
||||
| vmax | Relative to 1% of viewport's larger dimension |
|
||||
| % | Percentage of container dimension |
|
||||
|
||||
#### Absolute Dimensions
|
||||
|
||||
- Absolute length units are not recommended for use on screen, because screen sizes vary so much.
|
||||
- However, they can be used if the output medium is known, such as for print layout.
|
||||
|
||||
| Unit | Description |
|
||||
| - | - |
|
||||
| cm | centimetres |
|
||||
| mm | millimetres |
|
||||
| in | inches (1in = 96px = 2.54cm) |
|
||||
| px | pixels (1px = 1/96th of 1in) |
|
||||
| pt | points (1pt = 1/72 of 1in) |
|
||||
| pc | picas (1pc = 12 pt) |
|
||||
|
||||
#### Limiting Width `min-width`, `max-width`
|
||||
|
||||
- Pages can be designed to expand and shrink to fit the users screen.
|
||||
- `min-width` specifies the smallest the box can be
|
||||
- `max-width` specifies the largest the box can be
|
||||
- This is helpful to making sure all pages are legible on all devices and screen sizes.
|
||||
|
||||
#### Limiting Height `min-height`, `max-height`
|
||||
|
||||
- It is also possible to limit the height of a CSS box using `min-height` and `max-height`.
|
||||
- If content is too large for the box it can expand and look unclean.
|
||||
- By using the `overflow` property, we can specify what happens to additional content when it is larger than its bounding box.
|
||||
|
||||
#### Overflowing Content `overflow`
|
||||
|
||||
- The `overflow` property tells the browser how to deal with content that expands outside of the box.
|
||||
- It can have the following values:
|
||||
- `hidden` - additional content is discarded at render.
|
||||
- `visible` - default value. Content renders outside of the bounding box.
|
||||
- `scroll` - add a scroll bar to the box to allow additional content to be seen.
|
||||
- `clip` - similar to hidden, but forbids all types of scrolling.
|
||||
|
||||
### Box Model
|
||||
|
||||
|
||||
|
||||
- Every box has 3 available properties
|
||||
- `border` - If visible, the width of the border
|
||||
- `margin` - space between this and adjacent boxes
|
||||
- `padding` - space between border and content
|
||||
|
||||
#### Border
|
||||
|
||||
- The `border` property allows us to specify width, style and colour in one line ( in that order )
|
||||
|
||||
```css
|
||||
p {
|
||||
width: 250px;
|
||||
border: 3px dotted red;
|
||||
}
|
||||
```
|
||||
|
||||
##### Border Width `border-width`
|
||||
|
||||
- Can be defined as `thick` `medium` or `thin`, but usually in pixels.
|
||||
- Can also control the 4 borders individually:
|
||||
- `border-top-width: 2px;`
|
||||
- `border-right-width: 1px;`
|
||||
- etc..
|
||||
- Or by setting 4 values of `border-width`
|
||||
- `border-width: 2px, 1px, 1px, 2px;`
|
||||
- `border-width: top right bottom left;`
|
||||
|
||||
##### Border Style `border-style`
|
||||
|
||||
- Controls the style of the border
|
||||
- Accepts: `solid` `dotted` `dashed` `double` `groove` `ridge` `inset` `outset` `hidden` `none`.
|
||||
- Can also set style of the borders individually:
|
||||
- `border-top-style: dotted;`
|
||||
- `border-right-style: ridge;`
|
||||
- etc..
|
||||
|
||||
##### Border Colour `border-color`
|
||||
|
||||
- Can be set to the hard-coded CSS colour values, RGBA, HSLA, etc..
|
||||
- `border-color: darkcyan;`
|
||||
- Can be set individually using the same scheme as previous.
|
||||
|
||||
#### Padding
|
||||
|
||||
- The `padding` property allows us to shorthand set the values for all 4 padding properties in one line
|
||||
|
||||
```css
|
||||
padding: 10px 10px 5px 5px;
|
||||
```
|
||||
|
||||
If we only specify 2 values, they will be treated as \[top/bottom] \[left/right]
|
||||
|
||||
#### Margin
|
||||
|
||||
- Similar to `padding` and `border`, we have a shorthand property called `margin`
|
||||
|
||||
```css
|
||||
margin: 20px 20px 25px 20px;
|
||||
```
|
||||
|
||||
If we only specify 2 values, they will be treated as \[top/bottom] \[left/right]
|
||||
|
||||
#### Centering Content
|
||||
|
||||
- Box must have a specified width ( or it will fill the page )
|
||||
- Set `left-margin` and `right-margin` to `auto`.
|
||||
- Browser will set the margin to the space it could take up, equally, on each side of the box.
|
||||
|
||||
Note: Older browsers may need the property `text-align` set to `centre` too.
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
91
Semester 1/Web Development and HCI/webdev/contact.html
Executable file
91
Semester 1/Web Development and HCI/webdev/contact.html
Executable file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Contact Me</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="George Wilkinson">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="default-style" content="./src/styles/style.css">
|
||||
<link rel="stylesheet" href="./src/styles/index.css" content="text/css">
|
||||
<link rel="stylesheet" href="./src/styles/contact.css" content="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main Content-->
|
||||
<div id="main">
|
||||
|
||||
<!-- Top Bar -->
|
||||
<div id="top-bar">
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div id="toggle-navbar">
|
||||
|
||||
<input type="checkbox">
|
||||
<div class="hamburger-division"></div>
|
||||
<div class="hamburger-division"></div>
|
||||
<div class="hamburger-division"></div>
|
||||
|
||||
<ul>
|
||||
<li><a href="./index.html">Home<div></div></a></li>
|
||||
<li><a href="./projects.html">Projects<div></div></a></li>
|
||||
<li><a href="./contact.html">Contact<div></div></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Title Header -->
|
||||
<section id="title-header">
|
||||
<header>
|
||||
<h1>George Wilkinson</h1>
|
||||
<h3>Contact Me</h3>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Content Start -->
|
||||
<div id="content">
|
||||
|
||||
<!-- About Me Card -->
|
||||
<div class="card" id="contacts">
|
||||
<section class="card-header">
|
||||
<header><h2>Contact Links</h2></header>
|
||||
</section>
|
||||
<div class="card-content">
|
||||
<ul id="contact-flex">
|
||||
<li><a href="https://www.linkedin.com/in/george-wilkinson-509661249/">LinkedIn</a></li>
|
||||
<li class="flex-divider"></li>
|
||||
<li><a href="mailto:G.Wilkinson2@edu.salford.ac.uk">E-mail</a></li>
|
||||
<li class="flex-divider"></li>
|
||||
<li><a href="https://discord.com/invite/SaPudKa">Discord: Boris#0355</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card" id="message">
|
||||
<section class="card-header">
|
||||
<header><h2>Leave a Message</h2></header>
|
||||
</section>
|
||||
<div class="card-content">
|
||||
<form action="mailto:G.Wilkinson2@edu.salford.ac.uk" method="POST" enctype="text/plain">
|
||||
<input type="text" id="name" name="Name" placeholder="Full Name" minlength="2">
|
||||
<input type="email" id="email" name="Email" placeholder="E-mail Address" minlength="4">
|
||||
<textarea id="message-content" name="Message Content"></textarea>
|
||||
<input type="submit" id="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p>By George Wilkinson</p>
|
||||
<p>Date Modified: Mon 4th Dec</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
94
Semester 1/Web Development and HCI/webdev/index.html
Executable file
94
Semester 1/Web Development and HCI/webdev/index.html
Executable file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>George's Portfolio</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="George Wilkinson">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="default-style" content="./src/styles/style.css">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
|
||||
<link rel="stylesheet" href="./src/styles/index.css" content="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main Content-->
|
||||
<div id="main">
|
||||
|
||||
<!-- Top Bar -->
|
||||
<div id="top-bar">
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div id="toggle-navbar">
|
||||
|
||||
<input type="checkbox" id="hamburger-box">
|
||||
<div class="hamburger-division"></div>
|
||||
<div class="hamburger-division"></div>
|
||||
<div class="hamburger-division"></div>
|
||||
|
||||
<ul>
|
||||
<li><a href="./index.html">Home<div></div></a></li>
|
||||
<li><a href="./projects.html">Projects<div></div></a></li>
|
||||
<li><a href="./contact.html">Contact<div></div></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Title Header -->
|
||||
<section id="title-header">
|
||||
<header>
|
||||
<h1>George Wilkinson</h1>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Content Start -->
|
||||
<div id="content">
|
||||
|
||||
<!-- About Me Card -->
|
||||
<div class="card" id="about">
|
||||
<section class="card-header">
|
||||
<header><h2>About Me</h2></header>
|
||||
</section>
|
||||
<div class="card-content">
|
||||
<p>Computer Science with Cyber Security Student, at the <a href="https://salford.ac.uk">University of Salford</a> </p>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<ul>
|
||||
<li><a href="https://www.linkedin.com/in/george-wilkinson-509661249/">LinkedIn</a></li>
|
||||
<li><a href="mailto:G.Wilkinson@edu.salford.ac.uk">E-mail</a></li>
|
||||
<li><a href="./contact.html">More</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card" id="project-ov">
|
||||
<section class="card-header">
|
||||
<header><h2>Current Projects</h2></header>
|
||||
</section>
|
||||
<div class="card-content">
|
||||
<ul>
|
||||
<li>Using Proxmox to create an efficient Virtual Environment</li>
|
||||
<li>Dockerised NGINX WebServer running under Ubuntu in Proxmox</li>
|
||||
<li>Virtualised Home Assistant Automation</li>
|
||||
<li>Using Machine Learning with Frigate to enable home CCTV</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li><a href="./projects.html">More Detail</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content End -->
|
||||
<footer>
|
||||
<p>By George Wilkinson</p>
|
||||
<p>Date Modified: Mon 4th Dec</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
226
Semester 1/Web Development and HCI/webdev/projects.html
Executable file
226
Semester 1/Web Development and HCI/webdev/projects.html
Executable file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Projects</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="author" content="George Wilkinson">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="default-style" content="./src/styles/style.css">
|
||||
<link rel="stylesheet" href="./src/styles/index.css" content="text/css">
|
||||
<link rel="stylesheet" href="./src/styles/projects.css" content="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main Content-->
|
||||
<div id="main">
|
||||
|
||||
<!-- Top Bar -->
|
||||
<div id="top-bar">
|
||||
|
||||
<!-- Nav Bar -->
|
||||
<div id="toggle-navbar">
|
||||
|
||||
<input type="checkbox">
|
||||
<div class="hamburger-division"></div>
|
||||
<div class="hamburger-division"></div>
|
||||
<div class="hamburger-division"></div>
|
||||
|
||||
<ul>
|
||||
<li><a href="./index.html">Home<div></div></a></li>
|
||||
<li><a href="./projects.html">Projects<div></div></a></li>
|
||||
<li><a href="./contact.html">Contact<div></div></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Content of Top Bar -->
|
||||
<div id="top-content">
|
||||
|
||||
<!-- Title Header -->
|
||||
<section id="title-header">
|
||||
<header>
|
||||
<h1>George Wilkinson</h1>
|
||||
<h3>Projects</h3>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Start -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Card Divider / Header -->
|
||||
<div class="card-divider" id="prox-header">
|
||||
<h2>Main Proxmox Hypervisor Node</h2>
|
||||
</div>
|
||||
|
||||
<!-- Card 1 Start -->
|
||||
<div class="card" id="prox-build">
|
||||
<section class="card-header">
|
||||
<header>
|
||||
<h3>Building</h3>
|
||||
</header>
|
||||
</section>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
My main proxmox node is currently my largest project to date. I needed bulk network storage and local hypervisor compute
|
||||
that was low power, cost effective, and quiet. I chose to build on a consumer platform with an enterprise chassis,
|
||||
so I would have the best of both worlds for efficiency, form factor and cooling. Built on the last generation of
|
||||
the AM4 platform, I was able to build the compute end of the project for about £320. This included a
|
||||
<a href="https://www.amd.com/en/products/apu/amd-ryzen-7-5700g">Ryzen 5700G</a>,
|
||||
<a href="https://www.asrock.com/mb/AMD/B550%20Pro4/index.asp">ASRock B550</a>,
|
||||
<a href="https://www.corsair.com/uk/en/c/memory/ddr4-ram">2x32GB + 2x16GB Corsair DDR4</a> and a
|
||||
<a href="https://noctua.at/en/nh-l9a-am4">Noctua L9a</a>. For the chassis, I ended up using a
|
||||
<a href="https://www.supermicro.com/products/chassis/2U/?chs=825">SuperMicro CSE-825</a>, which is
|
||||
compatible with full-size ATX consumer board sizes, and has 8x3.5" hot-swap drive bays. The final piece of the project
|
||||
was storage - I needed a large amount of redundant storage with fast reads, something that isn't usually cheap. I
|
||||
managed to pick up 10 4TB
|
||||
<a href="https://documents.westerndigital.com/content/dam/doc-library/en_us/assets/public/western-digital/product/data-center-drives/ultrastar-sata-series/data-sheet-ultrastar-7k4000.pdf">HGST SAS drives</a>
|
||||
from an e-waste company with around 50k hours on each drive. Since my chassis can hold 8 at a time, this leaves me
|
||||
with 2 cold spares if any choose to fail. At the same time I bought a 2 port Mini-SAS 8087
|
||||
<a href="https://docs.broadcom.com/doc/12353331">LSI 9207-8i PCIe HBA</a> to connect the chassis backplane to my motherboard. On top
|
||||
of this hardware, I of course chose to use <a href="https://proxmox.com">Proxmox</a>, as it is a FOSS
|
||||
operating system and supports ZFS natively, unlike some alternatives like <a href="https://www.vmware.com/uk/products/esxi-and-esx.html">EXSi</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer" style="flex-direction: column;">
|
||||
<figure>
|
||||
<a target="_blank" href="./src/images/proxmox-01.jpg"><img src="./src/images/proxmox-01.jpg" alt="Server Internals"></a>
|
||||
<figcaption>fig 1. Completed Build in the rack</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 1 End -->
|
||||
|
||||
<!-- Card 2 Start -->
|
||||
<div class="card" id="prox-storage">
|
||||
<section class="card-header">
|
||||
<header><h2>Storage</h2></header>
|
||||
</section>
|
||||
<div class="card-content">
|
||||
<p>Set up in a ZFS Striped Mirror array, I achieve 16TB of usable space out of 32TB, with 1-4 drive failure depending
|
||||
on which drive fails. 50% usable space is quite the loss, but all the negatives of decreased space are made up by
|
||||
the massive random IO/s increases, giving me much higher performance for cloud storage and app performance. To give some
|
||||
reference, the highest speed I have seen is 1.6GB/s (12800Mbps), around 180x the average residential UK download speed
|
||||
( according to Virgin Media: <a href="https://www.virginmedia.com/blog/broadband/average-broadband-speed">Here</a> ).
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<figure>
|
||||
<a target="_blank" href="./src/images/proxmox-02.jpg"><img src="./src/images/proxmox-02.jpg" alt="Proxmox Host Array"></a>
|
||||
<a target="_blank" href="./src/images/proxmox-03.jpg"><img src="./src/images/proxmox-03.jpg" alt="Proxmox Host Storage"></a>
|
||||
<figcaption>fig 2. ZFS Striped Mirror Array. fig 3. Storage Displayed in Panel.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 End -->
|
||||
|
||||
<!-- Card 3 Start -->
|
||||
<div class="card" id="prox-features">
|
||||
<section class="card-header">
|
||||
<header><h2>VM List</h2></header>
|
||||
</section>
|
||||
<div class="card-content">
|
||||
<ul id="vm-list">
|
||||
<li>
|
||||
<div class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-01" >
|
||||
<label for="vm-01">OpenMediaVault ( OMV )</label>
|
||||
<div class="collapse-list-content">
|
||||
<h5>4CPU, 8GB RAM</h5>
|
||||
<p>Under OMV, I import a virtual disk for network attached storage. This is used by other servers and clients
|
||||
in my house, and in some cases outside of my house. This is due to Proxmox having a less than ideal solution
|
||||
to network sharing, and can cause instability. OMV has a clean network GUI where I can configure network shares
|
||||
and expand their size on the fly, which is useful in a dynamic environment like this.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-02" >
|
||||
<label for="vm-02">Ubuntu Server ( Docker )</label>
|
||||
<div class="collapse-list-content">
|
||||
<h5>4CPU, 30GB RAM</h5>
|
||||
<p>Under this Ubuntu VM, I run a single node Docker stack for ~50 containers, including</p>
|
||||
<ul id="container-list">
|
||||
<li>NGINX WebServer & Proxy Manager<br>For hosting web applications through a reverse proxy at a datacentre.</li>
|
||||
<li>Authentik<br>Provides Proxy, OAuth2 and LDAP configuration for web applications.</li>
|
||||
<li>Gitea<br>Hosts a personal Git repository for projects.</li>
|
||||
<li>Grafana & InfluxDB<br>Provides real-time monitoring and logging of device metrics.</li>
|
||||
<li>Immich<br>Google Photos alternative, entirely self-hosted and open source.</li>
|
||||
<li>IPv6NAT<br>Provides an address translation service to allow for a fully IPv6 docker stack.</li>
|
||||
<li>VaultWarden<br>Fully self-hosted, lightweight password manager.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-03" >
|
||||
<label for="vm-03">Home Assistant OS</label>
|
||||
<div class="collapse-list-content">
|
||||
<h5>2CPU, 4GB RAM</h5>
|
||||
<p>With HaOS, I have set up integrations with several IoT devices on my network, such as TP-Link Tapo bulbs, light strips, etc.
|
||||
I am also working on integration with Grafana, Frigate & CCTV cameras to provide a centralised app to control & monitor
|
||||
smart home devices. I used to run Home Assistant dockerised on my Docker VM, but I found the VM was much better supported
|
||||
and stable.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-04" >
|
||||
<label for="vm-04">Proxmox Backup Server ( PBS ) ( In Progress )</label>
|
||||
<div class="collapse-list-content">
|
||||
<h5>1CPU, 4GB RAM</h5>
|
||||
<p>While I already backup my Virtual Machines to an external server, using some storage on a friend's Proxmox node,
|
||||
using PBS locally, I can backup & snapshot my Virtual Machines to a different drive on my machine. This isn't ideal from
|
||||
a 3-2-1 perspective but having frequent local rolling backups can be incredibly useful if anything were to go wrong inside
|
||||
the VM itself. I am currently working on implementing a good local storage solution to store my images, so for now it is
|
||||
turned off.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="collapse-list">
|
||||
<input type="checkbox" name="collapse-list-item" id="vm-05" >
|
||||
<label for="vm-05">Windows Server 2019</label>
|
||||
<div class="collapse-list-content">
|
||||
<h5>4CPU, 4GB RAM</h5>
|
||||
<p>
|
||||
Using an evaluation release of Windows Server, I use this to perform any operations / run any programs needed on this node
|
||||
that cannot be done on linux. This is rare, but useful when required. I have also used this in the past to have a graphical
|
||||
Windows environment outside of my network to configure network settings, since my Proxmox panel is behind a reverse proxy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<figure>
|
||||
<a target="_blank" href="./src/images/proxmox-04.jpg"><img src="./src/images/proxmox-04.jpg" alt="Proxmox Host Panel"></a>
|
||||
<figcaption>fig 4. VM List & Host Summary in Panel.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 End -->
|
||||
</div>
|
||||
<!-- Content End -->
|
||||
</div>
|
||||
<footer>
|
||||
<p>By George Wilkinson</p>
|
||||
<p>Date Modified: Mon 4th Dec</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-01.jpg
Executable file
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-01.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-01.jpg~
Executable file
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-01.jpg~
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-02.jpg
Executable file
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-02.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-02.jpg~
Executable file
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-02.jpg~
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-02.png~
Executable file
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-02.png~
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-03.jpg
Executable file
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-03.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-04.jpg
Executable file
BIN
Semester 1/Web Development and HCI/webdev/src/images/proxmox-04.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
71
Semester 1/Web Development and HCI/webdev/src/styles/contact.css
Executable file
71
Semester 1/Web Development and HCI/webdev/src/styles/contact.css
Executable file
@@ -0,0 +1,71 @@
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
input, textarea {
|
||||
background-color: #2e3440;
|
||||
color: #eceff4;
|
||||
border: 2px solid #3b425266;
|
||||
box-shadow: 0 2px 5px 0 #2e3440;
|
||||
}
|
||||
#submit:hover {
|
||||
background-color: #4c566a;
|
||||
}
|
||||
.flex-divider {
|
||||
background-color: #eceff4;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: light ) {
|
||||
input, textarea {
|
||||
background-color: #d8dee9;
|
||||
color: black;
|
||||
border: 2px solid #7f899d;
|
||||
box-shadow: 0 1px 2px 0 #545d6f;
|
||||
}
|
||||
#submit:hover {
|
||||
background-color: #eeeeff;
|
||||
}
|
||||
.flex-divider {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
#contact-flex {
|
||||
text-align: center;
|
||||
padding: 0 10px 0 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#contact-flex li {
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.flex-divider {
|
||||
width: 60%;
|
||||
height: 1px;
|
||||
margin: 5% auto 5% auto;
|
||||
}
|
||||
|
||||
.card-content input, .card-content textarea {
|
||||
align-content: center;
|
||||
max-width: 80%;
|
||||
min-width: 80%;
|
||||
margin: auto;
|
||||
border-radius: 0.7em;
|
||||
padding: 0 0.5em;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
#submit {
|
||||
width: fit-content !important;
|
||||
}
|
||||
|
||||
#submit:hover {
|
||||
transform: scale(1.05) !important;
|
||||
transition: transform 0.75s cubic-bezier(0.1,-0.2,0.05,1.2);
|
||||
transition-duration: 0.75s;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
352
Semester 1/Web Development and HCI/webdev/src/styles/index.css
Executable file
352
Semester 1/Web Development and HCI/webdev/src/styles/index.css
Executable file
@@ -0,0 +1,352 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
min-height: 100% !important;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #4c566a;
|
||||
color: #eceff4;
|
||||
}
|
||||
* :link {
|
||||
color: #aab;
|
||||
}
|
||||
#toggle-navbar a, .card, .card-divider, .collapse-list label {
|
||||
border: 2px solid #3b425266;
|
||||
background-color: #434c5e;
|
||||
box-shadow: 0 2px 5px 0 #2e3440;
|
||||
}
|
||||
#toggle-navbar a:hover {
|
||||
background-color: #4c566a;
|
||||
}
|
||||
a, a:link, a:visited, a:focus {
|
||||
color: #ddddff;
|
||||
}
|
||||
#toggle-navbar a:link, a:visited, a:focus {
|
||||
color: white;
|
||||
}
|
||||
#toggle-navbar div {
|
||||
background: #88c0d0;
|
||||
}
|
||||
ul a div {
|
||||
background-color: #2e3440;
|
||||
}
|
||||
#toggle-navbar a ~ div {
|
||||
box-shadow: 0 0 5px 5px #434c5e;
|
||||
}
|
||||
.collapse-list label:hover,
|
||||
.collapse-list label:focus {
|
||||
background: #4c566a;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background-color: #e5e9f0;
|
||||
color: #2e3440;
|
||||
}
|
||||
* :link {
|
||||
color: #5e81ac;
|
||||
}
|
||||
#toggle-navbar a, .card, .card-divider, .collapse-list label {
|
||||
border: 2px solid #7f899d;
|
||||
background-color: #d8dee9;
|
||||
box-shadow: 0 1px 2px 0 #545d6f;
|
||||
}
|
||||
#toggle-navbar a:hover {
|
||||
background-color: #eeeeff;
|
||||
}
|
||||
a, a:link, a:visited, a:focus {
|
||||
color: #111133;
|
||||
}
|
||||
#toggle-navbar a:link, a:visited, a:focus {
|
||||
color: black;
|
||||
}
|
||||
#toggle-navbar div {
|
||||
background: #5e81ac;
|
||||
}
|
||||
#toggle-navbar a ~ div {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.collapse-list label:hover,
|
||||
.collapse-list label:focus {
|
||||
background: #eeeeff;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 3em;
|
||||
width: 100%;
|
||||
font-size: 75%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
margin: 3px 10px;
|
||||
}
|
||||
|
||||
footer p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 1rem;
|
||||
padding: 2%;
|
||||
margin: 0.5em;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.card header {
|
||||
display: inline-block;
|
||||
margin: 1em auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card header h2 {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card footer {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#top-bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
height: 25%
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 10px;
|
||||
column-gap: 2em;
|
||||
justify-content: center;
|
||||
height: 75%;
|
||||
overflow: auto;
|
||||
margin-top: 5vh;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
#title-header {
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#toggle-navbar {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: auto;
|
||||
z-index: 1;
|
||||
margin: auto;
|
||||
margin-top: 5vw;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#toggle-navbar a:hover > div {
|
||||
transform: scaleX(2.5);
|
||||
transform-origin: 0% 0%;
|
||||
transition: transform 1s ease;
|
||||
|
||||
transition-duration: 1s;
|
||||
}
|
||||
|
||||
#toggle-navbar a:hover {
|
||||
transform: scale(1.03) !important;
|
||||
transition: transform 0.5s cubic-bezier(0.1,-0.2,0.05,1.2);
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
#toggle-navbar li {
|
||||
outline: none;
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
padding: 6px;
|
||||
height: fit-content;
|
||||
line-height: 2rem;
|
||||
width: 75%;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#toggle-navbar input {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#toggle-navbar div {
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 4px;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hamburger-division {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#toggle-navbar a ~ div {
|
||||
max-width: 90% !important;
|
||||
min-width: 10% !important;
|
||||
bottom: 5px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
#toggle-navbar ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.8em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
transform-origin: 0% 0%;
|
||||
transform: translate(0, -400%);
|
||||
transition: transform 0.5s cubic-bezier(0.77,-0.2,0.02,1.2);
|
||||
}
|
||||
|
||||
#toggle-navbar a
|
||||
{
|
||||
width: 100%;
|
||||
border-radius: 0.5em;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#toggle-navbar input:checked ~ ul
|
||||
{
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#toggle-navbar a:active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
padding: 1% 1% 1% 5%;
|
||||
max-width: 80vw;
|
||||
margin: 0.5em;
|
||||
min-width: 80%;
|
||||
line-height: 2rem;
|
||||
max-height: 10rem;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
bottom: 0px;
|
||||
margin: auto;
|
||||
min-height: 10%;
|
||||
}
|
||||
|
||||
.card-footer ul {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.card-footer li, .card-footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: scale(1.01);
|
||||
transition-duration: 0.2s;
|
||||
transform-box: border-box;
|
||||
}
|
||||
|
||||
/* Desktop */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.card {
|
||||
min-width: 20vw;
|
||||
max-width: 20vw;
|
||||
}
|
||||
#toggle-navbar li {
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* For Tablet View */
|
||||
@media screen and (min-width: 768px) and (max-width: 1024px) {
|
||||
.card {
|
||||
min-width: 50vw;
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Portrait */
|
||||
@media screen and (max-width: 480px) and (orientation: portrait) {
|
||||
.card {
|
||||
min-width: 85vw;
|
||||
max-width: 85vw;
|
||||
}
|
||||
#toggle-navbar a {
|
||||
font-size: 3.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Landscape */
|
||||
@media screen and (max-width: 1024px) and (orientation: landscape) {
|
||||
.card {
|
||||
min-width: 50vw;
|
||||
max-width: 50vw;
|
||||
}
|
||||
#top-bar {
|
||||
height: 10%;
|
||||
}
|
||||
#content {
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
67
Semester 1/Web Development and HCI/webdev/src/styles/projects.css
Executable file
67
Semester 1/Web Development and HCI/webdev/src/styles/projects.css
Executable file
@@ -0,0 +1,67 @@
|
||||
.card {
|
||||
max-width: 40vw !important;
|
||||
}
|
||||
|
||||
#card-content {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 1rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin: auto;
|
||||
font-size: 0.75rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#vm-list {
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapse-list > input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: -100vw;
|
||||
}
|
||||
|
||||
.collapse-list .collapse-list-content {
|
||||
overflow-y: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.collapse-list > input[type="checkbox"]:checked ~ .collapse-list-content {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.collapse-list {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.collapse-list label {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.2em;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#container-list li {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
Reference in New Issue
Block a user