Alphabetus/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- <link rel="stylesheet" href="../css/styles.css"> -->
    <!-- NOTE:
        All i needed was to disable this line. let me explain why.
        you are calling ../css/styles.css

        the term `..` referrs to the folder 1 level above in the tree.
        your tree looks like this:
        - another folder on your pc;
            - root folder;
                - css folder;
                    - styles.css;
                - index.html;


        Basically with this line you were trying to call the file styles.css from 'another folder on your pc/css/styles.css'
        and that file does not exists on your location.


        WE use `../path/to/image.png` when we are inside of css file because this file usually is inside another folder,
        so to find the file we need to go back 1 level (`../`) and add the path `path/to/file`.

        I hope i had explained it well.


        Another note.
        You are calling Bootstrap classes like:
          - jumbotron
          - display-4
          - lead
          - container
          - col-sm

        All of those classes are part of the css framework bootstrap (which i just recently felt in love with).
        It is a bit tricky to start but impossible to dislike.

        You will get deeper into bootstrap on achievment 1, so give it a few more exercises and dont freak out.


        As per structure, it looks good. all the opened elements are closed at first look and everything is in the right places
        however nested divs are important for good structure organisation. Later you might want to add another div side by side
        inside of jumbotron container.

        So... if i was building this website myself i would do something like:

        <jumbotron>
          <inner div class="title">
            <h1>title</h1>
          </inner div>
          <inner div 2 class="x1">
            <p> content </p>
          </inner div 2>
          <inner div 3 class="x2">
            <p>other content</p>
          </inner div 3>
        </jumbotron>
        Note that content is not directly inside jumbotron but on a child div. same applies to the title.
        Both of those elements are child divs from jumbotron.

        Using nested containers will make it easier for you to style and to place something related to that element after.

        now you could style jumbotron content like this.

        .jumbotron .title{
        title style;
      }

        .jumbotron .x1{
        style A;
      }
        .jumbotron .x2{
        style B;
      }

        When you start seriously using bootstrap you will find FAR better manipulation options of you are
        using a tree structure like the one above.

        A final note would be related to indentation.

        When you place content inside of a tag, dont forget to give it the right indentation.
        example.

        this is right:
        <p>
          This text is correctly aligned.
          <br>
          It is easy to understand all of my lines
          are
          a
          part of
          this paragraph.
        </p>


        this is wrong and will get extremely confuse when your file gets bigger (and it will get)
        <p>
          This text is not correctly organised
therefore when this file is bigg,
it will be extremely hard to understand from first sight.
        </p>


        The same applies to the following:

        <body>

          <div class="this div is correctly indented">

            <div class="this inner div is ok">
            </div>

          <div class="this inner div is NOT ok">
          </div>

          </div>

        <div class-"this div is incorrectly indented">
        </div>

        </body>
    -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>HTML1.2</title>


    <!-- Custom styles for this template go here -->
    <link rel="stylesheet" href="css/styles.css">

  </head>
  <body>
    <!-- Main jumbotron -->
  <div class="jumbotron">

    <h1 class="display-4">The Universe Project</h1>
    <p class="lead">
      This is the P content that is being changed by .jumbotron p
    </p>

  </div><!-- /jumbotron-->


  <section class="container">
    <h1>Introduction about our own Galaxy</h1>
    <p>The Milky Way is our home galaxy. It contains over 200 billion stars, including our Sun.

The Milky Way has a diameter of 100,000 light years,[1] and is a barred spiral galaxy. The idea that the Milky Way is made of stars goes back to the Ancient Greek philosopher Democritus.[6] The Milky Way has three main parts: a disk, in which the Solar System resides, a bulge at the core, and an all encompassing halo.[7]

This galaxy belongs to the Local Group of three large galaxies and over 50 smaller galaxies. The Milky Way is one of the largest galaxies in the group, second to the Andromeda Galaxy.[1] Milky Way's closest neighbour is Canis Major Dwarf, which is about 25,000 light years away from the Earth. The Andromeda Galaxy moves towards the Milky Way Galaxy, and will meet it in about 3.75 billion years.[8] Andromeda Galaxy moves with a speed of about 1,800 kilometres per minute</p>
    <a href="https://google.com">>About Milky Way</a>
  </section><!-- /container -->


  <section class="col-sm">
    <h2>Size</h2>
    <p>The stellar disk of the Milky Way Galaxy is approximately 100,000 light-years (9×1017 km) in diameter, and is considered to be, on average, about 1000 light years thick.[9]
It is estimated to contain at least 200 billion stars[10] and possibly up to 400 billion stars.[11] The figure depends on the number of very low-mass, or dwarf stars, which are hard to detect, especially more than 300 light years from our sun. Therefore, present estimates of the total number are uncertain. This can be compared to the one trillion (1012) stars of the neighbouring Andromeda Galaxy </p>
    <a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
  </section><!-- /col -->

  <section class="col-sm">
    <h2>Myth</h2>
    <p>
