From 16d319a514edaf0ec4735363ad100dae5e8beb36 Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Thu, 27 Jul 2023 14:49:55 +1200 Subject: [PATCH] added fonts and new CSS layout --- css/style.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 15 ++++++------ 2 files changed, 74 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 7ed5ccb..b502d21 100644 --- a/css/style.css +++ b/css/style.css @@ -1 +1,67 @@ /* Style sheet */ + +@font-face { + font-family: "Lobster"; + src: url('fonts/Lobster/Lobster-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: "Roboto"; + src: + url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'), + url('fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype'), + url('fonts/Roboto/Roboto-Black.ttf') format('truetype'), + url('fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype'), + url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'), + url('fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'), + url('fonts/Roboto/Roboto-Light.ttf') format('truetype'), + url('fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype'), + url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'), + url('fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype'), + url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); +} + +body.style-1 { + font-family: "Roboto"; + width: 80%; + margin: auto; +} + +h1 { font-family: "Lobster"; } + +p { color: #444; } + +a { text-decoration: none; } + +button { + margin: 4px 0px; + padding: 8px; + background-color: #3BAD5F; + color: #fff; + border-radius: 10px; + border: 0; + font-family: "Roboto"; + font-size: 120%; +} + +button:hover { box-shadow: 6px 6px; } + +.name { + font-size: 200%; + padding: 12px; + background-color: #eee; + border: thin #ededed; + display: block; + clear: both; + margin-bottom: 20px; + font-family: "Lobster"; +} + +.blue { color: blue; } +.red { color: red; } +.green { color: green; } +.black { color: black; } + +.bold { font-weight: bold; } +.italic { font-style: italic; } +.small-caps { font-variant: small-caps; } diff --git a/index.html b/index.html index 2ac541c..1dba1b1 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ - +

Digital Empowerment

The purpose of these sessions is to show Chch South Karamata learners that they don't have to be mere riders in their digital journey - they can become drivers.

@@ -22,14 +22,15 @@

Take charge!

- - - + + + +
- - - + + +