root
/
css-mastery-16-master


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stargazing – a showcase of visual effects in HTML, CSS and SVG</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,700" rel="stylesheet" type="text/css">
  <script src="js/modernizr.min.js"></script>
  <link rel="stylesheet" href="css/main.css">
  <style>
    /**
    * Some of the techniques require references (using URL fragments) to SVG
    * elements that are inline at the bottom of the document. The rest of the
    * CSS is in the linked file above.
    */


    .header-title {
      mask: url(#ellipseMask);
    }
    .fig-sun {
      mask: url(#circlemask);
    }
    

    @media only screen and (min-width: 600px) {
      /**
      * 1. Shape the "Moon" item using a border-radius
      */
      .nav-section [href="#moon"] {
        border-radius: 50%; /* [1] */
      }
      /**
      * 1. Shape the remaining items with a clip-path in inline SVG.
      */
      .nav-section [href="#sun"] {
        -webkit-clip-path: url(#sunclip); /* [1] */
                clip-path: url(#sunclip); /* [1] */
      }
      .nav-section [href="#planets"] {
        -webkit-clip-path: url(img/clip.svg#saturnclip); /* [1] */
                clip-path: url(img/clip.svg#saturnclip); /* [1] */
      }

      .nav-section [href="#milky-way"] {
        -webkit-clip-path: url(#milkyclip); /* [1] */
                clip-path: url(#milkyclip); /* [1] */
      }
      .nav-section [href="#universe"] {
        -webkit-clip-path: url(#cloudclip); /* [1] */
                clip-path: url(#cloudclip); /* [1] */
      }
    }
    
  </style>
</head>
<body>
  <header class="page-header stacked inverted">
    <h1 class="header-title">Stargazing</h1>
  </header>
  <nav class="stacked section nav-section inverted">
    <ul class="wrapper">
      <li><a href="#moon">The Moon</a></li>
      <li><a href="#sun">The Sun</a></li>
      <li><a href="#planets">Planets</a></li>
      <li><a href="#milky-way">Galaxy</a></li>
      <li><a href="#universe">Universe</a></li>
    </ul>
  </nav>
  <main>
    <article id="moon" class="section-moon section stacked inverted">
      <div class="wrapper">
        <h2 class="section-title">The moon</h2>

        <img class="fig fig-moon" src="img/moon.jpg" alt="The Moon">

        <div class="section-text">
          <p>The Moon (in Greek: σελήνη Selene, in Latin: Luna) is Earth's only natural satellite. It is one of the largest natural satellites in the Solar System, and, among planetary satellites, the largest relative to the size of the planet it orbits (its primary). It is the second-densest satellite among those whose densities are known (after Jupiter’s satellite Io).

            <p>The Moon is thought to have formed approximately 4.5 billion years ago, not long after Earth. There are several hypotheses for its origin; the most widely accepted explanation is that the Moon formed from the debris left over after a giant impact between Earth and a Mars-sized body called Theia.</p>
          </div>
        </div>            
      </article>

      <article id="sun" class="section-sun stacked section">
        <div class="wrapper">
          <h2 class="section-title">The Sun</h2>

          <img class="fig fig-sun" src="img/sun.jpg" alt="The Sun">

          <div class="section-text">
            <p>The Sun (in Greek: Helios, in Latin: Sol) is the star at the center of the Solar System and is by far the most important source of energy for life on Earth. It is a nearly perfect spherical ball of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. Its diameter is about 109 times that of Earth, and it has a mass about 330,000 times that of Earth, accounting for about 99.86% of the total mass of the Solar System.</p>

            <p>The Sun is a G-type main-sequence star (G2V) based on spectral class and it is informally referred to as a yellow dwarf. It formed approximately 4.567 billion years ago from the gravitational collapse of matter within a region of a large molecular cloud. Most of this matter gathered in the center, whereas the rest flattened into an orbiting disk that became the Solar System. The central mass became increasingly hot and dense, eventually initiating nuclear fusion in its core. It is thought that almost all stars form by this process.</p>
          </div>
        </div>
      </article>

      <article id="planets" class="section-planets section stacked inverted">
        <div class="wrapper">
          <h2 class="section-title">The Planets</h2>

          <img class="fig fig-planet" src="img/saturn.png" alt="The planet Saturn and its ring system">

          <div class="section-text">
            <p>The Solar System comprises the Sun and the planetary system that orbits it, either directly or indirectly. Of those objects that orbit the Sun directly, the largest eight are the planets, with the remainder being significantly smaller objects, such as dwarf planets and small Solar System bodies such as comets and asteroids. Of those that orbit the Sun indirectly, like the moons, two are larger than the smallest planet Mercury.</p>

            <p>The Solar System formed 4.6 billion years ago from the gravitational collapse of a giant interstellar molecular cloud. The vast majority of the system’s mass is in the Sun, with most of the remaining mass contained in Jupiter. The four smaller inner planets, Mercury, Venus, Earth and Mars, are terrestrial planets, being primarily composed of rock and metal. The four outer planets are giant planets, being substantially more massive than the terrestrials. The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium; the two outermost planets, Uranus and Neptune, are ice giants, being composed partially of substances with relatively high melting points compared with hydrogen and helium, called ices, such as water, ammonia and methane. All planets have almost circular orbits that lie within a nearly flat disc called the ecliptic.</p>
          </div>
        </div>


      </article>

      <article id="milky-way" class="section-milkyway section stacked inverted">
        <div class="wrapper">
          <h2 class="section-title">The Milky Way</h2>

          <div class="section-text">
            <p>The Milky Way is a galaxy that contains our Solar System. Its name "milky" is derived from its appearance as a dim glowing band arching across the night sky whose individual stars cannot be distinguished by the naked eye. The term ”Milky Way” is a translation of the Latin via lactea, from the Greek γαλαξίας κύκλος (galaxías kýklos, "milky circle").</p>

            <p>From Earth the Milky Way appears as a band because its disk-shaped structure is viewed from within. Galileo Galilei first resolved the band of light into individual stars with his telescope in 1610. Until the early 1920s most astronomers thought that the Milky Way contained all the stars in the Universe. Following the 1920 Great Debate between the astronomers Harlow Shapley and Heber Curtis, observations by Edwin Hubble showed that the Milky Way is just one of many galaxies—now known to number in the billions.</p>
          </div>
        </div>
      </article>

      <article id="universe" class="section-universe stacked section">
        <div class="wrapper">
          <header class="universe-header">
            <h2 class="universe-title">
              <svg viewBox="0 0 400 120" role="presentation">
                <text id="universe-title-textcontent">
                  <!-- Put both tspan elements on same line, to prevent bug in WebKit. -->
                  <tspan class="universe-span-1" x="6" dy="0.8em">The Observable</tspan> <tspan class="universe-span-2" x="3" dy="0.75em">Universe</tspan>
                </text>
              </svg>
            </h2>
            <img class="fig fig-universe" src="img/universe.jpg" alt="A starscape with far galaxies.">
          </header>

          <div class="section-text">
            <p>The observable universe consists of the galaxies and other matter that can, in principle, be observed from Earth at the present time because light and other signals from these objects have had time to reach the Earth since the beginning of the cosmological expansion. Assuming the universe is isotropic, the distance to the edge of the observable universe is roughly the same in every direction. That is, the observable universe is a spherical volume (a ball) centered on the observer. Every location in the Universe has its own observable universe, which may or may not overlap with the one centered on Earth.</p>

            <p>The word observable used in this sense does not depend on whether modern technology actually permits detection of radiation from an object in this region (or indeed on whether there is any radiation to detect). It simply indicates that it is possible in principle for light or other signals from the object to reach an observer on Earth. In practice, we can see light only from as far back as the time of photon decoupling in the recombination epoch. That is when particles were first able to emit photons that were not quickly re-absorbed by other particles. Before then, the Universe was filled with a plasma that was opaque to photons.</p>
          </div>
        </div>


      </article>


    </main>
    <footer class="stacked section page-footer inverted">
      <div class="wrapper">
        <h2 class="section-title">Image credits</h2>
        <ul>
          <li>All texts from Wikipedia</li>
          <li>Earth image: <a href="https://www.flickr.com/photos/projectapolloarchive/21700614435/">NASA Apollo project archive on Flickr</a> (public domain license)</li>
          <li>Moon image: <a href="https://www.flickr.com/photos/projectapolloarchive/21328842073/in/album-72157657139810744/">NASA Apollo project archive on Flickr</a> (public domain license).</li>
          <li>Sun image: <a href="http://sdo.gsfc.nasa.gov/gallery/main/item/532">Solar Dynamics Observatory/NASA</a> (public domain license)</li>
          <li>Saturn image: <a href="https://www.flickr.com/photos/gsfc/4046388535/in/photolist-7ayNkz-anq9zM-9sBSh3-7emdLM-5WdLyb-7MUdo6-5j1urX-CPCk-9qDHcB-vAAPqD-ajGX7H-8cVZtE-7JUhoJ-7GGghT-89Fo8y-5oKUqh-2NNKPc-9uA1Ep-dUUvY-eC8W6B-Eb8G-9N6fMy-dUUzd-qauzjv-9PPZeQ-5HqQu8-9McTY2-ez2aCx-jka1X9-eAhRA1-7Po7aY-brDoj-9s9ACi-9ZD9i9-seJxzC-4tvCfg-gLScA7-7ayNmn-9YKZ4-9STdQ1-8PNUjh-9TYMzg-qUzEQu-a452X-guArHy-s2VGi4-rPgA9f-5JmPWv-9PUsa2-fcWRK5">NASA Goddard Space Flight Center on Flickr</a> (Creative Commons <a href="https://creativecommons.org/licenses/by/2.0/legalcode">license</a>)</li>
          <li>Milky way image: <a href="https://www.flickr.com/photos/image-catalog/22290102206/in/photolist-zXGAP1-sqeeLQ">Image Catalog on Flickr</a> (public domain license)</li>
          <li>Starfield image: <a href="https://www.flickr.com/photos/smithsonian/9933989656/in/photolist-g8Qi2J">Smithsonian Institute on Flickr</a> (public domain license)</li>
        </ul>
      </div>
    </footer>


    <!-- Start of SVG containing clip paths, filters and masks -->
    <svg xmlns="http://www.w3.org/2000/svg" height="0" viewBox="0 0 100 100">
      <defs>
        <mask id="circlemask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
          <circle r="0.48" cx="0.5" cy="0.5" fill="#fff" />
        </mask>
        <clipPath id="sunclip" clipPathUnits="objectBoundingBox">
          <polygon points="0.5,0.048 0.558,0.001 0.604,0.06 0.671,0.028 0.702,0.095 0.775,0.08 0.79,0.153 0.864,0.155 
          0.862,0.229 0.934,0.248 0.914,0.32 0.98,0.355 0.944,0.42 1,0.469 0.95,0.525 0.993,0.585 0.932,0.628 0.96,0.697 0.89,0.724 
          0.902,0.797 0.828,0.808 0.822,0.882 0.748,0.875 0.725,0.946 0.654,0.922 0.616,0.986 0.552,0.946 0.5,0.999 0.448,0.946 
          0.384,0.986 0.346,0.922 0.275,0.946 0.252,0.875 0.178,0.882 0.172,0.808 0.098,0.797 0.11,0.724 0.04,0.697 0.068,0.628 
          0.007,0.585 0.05,0.525 0,0.469 0.056,0.42 0.02,0.355 0.086,0.32 0.066,0.248 0.138,0.229 0.136,0.155 0.21,0.153 0.225,0.08 
          0.298,0.095 0.329,0.028 0.396,0.06 0.442,0.001 "/>
        </clipPath>
        <clipPath id="saturnclip" clipPathUnits="objectBoundingBox">
          <circle fill="#fff" cx="0.5" cy="0.5" r="0.45"/>
          <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 1.2053 0.5499)" fill="#fff" cx="0.5" cy="0.5" rx="0.639" ry="0.125"/>
        </clipPath>

        <clipPath id="milkyclip" clipPathUnits="objectBoundingBox">
          <path d="M0.769,0.667c-0.127,0.108-0.35,0.121-0.498,0.029s-0.166-0.255-0.04-0.364s0.35-0.121,0.498-0.029S0.895,0.559,0.769,0.667
          z"/>
          <path d="M0.405,0.708C0.201,0.682,0.102,0.664,0.033,0.563c-0.056-0.082-0.024-0.305,0.162-0.348c0,0-0.125,0.14-0.064,0.285
          S0.405,0.708,0.405,0.708z"/>
          <path d="M0.405-0.292C0.201-0.318,0.102-0.336,0.033-0.437c-0.056-0.082-0.024-0.305,0.162-0.348c0,0-0.125,0.14-0.064,0.285
          S0.405-0.292,0.405-0.292z"/>
          <path d="M0.204,0.538C0.139,0.395,0.113,0.323,0.201,0.231c0.072-0.075,0.356-0.161,0.496-0.062c0,0-0.228-0.014-0.373,0.095
          S0.204,0.538,0.204,0.538z"/>
          <path d="M0.313,0.328c0.141-0.11,0.215-0.161,0.369-0.148c0.124,0.01,0.364,0.152,0.311,0.289c0,0-0.092-0.153-0.292-0.194
          S0.313,0.328,0.313,0.328z"/>
          <path d="M0.617,0.298c0.2,0.038,0.296,0.061,0.354,0.166C1.019,0.549,0.963,0.77,0.773,0.801c0,0,0.14-0.132,0.095-0.28
          C0.822,0.374,0.617,0.298,0.617,0.298z"/>
          <path d="M0.799,0.479c0.049,0.146,0.067,0.22-0.031,0.307c-0.08,0.071-0.372,0.14-0.501,0.033c0,0,0.226,0.027,0.382-0.073
          S0.799,0.479,0.799,0.479z"/>
          <path d="M0.689,0.67c-0.14,0.111-0.214,0.162-0.367,0.15c-0.125-0.01-0.366-0.149-0.314-0.287c0,0,0.094,0.153,0.294,0.192
          C0.502,0.767,0.689,0.67,0.689,0.67z"/>
        </clipPath>
        <clipPath id="cloudclip" clipPathUnits="objectBoundingBox">
          <circle class="st0" cx="0.37" cy="0.72" r="0.21"/>
          <circle cx="0.38" cy="0.26" r="0.22"/>
          <circle cx="0.19" cy="0.51" r="0.17"/>
          <circle cx="0.85" cy="0.53" r="0.14"/>
          <circle cx="0.65" cy="0.30" r="0.22"/>
          <circle cx="0.66" cy="0.69" r="0.19"/>
          <circle cx="0.48" cy="0.56" r="0.17"/>
        </clipPath>

        <mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
          <radialGradient id="radialfill" r="0.9" cy="1.1">
            <stop offset="45%" stop-color="#000"/>
            <stop offset="70%" stop-color="#fff"/>
          </radialGradient>
          <rect width="1" height="1" fill="url(#radialfill)" />
        </mask>
        
      </defs>
    </svg>
    <!-- End of SVG for clip-paths, filters and masks -->

  </body>
  </html>