commit b79ae1f5c31b036e111c36cd9c75fc32afbd3575
parent 42573954e01e8975ad6e03de42cdb0827ee054ae
Author: LennartSchroot <[email protected]>
Date: Sun, 21 May 2023 16:49:37 +0200
panda
Diffstat:
4 files changed, 181 insertions(+), 100 deletions(-)
diff --git a/.DS_Store b/.DS_Store
Binary files differ.
diff --git a/css/panda.css b/css/panda.css
@@ -1,13 +1,18 @@
body {
- background-color: #f44336;
+ background-color: RGB(210,176,76);
color: white;
- font-family: Arial, sans-serif;
+ font-family: Papyrus, sans-serif;
margin: 0;
padding: 0;
}
+p.inlog {
+ text-align: center;
+}
+
.gif {
margin: 1vw;
+ border-radius: 200px;
}
/* CSS for the heading */
@@ -18,13 +23,113 @@ h1 {
}
/* CSS for the content */
-.content {
- max-width: 800px;
- margin: 0 auto;
+.content,
+.content1,
+.content2 {
+ display: flex;
+ width:35vw;
+ height: 10vw;
+ margin: auto auto 1vw;
padding: 30px;
+ justify-content: space-between;
+ border-style: outset;
+ border-color: black;
+ background-color: RGB(230,176,77);
+}
+
+.content2 {
+ height: 20vw;
+ align-items: center;
+ justify-content: center;
+}
+
+nav {
+ display: flex;
+ background-color: #333;
+ height: 5vw;
+}
+
+nav ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+nav li {
+ display: inline-block;
+}
+
+li:first-child a {
+ padding: 0;
+}
+
+li:first-child a img {
+ height: 5vw;
+ width: auto;
+ vertical-align: middle;
}
-/* CSS for the logo */
+li a {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ padding: 15px;
+ font-family: Arial, sans-serif;
+ transition: background-color 0.3s;
+}
+
+li a:hover {
+ background-color: #555;
+}
+
+div.block1 {
+ display: flex;
+}
+
+.graph {
+ width: 400px;
+ height: 300px;
+ border: 1px solid #ccc;
+ padding: 10px;
+ box-sizing: border-box;
+ position: relative;
+}
+
+.bar {
+ width: 40px;
+ background-color: #5A534C;
+ position: absolute;
+ bottom: 0;
+}
+
+.fancy-list {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.fancy-list li {
+ position: relative;
+ padding-left: 20px;
+ margin-bottom: 10px;
+}
+
+.fancy-list li:before {
+ content: '';
+ position: absolute;
+ top: 5px;
+ left: 0;
+ width: 10px;
+ height: 10px;
+ background-color: #333;
+ border-radius: 50%;
+}
+
+.fancy-list li:last-child {
+ margin-bottom: 0;
+}
+
+/* CSS for the panda */
.circle {
background-color: #D0E6AA;
@@ -215,78 +320,23 @@ h1 {
border: 6px #5A534C solid;
height: 12px;
border-radius: 5px;
- background: transparant;
+ background: transparent;
border-top: none;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
-
.wall {
width: 300px;
height: 100px;
- background-color: #f44336;
top: 50%;
left: 50%;
margin-top: 150px;
+ background-color: RGB(210,176,76);
transform: translate(-50%, -50%);
position: fixed;
border-top: 6px #5A534C solid;
+ z-index: -1;
}
-
-.wall1 {
- width: 200px;
- height: 100px;
- background-color: #f44336;
- top: 50%;
- left: 50%;
- margin-top: 180px;
- transform: translate(-75%, -50%);
- position: fixed;
- border-top: 6px #5A534C solid;
-}
-
-.wall1side {
- width: 6px;
- height: 15px;
- margin-top: -30px;
- margin-left: 50px;
- background-color: #f44336;
- top: 50%;
- left: 50%;
-}
-
-.wall2side {
- width: 6px;
- height: 15px;
- margin-top: -20px;
- margin-left: -80px;
- background-color: #f44336;
- top: 50%;
- left: 50%;
-}
-
-.wall3side {
- width: 6px;
- height: 15px;
- margin-top: 5px;
- margin-left: -145px;
- background-color: #f44336;
- top: 50%;
- left: 50%;
-}
-
-.wall2 {
- width: 50px;
- height: 100px;
- background-color: #f44336;
- top: 50%;
- left: 50%;
- margin-top: 180px;
- transform: translate(200%, -50%);
- position: fixed;
- border-top: 6px #5A534C solid;
-}
-
.handsright {
width: 30px;
height: 25px;
@@ -299,8 +349,8 @@ h1 {
transform: translate(-50%, -50%);
position: fixed;
border-top: 7px #5A534C solid;
+ z-index: -1;
}
-
.handsleft {
width: 30px;
height: 25px;
@@ -313,4 +363,5 @@ h1 {
transform: translate(-50%, -50%);
position: fixed;
border-top: 7px #5A534C solid;
+ z-index: -1;
}
\ No newline at end of file
diff --git a/img/logo.png b/img/logo.png
Binary files differ.
diff --git a/views/panda.html b/views/panda.html
@@ -7,52 +7,82 @@
<link rel="stylesheet" type="text/css" href="/css/panda.css" />
</head>
<body>
-<div class="circle">
- <div class="head"> </div>
- <div class="ears">
- <div class="earleft">
- <div class="shadowleft"> </div>
- </div>
- <div class="earright">
- <div class="shadowright"> </div>
- </div>
- </div>
- <div class="eyes">
- <div class="eyeleft">
- <div class="pupilleft">
- <div class="pupilinsideleft"> </div>
+<div class="panda">
+ <div class="circle">
+ <div class="head"> </div>
+ <div class="ears">
+ <div class="earleft">
+ <div class="shadowleft"> </div>
+ </div>
+ <div class="earright">
+ <div class="shadowright"> </div>
</div>
</div>
- <div class="eyeright">
- <div class="pupilright">
- <div class="pupilinsideright"></div>
+ <div class="eyes">
+ <div class="eyeleft">
+ <div class="pupilleft">
+ <div class="pupilinsideleft"> </div>
+ </div>
+ </div>
+ <div class="eyeright">
+ <div class="pupilright">
+ <div class="pupilinsideright"></div>
+ </div>
</div>
</div>
+ <div class="mouth"> </div>
+ <div class="mouthmiddle"> </div>
+ <div class="mouthend"> </div>
</div>
- <div class="mouth"> </div>
- <div class="mouthmiddle"> </div>
- <div class="mouthend"> </div>
-</div>
-<div class="wall"></div>
-<div class="wall1">
- <div class="wall1side"> </div>
-</div>
-<div class="wall2">
- <div class="wall2side"> </div>
- <div class="wall3side"></div>
-</div>
+ <div class="wall"></div>
+ <div class="wall1">
+ <div class="wall1side"> </div>
+ </div>
+ </div>
+ <div class="handsright"> </div>
+ <div class="handsleft"> </div>
</div>
-<div class="handsright"> </div>
-<div class="handsleft"> </div>
-<!--<IMG class="gif" SRC="img/panda.gif">-->
+<nav>
+ <ul>
+ <li><a href="#"><IMG class="logo" SRC="/img/logo.png"></a></li>
+ <li><a href="#">Breeding Facility</a></li>
+ <li><a href="#">Zoo's</a></li>
+ <li><a href="#">About</a></li>
+ </ul>
+</nav>
+
+<!--<IMG class="gif" SRC="/img/panda.gif">-->
+</div>
<h1>Welcome to Panda Breeding Facilities</h1>
+<p class="inlog">Je bent ingelogd als "Rapper Sjors"</p>
-<div class="content">
- <p>blablabla</p>
- <p>denny is een sukkel</p>
+<div class="block1">
+ <div class="content">
+ <ul class="fancy-list">
+ <li>Item 1</li>
+ <li>Item 2</li>
+ <li>Item 3</li>
+ <li>Item 4</li>
+ </ul>
+ </div>
+
+ <div class="content1">
+ <p>Sate met rijst</p>
+ <p>€3</p>
+ </div>
</div>
+
+<div class="content2">
+ <div class="graph">
+ <div class="bar" style="height: 120px; left: 50px;"></div>
+ <div class="bar" style="height: 200px; left: 120px;"></div>
+ <div class="bar" style="height: 80px; left: 190px;"></div>
+ <div class="bar" style="height: 160px; left: 260px;"></div>
+ </div>
+</div>
+
</body>
</html>
</html>
\ No newline at end of file
