Made some sytling changes

DiksonIvySon · Oct 20, 2023 · 181fe8b · 181fe8b
1 parent a2f6f80
commit 181fe8b
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 44 deletions.
diff --git a/RockPaperScissors/game.html b/RockPaperScissors/game.html
@@ -18,24 +18,24 @@ <h5>Rock Paper Scissors</h5>
         <div class="nav">
             <ul>
                 <li><a href="index.html">Home</a></li>
-                <li><a href="game.html">Game</a></li>
             </ul>
         </div>
     </header>
 
    <main>
-        <h1 class="heading">
-            Ready to play?? LETS GO!!
-        </h1>
-
         <div class="center-image">
             <div>
                 <div class="image">
                     <img src="images/rockpaperscissors2.webp" alt="Rock Paper Scissors PICTURE">
                 </div>
-                <p id="gameResult">The game is yours</p>
-                <h1>SCORE</h1>
-                <h2 id="gameScore"></h2>
+                <h1 class="heading">
+                    Ready to play?? LETS GO!!
+                </h1>
+                <div class="score-board">
+                    <h2 id="gameResult">Start Playing</2>
+                    <h2 class="score-h2">SCORE</h2>
+                    <h2 id="gameScore"></h2>
+                </div>
             </div>
         </div>
 

diff --git a/RockPaperScissors/images/360_F_344423682_jXGqRqGdyPK6ZBPOO0CyOv6KMds0Qx80.jpg b/RockPaperScissors/images/360_F_344423682_jXGqRqGdyPK6ZBPOO0CyOv6KMds0Qx80.jpg
diff --git a/RockPaperScissors/index.html b/RockPaperScissors/index.html
@@ -16,21 +16,20 @@ <h5>Rock Paper Scissors</h5>
         </div>
         <div class="nav">
             <ul>
-                <li><a href="index.html">Home</a></li>
                 <li><a href="game.html">Game</a></li>
             </ul>
         </div>
     </header>
 
     <main>
-        <h1 class="heading">
-            Welcome to Rock Paper Scissors WebGame
-        </h1>
-        <div class="video">
-            <video autoplay loop muted plays-inline>
-                <source src="videos/pexels-alena-darmel-7319995 (2160p).mp4" type="video/mp4">
-            </video>
-            <button class="play-game-button heading"><a href="game.html">Play Game</a></button>
+        <div class="home-image">
+            <img src="images/360_F_344423682_jXGqRqGdyPK6ZBPOO0CyOv6KMds0Qx80.jpg" alt="">
+            <h1 class="home-heading">
+                Welcome to Rock Paper Scissors WebGame
+            </h1>
+            <a href="game.html">
+                <button class="play-game-button">Play Game</button>
+            </a>
         </div>
     </main>
 </body>

diff --git a/RockPaperScissors/style.css b/RockPaperScissors/style.css
@@ -5,6 +5,10 @@
     max-height: 100%;
 }
 
+body {
+    margin: 0;
+}
+
 header {
     display: flex;
     justify-content: space-between;
@@ -46,7 +50,31 @@ header {
     border-radius: 10px;
 }
 
+.home-heading {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    translate: -50% -50%;
+    z-index: 1;
+    background-image: rgb(0,0,0,0.5);
+    width: 90vw;
+
+    text-align: center;
+    background-image: linear-gradient(to left, rgb(166, 122, 129), #fff, #fff, #6f6b6b, #45f3ff, rgb(166, 122, 129) );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: animate 120s linear infinite;
+}
+
 .heading {
+    position: absolute;
+    top: 5%;
+    left: 50%;
+    translate: -50% -50%;
+    z-index: 1;
+    background-image: rgb(0,0,0,0.5);
+    width: 90vw;
+
     text-align: center;
     background-image: linear-gradient(to left, rgb(166, 122, 129), #333, #333, #6f6b6b, #45f3ff, rgb(166, 122, 129) );
     -webkit-background-clip: text;
@@ -65,33 +93,43 @@ header {
     position: relative;
 }
 
-.center-image p {
+.score-board {
     position: absolute;
-    top: 100px;
-    left: 45%;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    text-align: center;
 }
 
-.center-image h1 {
-    position: absolute;
-    top: 140px;
-    left: 45%;
+#gameResult {
+    color: aqua;
+    background: rgb(0,0,0,0.5);
+    border-radius: 10px;
+    padding: 10px;
 }
 
-.center-image h2 {
-    position: absolute;
-    top: 180px;
-    left: 48%;
+.score-h2 {
+    margin-bottom: 0;
+}
+
+#gameScore {
+    margin: 0;
 }
 
 .center-image {
     display: flex;
     justify-content: center;
 }
 
-.image img{
-    width: 650px;
+.image {
+    width: 100vw;
     height: 300px;
-    border-radius: 10px;
+}
+
+.image img {
+    width: 100%;
+    object-fit: cover;
+    background-image: linear-gradient(180 deg, transparent, white, white);
 }
 
 .container {
@@ -128,27 +166,30 @@ header {
 }
 
 /*styling the home page video*/
-
-.video {
-    display: flex;
-    justify-content: center;
+.home-image {
+    position: relative;
+    width:100vw;
+    height: 70vh;
 }
 
-.video video{
-    height: 100vh;
-    border-radius: 10px;
-    position: relative;
+.home-image img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
-.video .play-game-button {
+.home-image .play-game-button {
     position: absolute;
-    top: 50%;
+    top: 70%;
     left: 50%;
-    transform: translate(-50%, 50%);
-    font-size: 50px;
+    translate: -50% -50%;
+    font-size: 40px;
     padding: 20px;
     border-radius: 50px;
-    background-color: transparent;
+    width: 50%;
+    background: rgb(0,0,0,0.5);
+    border: 1px solid white;
+    color: white;
 }
 
 .play-game-button:hover {

diff --git a/RockPaperScissors/videos/pexels-alena-darmel-7319995 (2160p).mp4 b/RockPaperScissors/videos/pexels-alena-darmel-7319995 (2160p).mp4