Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


        <div class="wrapper">

            <header class="header">

                <h1 class="header__h1 "> - Carl Sagan -
                    <span>“The astronomer of the people”</span>

                <div class="header__container ">
                     <img class="header__container-img" src="" alt="Carl Sagan picture" >

                <figure class="header__quote ">
                    “A book is made from a tree. It is an assemblage of flat, flexible parts (still called “leaves”) imprinted with dark pigmented
                    squiggles. One glance at it and you hear the voice of another person, perhaps someone dead for thousands
                    of years. Across the millennia, the author is speaking, clearly and silently, inside your head, directly
                    to you. Writing is perhaps the greatest of human inventions,
                    <em> binding people together</em> , citizens of distant epochs, who never knew one another. Books break the
                    shackles of time ― proof that humans can work
                    <strong> magic</strong>.” – Carl Sagan


            <main class="main">
                <article class="main__article">

                    <header class="main__article-header">
                            Carl Sagan was probably the most well-known scientist of the 1970s and 1980s. He studied extraterrestrial
                            intelligence, advocated for nuclear disarmament, and co-wrote and hosted "Cosmos: A Personal

                    <section class="main__article-section">
                        <p>Astronomer Carl Sagan was born on November 9, 1934, in Brooklyn, New York. He graduated from the
                            University of Chicago, where he studied planets and explored theories of extraterrestrial intelligence.
                            He was named director of Cornell’s Laboratory for Planetary Studies in 1968 and worked with NASA
                            on several projects. An anti-nuclear activist, Sagan introduced the idea of “nuclear winter”
                            in 1983. He wrote one novel, several books and academic papers and the TV series
                            <em>Cosmos</em>, which was reborn on TV in 2014, before his 1996 death.</p>

                    <section class="main__article-section">
                        <h3>Early Years</h3>

                        <p>Carl Sagan was born on November 9, 1934, in Brooklyn, New York, the first of two children. Sagan’s
                            interest in astronomy began early on, and when he was five his mother sent him to the library
                            to find books on the stars. Soon after, his parents took him to the New York World’s Fair, where
                            visions of the future piqued his interest further. He also quickly became a fan of the prevalent
                            1940s science-fiction stories in pulp magazines and was drawn in by reports of flying saucers
                            that suggested extraterrestrial life.

                        <p>Sagan graduated high school in 1951 at age 16 and headed to the University of Chicago, where experiments
                            he conducted drove his fascination with the possibility of alien life. In 1955 Sagan graduated
                            with a BA in physics, and he took his master’s a year later. Four years later, Sagan moved to
                            California after obtaining a PhD in astronomy and astrophysics, landing at the University of
                            California, Berkeley, as a fellow in astronomy. There, he helped a team develop an infrared radiometer
                            for NASA’s Mariner 2 robotic probe.</p>

                    <section class="main__article-section">
                        <h3>Further Work With NASA and Fringe Science</h3>

                        <p>The 1960s found Sagan at Harvard University and the Smithsonian Astrophysical Observatory, where
                            his work centered on the physical conditions of the planets, particularly those of Venus and
                            Jupiter. In 1968 Sagan became the director of Cornell University’s Laboratory for Planetary Studies,
                            and three years later he became a full professor. brWorking again with NASA, Sagan helped choose
                            where the Viking probes would touch down on Mars and helped craft the messages from Earth that
                            were sent out with the Pioneer and Voyager probes sent beyond our solar system.</p>

                        <p>While still in his 30s, Sagan began speaking out on a range of fringe issues, issues that would gain
                            him much attention, such as the feasibility of interstellar flight, the idea that aliens visited
                            the Earth thousands of years ago and that creatures resembling “gas bags” live high in Jupiter's
                            atmosphere. He also testified before Congress during this period about UFOs, which had captured
                            the minds of the newspaper-reading populous, and proposed terraforming Venus into a habitable

                    <section class="main__article-section">
                        <h3>The Rare Celebrity Scientist</h3>

                        <p>In 1968, now a well-known quantity in the scientific realm, Sagan briefly served as a consultant
                            on the Stanley Kubrick film 2001: A Space Odyssey, although a clash of personalities ensured
                            the gig was short-lived. In the 1970s and 1980s, Sagan was the most well-known scientist in the
                            United States, helped in no small part by the books he wrote. Works such as The Cosmic Connection:
                            An Extraterrestrial Perspective (1973), Other Worlds (1975), The Dragons of Eden: Speculations
                            on the Evolution of Human Intelligence (1977; Pulitzer Prize winner) and his 1985 novel, Contact
                            (made into a film starring Jodie Fosterin 1997), all grabbed the attention of the scientific
                            community and general audiences.</p>
                    <section class="main__article-section">
                        <h3>Later Career</h3>

                        <p>In 1980, Sagan co-founded the Planetary Society, an international nonprofit organization focusing
                            on space exploration, and also launched the hugely influential TV series Cosmos: A Personal Voyage,
                            which he wrote and hosted. He also wrote a companion book of the same name to accompany the series.
                            Another of his famous works, Pale Blue Dot: A Vision of the Human Future in Space (1994), was
                            the sequel to Cosmos and was inspired by the famous Pale Blue Dot photograph, which shows Earth
                            as a mere speck in space. Sagan uses the Voyager 1 probe photo as a leaping-off point to discus
                            humanity's place in the vast universe and his vision of the future.</p>

                        <div class="main__article-video"style="position:relative ;height:0 ;padding-bottom:36.25%">
                            <iframe src=";showinfo=0" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0"

                            <a href="" target="_blank" title='Carl Sagan Wikipedia'>Carl Sagan</a> used his status, both as a celebrity and scientist, to further his political goals,
                            and he undertook a campaign for nuclear disarmament and was a vocal opponent of President Ronald
                            Reagan’s Strategic Defense Initiative. In 1983 he co-wrote a paper that introduced the concept
                            of “nuclear winter” followed the next year by his co-authored book The Cold and the Dark: The
                            World After Nuclear War.</p>

                        <p>Over the course of Sagan’s career, he was honored several times, notably receiving NASA’s Distinguished
                            Public Service Medal (1977, 1981) and the National Academy of Sciences’ Public Welfare Medal
                            (1994), among dozens of others.</p>

                        <p>He died of pneumonia, a complication of the bone-marrow disease myelodysplasia, on December 20, 1996,
                            at age 62. Eighteen years later, Cosmos was brought back to TV, this time with Neil DeGrasse
                            Tyson taking on hosting duties and getting a whole new generation of viewers excited about what
                            lies beyond the
                            <strong>boundaries of Earth's atmosphere</strong>...</p>
        <footer class="footer">
                <p class="footer__p"> Coded with <span class="heart">&hearts;</span> by
                    <a href="" target="_blank" title="Oros Alexandru's FreeCodeCamp link"> Oros Alexandru</a>




              /* //COLORS// */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html {
  font-family: 'Noto Sans', sans-serif;
  font-size: 62.5%; 
  word-wrap: break-word; 
/*   white-space: pre-wrap;  */

body {
  background: linear-gradient(to right, #e0eafc, #cfdef3);
  color: #0C0C0A; }

/* -----------------global-------------- */
.wrapper {
  margin: 0 auto;
  padding-top: 5rem;
  width: 95vw;
  text-align: center; }
@media(min-width: 900px){
  .wrapper {
    width: 75vw;

@media(min-width: 1200px){
    width: 50vw;

.header {
  display: flex;
  flex-flow: column;
  justify-content: space-between; }
  .header__h1 {
    font-size: 3rem;
    margin-bottom: 5rem; }
  @media (max-width: 500px) {
    .header h1 {
      font-size: 2.5rem; }
    .header figure {
      max-width: 90vw; } }
  .header__container {
    width: 50vw;
    margin: 0 auto; }
    .header__container-img {
      width: 100%;
      max-width: 25rem;
      border-radius: 50%;
      box-shadow: 0 0 0 6px white; }
  .header__quote {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 4rem 3%;
    line-height: 24px;
    max-width: 50vw;
    align-self: center; }

.main {
  margin-top: 6rem; }
  .main__article {
    margin: 2%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center; }
    .main__article-header {
      font-size: 2rem;
      margin: 5rem 2rem; }
    .main__article-section {
      margin-bottom: 10rem; }
      .main__article-section h3 {
        font-size: 2rem;
        margin-bottom: 2rem; }
      .main__article-section p {
        font-size: 1.6rem;
        letter-spacing: 0.5px;
        line-height: 1.4em;
        font-weight: 400; }
    .main__article-video {
      margin: 5rem 0; }

.footer {
  background-color: #778899;
  height: 10vh; }
  .footer__p {
    text-align: center;
    font-size: 1.6rem; }

a:link, a:visited {
  color: #999;
  background-color: #4682B4;
  padding: 0 12px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  transition: all .2s; }

a:hover, a:active {
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(1, 1, 1, 0.4);
  transform: rotate(4deg) scale(1.3);
  backface-visibility: hidden; }

.heart {
  cursor: default;
  color: #db4823;
  display: inline-block;
  transition: all .9s; }
  .heart:hover {
    transform: rotate(4deg) scale(3.3); }