diff --git a/README.md b/README.md index 7c75dbf..510a030 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Number Gusser +Number Guesser Contributed by Aakarsh Vatsraj @@ -12,7 +12,8 @@ The technologies used in this project are HTML,CSS and JavaScript. KNOWN ISSUES: -There is an error when the number you are serching is found.Rectify it +There is an error when the number you are searching is found.Rectify it The page needs a better UI. You can contact me at aakarshvatsraj0509@gmail.com... Or on the discord server. + diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..c6cb4c9 Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html index f7234d0..e349104 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,14 @@ Number Guesser +
+

Guess a number between 1-100.

Enter a number below.

- +
- \ No newline at end of file + diff --git a/style.css b/style.css index cb4ba29..09d45a6 100644 --- a/style.css +++ b/style.css @@ -1,19 +1,42 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap'); body { - background-color: #2b323c; + background-image: url("bg.jpg"); + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.box { + position: relative; + padding-top:90px; + font-family: 'Quicksand', sans-serif; + filter: blur(8px); + -webkit-filter: blur(8px); } #container { - background-color:aqua ; - border: 5px solid #F5E4C3; height: 275px; - width: 750px; + width: 550px; margin: auto; text-align: center; + position: absolute; + right:25%; + left:25%; + z-index:-1; + background-color: rgba(0,0,0, 0.6); + border: 1px solid #f1f1f1; + +} +.text { + color: white; + font-weight: 400; + z-index:10; } p { - font-size: 24px; + font-size: 34px; + color: aliceblue; } #input { @@ -23,4 +46,4 @@ p #btn { margin: 25px auto auto 5px; -} \ No newline at end of file +}