The Milky Way's spiral arms. Our Sun is in the Orion–Cygnus Arm.
The galactic disc, which bulges outward at the galactic center, has a diameter of 70–100,000 light years.[19]

The exact distance from the Sun to the galactic center is debated. The latest estimates give distances to the Galactic center of 25–28,000 light years.[20][21][22][23]

Movement of material around the galactic center shows that it has a compact object of very large mass.[24] The intense radio source named Sagittarius A*, thought to mark the center of the Milky Way, is now confirmed to be a supermassive black hole.[25] Most galaxies are believed to have a supermassive black hole at their center.[26]

The nature of the galaxy's bar is also actively debated, with estimates for its half-length and orientation spanning from 3,300–16,000 light years (short or a long bar) and 10–50 degrees.[22][23][27] Viewed from the Andromeda Galaxy, it would be the brightest feature of our own galaxy.[28]

Myth
In Greek mythology, Zeus places his son (the baby Heracles) whose mother was a mortal woman on Hera's breast while she is sleeping so that the baby will drink her divine milk and become immortal. However, Hera wakes up while she is breastfeeding the baby and realizes she is nursing a baby she does not know. According to Greek mythology, she then pushes the baby away and a stream of her milk sprays the night sky, making a faint band of light known as the Milky Way </p>
    <a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
  </section><!-- /col -->

  <section class="col-sm">
    <h2>Galactic center</h2>
    <p>The galactic disc, which bulges outward at the galactic center, has a diameter of 70–100,000 light years.[19]

The exact distance from the Sun to the galactic center is debated. The latest estimates give distances to the Galactic center of 25–28,000 light years.[20][21][22][23]

Movement of material around the galactic center shows that it has a compact object of very large mass.[24] The intense radio source named Sagittarius A*, thought to mark the center of the Milky Way, is now confirmed to be a supermassive black hole.[25] Most galaxies are believed to have a supermassive black hole at their center.</p>
    <a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
  </section><!-- /col -->


    <!-- All your JavaScript comes now -->
    <!-- ============================= -->

    <!-- Bootstrap core JS -->

    <!-- Can place script tags with JavaScript files here -->

  </body>
</html>

## styles.css
.jumbotron  {
  background-image: url("../img/milkyway.jpg");
  background-size: cover;
  background-color: red;
  }

