File: /home/wbwebdes/domains/ms.wb-webdesign.com/public_html/index.html0
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WB Webdesign Microsoft Portaal | Snelle toegang tot uw Microsoft cloud producten | WB Webdesign</title>
<meta name="description"
content="Krijg direct toegang tot Outlook, Word, Excel, Teams, OneDrive en meer via het Microsoft Portaal van WB Webdesign. Alles op één centrale plek.">
<link rel="icon" href="https://img.icons8.com/?size=100&id=g7UKWvv49CoI&format=png&color=000000" type="image/x-icon">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f6f8;
margin: 0;
padding: 0;
text-align: center;
}
header {
background-color: #8154eb;
color: white;
padding: 2rem 1rem 1rem 1rem;
}
header img {
max-height: 60px;
margin-bottom: 1rem;
}
h1 {
margin-bottom: 0.5rem;
}
p {
max-width: 600px;
margin: 0 auto;
}
.login-button {
background-color: #8154eb;
color: white;
padding: 1rem 2rem;
font-size: 1.2rem;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 2rem auto;
display: inline-block;
text-decoration: none;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
max-width: 1000px;
margin: 2rem auto;
padding: 0 1rem;
}
.tile {
background-color: white;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}
.tile:hover {
transform: scale(1.05);
}
.tile img {
width: 48px;
height: 48px;
margin-bottom: 0.5rem;
}
.tile-title {
font-size: 1rem;
color: #333;
text-decoration: none;
}
footer {
background-color: #eee;
color: #000;
padding: 2rem 1rem;
font-size: 0.95rem;
font-weight: 500;
}
@media (max-width: 500px) {
.login-button {
width: 80%;
font-size: 1rem;
}
.tiles {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
</style>
</head>
<body>
<header>
<img src="https://cdn.wb-webdesign.com/uploads/huisstijl/transparant-wit-logo.svg" alt="WB Webdesign logo">
<h1>Welkom bij het Microsoft Portaal</h1>
<p>Gebruik dit portaal om snel en eenvoudig toegang te krijgen tot jouw Microsoft cloud-producten.</p>
</header>
<a class="login-button" href="https://login.microsoftonline.com" target="_blank">Login bij Microsoft Online</a>
<div class="tiles">
<a href="https://outlook.office.com" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=ut6gQeo5pNqf&format=png&color=000000" alt="Outlook">
<div class="tile-title">Outlook</div>
</a>
<a href="https://excel.cloud.microsoft/" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=UECmBSgBOvPT&format=png&color=000000" alt="Excel">
<div class="tile-title">Excel</div>
</a>
<a href="https://word.office.com" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=pGHcje298xSl&format=png&color=000000" alt="Word">
<div class="tile-title">Word</div>
</a>
<a href="https://powerpoint.office.com" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=ifP93G7BXUhU&format=png&color=000000" alt="PowerPoint">
<div class="tile-title">PowerPoint</div>
</a>
<a href="https://onedrive.cloud.microsoft" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=PnENrLMMW4eV&format=png&color=000000" alt="OneDrive">
<div class="tile-title">OneDrive</div>
</a>
<a href="https://teams.microsoft.com" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=zQ92KI7XjZgR&format=png&color=000000" alt="Teams">
<div class="tile-title">Teams</div>
</a>
<a href="https://outlook.office.com/calendar/view/week" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=kzZctsAbGur5&format=png&color=000000" alt="Agenda">
<div class="tile-title">Agenda</div>
</a>
<a href="https://to-do.microsoft.com" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=HpPqCqynotVp&format=png&color=000000" alt="To Do">
<div class="tile-title">To Do</div>
</a>
<a href="https://m365.cloud.microsoft/launch/OneNote/" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=yTtdbCPCXVuI&format=png&color=000000" alt="OneNote">
<div class="tile-title">OneNote</div>
</a>
<a href="https://domain.wb-webdesign.com" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=bVAf0kiXtJhO&format=png&color=000000" alt="SharePoint">
<div class="tile-title">SharePoint</div>
</a>
<a href="https://planner.cloud.microsoft" target="_blank" class="tile">
<img src="https://planner.cloud.microsoft/content/161910810130_images/PlannerLogo100x100.png" alt="Planner">
<div class="tile-title">Planner</div>
</a>
<a href="https://support.wb-webdesign.com" target="_blank" class="tile">
<img src="https://img.icons8.com/?size=100&id=0URHMFHwQRGo&format=png&color=000000" alt="Support">
<div class="tile-title">Support</div>
</a>
</div>
<footer>
<p>Voor meer software kun je terecht via jouw Microsoft-account. Daar vind je alle beschikbare diensten.</p>
<p>Voor alle services behalve Outlook, Agenda en To Do is een Microsoft 365-abonnement vereist.</p>
</footer>
</body>
</html>