Added Page 404 MyHeart

MjavadH · Oct 5, 2023 · ca8a21e · ca8a21e
1 parent 868cd33
commit ca8a21e
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 0 deletions.
diff --git a/Fantasy/MyHeart/Image.png b/Fantasy/MyHeart/Image.png
diff --git a/Fantasy/MyHeart/assets/Simplicity.ttf b/Fantasy/MyHeart/assets/Simplicity.ttf
diff --git a/Fantasy/MyHeart/assets/style.css b/Fantasy/MyHeart/assets/style.css
@@ -0,0 +1,57 @@
+/*Add Simplicity font */
+@font-face {
+    font-family: 'Simplicity';
+    src: url('Simplicity.ttf') format('truetype');
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    min-height: 100vh;
+    font-size: 16px;
+    font-family: "Simplicity", sans-serif;
+    background-image: linear-gradient(-20deg, rgb(255, 192, 203) 20%, rgba(255, 192, 203, 0.5) 100%);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.T404 {
+    font-size: 8em;
+    color: red; /* Text color */
+    fill: red; /* Heart color */
+}
+
+.Heart {
+    width: 1em;
+    margin: 0 1.75rem;
+}
+
+.paragraph {
+    font-weight: 600;
+    letter-spacing: 2px;
+    width: 40%;
+}
+
+.paragraph h2 {
+    margin: 10px 0;
+}
+
+@media (max-width: 768px) {
+    body {
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .T404 {
+        font-size: 9vmax;
+    }
+
+    .paragraph {
+        width: 80%;
+    }
+}
diff --git a/Fantasy/MyHeart/index.html b/Fantasy/MyHeart/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Page 404 MyHeart</title>
+    <!-- Style -->
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+<section class="T404">
+    <h1>4<svg class="Heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+            <path d="M64 21c1.7 0 3-1.3 3-3V4c0-1.7-1.3-3-3-3s-3 1.3-3 3v14C61 19.7 62.3 21 64 21zM39.5 24.8c.6.9 1.6 1.5 2.6 1.5.5 0 1.1-.1 1.5-.4 1.4-.9 1.9-2.7 1-4.1l-6.2-10.3c-.9-1.4-2.7-1.9-4.1-1-1.4.9-1.9 2.7-1 4.1L39.5 24.8zM84.3 25.8c.5.3 1 .4 1.5.4 1 0 2-.5 2.6-1.5l6.2-10.3c.9-1.4.4-3.3-1-4.1-1.4-.9-3.3-.4-4.1 1l-6.2 10.3C82.5 23.1 82.9 25 84.3 25.8zM64 127.2c16.7 0 53-29.7 53-59.2 0-15.4-12.6-28-28-28S61 52.6 61 68c0 1.7 1.3 3 3 3s3-1.3 3-3c0-12.1 9.9-22 22-22s22 9.9 22 22c0 26.8-34.6 53.2-47 53.2S17 94.8 17 68c0-12.1 9.9-22 22-22 6.1 0 11.8 2.4 16 6.9 1.1 1.2 3 1.3 4.2.1 1.2-1.1 1.3-3 .1-4.2C54 43.1 46.8 40 39 40c-15.4 0-28 12.6-28 28C11 97.5 47.3 127.2 64 127.2z" />
+        </svg>4</h1>
+</section>
+<section class="paragraph">
+    <h2>Oops!</h2>
+    <p>
+        It seems like you have stumbled upon a page that does not exist. Maybe you typed the wrong URL, or maybe the page has been moved or deleted.
+    </p>
+</section>
+</body>
+</html>