horoscopes, solar flares, geomagnetic storms, and a dinosaur
The following implementation allows visitors to read their daily horoscope and to get actual information on recent solar flare and geomagnetic storm intensities. This is achieved by inquiring a few APIs, one of which is a NASA endpoint called DONKI (Space Weather Database Of Notifications, Knowledge, Information). The other is the only seemingly free astrology endpoint I could get to work, and only by writing a back-end function in my firebase account to bypass CORS limitations. NASA provides up to date information on a bunch of things, but for now we are only inquiring about solar flares (over the last 24 hours) and geomagnetic storms (over the last month).
Solar flares can lead to geomagnetic storms, which in turn can disrupt power systems and cause mood alteration in people and animals. The horoscope endpoint only works through a CORS proxy function, which makes sure the request has correct headers and authentication credentials. This is because squarespace does not allow you to modify how CORS requests are handled. All of the used APIs are free, though I haven’t tested them on a big scale. After getting the data from the NASA APIs there is some time and date conversion going on to present the information in your local time. There is also parsing of intensity of the solar flares and geomagnetic storms, into a 1-10 scale, which then assigns the severity of the event as a word, for user friendliness. The horoscope API is not aligned with your local time and only accepts today and tomorrow as relevant dates. As such, I first query the today’s horoscope and if the date is yesterday according to your local time, a “tomorrow’s” horoscope is fetched, resulting in the correct one, according to your time zone. I get your time zone information from yet another API which takes the IP address as the query.
There is also a dinosaur which acts as a button to toggle the overlay presenting the information. The dinosaur changes face expressions based on the most recent solar flare intensity. The code below is functional, but you will have to get your free API key from https://api.nasa.gov/. All the HTML structure is generated dynamically in javascript. To see the code working, you can navigate to the origin page, contact page, or your account page (requires logging in), then click on the dinosaur which is hanging out on top of the footer.
Since we have a dinosaur, i found it impossible to not add an asteroid. The asteroid just floats about from left to right and never impacts anything for a change. It floats up and away if you close the tab, and comes back down when the tab is re-opened. Since the last update I also show a hidden message. It consists of a random quote pertaining to mysticism and science. It is situated under the header and is only visible if you scroll down just enough to hide the header, but still see the top of the tab.
HTML:
JAVASCRIPT:
document.addEventListener('DOMContentLoaded', async function () {
//pages where we show dinosaur
const subString = '/useraccount';
const subStringTwo = '/history';
const subStringThree = '/contact';
const getURL = window.location.href;
if (getURL.includes(subString) || getURL.includes(subStringTwo) || getURL.includes(subStringThree)) {
//mobile check
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
if (isTouch === false) {
//main setup
let gstInfo = 'Geomagnetic Storm Activity:';
let solarInfo = 'Solar Flare Activity:';
let lastGst = 'Last Geomagnetic Storm:';
let lastSolar = 'Last Solar Flare:';
const severityLevels = {
0: 'Negligible',
1: 'Very Low',
2: 'Low',
3: 'Noticeable',
4: 'Moderate',
5: 'High',
6: 'Very High',
7: 'Severe',
8: 'Extreme',
9: 'Catastrophic',
10: 'Cataclysmic'
};
const classTypeSeverity = { 'A': 0, 'B': 1, 'C': 2, 'M': 3, 'X': 4 };
const zodiacSigns = [
'Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo',
'Virgo', 'Libra', 'Scorpio', 'Sagittarius',
'Capricorn', 'Aquarius', 'Pisces'
];
//the number of quptes has been greatly redacted for this blog, there are over 40.
const occultismQuotes = [
"The mystic is not the one who sees visions, but the one who sees reality.",
"What we perceive as reality is only a veil over the true nature of existence."
];
//time management
const refreshInterval = 6 * 60 * 60 * 1000; //when is api data outdated
const timeOptions = {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false
};
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
const oneMonthAgo = new Date(today);
oneMonthAgo.setMonth(today.getMonth() - 1);
let startDateGst = oneMonthAgo.toISOString().split('T')[0];
let startDateSolar = yesterday.toISOString().split('T')[0];
const endDate = today.toISOString().split('T')[0];
let offsetMilliseconds = 0;
//get geolocation data for correct time
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
const utcOffset = data.utc_offset;
const offsetHours = parseInt(utcOffset.slice(0, 3));
offsetMilliseconds = offsetHours * 60 * 60 * 1000;
})
.catch(error => { });
let gst;
let solar;
let severityString = 'Negligible';
//severity to text conversion
function getSolarFlareSeverity(classType) {
const letterPart = classType.match(/[A-Z]/)[0];
let intensityLevel = classTypeSeverity[letterPart] !== undefined ? classTypeSeverity[letterPart] : 0;
const numberPartMatch = classType.match(/\d+/);
const numberPart = numberPartMatch ? parseFloat(numberPartMatch[0]) : 0;
const percent = (intensityLevel / 5) * 100;
if (numberPart > 0) {
const additionalSeverity = ((numberPart / 9) * 100) / 10;
intensityLevel = (percent + additionalSeverity) / 11;
}
intensityLevel = Math.round(intensityLevel);
const severity = severityLevels[intensityLevel] || 'Unknown Severity';
return severity;
}
//act on the begotten nasa data
async function displayData() {
gstInfo = 'Geomagnetic Storm Activity:';
solarInfo = 'Solar Flare Activity:';
lastGst = 'Last Geomagnetic Storm:';
lastSolar = 'Last Solar Flare:';
let index = 1;
let storedGSTData = localStorage.getItem('gstData');
if (storedGSTData) {
const gstData = JSON.parse(storedGSTData);
const gstTimestamp = new Date(gstData.timestamp);
if (today - gstTimestamp > refreshInterval) {
await fetchGSTData();
} else {
gst = gstData.data;
gst.allKpIndex.forEach(observation => {
const eventTime = observation.observedTime;
const eventSeverity = observation.kpIndex;
const roundedSeverity = Math.round(eventSeverity);
let severityDescription = severityLevels[roundedSeverity] || 'Unknown Severity';
const utcDate = new Date(eventTime);
const localDate = new Date(utcDate.getTime() + offsetMilliseconds);
let localTimeString = localDate.toLocaleString(undefined, timeOptions);
gstInfo += `<br>🗲 ${index}: ${localTimeString} - ${severityDescription}.`;
index++;
if (index === gst.allKpIndex.length + 1) {
lastGst += `
${localTimeString} - Severity: ${severityDescription}.`;
}
});
}
} else {
await fetchGSTData();
}
index = 1;
let storedSolarData = localStorage.getItem('solarData');
if (storedSolarData) {
const solarData = JSON.parse(storedSolarData);
const solarTimestamp = new Date(solarData.timestamp);
if (today - solarTimestamp > refreshInterval) {
await fetchSolarData();
} else {
solar = solarData.data;
solar.forEach(observation => {
const eventTime = observation.peakTime;
const classType = observation.classType;
const severity = getSolarFlareSeverity(classType);
const utcDate = new Date(eventTime);
const localDate = new Date(utcDate.getTime() + offsetMilliseconds);
let localTimeString = localDate.toLocaleString(undefined, timeOptions);
solarInfo += `<br>✹ ${index}: ${localTimeString} - ${severity}.`;
index++;
if (index === solar.length + 1) {
lastSolar += `
Observed: ${localTimeString} - Severity: ${severity}.`;
}
});
}
} else {
await fetchSolarData();
}
}
//get geomagnetic storm activity data
async function fetchGSTData() {
const response = await fetch(`https://api.nasa.gov/DONKI/GST?startDate=${startDateGst}&endDate=${endDate}&api_key=FREENASAAPIKEY`);
const data = await response.json();
if (data.length > 0) {
gst = data[0];
const timestamp = new Date().toISOString();
const gstDataToStore = {
data: gst,
timestamp: timestamp
};
localStorage.setItem('gstData', JSON.stringify(gstDataToStore));
} else {
gst = [];
localStorage.setItem('gstData', JSON.stringify({ data: gst, timestamp: timestamp }));
}
}
//get solar flare data
async function fetchSolarData() {
const response = await fetch(`https://api.nasa.gov/DONKI/FLR?startDate=${startDateSolar}&endDate=${endDate}&api_key=FREENASAAPIKEY`);
const data = await response.json();
if (data && data.length > 0) {
solar = data;
const timestamp = new Date().toISOString();
const solarDataToStore = {
data: solar,
timestamp: timestamp
};
localStorage.setItem('solarData', JSON.stringify(solarDataToStore));
} else {
solar = [];
localStorage.setItem('solarData', JSON.stringify({ data: solar, timestamp: timestamp }));
}
}
await displayData();
function clearDinoEmotions(){
const dino = document.querySelector('#nasaDino');
if (dino) {
dino.classList.remove('happy');
dino.classList.remove('sad');
dino.classList.remove('stupid');
dino.classList.remove('angry');
dino.classList.remove('shy');
}
}
//horoscope call and makeup
function writeHoroscope(sign, data) {
const horoscopeTextDiv = document.getElementById('horoscopeText');
if (horoscopeTextDiv) {
horoscopeTextDiv.innerHTML = `
<h3 id="horoscopeDataTitle">${sign}</h3>
<p id="horoscopeDataDate">${data.data.date}</p>
<div id="horoscopeDataTextContainer"><p id="horoscopeDataText">${data.data.horoscope_data}</p></div>`;
}
}
const getHoroscope = async (sign) => {
let formattedDate = 'TODAY';
const proxyUrl = 'https://us-central1-MYFIREBASEAPPID.cloudfunctions.net/corsProxy';
const targetUrl = `https://horoscope-app-api.vercel.app/api/v1/get-horoscope/daily?sign=${sign}&day=${formattedDate}`;
const today = new Date();
try {
const response = await fetch(`${proxyUrl}?url=${encodeURIComponent(targetUrl)}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
const horoscopeDate = new Date(data.data.date);
if (
horoscopeDate.getDate() === today.getDate() &&
horoscopeDate.getMonth() === today.getMonth() &&
horoscopeDate.getFullYear() === today.getFullYear()
) {
writeHoroscope(sign, data);
} else {
formattedDate = 'TOMORROW';
const newTargetUrl = `https://horoscope-app-api.vercel.app/api/v1/get-horoscope/daily?sign=${sign}&day=${formattedDate}`;
const tomorrowResponse = await fetch(`${proxyUrl}?url=${encodeURIComponent(newTargetUrl)}`);
if (!tomorrowResponse.ok) {
throw new Error(`HTTP error! status: ${tomorrowResponse.status}`);
}
const tomorrowData = await tomorrowResponse.json();
writeHoroscope(sign, tomorrowData);
}
} catch (error) {
//console.error('Error fetching horoscope:', error);
}
};
//create a moody dino mascot
function emotionalDinosaurDisplay() {
clearDinoEmotions();
const dino = document.createElement('div');
dino.id = "nasaDino";
dino.classList.add('nasaDino');
const dinoContainer = document.createElement('div');
dinoContainer.id = "nasaDinoContainer";
const dinoMainContainer = document.createElement('div');
dinoMainContainer.id = "nasaDinoMainContainer";
const footer = document.getElementById('footer-sections');
const bottomSeparator = footer.querySelector('.horizontalrule-block');
dinoContainer.appendChild(dino);
dinoMainContainer.appendChild(dinoContainer);
bottomSeparator.appendChild(dinoMainContainer);
severityString = lastSolar.split('Severity: ')[1].trim();
if (severityString === 'Negligible' || severityString === 'Very Low') {
dino.classList.add('happy');
} else if (severityString === 'Noticeable' || severityString === 'Moderate') {
dino.classList.add('shy');
} else if (severityString === 'High' || severityString === 'Very High') {
clearDinoEmotions();
} else if (severityString === 'Severe') {
dino.classList.add('stupid');
} else if (severityString === 'Extreme' || severityString === 'Catastrophic' || severityString === 'Cataclysmic') {
dino.classList.add('angry');
} else {
clearDinoEmotions();
}
//structure and embed the visual data overlay
let nasaInfoShow = false;
const nasaInfo = document.createElement('div');
nasaInfo.id = "nasaInfo";
nasaInfo.classList.add('nasaInfo');
const nasaInfoContainer = document.createElement('div');
nasaInfoContainer.id = "nasaInfoContainer";
const sectionBG = document.querySelector('.section-background');
nasaInfoContainer.appendChild(nasaInfo);
sectionBG.appendChild(nasaInfoContainer);
document.body.appendChild(nasaInfoContainer);
const horoscopeContainer = document.createElement('div');
horoscopeContainer.id = "horoscopeContainer";
horoscopeContainer.classList.add('horoscopeContainer');
horoscopeContainer.innerHTML = '';
const horoscopeSignContainer = document.createElement('div');
horoscopeSignContainer.id = "horoscopeSignContainer";
horoscopeSignContainer.classList.add('horoscopeSignContainer');
horoscopeSignContainer.innerHTML = '';
zodiacSigns.forEach(sign => {
const iconDiv = document.createElement('div');
iconDiv.classList.add('zodiac-icon');
iconDiv.id = sign.toLowerCase() + 'Icon';
innerHTML = '';
iconDiv.addEventListener('click', () => {
getHoroscope(sign);
});
horoscopeSignContainer.appendChild(iconDiv);
});
horoscopeContainer.appendChild(horoscopeSignContainer);
const horoscopeTextDiv = document.createElement('div');
horoscopeTextDiv.id = 'horoscopeText';
horoscopeTextDiv.classList.add('horoscopeText');
horoscopeContainer.appendChild(horoscopeTextDiv);
nasaInfo.innerHTML = '';
const nasaShadowDiv = document.createElement('div');
nasaShadowDiv.id = 'nasaShadowDiv';
nasaShadowDiv.classList.add('nasaShadowDiv');
const nasaShadowDivContainer = document.createElement('div');
nasaShadowDivContainer.id = 'nasaShadowDivContainer';
nasaShadowDivContainer.classList.add('nasaShadowDivContainer');
nasaShadowDivContainer.appendChild(nasaShadowDiv);
const hiddenHeaderMsg = document.createElement('div');
hiddenHeaderMsg.id = 'hiddenHeaderMsg';
hiddenHeaderMsg.classList.add('hiddenHeaderMsg');
hiddenHeaderMsg.innerHTML = `<h3>Strangeness is more fictional than some times</h3>`;
nasaShadowDiv.appendChild(hiddenHeaderMsg);
nasaInfo.appendChild(nasaShadowDivContainer);
nasaInfo.appendChild(horoscopeContainer);
const nasaInfoDiv = document.createElement('div');
nasaInfoDiv.id = 'nasaInfoDiv';
nasaInfoDiv.classList.add('nasaInfoDiv');
const solarInfoDiv = document.createElement('div');
solarInfoDiv.id = 'solarInfoDiv';
solarInfoDiv.classList.add('solarInfoDiv');
solarInfoDiv.innerHTML = solarInfo;
const gstInfoDiv = document.createElement('div');
gstInfoDiv.id = 'gstInfoDiv';
gstInfoDiv.classList.add('gstInfoDiv');
gstInfoDiv.innerHTML = gstInfo;
nasaInfoDiv.appendChild(gstInfoDiv);
nasaInfoDiv.appendChild(solarInfoDiv);
nasaInfo.appendChild(nasaInfoDiv);
const asteroidContainer = document.createElement('div');
asteroidContainer.id = 'asteroidContainer';
asteroidContainer.classList.add('asteroidContainer');
const asteroid = document.createElement('div');
asteroid.id = 'asteroid';
asteroid.classList.add('asteroid');
const asteroidInnerContainer = document.createElement('div');
asteroidInnerContainer.id = 'asteroidInnerContainer';
asteroidInnerContainer.classList.add('asteroidInnerContainer');
asteroidContainer.appendChild(asteroidInnerContainer);
asteroidInnerContainer.appendChild(asteroid);
nasaInfo.appendChild(asteroidContainer);
//show overlay
dino.addEventListener('click', function () {
if (nasaInfoShow === false){
nasaInfo.classList.add('showInfo');
dino.classList.add('showInfo');
asteroidContainer.classList.add('showInfo');
nasaInfoShow = true;
let randomQuote = occultismQuotes[Math.floor(Math.random() * occultismQuotes.length)];
hiddenHeaderMsg.innerHTML = `<h3>${randomQuote}</h3>`;
} else {
nasaInfo.classList.remove('showInfo');
dino.classList.remove('showInfo');
asteroidContainer.classList.remove('showInfo');
nasaInfoShow = false;
}
});
}
//initiate
await displayData();
emotionalDinosaurDisplay();
}
}
});CSS:
#hiddenHeaderMsg {
position: absolute;
top: 0px;
margin-top: 30px;
height: auto;
width: auto;
opacity: 0.5;
}
#hiddenHeaderMsg h3 {
color: var(--color2);
font-size: 20px;
}
#nasaShadowDivContainer {
display: flex;
justify-content: center;
top: 0;
z-index: 10;
margin-top: -200px;
}
#nasaShadowDiv {
display: flex;
justify-content: center;
top: 0;
height: 210px;
width: 94%;
margin-bottom: 10px;
background: linear-gradient(0deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.5) 100%);
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
pointer-events: none;
}
//asteroid
#asteroidContainer {
position: absolute;
display: flex;
justify-content: center;
top: -200px;
bottom: 0;
z-index: 10;
pointer-events: none;
transition: all 5s ease;
}
#asteroidContainer.showInfo {
display: flex;
justify-content: center;
bottom: 0;
z-index: 10;
top: 75%;
pointer-events: none;
}
#asteroidInnerContainer {
position: absolute;
left: 0;
display: flex;
justify-content: center;
animation: moveLeftToRight 90s linear infinite;
}
#asteroidInnerContainer::before {
content: '';
position: absolute;
width: 550px;
height: 90px;
margin-left: -530px;
bottom: 0;
margin-bottom: 10px;
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 95%, rgba(0,0,0,0) 100%);
left: 0;
opacity: 0.2;
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}
#asteroid {
pointer-events: none;
position: absolute;
width: 110px;
height: 110px;
bottom: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/fd29d9f0-008c-46a8-a008-ee28671dea2b/AsteroidColoredShadowedIcon1.png');
animation: rotator 55s infinite linear;
}
//horoscope
#horoscopeContainer {
width: 100%
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#horoscopeSignContainer {
display: flex;
justify-content: center;
}
#horoscopeText {
display: flex;
flex-direction: column;
align-items: center;
}
#horoscopeDataTextContainer {
max-width: 1300px;
}
#horoscopeDataText {
font-size: 22px;
letter-spacing: 1.1px;
text-align: justify;
}
#horoscopeDataTitle {
text-align: center;
margin: 0;
margin-top: 50px;
font-size: 2.4em;
}
#horoscopeDataDate {
font-weight: bold;
text-align: center;
margin: 0;
letter-spacing: 1.4px;
text-transform: uppercase;
font-size: 1.5em;
margin-top: 10px;
}
.zodiac-icon {
width: 90px;
height: 90px;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
transition: all 0.6s ease;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.zodiac-icon:hover {
transition: all 0.2s ease;
scale: 1.1;
}
#ariesIcon {
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/d876fc39-70c6-4aaf-8380-767affa970f2/Horo_AriesIcon1.png');
}
#taurusIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/a47a3236-f3cc-4fc9-bcfd-43596d69e8d8/Horo_TaurusIcon1.png');
}
#geminiIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/c3184264-a0e0-4323-9ba0-cdada7f354aa/Horo_GeminiIcon1.png');
}
#cancerIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/cc603817-9fd4-4c7c-8f81-98b475552b59/Horo_CancerIcon1.png');
}
#leoIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/059693d5-72d5-46d0-a9ad-d5cf9bec2858/Horo_LeoIcon1.png');
}
#virgoIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/e647c46b-8dca-4775-bc85-7fa73cf558cc/Horo_VirgoIcon1.png');
}
#libraIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/d9c94d54-315f-45c9-b694-e1704c408bf5/Horo_LibraIcon1.png');
}
#scorpioIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/472379ef-91eb-41f6-ad33-b9c5a4718589/Horo_ScorpioIcon1.png');
}
#sagittariusIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/b7481c13-e070-4ea2-8c16-3c1abc23435d/Horo_SaggitariusIcon1.png');
}
#capricornIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/ca2598ce-0302-43e9-b10f-c3ce785b6549/Horo_CapricornIcon1.png');
}
#aquariusIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/42ccd070-81f2-4ec6-aac6-4975868d0f3e/Horo_AquariusIcon1.png');
}
#piscesIcon{
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/74fb822e-fa02-4614-a51c-65272f70c5c1/Horo_PicesIcon1.png');
}
//solar flare and storm
#nasaInfoDiv {
display: flex;
justify-content: center;
}
#gstInfoDiv, #solarInfoDiv {
margin: 40px;
letter-spacing: 1.7px;
}
#nasaInfoContainer {
position: absolute;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
overflow-x: hidden;
overflow-y: scroll;
}
#nasaInfo {
max-width: 2200px;
width: 92%;
max-height: 65%;
height: 0;
padding: 20px;
font-size: 20px;
margin-top: -100px;
line-height: 30px;
overflow: scroll;
pointer-events: auto;
transition: all 1s ease;
outline: none;
z-index: 9;
background: var(--color1);
border: 0;
border-bottom: 2px solid !important;
border-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%) !important;
border-image-slice: 1 !important;
}
#nasaInfo.showInfo {
transition: all 0.6s ease;
height: 100%;
margin-top: 0px;
padding-top: 140px;
}
//dinosaur
#nasaDinoMainContainer {
position: absolute;
max-width: 100%;
width: 100%;
height: 100%;
transform: translateY(-50%);
z-index: 999;
bottom: 0;
right: 0;
pointer-events: none;
}
#nasaDinoContainer {
display: flex;
justify-content: flex-end;
max-width: 2200px;
width: 94%;
height: 100%;
}
#nasaDino {
position: absolute;
height: 300%;
width: 145px;
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/bef564cf-4838-4a1e-b3e8-7afa3879f30e/BaseDino1.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
bottom: 0;
margin-right: 15%;
transition: all 0.6s linear;
pointer-events: auto;
cursor: pointer;
}
#nasaDino:hover, #nasaDino.showInfo:hover {
transform: translateY(-3%) scale(1.05);
transition: all 0.3s ease;
}
@media only screen and (max-width:790px) {
#nasaDino {
margin-right: 0;
}
}
#nasaDino.showInfo {
margin-right: 10%;
transform: translateY(4.5%) scale(0.9);
}
#nasaDino.happy {
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/36bb29bb-c33e-462f-a974-68b398780469/HappyDino1+copy.png');
}
#nasaDino.sad {
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/a494977d-d65e-4c05-ac3b-f94eb839c68c/SadDino1+copy.png');
}
#nasaDino.angry {
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/a1a9ff88-54a1-45ab-b1d8-09fac99853a5/AngryDino1+copy.png');
}
#nasaDino.shy {
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/f0b29979-8d35-4489-9d44-9a07acf386a7/ShyDino1+copy.png');
}
#nasaDino.stupid {
background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/3148a739-800a-42d5-80a7-db6d03b9f37a/RetardDino1+copy.png');
}
COMMENTS:
Leave a comment: