/*This is the code for the styling of the webpage - don't change my dark gray hex colour.
Also do not change my background colour- I specifically looked up 'banana yellow'.
Put all your styling that applies to everything under this comment. (if you have styling specific to one page,
create a tag in the and add it to your tag.*/
/*
[]
[]]]
[]]]]
[]]]]]]
[]]]]]]]
[]]]]]]]]]
]]]]]]]
|
|__ ___ ___ ___ ___ ___ ___ ____ ___
| \ / | | / \ / | | / \ / | | / \ /____\ | | | (___
|__/ \__/ \ |/ | \__/ \ |/ | \__/ \ |/ | \____ \__/\__/ ___)
_____________________________________________________________________________________________________________________________
| |
| __ | __ |
| | \ __ _ _ | __ | _ _ __ __ __| __ |/ _ _ /__ o _ __ | |
| |__/ /__\ / \ | \ | /__\ | | | |__ / \ |/ /__\ / | / | | | (__ |\ | / \ / \ | | | | | |/ (__ _|__ |
| | \__ \_/ |_/ | \__ \_/ \_/ | | \_/ | \__ \_/ \\_/| \_/\ __) | \ |/ | \_/ \_/ \_/ | | | __) |_/ |
| | |
|_____________________________________________________________________________________________________________________________|
If you're the sort of person who looks at the source code of webpages, try our challenge:
https://banana-news.github.io/banana/share_this_page
*/
.background {
position: relative;
background-size: cover;
width: 100%;
height: 400px;
}
.background::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Adjust opacity as desired */
z-index: -1;
}
.background img {
filter:brightness(65%);
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.background h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 100px;
/* Other styling for the heading (font-size, font-weight, etc.) */
}
/*
.tomatoMessage{
background-image: linear-gradient(#008000,#ff6347);
padding: 20px;
color: #ffffff;
}
.tomatoMessage a{
color:#ffffff;
-webkit-text-fill-color: #ffffff;
}*/
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
button {
font-size: 20px;
border-radius: 5px;
padding: 7px;
background-color: #008000;
transition: 0.25s ease-in-out;
font-family: 'Open Sans', sans-serif;
border:none;
color:#ffffff;
width: calc(auto + 50px);
}
button:hover{
background-color: #969696;
cursor:pointer;
}
h1{
font-family: 'IBM Plex Serif', serif;
font-size: 100px;
text-align: center;
}
.bheading{
background-image: linear-gradient(to right,#f8ab5e 0,#f36961 20%,#a176c8 40%,#759beb 60%,#65beb3 80%,#70db96 100%);
-webkit-background-clip: text;
background-clip:text;
-webkit-text-fill-color: transparent;
color:transparent;
}
/*.stripe{
background-color: #ffffff;
width: 100%;
}*/
h2{
font-family: 'Lato', sans-serif;
font-size: 35px;
text-align: center;
}
p{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
color: black;
}
h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-decoration-line: underline;
text-align: center;
}
body {
background-color: #ffe135;
margin: 20px;
}
/*
input{
border-top:none;
border-right:none;
border-left:none;
border-bottom:3px solid rgb(0,0,0);
transition:0.25s ease-in-out;
}
input:hover{
border:3px solid #000000;
}
input:focus{
border:3px solid #000000;
outline:none;
}
*/
.topnav {
position:fixed;
background-color:#363434;
width:100%;
height:50px;
opacity:97.5%;
top:0px;
left: 0;
z-index:1000;
filter: none;
}
.topnav a {
position:relative;
top:5px;
text-decoration:none;
opacity:98%;
padding:10px;
color:#ffffff;
background-color:#00000000;
transition:0.15s ease-in-out;
font-size:14px;
font-family:'Open Sans', sans-serif;
text-align:center;
}
.topnav a:hover {
color:#8f8e8e;
transition: 0.15s ease-in-out;
}
@keyframes slideDown {
from {
max-height:0;
visibility:hidden;
height: 0;
display:none;
}
to {
max-height:200px;
visibility:visible;
height: 200px;
display:block;
}
}
@keyframes slideUp{
from{
max-height:200px;
visibility:visible;
height: 200px;
display:block;
}
to{
max-height:0;
visibility:hidden;
height: 0;
display:none;
}
}
#searchButton{
position:absolute;
top: 10px;
right:20px;
}
@media screen and (max-width:600px) {
#searchButton{
right: 40px;
}
}
#div-to-show {
filter: none;
display:none;
height:0px;
background-color: #444444;
width:100%;
position:fixed;
top:50px;
left:0;
padding:20px;
overflow:hidden;
z-index:1000;
}
#div-to-show:hover{cursor:pointer;}
#searchbar{
color:#ffffff;
font-size:25px;
border:none;
background-color:#444444;
background-image: linear-gradient(to right,#f8ab5e 0,#f36961 20%,#a176c8 40%,#759beb 60%,#65beb3 80%,#70db96,100%);
min-width:175px;
}
#searchbar:focus{
outline:none;
}
.quick{list-style:none;color:#f5f5f5;
font-family:'Open Sans',sans-serif;width:100%;padding-left:5px;
font-size:16px;
border-radius:2px}
.quick:hover{color:#ffffff;cursor:pointer;background-color:#555555}
.not-und{text-decoration:none}
.not-und:hover{text-decoration: none;}
.label{
font-family:'Open Sans',sans-serif;
color:#d3d3d3;
text-align: left;
}
.stripped{
/*Dont change the '#00000000' the amount of zeros is there to make it transparent*/
background-color:#00000000;
/**/
border:none;
padding:3px;
color:#f5f5f5;
transition:0.25s ease-in-out;
}
.stripped:hover{
color:#ffffff;cursor:pointer;background: #00000000;}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
margin:5px;
}
}
@media (max-width:768px){
h1{font-size: 75px;}
p{font-size:18px;}
h2{font-size:25px;}
}
@media screen and (max-width: 600px) {
#searchButton{display:block}
.topnav.responsive {position: relative;
height: 300px;}
.topnav.responsive a.icon {
position: absolute;
right: 30px;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.options div img {
display: block;
margin: auto;
}
img{
border-radius: 20px;
}
/*PLEASE don't change table styling (below) it will mess it up*/
tr:nth-child(even){
background-color: #919191;
}
td{padding:20px;}
th,td,table,tr{font-family: 'Open Sans', sans-serif;font-size:20px;border: 1px solid #000000;}
/*I know what you're thinking. Just don't.*/
footer {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
position: relative;
bottom: 5px;
left: 5px;
}
.tomatonews{
padding: 20px;
background-image: linear-gradient(#ff6347, #008000);
font-family: 'Open Sans', sans-serif;
position: fixed;
top: 100px;
left: 40%;
width: 400px;
}
@keyframes mymove {
100% {transform: rotate(360deg);}
}
@media(max-width:768px){p{font-size:18px;}}