.jumbotron p {
  color: white;

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- <link rel="stylesheet" href="../css/styles.css"> -->
	<!-- NOTE:
	All i needed was to disable this line. let me explain why.
	you are calling ../css/styles.css

	the term `..` referrs to the folder 1 level above in the tree.
	your tree looks like this:
	- another folder on your pc;
	- root folder;
	- css folder;
	- styles.css;
	- index.html;


	Basically with this line you were trying to call the file styles.css from 'another folder on your pc/css/styles.css'
	and that file does not exists on your location.



	WE use `../path/to/image.png` when we are inside of css file because this file usually is inside another folder,
	so to find the file we need to go back 1 level (`../`) and add the path `path/to/file`.

	I hope i had explained it well.


	Another note.
	You are calling Bootstrap classes like:
	- jumbotron
	- display-4
	- lead
	- container
	- col-sm

	All of those classes are part of the css framework bootstrap (which i just recently felt in love with).
	It is a bit tricky to start but impossible to dislike.

	You will get deeper into bootstrap on achievment 1, so give it a few more exercises and dont freak out.


	As per structure, it looks good. all the opened elements are closed at first look and everything is in the right places
	however nested divs are important for good structure organisation. Later you might want to add another div side by side
	inside of jumbotron container.

	So... if i was building this website myself i would do something like:

	<jumbotron>
	<inner div class="title">
	<h1>title</h1>
	</inner div>
	<inner div 2 class="x1">
	<p> content </p>
	</inner div 2>
	<inner div 3 class="x2">
	<p>other content</p>
	</inner div 3>
	</jumbotron>
	Note that content is not directly inside jumbotron but on a child div. same applies to the title.
	Both of those elements are child divs from jumbotron.

	Using nested containers will make it easier for you to style and to place something related to that element after.

	now you could style jumbotron content like this.

	.jumbotron .title{
	title style;
	}

	.jumbotron .x1{
	style A;
	}
	.jumbotron .x2{
	style B;
	}

	When you start seriously using bootstrap you will find FAR better manipulation options of you are
	using a tree structure like the one above.

	A final note would be related to indentation.

	When you place content inside of a tag, dont forget to give it the right indentation.
	example.

	this is right:
	<p>
	This text is correctly aligned.
	<br>
	It is easy to understand all of my lines
	are
	a
	part of
	this paragraph.
	</p>


	this is wrong and will get extremely confuse when your file gets bigger (and it will get)
	<p>
	This text is not correctly organised
	therefore when this file is bigg,
	it will be extremely hard to understand from first sight.
	</p>



	The same applies to the following:

	<body>

	<div class="this div is correctly indented">

	<div class="this inner div is ok">
	</div>

	<div class="this inner div is NOT ok">
	</div>

	</div>

	<div class-"this div is incorrectly indented">
	</div>

	</body>
	-->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>HTML1.2</title>


	<!-- Custom styles for this template go here -->
	<link rel="stylesheet" href="css/styles.css">

	</head>
	<body>
	<!-- Main jumbotron -->
	<div class="jumbotron">

	<h1 class="display-4">The Universe Project</h1>
	<p class="lead">
	This is the P content that is being changed by .jumbotron p
	</p>

	</div><!-- /jumbotron-->


	<section class="container">
	<h1>Introduction about our own Galaxy</h1>
	<p>The Milky Way is our home galaxy. It contains over 200 billion stars, including our Sun.

	The Milky Way has a diameter of 100,000 light years,[1] and is a barred spiral galaxy. The idea that the Milky Way is made of stars goes back to the Ancient Greek philosopher Democritus.[6] The Milky Way has three main parts: a disk, in which the Solar System resides, a bulge at the core, and an all encompassing halo.[7]

	This galaxy belongs to the Local Group of three large galaxies and over 50 smaller galaxies. The Milky Way is one of the largest galaxies in the group, second to the Andromeda Galaxy.[1] Milky Way's closest neighbour is Canis Major Dwarf, which is about 25,000 light years away from the Earth. The Andromeda Galaxy moves towards the Milky Way Galaxy, and will meet it in about 3.75 billion years.[8] Andromeda Galaxy moves with a speed of about 1,800 kilometres per minute</p>
	<a href="https://google.com">>About Milky Way</a>
	</section><!-- /container -->



	<section class="col-sm">
	<h2>Size</h2>
	<p>The stellar disk of the Milky Way Galaxy is approximately 100,000 light-years (9×1017 km) in diameter, and is considered to be, on average, about 1000 light years thick.[9]
	It is estimated to contain at least 200 billion stars[10] and possibly up to 400 billion stars.[11] The figure depends on the number of very low-mass, or dwarf stars, which are hard to detect, especially more than 300 light years from our sun. Therefore, present estimates of the total number are uncertain. This can be compared to the one trillion (1012) stars of the neighbouring Andromeda Galaxy </p>
	<a class="btn btn-primary" href="#" role="button">View details »</a>
	</section><!-- /col -->

	<section class="col-sm">
	<h2>Myth</h2>
	<p>
	The Milky Way's spiral arms. Our Sun is in the Orion–Cygnus Arm.
	The galactic disc, which bulges outward at the galactic center, has a diameter of 70–100,000 light years.[19]

	The exact distance from the Sun to the galactic center is debated. The latest estimates give distances to the Galactic center of 25–28,000 light years.[20][21][22][23]

	Movement of material around the galactic center shows that it has a compact object of very large mass.[24] The intense radio source named Sagittarius A*, thought to mark the center of the Milky Way, is now confirmed to be a supermassive black hole.[25] Most galaxies are believed to have a supermassive black hole at their center.[26]

	The nature of the galaxy's bar is also actively debated, with estimates for its half-length and orientation spanning from 3,300–16,000 light years (short or a long bar) and 10–50 degrees.[22][23][27] Viewed from the Andromeda Galaxy, it would be the brightest feature of our own galaxy.[28]

	Myth
	In Greek mythology, Zeus places his son (the baby Heracles) whose mother was a mortal woman on Hera's breast while she is sleeping so that the baby will drink her divine milk and become immortal. However, Hera wakes up while she is breastfeeding the baby and realizes she is nursing a baby she does not know. According to Greek mythology, she then pushes the baby away and a stream of her milk sprays the night sky, making a faint band of light known as the Milky Way </p>
	<a class="btn btn-primary" href="#" role="button">View details »</a>
	</section><!-- /col -->

	<section class="col-sm">
	<h2>Galactic center</h2>
	<p>The galactic disc, which bulges outward at the galactic center, has a diameter of 70–100,000 light years.[19]

	The exact distance from the Sun to the galactic center is debated. The latest estimates give distances to the Galactic center of 25–28,000 light years.[20][21][22][23]

	Movement of material around the galactic center shows that it has a compact object of very large mass.[24] The intense radio source named Sagittarius A*, thought to mark the center of the Milky Way, is now confirmed to be a supermassive black hole.[25] Most galaxies are believed to have a supermassive black hole at their center.</p>
	<a class="btn btn-primary" href="#" role="button">View details »</a>
	</section><!-- /col -->



	<!-- All your JavaScript comes now -->
	<!-- ============================= -->

	<!-- Bootstrap core JS -->

	<!-- Can place script tags with JavaScript files here -->

	</body>
	</html>
	.jumbotron {
	background-image: url("../img/milkyway.jpg");
	background-size: cover;
	background-color: red;
	}

	.jumbotron p {
	color: white;

	}