Main Menu added / Changes to website style

yelynn1 · Sep 13, 2021 · 4f2d40a · 4f2d40a
1 parent 9eb8ad5
commit 4f2d40a
Show file tree

Hide file tree

Showing 2 changed files with 282 additions and 0 deletions.
diff --git a/main.css b/main.css
@@ -0,0 +1,174 @@
+html{
+    scroll-behavior: smooth;
+}
+
+
+body {
+    background-color: #fff;
+}
+
+
+
+h1 {
+    color: #a0c4ff;
+    text-align: left;
+    text-shadow: 1px 1px 3px #DADEDF;
+
+}
+
+.right {
+    text-align: right;
+}
+
+
+/*****************************/
+/* Styling Header Image Menu */
+/*****************************/
+#header-image-menu {
+    top: 10px;
+    position: relative;
+}
+
+ #header-image-menu img {
+        width: 100%;
+        height: 500px;
+        margin: 0;
+        padding: 10px 0;
+ }
+
+#image-text {
+    top: 10%; /*distance from top*/
+    left: 40%; /*distance from left*/
+    font-variant: small-caps;
+    color: #732f6c;
+    text-align: center;
+}
+
+
+
+/*****************************/
+/* Styling For Menu */
+/*****************************/
+.pagination {
+    display: inline-block;
+    float: right;
+}
+
+.pagination a {
+        color: #a0c4ff;
+        float: left;
+        padding: 10px 10px;
+}
+
+.pagination a.active {
+            background-color: #a0c4ff;
+            color: white;
+}
+
+.pagination a:hover:not(.active) {
+
+            background-color: #9bf6ff;
+            color: white;
+}
+.pagination button {
+    background-color: white;
+    color: #a0c4ff;
+    float: left;
+    padding: 10px 10px;
+    border: thin;
+}
+.pagination button.active {
+    background-color: #52b788;
+    color: white;
+
+}
+.pagination button:hover:not(.active) {
+    background-color: #9bf6ff;
+    color: white;
+
+}
+
+
+/*****************************/
+/* Styling for Containers */
+/*****************************/
+.wrapper {
+    position: relative;
+    max-width: 700px;
+    border-radius: 10px;
+    margin: 50px auto;
+    padding: 30px 40px;
+    box-shadow: 20px 20px 20px #a0c4ff
+}
+.wrapper .h4{
+    color: #0c0c68;
+    font-size: 50px;
+    font-family: 'Luckiest Guy', cursive;
+
+}
+.right {
+    text-align: right;
+}
+.wrapper center{
+    margin: 0;
+    position: relative;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+.wrapper .button {
+    text-align: center;
+    margin-top: 15px;
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+
+
+    margin-top: 30px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 80px;
+    padding-right: 80px;
+
+
+   background-color: transparent;
+   -webkit-box-shadow: 2.5px 2.5px 2.5px 0px #000000, inset 2px 2px 7.5px 0px #000000, 2.5px 2.5px 7.5px 2.5px rgba(255,139,253,0); 
+   box-shadow: 2.5px 2.5px 2.5px 0px #80ffdb, inset 2px 2px 7.5px 0px #a0c4ff, 2.5px 2.5px 7.5px 2.5px black;
+   text-shadow: #FFF 0px 0px 2.5px, #FFF 0px 0px 5px, #FFF 0px 0px 7.5px, #52b788 0px 0px 5px, #00b8ff 0px 0px 5px, #bd00ff 0px 0px 5px, #bd00ff 0px 0px 5px, #bd00ff 0px 0px 5px;
+   border: 0.2px double #d600ff;
+   border-radius: 1.5px;
+   color: #0c0c68;
+   font-family: 'Luckiest Guy', cursive;
+   font-size: 8px;
+   }
+
+   .wrapper .button:hover:before {
+    opacity: 1
+}
+
+.wrapper .button:hover:active {
+    background: none
+}
+
+.wrapper .button:hover:active:before {
+    filter: blur(2px)
+}
+
+@keyframes animate {
+    0% {
+        background-position: 0 0
+    }
+
+    50% {
+        background-position: 400% 0
+    }
+
+    100% {
+        background-position: 0 0
+    }
+}
+
+
diff --git a/mainmenu.html b/mainmenu.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TTC</title>
+    <link rel="shortcut icon" href="tic-tac-toe.png" type="image/x-icon"> <!--Adding favicon-->
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="main.css" type="text/css" />
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-113861388-2"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "UA-113861388-2");
+    </script>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!--To use Google Icons-->
+
+  </head>
+  <body>
+
+    <header>
+
+        <div class="right">
+            <!--Menu-->
+            <div class="pagination">
+                <a class="active" href="#">Play Game</a>
+                <a href="about.html">About</a>
+                <a href="contributors.html">Contributors</a>
+                <button class="btn btn-info" onclick="myFunction()">Dark mode</button>
+                <button class="btn btn-primary" onclick="playAudio(this)" type="button">Play Music</button>
+            </div>
+        </div>
+        <!--Our website's name-->
+        <h1>Tic Tac Toe</h1>
+
+
+
+
+    </header>
+    <div class="wrapper bg-white">
+
+      <div class="h4 text-muted text-center pt-2 ">Menu</div>
+      <br>
+
+
+      <div class="center">
+              <button class="button" type="button"><h2>Easy</h2></button><br>
+              <button class="button" type="button"><h2>Medium</h2></button><br>
+              <button class="button" type="button"><h2>Hard</h2></button>
+      </div>
+
+    </div> 
+
+
+
+    <audio id="myAudio">
+      <source src="music.mp3" type="audio/ogg">
+    </audio>
+
+    <script>
+      var x = document.getElementById("myAudio"); 
+
+      function playAudio(btn) { 
+//         x.play(); 
+           return x.paused ? x.play() : x.pause();
+           if(x.paused) {
+             x.play();
+             btn.innerHtml("Pause Music");
+           }
+           else {
+             x.pause();
+             btn.innerHtml("Play Music");
+           }
+      } 
+    </script>
+
+
+      <!-- <button onclick="myFunction()">Toggle dark mode</button> -->
+
+    <script>
+        function myFunction() {
+        var element = document.body;
+        element.classList.toggle("dark-mode");
+        }
+    </script>
+
+
+
+    <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
+    <script src="app.js"></script>
+
+
+  </body>
+</html>