outoftime/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>My Favorite Athlete</title>
    </head>
    <body>
        <div id="title">
            <h1>Ada Lovelace</h1>
        </div>

        <div class="container">

            <div id="left">
                <ul>
                <li>1815: Born</li>
                <li>1829: Paralyzed by measles; able to walk again after two years</li>
                <li>1832: First recognized as brilliant mathematical thinker</li>
                <li>1833: Meets Charles Babbage</li>
                <li>1843: Publishes notes on Babbage’s Analytical Engine, which include the first computer algorithm in human history</li>
                <li>1852: Dies of cancer at age 36</li>
                </ul>
            </div>

            <div id="right">
                <div>
                    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Carpenter_portrait_of_Ada_Lovelace_-_detail.png">
                </div>
                <p>
                    Augusta Ada King-Noel, Countess of Lovelace, was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and created the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.
                </p>
            </div>
        </div>
    </body>
</html>

## popcode.json
{"hiddenUIComponents":["editor.javascript"]}

## styles.css
/**
TIPS:
 - Start by identifying the parent element that will be the flex box.
 - What CSS properties do you use to set the parent element's display to be a flexbox?
 - What CSS property do you use to make the child elements wrap on the page as columns?
 - How do you define how wide an element is on the page?
**/


img {
    max-height: 400px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>My Favorite Athlete</title>
	</head>
	<body>
	<div id="title">
	<h1>Ada Lovelace</h1>
	</div>

	<div class="container">

	<div id="left">
	<ul>
	<li>1815: Born</li>
	<li>1829: Paralyzed by measles; able to walk again after two years</li>
	<li>1832: First recognized as brilliant mathematical thinker</li>
	<li>1833: Meets Charles Babbage</li>
	<li>1843: Publishes notes on Babbage’s Analytical Engine, which include the first computer algorithm in human history</li>
	<li>1852: Dies of cancer at age 36</li>
	</ul>
	</div>

	<div id="right">
	<div>
	<img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Carpenter_portrait_of_Ada_Lovelace_-_detail.png">
	</div>
	<p>
	Augusta Ada King-Noel, Countess of Lovelace, was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and created the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.
	</p>
	</div>
	</div>
	</body>
	</html>
	/**
	TIPS:
	- Start by identifying the parent element that will be the flex box.
	- What CSS properties do you use to set the parent element's display to be a flexbox?
	- What CSS property do you use to make the child elements wrap on the page as columns?
	- How do you define how wide an element is on the page?
	**/





















	img {
	max-height: 400px;
	}