commit 4ad3ddeaea4fff0530a042371935319edf0cd152
parent eb0b42ad76d54b6a91930c5fc0d1d2fd7d349e67
Author: LennartSchroot <[email protected]>
Date: Sun, 21 May 2023 14:43:46 +0200
mooie panda html
Diffstat:
4 files changed, 376 insertions(+), 0 deletions(-)
diff --git a/.DS_Store b/.DS_Store
Binary files differ.
diff --git a/css/panda.css b/css/panda.css
@@ -0,0 +1,316 @@
+body {
+ background-color: #f44336;
+ color: white;
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+.gif {
+ margin: 1vw;
+}
+
+/* CSS for the heading */
+h1 {
+ text-align: center;
+ font-size: 36px;
+ margin-top: 50px;
+}
+
+/* CSS for the content */
+.content {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 30px;
+}
+
+/* CSS for the logo */
+
+.circle {
+ background-color: #D0E6AA;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-45%, -45%);
+ width: 280px;
+ height: 260px;
+ border-radius: 100%;
+ overflow: hidden;
+ z-index:-1;
+}
+.circle .head {
+ width: 160px;
+ height: 500px;
+ background: white;
+ margin-top: 70px;
+ margin-left: 55px;
+ border-top-left-radius: 45% 20%;
+ border-top-right-radius: 45% 20%;
+ z-index: 2;
+ position: absolute;
+ border: 6px solid #5A534C;
+}
+.circle .ears {
+ width: 100%;
+}
+.circle .eyeleft {
+ position: absolute;
+ z-index: 3;
+ top: 130px;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ display: flex;
+ display: block;
+ width: 40px;
+ height: 50px;
+ background: #5A534C;
+ border-radius: 100%;
+ margin: 0 20px;
+ -ms-transform: rotate(90deg);
+ /* IE 9 */
+ -webkit-transform: rotate(90deg);
+ /* Chrome, Safari, Opera */
+ transform: rotate(-25deg);
+}
+.circle .pupilleft {
+ height: 25px;
+ width: 25px;
+ border-radius: 25px;
+ margin-left: 7px;
+ margin-top: 13px;
+ background-color: white;
+}
+.circle .pupilright {
+ height: 25px;
+ width: 25px;
+ border-radius: 20px;
+ margin-left: 8px;
+ margin-top: 13px;
+ background-color: white;
+}
+.circle .pupilinsideright {
+ height: 12px;
+ width: 12px;
+ border-radius: 10px;
+ border: 2px #5A534C solid;
+ position: absolute;
+ margin-top: 5px;
+ margin-left: 5px;
+ background-color: #5A534C;
+}
+.circle .eyes {
+ top: -10px;
+ position: relative;
+}
+.circle .pupilinsideleft {
+ height: 12px;
+ width: 12px;
+ border-radius: 10px;
+ border: 2px #5A534C solid;
+ position: absolute;
+ margin-top: 5px;
+ margin-left: 4px;
+ background-color: #5A534C;
+}
+.circle .eyeright {
+ position: absolute;
+ z-index: 3;
+ top: 130px;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ display: flex;
+ display: block;
+ width: 40px;
+ height: 50px;
+ background: #5A534C;
+ border-radius: 100%;
+ margin: 0 -60px;
+ -ms-transform: rotate(30deg);
+ /* IE 9 */
+ -webkit-transform: rotate(30deg);
+ /* Chrome, Safari, Opera */
+ transform: rotate(25deg);
+}
+.circle .earleft {
+ position: absolute;
+ top: 66px;
+ right: 35%;
+ transform: translate(-50%, 0%);
+ display: flex;
+ display: block;
+ content: "";
+ width: 30px;
+ height: 30px;
+ background: #5A534C;
+ border-radius: 100%;
+ margin: 0 40px;
+ border: 15px solid #5A534C;
+ z-index: 1;
+ position: absolute;
+}
+.circle .earright {
+ position: absolute;
+ top: 67px;
+ left: 58%;
+ transform: translate(-50%, 0%);
+ display: flex;
+ display: block;
+ content: "";
+ width: 30px;
+ height: 30px;
+ background: #5A534C;
+ border-radius: 100%;
+ margin: 0 40px;
+ border: 15px solid #5A534C;
+ z-index: 1;
+ position: absolute;
+}
+.circle .shadowleft {
+ width: 30px;
+ height: 30px;
+ border-bottom: none;
+ background-color: white;
+ border-radius: 15px;
+ margin-left: -1px;
+}
+.circle .shadowright {
+ width: 30px;
+ height: 30px;
+ border-bottom: none;
+ background-color: white;
+ border-radius: 15px;
+ margin-left: 1px;
+}
+.circle .mouth {
+ position: absolute;
+ z-index: 3;
+ top: 155px;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ width: 25px;
+ border: 2px #5A534C solid;
+ height: 15px;
+ border-radius: 20px;
+ background: #5A534C;
+}
+.circle .mouthmiddle {
+ position: absolute;
+ z-index: 3;
+ top: 172px;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ width: 3px;
+ border: 2px #5A534C solid;
+ height: 20px;
+ border-radius: 15px;
+ background: #5A534C;
+}
+.circle .mouthend {
+ position: absolute;
+ z-index: 99;
+ top: 180px;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ width: 30px;
+ border: 6px #5A534C solid;
+ height: 12px;
+ border-radius: 5px;
+ background: transparant;
+ 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;
+ transform: translate(-50%, -50%);
+ position: fixed;
+ border-top: 6px #5A534C solid;
+}
+
+.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;
+ border-radius: 20px;
+ background-color: #5A534C;
+ top: 50%;
+ left: 50%;
+ margin-top: 100px;
+ margin-left: -40px;
+ transform: translate(-50%, -50%);
+ position: fixed;
+ border-top: 7px #5A534C solid;
+}
+
+.handsleft {
+ width: 30px;
+ height: 25px;
+ border-radius: 20px;
+ background-color: #5A534C;
+ top: 50%;
+ left: 50%;
+ margin-top: 100px;
+ margin-left: 110px;
+ transform: translate(-50%, -50%);
+ position: fixed;
+ border-top: 7px #5A534C solid;
+}
+\ No newline at end of file
diff --git a/img/panda.gif b/img/panda.gif
Binary files differ.
diff --git a/views/panda.html b/views/panda.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Panda Breeding Facilities</title>
+ <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>
+ </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="wall"></div>
+<div class="wall1">
+ <div class="wall1side"> </div>
+</div>
+<div class="wall2">
+ <div class="wall2side"> </div>
+ <div class="wall3side"></div>
+</div>
+</div>
+<div class="handsright"> </div>
+<div class="handsleft"> </div>
+
+<!--<IMG class="gif" SRC="img/panda.gif">-->
+
+<h1>Welcome to Panda Breeding Facilities</h1>
+
+<div class="content">
+ <p>blablabla</p>
+ <p>denny is een sukkel</p>
+</div>
+</body>
+</html>
+</html>
+\ No newline at end of file
