From a4def6565beaee0503e8a9546a251c308d85cccc Mon Sep 17 00:00:00 2001 From: vedant_jain03 Date: Mon, 18 Jan 2021 00:32:16 +0530 Subject: [PATCH 1/2] Changed Styles and Hover Effects --- index.html | 2 +- quiz.css | 68 +++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 56 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 631d3d2..860a50c 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@
-

FOSS Quiz!

+

FOSS Quiz!

People

diff --git a/quiz.css b/quiz.css index f8daedf..38b14dc 100644 --- a/quiz.css +++ b/quiz.css @@ -19,7 +19,7 @@ } body { - font-family: Helvetica, sans; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 14pt; background: #999; } @@ -40,12 +40,18 @@ table, tr, td, th { font-size: 1em; border-collapse: separate; cursor: default; - border-spacing: 0.2em; + border-spacing: 0.4em; + border-radius: 1rem; +} +td:hover{ + transform: translateY(-5%); } - thead tr.title { height: 3em; } +thead tr.title :hover{ + scale: 1; +} thead tr.categories { height: 5em; } @@ -55,15 +61,31 @@ h1 { } .categories th { - border: 0.2em solid #000; - background: #3F51B5; - color: #FF0; + border: 0.1em solid #000; + background: #1e2a6d; + color: rgb(30, 255, 0); font-weight: bold; + font-size: 22px; + position: relative; + transition: 0.5s; +} +.categories th::after{ + content: ""; + position: absolute; + left: 50%; + bottom: 10%; + transform: translate(-50%,-50%); + background-color: #f60091; + width: 25%; + height: 0.2rem; + z-index: 1; +} +.categories th:hover{ + font-size: 25px; } - .btn_select { - background: #3498db; - background-image: linear-gradient(to bottom, #3498db, #2980b9); + background: #10ca29; + background-image: linear-gradient(to bottom, #003c64, #034672); border-radius: 4px; text-shadow: 1px 1px 3px #666666; box-shadow: 2px 2px 2px #666666; @@ -97,13 +119,16 @@ tbody td { } tbody td.active { border-color: #000; - background: #69F; - color: #FF0; + background: rgb(99, 231, 106); + color: rgb(35, 5, 59); + font-size: 20px; cursor: pointer; + transition: .5s ease-in-out; } tbody td.active:hover { - color: #000; - background: #4dd2ff; + color: rgb(255, 255, 255); + background: #009414; + font-size: 21px; } div.q > p { @@ -237,3 +262,20 @@ p { display: none; } } + +h1{ + margin-bottom: 2rem; + cursor: pointer; + position: relative; +} +h1::after{ + content: ""; + position: absolute; + left: 50%; + bottom: -20%; + transform: translate(-50%,-50%); + background-color: #f60091; + width: 10%; + height: 0.3rem; + z-index: 1; +} From 2014f1797a71442e6a0794f15aacfe7ae0ec2c13 Mon Sep 17 00:00:00 2001 From: vedant_jain03 Date: Mon, 18 Jan 2021 00:50:01 +0530 Subject: [PATCH 2/2] Changes Styles And Hover Effects --- index.html | 2 +- quiz.css | 68 +++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 56 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 631d3d2..860a50c 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@
-

FOSS Quiz!

+

FOSS Quiz!

People

diff --git a/quiz.css b/quiz.css index f8daedf..38b14dc 100644 --- a/quiz.css +++ b/quiz.css @@ -19,7 +19,7 @@ } body { - font-family: Helvetica, sans; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 14pt; background: #999; } @@ -40,12 +40,18 @@ table, tr, td, th { font-size: 1em; border-collapse: separate; cursor: default; - border-spacing: 0.2em; + border-spacing: 0.4em; + border-radius: 1rem; +} +td:hover{ + transform: translateY(-5%); } - thead tr.title { height: 3em; } +thead tr.title :hover{ + scale: 1; +} thead tr.categories { height: 5em; } @@ -55,15 +61,31 @@ h1 { } .categories th { - border: 0.2em solid #000; - background: #3F51B5; - color: #FF0; + border: 0.1em solid #000; + background: #1e2a6d; + color: rgb(30, 255, 0); font-weight: bold; + font-size: 22px; + position: relative; + transition: 0.5s; +} +.categories th::after{ + content: ""; + position: absolute; + left: 50%; + bottom: 10%; + transform: translate(-50%,-50%); + background-color: #f60091; + width: 25%; + height: 0.2rem; + z-index: 1; +} +.categories th:hover{ + font-size: 25px; } - .btn_select { - background: #3498db; - background-image: linear-gradient(to bottom, #3498db, #2980b9); + background: #10ca29; + background-image: linear-gradient(to bottom, #003c64, #034672); border-radius: 4px; text-shadow: 1px 1px 3px #666666; box-shadow: 2px 2px 2px #666666; @@ -97,13 +119,16 @@ tbody td { } tbody td.active { border-color: #000; - background: #69F; - color: #FF0; + background: rgb(99, 231, 106); + color: rgb(35, 5, 59); + font-size: 20px; cursor: pointer; + transition: .5s ease-in-out; } tbody td.active:hover { - color: #000; - background: #4dd2ff; + color: rgb(255, 255, 255); + background: #009414; + font-size: 21px; } div.q > p { @@ -237,3 +262,20 @@ p { display: none; } } + +h1{ + margin-bottom: 2rem; + cursor: pointer; + position: relative; +} +h1::after{ + content: ""; + position: absolute; + left: 50%; + bottom: -20%; + transform: translate(-50%,-50%); + background-color: #f60091; + width: 10%; + height: 0.3rem; + z-index: 1; +}