<nav class="nav-mobile">
<h2 class="screen-reader-text">Mobile Menu Navigation Bar</h2>
<ul>
<li class="active">
<a href="">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M22 11.414v12.586h-20v-12.586l-1.293 1.293-.707-.707 12-12 12 12-.707.707-1.293-1.293zm-6 11.586h5v-12.586l-9-9-9 9v12.586h5v-9h8v9zm-1-7.889h-6v7.778h6v-7.778z" />
</svg>
Home
</a>
</li>
<li>
<a href="">
<svg width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m7.234 3.004c-2.652 0-5.234 1.829-5.234 5.177 0 3.725 4.345 7.727 9.303 12.54.194.189.446.283.697.283s.503-.094.697-.283c4.977-4.831 9.303-8.814 9.303-12.54 0-3.353-2.58-5.168-5.229-5.168-1.836 0-3.646.866-4.771 2.554-1.13-1.696-2.935-2.563-4.766-2.563zm0 1.5c1.99.001 3.202 1.353 4.155 2.7.14.198.368.316.611.317.243 0 .471-.117.612-.314.955-1.339 2.19-2.694 4.159-2.694 1.796 0 3.729 1.148 3.729 3.668 0 2.671-2.881 5.673-8.5 11.127-5.454-5.285-8.5-8.389-8.5-11.127 0-1.125.389-2.069 1.124-2.727.673-.604 1.625-.95 2.61-.95z" fill-rule="nonzero" />
</svg>
Favorites
</a>
</li>
<li>
<a href="">
<svg width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero" />
</svg>
Search
</a>
</li>
<li>
<a href="">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M1 20v-2.946c1.993-.656 2.575-2.158 3.668-6.077.897-3.218 1.891-6.784 4.873-8.023-.027-.147-.041-.299-.041-.454 0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5c0 .156-.014.309-.042.458 2.987 1.244 3.984 4.813 4.884 8.033 1.103 3.95 1.697 5.423 3.658 6.062v2.947h-7c0 2.208-1.792 4-4 4s-4-1.792-4-4h-7zm14 0h-6c0 1.656 1.344 3 3 3s3-1.344 3-3zm-13-1h20v-1.241c-2.062-.918-2.82-3.633-3.621-6.498-1.066-3.814-2.167-7.758-6.379-7.761-4.21 0-5.308 3.937-6.369 7.745-.8 2.872-1.559 5.593-3.631 6.514v1.241zm11.492-16.345l.008-.155c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5l.008.152c.455-.099.949-.152 1.487-.152.542 0 1.039.054 1.497.155z" />
</svg>
Notifications
</a>
</li>
<li>
<a href="">
<svg width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m16.5 11.995c0-1.242 1.008-2.25 2.25-2.25s2.25 1.008 2.25 2.25-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25zm-6.75 0c0-1.242 1.008-2.25 2.25-2.25s2.25 1.008 2.25 2.25-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25zm-6.75 0c0-1.242 1.008-2.25 2.25-2.25s2.25 1.008 2.25 2.25-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25z" />
</svg>
More
</a>
</li>
</ul>
</nav>
<main>
<div class="container">
<h1>Astronomy</h1>
<p>Astronomy is a natural science that studies celestial objects and phenomena. It uses mathematics, physics, and chemistry in order to explain their origin and evolution. Objects of interest include planets, moons, stars, nebulae, galaxies, meteoroid, asteroid, and comets. Relevant phenomena include supernova explosions, gamma ray bursts, quasars, blazars, pulsars, and cosmic microwave background radiation. More generally, astronomy studies everything that originates beyond Earth's atmosphere. Cosmology is a branch of astronomy that studies the universe as a whole.</p>
<p>Astronomy is one of the oldest natural sciences. The early civilizations in recorded history made methodical observations of the night sky. These include the Egyptians, Babylonians, Greeks, Indians, Chinese, Maya, and many ancient indigenous peoples of the Americas. In the past, astronomy included disciplines as diverse as astrometry, celestial navigation, observational astronomy, and the making of calendars.</p>
<p>Professional astronomy is split into observational and theoretical branches. Observational astronomy is focused on acquiring data from observations of astronomical objects. This data is then analyzed using basic principles of physics. Theoretical astronomy is oriented toward the development of computer or analytical models to describe astronomical objects and phenomena. These two fields complement each other. Theoretical astronomy seeks to explain observational results and observations are used to confirm theoretical results.</p>
<p>Astronomy is one of the few sciences in which amateurs play an active role. This is especially true for the discovery and observation of transient events. Amateur astronomers have helped with many important discoveries, such as finding new comets.</p>
<img width="1000" height="667" src="https://assets.codepen.io/162656/unsplash-astronomy1.jpg" alt="" />
<h2>Etymology</h2>
<p>Astronomy (from the Greek ἀστρονομία from ἄστρον astron, "star" and -νομία -nomia from νόμος nomos, "law" or "culture") means "law of the stars" (or "culture of the stars" depending on the translation). Astronomy should not be confused with astrology, the belief system which claims that human affairs are correlated with the positions of celestial objects. Although the two fields share a common origin, they are now entirely distinct.</p>
<img width="1000" height="1250" src="https://assets.codepen.io/162656/unsplash-astronomy2.jpg" alt="" />
<p>
<a href="https://en.wikipedia.org/wiki/Astronomy" target="_blank">Learn More</a>
</p>
</div>
</main>
<footer class="page-footer">
<span>made by </span>
<a href="https://georgemartsoukos.com/" target="_blank">
<img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
</a>
</footer>
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap");
:root {
--white: #fff;
--orange: #fca311;
--lightgray: #e5e5e5;
}
* {
box-sizing: border-box;
}
a {
color: inherit;
}
body {
font: 20px/1.5 "Jost", sans-serif;
margin: 0;
padding-top: 20px;
background: var(--lightgray);
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.container {
max-width: 1400px;
padding: 0 20px;
margin: 0 auto;
}
/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.nav-mobile {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--white);
transition: transform 0.3s;
z-index: 1;
box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.05);
}
.nav-mobile ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.nav-mobile li {
flex: 1;
}
.nav-mobile a {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 10px;
border-top: 2px solid transparent;
font-size: 16px;
text-decoration: none;
transition: all 0.3s;
}
.nav-mobile a svg {
transition: fill 0.3s;
}
.nav-mobile li.active a,
.nav-mobile a:hover {
color: var(--orange);
border-color: currentColor;
}
.nav-mobile li.active svg,
.nav-mobile a:hover svg {
fill: var(--orange);
}
main img {
width: 100%;
object-fit: cover;
}
/* JS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.scroll-down .nav-mobile {
transform: translate3d(0, 100%, 0);
}
.scroll-up .nav-mobile {
transform: none;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 600px) {
.nav-mobile a {
font-size: 14px;
padding: 5px;
}
}
@media (max-width: 450px) {
.nav-mobile a {
font-size: 12px;
}
}
/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
position: fixed;
right: 0;
bottom: 100px;
display: flex;
align-items: center;
padding: 5px;
font-size: 0.75em;
background: var(--white);
}
.page-footer a {
display: flex;
margin-left: 4px;
}
const body = document.body;
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;
window.addEventListener("scroll", () => {
const currentScroll = window.pageYOffset;
if (currentScroll <= 0) {
body.classList.remove(scrollUp);
return;
}
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
// down
body.classList.remove(scrollUp);
body.classList.add(scrollDown);
} else if (
currentScroll < lastScroll &&
body.classList.contains(scrollDown)
) {
// up
body.classList.remove(scrollDown);
body.classList.add(scrollUp);
}
lastScroll = currentScroll;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.