Skip to content
This repository was archived by the owner on Mar 17, 2023. It is now read-only.

Changes Hover Effects and Also Theme Color that look Good comparatably #6

Open
vedant-jain03 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Changes Hover Effects and Also Theme Color that look Good comparatably #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a4def65
Changed Styles and Hover Effects
vedant-jain03 Jan 17, 2021
2014f17
Changes Styles And Hover Effects
vedant-jain03 Jan 17, 2021
db74886
Merge branch 'master' of https://github.com/vedant-jain03/html-quiz
vedant-jain03 Jan 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</head>
<body>
<div id="questions">
<h1>FOSS Quiz!</h1>
<h1 class="title">FOSS Quiz!</h1>

<h2>People</h2>

Expand Down
68 changes: 55 additions & 13 deletions quiz.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}