geir/startit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

tried some css, not working ??

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-09-16 10:57:31 +02:00
parent 1a3478e68d
commit 6fb835182a
2 changed files with 92 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
oppgaver/uke6/8ball/model.js
View file

@ -18,9 +18,15 @@ const negativeAnswers = [
'Very doubtful'
];
var html = /*HTML*/`
<div id="ball">8-ball</div>
Ask Your question: <input type="text" onchange="question = this.value" /><br>
<button onclick="pickRandomAnswer()">Submit</button>
<main>
<div class="content">
<a class="btn rgb-animate-hvr">8-ball</a>
</div>
<div class="content rgb-animate">
Ask Your question: <input type="text" onchange="question = this.value" /><br>
<button onclick="pickRandomAnswer()">Submit</button>
</div>
</main>
`;
var htmlAnswer = '';

83
oppgaver/uke6/8ball/style.css
View file

@ -0,0 +1,83 @@
/* RGB EFFECT */
.rgb-animate {
animation-iteration-count: infinite;
animation-duration: 40s;
animation-name: rgb_anim;
}
/* RGB HOVER EFFECT */
.rgb-animate-hvr:hover {
animation-iteration-count: infinite;
animation-duration: 20s;
animation-name: rgb_anim;
}
/* RGB ANIMATION EFFECT */
@keyframes rgb_anim {
from {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
to {
filter: hue-rotate(0deg);
}
}
/* CSS */
* {
margin: 0;
padding: 0;
color: white;
font-family: "Montserrat";
font-weight: 600;
letter-spacing: 0.1em;
}
.content {
min-height: 50vh;
display: flex;
flex-flow: column;
justify-content: center;
align-content: center;
align-items: center;
background: black;
}
.content:last-child {
background: #de6161; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right bottom,
#2657eb,
#de6161
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right bottom,
#2657eb,
#de6161
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
a {
text-decoration: none;
}
.btn {
padding: 20px 45px;
background: #5c258d; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right bottom,
#4389a2,
#5c258d
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right bottom,
#4389a2,
#5c258d
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}