<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<script type="text/javascript" language="javascript" src="Java/IncludeHTML.js"></script>
<script type="text/javascript" language="javascript" src="Java/CBPlay2.js"></script>
<title>The CyberBass Project - Main Page</title>
<style>
body {
background-color: black;
}
:root {
/* Background Color */
--bg-color-primary: rgba(30, 42, 14, 0.95);
--bg-color-secondary: rgba(5, 44, 53, 0.9);
/* Font/Border/Shadow Colors Variables */
--fbs-color-glow: #f5ba9b;
--fbs-color-light: #e9c8b3;
--fbs-color-medium: #c48f6c;
/* --fbs-color-dark: #4b2107; */
/* --fbs-color-dark: rgba(204, 204, 204, 0.1); */
--fbs-color-dark: #c48f6c;
/* Fish Color Variables */
--fish-color-blue: #0d839e;
--fish-color-green: #6c9c2e;
}
.container-main {
width: 75%;
margin: 3rem auto;
display: grid;
grid-template-columns: 1.25fr 1.25fr 3fr 1.25fr 1.25fr;
grid-template-rows: auto auto auto auto auto 1fr;
grid-gap: .5rem;
grid-template-areas: "logo header header header fish"
"donate1 donate1 sidebar donate2 donate2" "testimony1 testimony1 sidebar testimony2 testimony2" "concerts concerts sidebar store store" "composers composers composers composers composers" "footer footer footer footer footer";
}
.googleAd {
grid-area: ad;
}
.adDisclaimer {
text-align: center;
}
.logo {
grid-area: logo;
}
.mainPage-header {
grid-area: header;
}
.fish-logo {
grid-area: fish;
background-image: url(images/CyberBassLogoBlack.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.donate1 {
grid-area: donate1;
background-image: linear-gradient(270deg,
var(--bg-color-primary), var(--bg-color-secondary));
color: white;
}
.donate2 {
grid-area: donate2;
background-image: linear-gradient(270deg,
var(--bg-color-secondary), var(--bg-color-primary));
color: white;
}
.donate1,
.donate2 {
padding: 1rem;
border-radius: 1rem;
}
.donate-btn {
display: flex;
width: 15%;
margin: 0 auto;
align-content: bottom;
justify-content: center;
transition: .2s;
background-color: var(--fish-color-blue);
}
.donate-btn:hover {
transform: scale(1.05) translate(2px, 2px);
background-color: var(--fish-color-green);
}
.testimony1 {
grid-area: testimony1;
background-image: linear-gradient(270deg,
var(--bg-color-primary), var(--bg-color-secondary));
}
.testimony2 {
grid-area: testimony2;
background-image: linear-gradient(270deg,
var(--bg-color-secondary), var(--bg-color-primary));
}
.testimony1,
.testimony2 {
padding: 2rem;
font-style: italic;
border-radius: 1rem;
color: var(--fbs-color-light);
text-align: justify;
text-align: center;
}
.concerts {
grid-area: concerts;
}
.thankyou {
grid-area: thankyou;
}
.cbStore {
grid-area: store;
}
.FAQs {
display: none;
grid-area: FAQs;
}
.cbPledge {
display: none;
grid-area: Pledge;
}
.mainMenu {
grid-area: sidebar;
height: fit-content;
background-image: linear-gradient(135deg,
rgba(30, 42, 14, 0.90),
rgba(30, 42, 14, 0.90)),
url(images/music_score.jpg);
background-size: contain;
background-position: left center;
justify-items: center;
background-image: radial-gradient(circle at center, rgba(5, 44, 53, 0.9) 5%, rgba(30, 42, 14)), url(images/music_score.jpg);
}
.return-main-menu {
grid-area: return;
display: none;
margin: auto 0;
background-image: linear-gradient(270deg,
var(--bg-color-secondary), var(--bg-color-primary));
border-radius: 1rem;
padding: 5rem
}
.composers {
grid-area: composers;
}
.footer {
grid-area: footer;
}
/* media querries */
@media (max-width:1600px) {
.container-main {
width: 85%;
}
}
@media (max-width:1400px) {
html {
font-size: 60%;
}
.container-main {
width: 95%;
display: grid;
grid-gap: .5rem;
grid-template-areas: "header header" " testimony1 testimony2" "ad ad" "donate1 fish" "sidebar store" "FAQs FAQs" "concerts composers" "footer footer";
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
padding-top: 0;
margin-top: 0;
}
.donate2,
.FAQs,
.cbPledge,
.logo {
display: none;
}
.mainMenu {
display: block;
}
}
@media(max-width: 800px) {
.container-main {
display: grid;
grid-gap: .5rem;
grid-template-areas: "header" "ad" "fish" "donate1" "testimony2" "sidebar" "concerts" "store" "composers" "footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.testimony1 {
display: none;
}
.fish-logo {
height: 80px;
}
.cbHeader-1 {
font-size: 3rem;
}
.cbHeader-2 {
font-size: 2rem;
}
}
.read-more-1,
.read-less-1,
.read-more-2,
.read-less-2 {
color: var(--fbs-color-dark);
font-weight: bold;
cursor: pointer;
}
.read-more-1:hover,
.read-less-1:hover,
.read-more-2:hover,
.read-less-2:hover {
background-color: rgba(204, 204, 204, 0.1);
color: var(--fbs-color-glow);
}
.read-more-text-1,
.read-more-text-2 {
display: none;
cursor: pointer;
}
</style>
</head>
<body class="container-main">
<a class="goToTop" href="#Top">Top↑</a>
<!--Logos -->
<div class="logo"> </div>
<div class="fish-logo"></div>
<!-- Common Header -->
<header class="main_header mainPage-header" CBInclude-html="CommonContent/cbHeader.htm"></header>
<div class="googleAd hidden">
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3198908866709961"
crossorigin="anonymous"></script>
<!-- CBAnnouncementAd -->
<ins class="adsbygoogle" style="display:inline-block;width:100%;height:90px;"
data-ad-client="ca-pub-3198908866709961" data-ad-slot="1793634259"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="adDisclaimer font__size-s center bold">Disclaimer: This is Google Ad. No payments are required to
use the
CyberBass Project. The online services provided here are free of charge.
</div>
</div>
<!-- Common Sidebar -->
<div class="mainMenu" CBInclude-html="CommonContent/cbMainMenu.htm"></div>
<!--About CyberBass -->
<div class="FAQs" CBInclude-html="CommonContent/cbFAQs.htm"></div>
<!-- Pledge - User Agreement - Privacy Policy -->
<div class="cbPledge" CBInclude-html="CommonContent/cbPledge.htm"></div>
<!-- Concert Listings -->
<div class="concerts" CBInclude-html="CommonContent/cbConcertListings.htm"></div>
<!-- Singers Store -->
<div class="cbStore font__size-l" CBInclude-html="CommonContent/cbStore.htm"></div>
<div class="donate1"><a class="donate-btn font__size-l"
href="https://www.paypal.com/donate/?hosted_button_id=PCRG945R9XC3N" target="_blank">Donate</a></div>
<div class="testimony1 font__size-s">
<span class="testimony">"This site is such a blessing <span class="read-more-1"
onclick="readMore()"> (Read
More)</span>
<span class="read-more-text-1">to the serious choral singer who desires to learn a piece of music perfectly.
My favorite things
are
the
ability to slow down a movement and really get every note, then slowly bring it back to full
speed,
and
the fact that the movements just continue to loop. I sometimes leave a difficult movement on in
my
home,
and just let it play over and over until it just sinks into my brain!"
<span class="read-less-1" onclick="readLess()"> (Read Less)</span>
</span>
</div>
<div class="donate2"><a class="donate-btn font__size-l"
href="https://www.paypal.com/donate/?hosted_button_id=PCRG945R9XC3N" target="_blank">Donate</a></div>
<div class="testimony2 font__size-s">
<span class="testimony">"I just wanted to say 'thank you'<span class="read-more-2"
onclick="readMore()"> (Read
More)</span>
<span class="read-more-text-2"> from Berlin, Germany. Your site is tremendous and literally every major work
I have rehearsed in the last 15 years I used your MIDI files for. I recommend the page to every singer I
come across and
you help so many choirs all over the world to improve their performance. You are a man of art. Thank
you, thank you, thank you!"
<span class="read-less-2" onclick="readLess()"> (Read Less)</span>
</span>
</div>
<!-- Common Composer Cards -->
<div class="composers" CBInclude-html="CommonContent/CBComposerCards.htm"></div>
<footer class="footer font__size-xl" CBInclude-html="CommonContent/cbFooter.htm"></footer>
<script>
includeHTML();
</script>
<!-- <script aysnc
src="https://api.countapi.xyz/hit/CBMain/765012e2-39c3-4436-9d8a-f6c72bf7ba5e?callback=websiteVisits"></script> -->
<script>
function readMore() {
var testimony1 = document.querySelector(".testimony1");
var readMore1 = document.querySelector(".read-more-1");
var readLess1 = document.querySelector(".read-less-1");
var readMoreText1 = document.querySelector(".read-more-text-1");
var testimony2 = document.querySelector(".testimony2");
var readMore2 = document.querySelector(".read-more-2");
var readLess2 = document.querySelector(".read-less-2");
var readMoreText2 = document.querySelector(".read-more-text-2");
testimony1.style.textAlign = "justify";
readMore1.style.display = "none";
readLess1.style.display = "inline";
readMoreText1.style.display = "inline";
testimony2.style.textAlign = "justify";
readMore2.style.display = "none";
readLess2.style.display = "inline";
readMoreText2.style.display = "inline";
}
function readLess() {
var testimony1 = document.querySelector(".testimony1");
var readMore1 = document.querySelector(".read-more-1");
var readLess1 = document.querySelector(".read-less-1");
var readMoreText1 = document.querySelector(".read-more-text-1");
var testimony2 = document.querySelector(".testimony2");
var readMore2 = document.querySelector(".read-more-2");
var readLess2 = document.querySelector(".read-less-2");
var readMoreText2 = document.querySelector(".read-more-text-2");
testimony1.style.textAlign = "center";
readMore1.style.display = "inline";
readLess1.style.display = "none";
readMoreText1.style.display = "none";
testimony2.style.textAlign = "center";
readMore2.style.display = "inline";
readLess2.style.display = "none";
readMoreText2.style.display = "none";
}
function closeMainMenu_FAQs() {
var containerMain = document.querySelector(".container-main");
containerMain.style.gridTemplateAreas = '"logo header header header fish" "donate1 donate1 FAQs donate2 donate2" "testimony1 testimony1 FAQs testimony2 testimony2" "concerts concerts FAQs store store" "composers composers composers composers composers" "footer footer footer footer footer"';
if (screen.width <= 1350) {
containerMain.style.gridTemplateAreas = '"header header" "testimony1 testimony2" "fish donate1" "FAQs FAQs" "concerts store" "composers composers" "footer footer"';
}
if (screen.width <= 900) {
containerMain.style.gridTemplateAreas = ' "fish" "header" "testimony2" "donate1" "FAQs" "concerts" "store" "composers" "footer"';
}
var sidebarMain = document.querySelector(".mainMenu");
sidebarMain.style.display = "none";
var FAQs = document.querySelector(".FAQs");
FAQs.style.display = "grid";
window.scrollTo(0, 0);
}
function closeMainMenu_Pledge(content) {
var content;
var containerMain = document.querySelector(".container-main");
containerMain.style.gridTemplateAreas = '"logo header header header fish" "donate1 donate1 donate1 donate1 donate1" "Pledge Pledge Pledge Pledge Pledge" "composers composers composers composers composers" "footer footer footer footer footer"';
var cbPledge = document.querySelector(".cbPledge");
cbPledge.style.display = "grid";
var sidebarMain = document.querySelector(".mainMenu");
sidebarMain.style.display = "none";
var testimony1 = document.querySelector(".testimony1");
testimony1.style.display = "none";
var testimony2 = document.querySelector(".testimony2");
testimony2.style.display = "none";
var donate2 = document.querySelector(".donate2");
donate2.style.display = "none";
var concerts = document.querySelector(".concerts");
concerts.style.display = "none";
var cbStore = document.querySelector(".cbStore");
cbStore.style.display = "none";
var composers = document.querySelector(".composers");
composers.style.display = "none";
var footer = document.querySelector(".footer");
footer.style.display = "none";
if (screen.width <= 1350) {
containerMain.style.gridTemplateAreas = '"header header" "donate1 donate1" "Pledge Pledge"';
}
if (screen.width <= 800) {
containerMain.style.gridTemplateAreas = '"header" "fish" "donate1" "Pledge"';
var pledge = document.querySelector(".pledge");
var userAgreement = document.querySelector(".userAgreement");
var privacyPolicy = document.querySelector(".privacyPolicy");
cbPledge.style.gridTemplateAreas = '"pledge" "userAgreement" "privacyPolicy"';
cbPledge.style.display = "grid"
if (content == 1) {
pledge.style.display = "grid";
userAgreement.style.display = "none";
privacyPolicy.style.display = "none";
}
else if (content == 2) {
pledge.style.display = "none"
userAgreement.style.display = "grid";
privacyPolicy.style.display = "none";
}
else if (content == 3) {
pledge.style.display = "none"
userAgreement.style.display = "none";
privacyPolicy.style.display = "grid";
}
}
window.scrollTo(0, 0);
}
function mainMenu() {
var containerMain = document.querySelector(".container-main");
containerMain.style.gridTemplateAreas = '"logo header header header fish" "donate1 donate1 sidebar donate2 donate2" "testimony1 testimony1 sidebar testimony2 testimony2" "concerts concerts sidebar store store" "composers composers composers composers composers" "footer footer footer footer footer"';
if (screen.width <= 1350) {
containerMain.style.gridTemplateAreas = '"header header" "testimony1 testimony2" "fish donate1" "sidebar store" "concerts composers" "footer footer"';
}
if (screen.width <= 900) {
containerMain.style.gridTemplateAreas = '"header" "fish" "donate1" "testimony2" "sidebar" "concerts" "store" "composers" "footer"';
}
var sidebarMain = document.querySelector(".mainMenu");
sidebarMain.style.display = "block";
var FAQs = document.querySelector(".FAQs");
FAQs.style.display = "none";
var cbPledge = document.querySelector(".cbPledge");
cbPledge.style.display = "none"
var testimony1 = document.querySelector(".testimony1");
testimony1.style.display = "block"
if (screen.width <= 800) {
testimony1.style.display = "none"
}
var testimony2 = document.querySelector(".testimony2");
testimony2.style.display = "block"
var donate1 = document.querySelector(".donate1");
donate1.style.display = "block"
var donate2 = document.querySelector(".donate2");
donate2.style.display = "block"
if (screen.width <= 1350) {
donate2.style.display = "none"
}
var concerts = document.querySelector(".concerts");
concerts.style.display = "block"
var cbStore = document.querySelector(".cbStore");
cbStore.style.display = "block";
var composers = document.querySelector(".composers");
composers.style.display = "grid";
var footer = document.querySelector(".footer");
footer.style.display = "flex";
window.scrollTo(0, 0);
}
</script>
</body>
</html>