@import url('https://fonts.googleapis.com/css?family=Raleway|&display=swap');
/* === WHY?
':root' Make it easier to change colours and menu-speed later on.
'*' To make sure I'm working off a "clean slate".
'body' Provide a consistent font and colour experiennce throughout the website (look-and-feel).
'.container' and 'showcase' creating a consistent look-and-feel.
=== */
/* --- Style Variables: Colours and Hamburger Menu-speed.--- */
:root {
--primary-color: rgba(13, 110, 139, 0.75);
--overlay-color: rgba(13, 110, 139 , 0.75); /* Same color used throughout, except for modal background. */
--main-font-color: #ffffff;
--menu-speed: 0.75s;
}
/* --- "Reset!" and Set Basic Parameters --- */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
/* --- Using the Raleway font throughout the website as it suits the emotional look-and-feel I'm looking for. --- */
body {
font-family: 'Raleway', sans-serif;
line-height: 1.4;
font-size: 90%; /* Course menus fit the samllest screens (Apple iPhone 5) */
}
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
.showcase {
color: #ffffff;
height: 100vh;
position: relative;
background: rgba(13, 110, 139 , 0.30); /* Make the white text easier to read over the background image. */
}
/* === WHY?
Image elicits an emotion of success after a hard slog. "Feel-good" image = let me help you become equally successful and happy!
=== */
/* --- Background Image from Pixabay (free to use)
https://cdn.pixabay.com/photo/2019/01/27/22/32/mountains-3959204_1280.jpg
Elements: CONTENT and BACKGROUND set the "Professional Training and Development Success" feeling Background Image.
The remaining elements ensure the image coveras the whole viewport and that the image is behind (z-index: -1) all other elements.
--- */
body {
content: '';
background: url("../images/MountainsSuccess.webp");
/* --- Broke out the background: elements to test/ensure they worked as planned. Also adds clarity. Added support for different browsers. --- */
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: rgba(13, 110, 139, 0.75); /* For Safari browsers as they don't support background images. */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: background-image 1s ease-in-out; /* Added to minimise background image "flickering" */
}
/* --- Flexbox: Center Text Vertically and Horizontally --- */
.showcase .showcase-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
/* --- Grid Layout for all pages, (using Flexbox too), and the Footer is all Grid in any case. --- */
/* Create three equal columns that float next to one another */
.column {
float: left;
width: 100%;
padding: 10px;
margin: 10px;
color: #ffffff;
background-color: rgba(13, 110, 139, 0.75); /* 0.60 */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* === WHY?
Section Styling
'.section a', '.container', 'fixed-footer', and 'footer...' to create a consistent contact experience, and look-and-feel throughout the website.
Create a clean look, that's easy to comprehend and use.
=== */
/* --- Making the Navigation Links visible against the #999999 (grey) background of the Fixed Navigation --- */
section a {
color: #ffffff;
text-decoration: none; /* Remove underline from links = HTML style="text-decoration:none" */
}
/* === Fixed Footer with Scrollable Body === */
.container {
width: 100%;
}
/* --- Fixed Footer with [display: grid] and [grid-template-columns: 1fr 1fr 1fr] to set Footer Elements in a row. --- */
.fixed-footer {
width: 100%;
position: fixed;
background: rgba(13, 110, 139 , 0.75);
padding: 10px 0;
color: #ffffff;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
bottom: 0; /* Anchors Footer to the bottom of the display/viewport */
}
.footer {
margin: 0;
text-align: center;
}
/* --- Making the Navigation Links visible against the #999999 (grey) background of the Fixed Navigation --- */
footer a {
color: #ffffff;
font-size: 110%;
padding: 0px 10px;
text-decoration: none; /* Remove underline from links = HTML style="text-decoration:none" */
}
footer a i:hover {
/* color: #30e0fc; */
/* zoom: 120%; */
transform: scale(1.5); /* transform: scale() works on all browsers. zoom: doesn't work on Firefox. Also, zoom: ruins the footer. */
}
/* --- Add padding to the Fontawesome icons for the Left and Right Footer elements. It keeps the icon layout consisten across smaller devices. --- */
.fa-calendar,
.fa-graduation-cap, .fa-location-arrow {
padding-right: 20px;
padding-left: 20px;
}
/* === WHY?
Adding tool-tips to clarify the fixed-footer elements (and to show off a nifty and useful CSS 3 feature).
=== */
/* --- Tool-tip on Hover by Kevin Powell: https://www.youtube.com/watch?v=xoRbkm8XgfQ HTML --- */
i[tool-tip] {
position: relative;
}
i[tool-tip]::after {
content: attr(tool-tip);
display: block;
position: absolute;
background-color: rgb(13, 110, 139);
padding: 1em 2em;
color: white;
font-size: 0.75em;
bottom: 0;
left: -10px; /* Works on all tested displays (Chrome --> Inspect and FireFox RDM) and devices. The Tool-Tips are fully visible. */
white-space: normal;
transform: scale(0);
transition: transform ease-out 250ms, bottom ease-out 250ms;
font-family: 'Raleway', sans-serif;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
i[tool-tip]:hover::after {
transform: scale(1);
bottom: 200%;
}
/* === WHY?
Initially planned to use the hamburger-menu only for mobile devices, and a standard fixed navigation-bar at the top.
Using the hamburger-menu for all displays and devices is consistent, and gives the website a cleaner look, and makes navigation easier.
=== */
/* === MENU.CSS now incorporated into STYLE.CSS as it's easier to edit one file for certain functions and elements than two files. === */
/* === Hamburger-menu Style based on https://www.youtube.com/watch?v=DZg6UfS5zYg by Traversy Media (HTML 5 and CSS 3, NO JavaScript) === */
/* --- Make sure Hamburger-menu is fixed to the top right corner even if/when page scrolls. It's on top with z-index: 1;, on top of the background image and text. --- */
.menu-wrap {
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
/* --- Hamburger-menu Checkbox Toggle Styling, ensuring it's fixed to the top right corner even if/when the page scrolls. It's on top of the background, 'z-index: 2;' --- */
.menu-wrap .toggler {
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0; /* Hides checkbox */
}
/* --- Hamburger-menu Square --- */
.menu-wrap .hamburger {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary-color);
display: flex; /* Aligning Hamburger-menu Square to center = display: flex, align-items: center;, justify-content: center; */
align-items: center;
justify-content: center;
}
/* --- Hamburger line targeting . Creating the 1st of 3 Hamburger lines. --- */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease; /* Smooth transition */
}
/* --- Hamburger lines (2nd (Top) and 3rd (Bottom) ) - Top & Bottom --- */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: ''; /* Won't work without this element, added before (div::before) and after (div::after) the initial element (). */
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* --- Moves line down from on top of the 2nd line (3rd Hamburger Line) --- */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* --- Hamburger-Menu States: Checked, Hover, Rotate --- */
/* --- Toggler Animation when clicked --- */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* --- When clicked/toggled, turns lines into an 'X' --- */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* --- Rotate on hover when checked, rotating 'X' --- */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/* --- Show Hamburger-menu when toggler is checked and target (~) .menu --- */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1); /* Scaled up to 1 when Hamburger-menu is clicked. */
transition-duration: var(--menu-speed);
}
/* --- Show menu items --- */
.menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
/* --- Center the menu on the page when open. HTML -->