Welcome to my Website!

This is a paragraph! Here's how you make a link: Neocities. This is another sentence!

This is a slightly smaller header

This is another div, which is an HTML element used to separate content.

Here's how you can make bold and italic text.

Here's how you can add an image:

Here's how to make a list:

First thing
Second thing
Third thing

To learn more HTML/CSS, check out these tutorials!

To copy the format of this site, you will need to copy/paste HTML code for the content of the site into the your index.html file and CSS code for the styles into your style.css file.

This is the HTML code that goes into the index.html file:

          
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Huron Street</title>
  <!-- The style.css file allows you to change the look of your web pages.
        If you include the next line in all your web pages, they will all share the same look.
        This makes it easier to make new pages for your site. -->
  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>

  <div class="holy-grail-flexbox">
    
    <!-- Header -->
    <header class="header">Header</header>
    
    <!-- Main Content -->
    <main class="main-content">
      <div class="bordered">
        <h1>Welcome to my Website!</h1>
        <p>
          This is a paragraph! Here's how you make a link:
          <a href="https://neocities.org">Neocities</a>.
          This is another sentence!
        </p>
      </div>
      <div class="bordered">
        <h2>This is a slightly smaller header</h2>
        <p>This is another div, which is an HTML element used to separate content.</p>
        <p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>
        <p>Here's how you can add an image:</p>
        <img src="/neocities.png" alt="Site hosted by Neocities">
        <p>Here's how to make a list:</p>
        <ul>
          <li>First thing</li>
          <li>Second thing</li>
          <li>Third thing</li>
        </ul>
        <p>
          To learn more HTML/CSS, check out these
          <a href="https://neocities.org/tutorials">tutorials</a>!
        </p>
      </div>
    </main>
    
    <!-- Left Sidebar -->
    <section class="left-sidebar">
      <div class="bordered">
        <p>Here are some places you can explore for website graphics:</p>
        <ul>
          <li><a href="https://www.nasa.gov/images/">NASA Images</a></li>
          <li><a href="https://blinkie.world/home">blinkie.world</a></li>
          <li><a href="https://malsgraphiclibrary.straw.page/">Miles' Graphic Library</a></li>
          <li><a href="https://decohoard.carrd.co/">decohoard</a></li>
          <li><a href="https://blog.spacehey.com/entry?id=1165736">spacehey.com</a></li>
        </ul>
      </div>
    </section>
    
    <!-- Right Sidebar -->
    <aside class="right-sidebar">
      <div class="bordered">
        Right sidebar
      </div>
      <div class="bordered">
        <p>
          Here's a cool NASA image! To make clicking the image take you to the original site,
          we put the image tag (img) inside a link tag (a):
        </p>
        <a class="fit"
          href="https://www.flickr.com/photos/nasawebbtelescope/55150964901/"
          title="Messier 101 (Webb+Hubble)" target="_blank">
          <img src="https://live.staticflickr.com/65535/55150964901_3242bd1595_3k.jpg"
          width="3029" height="2108" alt="Messier 101 (Webb+Hubble)"/>
        </a>
      </div>
    </aside>
    
    <!-- Footer -->
    <footer class="footer">
      <div class="centered">
        <p>
          This website was created using the
          <a href="https://matthewjamestaylor.com/holy-grail-layout#flexbox">
            Holy Grail Flexbox Layout
          </a>
          with help from Eli, Pat, and Gus.
        </p>
      </div>
    </footer>
  </div>
</body>

This is the CSS code that goes into the style.css file:

          
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* set correct box model */
* {
    box-sizing:border-box;
}

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  margin:0rem;
}
  
.bordered {
  border: 1px solid black;
  margin: 5px;
  padding: 10px;
}

.fit img {
  width: 100%;
  height: auto;
}

.centered {
  text-align: center;
}

/* flexbox container */
.holy-grail-flexbox {
  display:flex;
  flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
  width:100%;
  padding:1rem;
}

/* background colors */
.holy-grail-flexbox > .header {background:orangered}
.holy-grail-flexbox > .main-content {background:white}
.holy-grail-flexbox > .left-sidebar {background:gold}
.holy-grail-flexbox > .right-sidebar {background:lawngreen}
.holy-grail-flexbox > .footer {background:cornflowerblue}

/* tablet breakpoint */
@media (min-width:768px) {
  .holy-grail-flexbox > .left-sidebar,
  .holy-grail-flexbox > .right-sidebar {
    width:50%;
  }
}

/* desktop breakpoint */
@media (min-width:1024px) {
  .holy-grail-flexbox > .header {
    order:-2; /* header first */
  }
  .holy-grail-flexbox > .left-sidebar {
    /* left sidebar second (first in second row) */
    order:-1; 
  }
  .holy-grail-flexbox > .main-content {
    width:50%;
  }
  .holy-grail-flexbox > .left-sidebar,
  .holy-grail-flexbox > .right-sidebar {
    width:25%;
  }
}