added website

This commit is contained in:
Ryan Bakkes 2021-04-15 01:53:58 +02:00
parent d4df7d650b
commit b03422e292
5 changed files with 130 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>KrabbyHome</title>
<link rel="shortcut icon" href="Icon2.ico"/>
<link rel="stylesheet" href="Styles.css"/>
<div class="logo-row">
<img src="kksign.png" alt="logo" class="logo">
</div>
</head>
<!--Hier kan je alles aan en uit zetten-->
<body>
<div class="grid-container">
<div class="box a">
<h1 class="name" >Karen</h1>
<div class="button">Ambient lights</div>
</div>
<!--Deze laat informatie zien als temperatuur enzo-->
<div class="box b">
<h1 class="name" >Secret formula</h1>
<ul class="text">
<li>Time: 1:17am</li>
<li>Temperature: 19.9 C</li>
<li>No Motion Detected</li>
</ul>
</div>
<!--Taken voor je dag-->
<div class="box c">
<h1 class="name" >To-do list</h1>
<ul class="text">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Milk</li>
<li>Milk</li>
<li>Milk</li>
</ul>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,75 @@
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.logo-row, .name {
text-align: center;
}
.logo {
width: 190px;
height: 190px;
text-align: center;
}
.grid-container {
margin-left: 2vw;
margin-right: 2vw;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr 1fr;
grid-gap: 2vw;
}
li {
list-style-type: none;
font-size: 18px;
font-weight: bold;
}
.box {
background-color: rgba(177, 97, 39, 0.7);
border-radius: 15px;
float: left;
border: 5px solid rgb(119, 63, 22);
padding: 10px;
box-shadow: 5px 10px rgb(51, 27, 9, 0.8);
}
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #941414}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.name {
color: #a9322c ;
text-shadow: 2px 2px black;
}
.text {
color: black;
padding: 30px;
}
.c {
grid-column: 1 / 3;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB