Upload files to ''

Test
2022-01-25 03:30:01 +00:00 · 2022-01-25 03:30:01 +00:00 · 6bc844fbf2
parent 8e4ff831de
commit 6bc844fbf2
5 changed files with 120 additions and 0 deletions
--- a/MOCKUP.png
+++ b/MOCKUP.png
--- a/Page.html
+++ b/Page.html
@ -0,0 +1,26 @@
+<html lang="en">
+
+<head>
+    <title>WELCOME TO DALMATIONER.ART</title>
+    
+    <link rel="stylesheet" href= "landingstyles.css">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+
+    <div id=bg-image-container>
+        <div id=bg-clouds-container>
+            <img src="./images/islandclouds.png" alt="clouds" id="bg-clouds">
+            <img src="images/islandskull.png" alt="skull" id="skull">
+            <img src="images/islandfgclouds.png" alt=more clouds id="fg-clouds">
+            <div id="welcome-container"><h1>Welcome to Dalmationer.Art.</h1>
+                <h2 style="text-align: center;"><a href=main.html>ENTER→</a></h2></div>
+
+            </div>
+    </div>
+
+</body>
+
+</html>
--- a/test.png
+++ b/test.png
--- a/workspace.code-workspace
+++ b/workspace.code-workspace
@ -0,0 +1,3 @@
+{
+	"folders": []
+}
--- a/landingstyles.css
+++ b/landingstyles.css
@ -0,0 +1,91 @@
+
+body{
+    background-color:black;
+    height: 100%;
+    margin: 0;
+}
+
+html{
+    height: 100%;
+    margin: 0;
+}
+
+img{
+    image-rendering: "pixelated";
+}
+
+#bg-image-container{
+    background-image: url("./images/islandbg.png");
+    /* Full height */
+  height: 100%; 
+
+  /* Center and scale the image nicely */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow: hidden
+}
+
+#bg-clouds-container{
+    height: 100%; 
+    position: relative;
+}
+
+#bg-clouds{
+    justify-content: center;
+    height: 100%;
+    animation-name: "cloudloop";
+    animation-duration: 60s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    position: absolute;
+  left: 0%;
+  top: 0px;
+  z-index: 0;
+}
+
+#skull{
+    height: 100%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+}
+
+#fg-clouds{
+    justify-content: center;
+    height: 100%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-80%);
+    z-index: 2;
+    animation-name: "cloudloop2";
+    animation-duration: 40s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    position: "absolute";
+}
+
+#welcome-container{
+    position: absolute;
+    color: coral;
+    margin-top: 10%;
+    margin-left: 50%;
+    margin-right:15%;
+    border: coral 1px solid;
+    padding-left: 1%;
+    padding-right: 1%;
+    z-index: 3;
+    font-size: 100%;
+
+}
+
+@keyframes cloudloop{
+    0% {transform: translate(120%);}
+    100% {transform: translate(-120%);}
+}
+
+@keyframes cloudloop2{
+    0% {transform: translate(-140%);}
+    100% {transform: translate(140%);}
+}