cssContinued.html

<h1> CSS Continued... </h2>
    <div id="tran"> 
      <h2> Transitions </h2>
      <p> <h3> Property name, duration, timing function, delay </h3> Identify properity, then list duration of transition, use a timing function if desired (ie- ease in, ease out, steps, cubic-bezier), then delay to start transition if desired. 
      <strong> Often used with HOVER </strong>
        I.e.: transition: background-color 1s ease-in, border-radius 2s;
    </div>
    
    <div>
    <h2> Positions </h2>
    </div>
    
    <section id="BG">
    <h2> Backgrounds </h2>
    <div> <strong> <a href ="https://unsplash.com/"> Unsplash: </a> </strong> A website with great free images </div>
    <div> <strong> Attributes: </strong> size, color, position, etc. <br>
      <ul id=>
      <li> Contain: Scales the image as large as possible within its container without cropping or stretching the image. Then image will repeat unless set to "no-repeat".  This is background-size attribute.</li>
      <li> Cover: Scales the image as large as possible to fill the container, stretching if necessary.</li>
      <li></li>
        </ul>
    </div>
    </section>
    
    <section> 
      <h2> Flexbox </h2>
      <p> <strong> Display: flex; </strong> to turn on. </p>
        <ul>
          <li> <strong> Main axis: </strong> by default, goes L to R. (aka <strong> flex-direction:row) </strong> Other options: Row-reverse (R to L), <strong> Column </strong> (Top to Bottom), and <strong> Column-reverse </strong> (Botom to top)</li>
        <li> Cross axis: </li>
        <li></li>
          </ul>
    </section>