diff --git a/p1.png b/p1.png new file mode 100644 index 000000000..1f87e1c99 Binary files /dev/null and b/p1.png differ diff --git a/projects/Wordle Game/index.html b/projects/Wordle Game/index.html index 1faeef17c..0306e23a6 100644 --- a/projects/Wordle Game/index.html +++ b/projects/Wordle Game/index.html @@ -10,13 +10,67 @@
-

Wordle Game

+
+
+ +
+ +
    +
  • Each guess must be a valid five-letter word.
    • +
  • The color of a tile will change to show you how close your guess was.
    • +
  • If the tile turns green, the letter is in the word, and it is in the correct spot.
    • +
  • If the tile turns yellow, the letter is in the word, but it is not in the correct spot.
    • +
  • If the tile turns red, the letter is not in the word.
    • +
+ +
+
+

Wordle Game

+

+ +
+ +
+ + + + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + +
+
diff --git a/projects/Wordle Game/style.css b/projects/Wordle Game/style.css index 5ac2f50c2..c1dd8f70c 100644 --- a/projects/Wordle Game/style.css +++ b/projects/Wordle Game/style.css @@ -13,6 +13,13 @@ body { height: 100vh; } +.top{ + display: flex; + justify-content: space-around; + align-items: center; + margin-bottom: 20px; +} + .container { background-color: #ffffff; padding: 20px; @@ -24,8 +31,7 @@ body { } h1 { - font-size: 2rem; - margin-bottom: 20px; + font-size: 2rem; color: #00796b; } @@ -79,7 +85,7 @@ input { width: 100%; } -button { +#submitGuess, #newGameButton, #dropdownButton { padding: 10px; font-size: 1rem; background-color: #00796b; @@ -90,7 +96,7 @@ button { width: 100%; } -button:hover { +#submitGuess, #newGameButton, #dropdownButton:hover { background-color: #004d40; } @@ -119,3 +125,97 @@ button:hover { padding: 8px; } } + + +/* General styling */ +body { + font-family: 'Arial', sans-serif; /* Change font style */ +} + +/* Style the dropdown button */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Button styling */ +.dropdown button { + background-color: #00796b; /* Green background */ + color: white; /* White text */ + padding: 10px 20px; /* Padding around the text */ + font-size: 16px; /* Font size */ + border: none; /* Remove border */ + cursor: pointer; /* Pointer on hover */ + outline: none; /* Remove the outline */ + border-radius: 4px; /* Rounded corners */ +} + +/* Dropdown menu (hidden by default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + border-radius: 10px; + padding: 10px; + min-width: 500px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + text-align: left; +} + +/* Dropdown menu links */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + font-size: 14px; /* Font size for the options */ + +} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content { + display: block; +} + + + +/*Keyboard*/ +/*body { + font-family: Arial, sans-serif; + background-color: #ffffff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + }*/ + + .keyboard { + display: inline-block; + padding: 10px; + background-color:#ffffff; + border-radius: 10px; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); + } + + .row { + display: flex; + justify-content: center; + margin-bottom: 10px; + } + + .key { + background-color: #d6d6d6; + color: rgb(19, 19, 19); + border: none; + padding: 10px 15px; + margin: 4px; + border-radius: 5px; + font-size: 18px; + cursor: pointer; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + transition: background-color 0.2s; + } + + \ No newline at end of file