Follow each step exactly.
Whenever you create an html tag that has an id or class, and contains more than just plain text, create a commment that denotes it's closing tag.
For example:
<section>
<div id="large">
<h3>Carl Sagan</h3>
<div class="small">
<p>Tendrils of gossamer clouds inconspicuous motes of rock and gas...</p>
</div><!-- .small -->
</div><!-- #large -->
</section>
[ Setup ]
- Fork this project.
- Clone your own fork of this project.
- Open this project in Sublime Text editor.
- Open the README.md file on one side of your editor.
- Open the index.html file on the other side of your editor.
[ 1 ] Create an empty, basic html5 template including a doctype declaration, head, title, and body tags.
[ 2 ] In the head tag, insert the text "Out of This World" as the content for the title tag.
[ 3 ] In the body element, create a header element.
[ 4 ] Create a level 1 heading text element, with the content "Cosmos", inside of your heading tag. Give this element an id of 'title'.
[ 5 ] Create a level 2 header text element, with the content "Hearts of the Stars Euclid", inside of your header tag, after your level 1 heading tag. Give this element an id of 'subtitle'.
[ 6 ] Create a navigation element inside of your header element, after your level 2 heading tag.
[ 7 ] Inside the navigation element, add an unordered list. This list will contain five items, the first list item will have a class of 'active'. The second to the last list item will contain an unordered list with two items, and has a class of 'sub_nav'. Every list item below has a class of 'nav_item' and contains a link tag with a hyperlink reference to "#". The contents of each of the links are:
Globular
Star Cluster
Hydrogen Atoms
Star Stuff
Apollonius
Perga
Euclid
Commit your work.
[ 8 ] After the closing header element, create a div with the id 'layout'. Inside this div create two additional divs, with the ids 'main_content' and 'side_content'.
[ 9 ] Inside the 'main_content' div, create a new section element. Inside this section element, create a level 3 heading tag with the text content of "Star Cluster Colonies". After the level 3 heading, create the following paragraph:
Cosmos. Hearts of the stars Euclid. Worldlets a mote of dust suspended in a sunbeam tesseract Tunguska event, intelligent beings laws of physics radio telescope trillion cosmic ocean. Tendrils of gossamer clouds inconspicuous motes of rock and gas, globular star cluster hydrogen atoms star stuff harvesting star light take root and flourish galaxies Euclid with pretty stories for which there's little good evidence encyclopaedia galactica, Hypatia! As a patch of light Flatland stirred by starlight circumnavigated extraordinary claims require extraordinary evidence tesseract!
[ 10 ] Add another level 3 heading with the text 'Saturn's Many Moons' and then the following unordered list:
Mimas
Enceladus
Tethys
Dione
Rhea
Titan
Hyperion
Iapetus
Erriapus
Phoebe
Janus
Epimetheus
Helene
Telesto
Calypso
Kiviuq
Atlas
Prometheus
Pandora
Pan
Ymir
Paaliaq
Tarvos
Ijiraq
Suttungr
Mundilfari
Albiorix
Skathi
Siarnaq
Thrymr
Narvi
Methone
Pallene
Polydeuces
Daphnis
Aegir
Bebhionn
Bergelmir
Bestla
Farbauti
Fenrir
Fornjot
Hati
Hyrrokkin
Kari
Loge
Skoll
Surtur
Greip
Jarnsaxa
Tarqeq
Anthe
Aegaeon
Provisional Moons
S/2004 S7
S/2004 S12
S/2004 S13
S/2004 S17
S/2006 S1
S/2006 S3
S/2007 S2
S/2007 S3
S/2009 S1
[ 11 ] Add another Paragraph with the text:
Galaxies. Descended from astronomers Jean-François Champollion Rig Veda. From which we spring Apollonius of Perga, made in the interiors of collapsing stars Vangelis. Galaxies consciousness. Tunguska event. Globular star cluster descended from astronomers. A billion trillion, cosmic fugue network of wormholes kindling the energy hidden in matter billions upon billions star stuff harvesting star light, prime number the ash of stellar alchemy. Consciousness Sea of Tranquility vanquish the impossible science. Light years.
[ 12 ] Wrap the first word for each paragraph a span ('Cosmos.' and 'Galaxies.') Then close the first section.
Commit your work.
[ 13 ] Still inside the 'main_content' div, create a second section element. Inside this section element, create a level 3 heading tag with the text content of "Cosmic Fugue". After the level 3 heading, create the following paragraph, and again, wrap the first word 'Birth.' in a span:
Birth. Cosmic fugue! Cosmic ocean colonies? At the edge of forever made in the interiors of collapsing stars Jean-François Champollion of brilliant syntheses extraordinary claims require extraordinary evidence bits of moving fluff consciousness Tunguska event, the sky calls to us extraplanetary.
[ 14 ] Create another paragraph with the class "excerpt" and the following text:
Descended from astronomers encyclopaedia galactica. Cosmos Jean-François Champollion galaxies! Astonishment finite but unbounded of brilliant syntheses, with pretty stories for which there's little good evidence not a sunrise but a galaxyrise stirred by starlight dream of the mind's eye from which we spring! From which we spring Tunguska event, billions upon billions, Orion's sword?
[ 15 ] Create another paragraph:
A very small stage in a vast cosmic arena! Courage of our questions, preserve and cherish that pale blue dot trillion, encyclopaedia galactica Apollonius of Perga.
[ 16 ] Create a level 3 heading with the text 'Our Solar System'.
[ 17 ] Create an unordered list with the class 'planets' and create a list item for each planet. Also give each list item an id that matches the planet name. Use the convention of keeping the ids lowercase:
Mercury
Venus
Earth
Mars
Jupiter
Saturn
Uranus
Neptune
[ 18 ] Create another paragraph:
Take root and flourish. A very small stage in a vast cosmic arena, the only home we've ever known finite but unbounded tesseract take root and flourish. Made in the interiors of collapsing stars, take root and flourish. Cambrian explosion, kindling the energy hidden in matter. Encyclopaedia galactica Euclid. Orion's sword, Hypatia globular star cluster, finite but unbounded, hundreds of thousands. Extraplanetary corpus callosum are creatures of the cosmos. Billions upon billions courage of our questions Flatland Jean-François Champollion how far away. Something incredible is waiting to be known a still more glorious dawn awaits concept of the number one, citizens of distant epochs.
Then close the second section.
Commit your work.
[ 19 ] In the 'side_content' div, create an aside tag. In the aside element, create a level 4 heading tag with the text "Corpus Callosum".
Commit your work.
[ 20 ] In the aside element, after the level 4 heading tag, create a paragraph with the content of:
Another world tingling of the spine, preserve and cherish that pale blue dot a billion trillion quasar a billion trillion preserve and cherish that pale blue dot, shores of the cosmic ocean radio telescope. Inconspicuous motes of rock and gas. Hypatia realm of the galaxies Tunguska event!
Commit your work.
[ 21 ] After the closing aside element, create a footer tag. In the footer tag, create a paragraph tag, and the contents of the paragraph element are:
Carl Sagan ©2024 saganipsum.com
Make sure the url 'saganipsum.com' is a link.
Commit your work. Push your commits to github.