Merge pull request #4 from Lukas-Batema/Lukas-Batema/Development

BlivionIaG · web-flow · commit f54158427198 · 2021-09-21T07:33:51.000+02:00
Fix Hompage image/replace it
diff --git a/background.png b/background.png
diff --git a/index.html b/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <title>FetchCord</title>
-        <meta content="text/html" charset="UTF-8" http-equiv="Content-Type">
-        <meta content="UTF-8" http-equiv="encoding">
-        <link type="text/css" rel="stylesheet" href="styles.css">
-        <script type="code/javascript" src="script.js"></script>
-        <link rel = "icon" href = "favicon.ico"> 
+        <meta content="content-type" type="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.00, user-scalable=false;" />
+        <link type="text/css" rel="stylesheet" href="styles.css" />
+        <script type="text/javascript" src="script.js"></script>
+        <link rel="image/x-icon" href="favicon.ico" /> 
     </head>
 
     <body>
@@ -28,7 +28,9 @@
         </div> 
 
         <header class="header header--home">
-            <img src="background.png" />
+            <img alt="Homepage Header" src="fetchcord.png" />
+            <h1>FETCHCORD:</h1>
+            <p>Hardware and OS Information Displayed In a Discord Rich Presence<br><br></p>
         </header>
     </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -27,22 +27,39 @@ h1 {
   background-size: cover;
   background-repeat: no-repeat;
   background-origin: border-box;
-  height: 100%;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   display: grid;
   place-items: center;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
+  height: 100%;
+  overflow: hidden;
+  background: linear-gradient(to right bottom, rgb(0, 20, 200), rgb(255, 100, 255));
 }
 
 .header--home {
   overflow: hidden;
 }
 
-.header--home img {
+.header--home img, .header--home h1 {
+  width: 17.5%;
   margin-left: 0;
   transform: translateX(0);
-  width: 100%;
+  background-blend-mode: multiply;
+  filter: opacity(100%);
+}
+
+.header--home h1, .header--home p {
+  color: rgba(255, 255, 255, 1.00);
+  text-align: center;
+}
+
+.header--home h1 {
+  font-size: 32px;
+}
+
+.header--home p {
+  font-size: 20px;
 }
 
 @keyframes fade-and-come-down {
@@ -56,14 +73,15 @@ h1 {
   }
 }
 
+/*
 .header h1 { 
   font-size: 60px; 
   padding: 15px;
   text-align: center;
   color: #000;
   animation: fade-and-come-down 1.25s forwards;
 } 
-
+*/
 
  .navbar {
     overflow: hidden;
