<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./css/fabric-icons.css" /> -->
<link rel="stylesheet" href="./css/fabric-icons-inline.css" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<div class="webpart">
<div class="webpart-container">
<h2>Services for Staff</h2>
<div class="left-block">
<ul class="categories-list">
<li class="list-item">
<span class="icon">
<img src="imgs/Building-topic-icon_v02.svg" height="24" width="24" />
</span> <span class="label">Office, furniture and supplies</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--Door"></span> <span class="label">Other building issues</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--System"></span> <span class="label">IT</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--CellPhone"></span> <span class="label">Telephony</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--Print"></span> <span class="label">Printing and stationery</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--Video360Generic"></span> <span class="label">Digitalisation</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--Shield"></span> <span class="label">Security</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--ConstructionCone"></span> <span class="label">Safety</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--Breakfast"></span> <span class="label">Food and catering</span>
</li>
<li class="list-item">
<span class="icon">
<img src="imgs/EMAS-icon-v02.svg" height="24px" width="24px" />
</span> <span class="label">EMAS</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--Calendar"></span> <span class="label">Events</span>
</li>
<li class="list-item">
<span class="ms-Icon ms-Icon--Mail"></span> <span class="label">Postal services</span>
</li>
</ul>
</div>
<div class="right-block">
<div class="cat-list-block active">
<h3> Office, furniture and supplies</h3>
<ul>
<li class="list-item"><a href="#">Arrival of new colleague</a></li>
<li class="list-item"><a href="#">Chairs</a></li>
<li class="list-item"><a href="#">Cupboard</a></li>
<li class="list-item"><a href="#">Decoration</a></li>
<li class="list-item"><a href="#">Ergonomics</a></li>
<li class="list-item"><a href="#">Hanging pictures</a></li>
<li class="list-item"><a href="#">Moving (boxes)</a></li>
<li class="list-item"><a href="#">Order of office supplies (Lyreco)</a></li>
</ul>
<span class="watermark"><img src="imgs/Building-topic-icon_v01.svg" /></span>
</div>
<div class="cat-list-block">
<h3>Other building issues</h3>
<ul>
<li class="list-item"><a href="#">Access to the European Parliament</a></li>
<li class="list-item"><a href="#">Lights</a></li>
<li class="list-item"><a href="#">Opening hours</a></li>
<li class="list-item"><a href="#">Blinds / Curtains</a></li>
<li class="list-item"><a href="#">Cleaning - offices</a></li>
<li class="list-item"><a href="#">Cleaning - windows</a></li>
<li class="list-item"><a href="#">Heating</a></li>
<li class="list-item"><a href="#">Keys</a></li>
<li class="list-item"><a href="#">Parking - location</a></li>
<li class="list-item"><a href="#">Water leak</a></li>
<li class="list-item"><a href="#">Buildings practical informaiton</a></li>
<li class="list-item"><a href="#">Plants and gardens</a></li>
<li class="list-item"><a href="#">Toilets</a></li>
<li class="list-item"><a href="#">Parking - rules</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--Door"></span>
</div>
<div class="cat-list-block">
<h3>IT</h3>
<ul>
<li class="list-item"><a href="#">Getting started - IT Guide</a></li>
<li class="list-item"><a href="#">How to contact the IT Helpdesk</a></li>
<li class="list-item"><a href="#">Manage your mobile devices</a></li>
<li class="list-item"><a href="#">Change your password</a></li>
<li class="list-item"><a href="#">Setup Multifactor Authentication</a></li>
<li class="list-item"><a href="#">Deal with suspicious e-mails</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--System"></span>
</div>
<div class="cat-list-block">
<h3>Telephony</h3>
<ul>
<li class="list-item"><a href="#">Getting started – Telephone Guide</a></li>
<li class="list-item"><a href="#">Forward all calls</a></li>
<li class="list-item"><a href="#">Phone from your PC using Jabber</a></li>
<li class="list-item"><a href="#">Request a service phone</a></li>
<li class="list-item"><a href="#">Request a service code</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--CellPhone"></span>
</div>
<div class="cat-list-block">
<h3>Printing and stationery</h3>
<ul>
<li class="list-item"><a href="#">Binding</a></li>
<li class="list-item"><a href="#">Business cards</a></li>
<li class="list-item"><a href="#">High volume printing</a></li>
<li class="list-item"><a href="#">Paper for photocopier</a></li>
<li class="list-item"><a href="#">Printing on demand</a></li>
<li class="list-item"><a href="#">Stationery</a></li>
<li class="list-item"><a href="#">Printing on wheels</a></li>
<li class="list-item"><a href="#">Other services</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--Print"></span>
</div>
<div class="cat-list-block">
<h3>Digitalisation</h3>
<ul>
<li class="list-item"><a href="#">Digitalisation</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--Video360Generic"></span>
</div>
<div class="cat-list-block">
<h3>Security</h3>
<ul>
<li class="list-item"><a href="#">Access badge - lost</a></li>
<li class="list-item"><a href="#">Access badge - new</a></li>
<li class="list-item"><a href="#">Accreditation policy</a></li>
<li class="list-item"><a href="#">Lost and found</a></li>
<li class="list-item"><a href="#">Parking - rules</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--Shield"></span>
</div>
<div class="cat-list-block">
<h3>Safety</h3>
<ul>
<li class="list-item"><a href="#">Evacuation policy</a></li>
<li class="list-item"><a href="#">Fire stewards</a></li>
<li class="list-item"><a href="#">First aid</a></li>
<li class="list-item"><a href="#">Reduced mobility</a></li>
<li class="list-item"><a href="#">Safety procedures for events</a></li>
<li class="list-item"><a href="#">Suspicious items or behaviour</a></li>
<li class="list-item"><a href="#">Theft</a></li>
<li class="list-item"><a href="#">Persons with reduced mobility</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--ConstructionCone"></span>
</div>
<div class="cat-list-block">
<h3>Food and catering</h3>
<ul>
<li class="list-item"><a href="#">Canteen - menu</a></li>
<li class="list-item"><a href="#">Canteen - opening hours</a></li>
<li class="list-item"><a href="#">Good food Label</a></li>
<li class="list-item"><a href="#">Vending machines</a></li>
<li class="list-item"><a href="#">Water fountains</a></li>
<li class="list-item"><a href="#">Food waste</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--Breakfast"></span>
</div>
<div class="cat-list-block">
<h3>EMAS</h3>
<ul>
<li class="list-item"><a href="#">Biodiversity</a></li>
<li class="list-item"><a href="#">Carbon footprint indicators</a></li>
<li class="list-item"><a href="#">Ecodynamic Enterprise Label</a></li>
<li class="list-item"><a href="#">EMAS action plan</a></li>
<li class="list-item"><a href="#">EMAS indicators</a></li>
<li class="list-item"><a href="#">Energy consumption</a></li>
<li class="list-item"><a href="#">Energy performance</a></li>
<li class="list-item"><a href="#">Paper consumption</a></li>
<li class="list-item"><a href="#">Waste</a></li>
<li class="list-item"><a href="#">Mobility</a></li>
<li class="list-item"><a href="#">Good Food Label</a></li>
</ul>
<span class="watermark"><img src="imgs/EMAS-icon-v01.svg" /></span>
</div>
<div class="cat-list-block">
<h3>Events</h3>
<ul>
<li class="list-item"><a href="#">Organising an event</a></li>
<li class="list-item"><a href="#">Urgent request</a></li>
<li class="list-item"><a href="#">Events - Rules</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--Calendar"></span>
</div>
<div class="cat-list-block">
<h3>Postal services</h3>
<ul>
<li class="list-item"><a href="#">Envelopes</a></li>
<li class="list-item"><a href="#">Express courier (DHL)</a></li>
<li class="list-item"><a href="#">Postage</a></li>
<li class="list-item"><a href="#">Mailing</a></li>
</ul>
<span class="watermark ms-Icon ms-Icon--Mail"></span>
</div>
</div>
</div>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
Comments