added fonts and new CSS layout
This commit is contained in:
parent
41316ae2df
commit
16d319a514
2 changed files with 74 additions and 7 deletions
|
@ -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; }
|
||||
|
|
15
index.html
15
index.html
|
@ -12,7 +12,7 @@
|
|||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body class="style-1">
|
||||
<h1>Digital Empowerment</h1>
|
||||
<p>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.</p>
|
||||
|
@ -22,14 +22,15 @@
|
|||
<div class='app1'>
|
||||
<p class='name'>Take charge!</p>
|
||||
<div class='colors'>
|
||||
<button onclick="changeColor('blue')">Change to blue</button>
|
||||
<button onclick="changeColor('red')">Change to red</button>
|
||||
<button onclick="changeColor('green')">Change to green</button>
|
||||
<button onclick="changeColor('blue')">Change to <span class="blue">blue</span></button>
|
||||
<button onclick="changeColor('red')">Change to <span class="red">red</span></button>
|
||||
<button onclick="changeColor('green')">Change to <span class="green">green</span></button>
|
||||
<button onclick="changeColor('black')">Change to <span class="black">black</span></button>
|
||||
</div>
|
||||
<div class='fonts'>
|
||||
<button onclick="changeWeight()">Change to bold</button>
|
||||
<button onclick="changeStyle()">Change to italics</button>
|
||||
<button onclick="changeVariant()">Change to small capital letters</button>
|
||||
<button onclick="changeWeight()">Change to <span class="bold">bold</span></button>
|
||||
<button onclick="changeStyle()">Change to <span class="italic">italics</span></button>
|
||||
<button onclick="changeVariant()">Change to <span class="small-caps">small capital letters</span></button>
|
||||
</div>
|
||||
<script src="js/script.js"></script>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue