Polished code in splashcreen fixing some render issues.

7 years ago · b0ae511132
parent 6fad3504dd
commit b0ae511132
2 changed files with 28 additions and 18 deletions
--- a/css/theme.css
+++ b/css/theme.css
@ -40,15 +40,8 @@ body {
 }


-article {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
 h1 {
+    margin:0px;
    letter-spacing: 3px;
    color: #fff;
    font-family: 'Brotherhood-Script', 'Jenna Sue', 'Latin Modern Mono';
@ -56,7 +49,8 @@ h1 {
    font-size: 150px;
 }

-h1 span {
+#subtitle {
+    color: #fff;
    font-family: 'Wishing-Well', 'Daniel', 'Purisa';
    letter-spacing: 0;
    font-weight: 300;
@ -64,17 +58,29 @@ h1 span {
    line-height: 24px;
 }

-h1 span a {
+#subtitle a {
    color: #fff;
 }

-#arrowDown {
-    position: absolute;
-    top: 15%;
-    width: 100%;
+article {
+    position:absolute;
+    height:100vh;
+    width:100%;
+}
+
+#titleContainer {
+    margin-left: auto;
+    margin-right: auto;
    text-align: center;
 }

+#gotoBox-1 {
+    width: 70px;
+    height: 70px;
+    border: 0px;
+}
+
+
 #tape {
    font-family: 'Purisa', 'Latin Modern Mono', 'Arial';
    font-size: 11px;
--- a/index.html
+++ b/index.html
@ -29,10 +29,14 @@
 <body>
 <div id="box-2" style="postion: absolute; z-index: 10; opacity: 1">
    <!--  Content  -->
-    <article>
-<div id="arrowDown">
-        <h1>Meliurwen N.<br /> <span id="subtitle">Available on <a href="https://github.com/meliurwen" target="_blank">Github</a>, coding for fun and uni projects.</span></h1>
-        <img src="img/arrow_down.png" width="70" height="70" border="0" onclick="fade(10);"/></div>
+    <article class="tab-center">
+        <div id="titleContainer">
+            <h1>Meliurwen N.</h1>
+            <span id="subtitle">Available on <a href="https://github.com/meliurwen" target="_blank">Github</a>, coding for fun and uni projects.</span>
+            <br>
+            <br>
+            <br>
+            <img id="gotoBox-1"src="img/arrow_down.png" onclick="fade(10);"/></div>
    </article>

    <!--  Video is muted & autoplays  -->