sighrobot/foundations-final-template-simple.html

## foundations-final-template-simple.html
<!DOCTYPE html>
<html>
  <head>
    <title>My final project | Foundations | Pratt SAVI</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP|Open+Sans" rel="stylesheet">

    <style>
        body {
            font-family: 'Open Sans';
        }

        iframe {
            margin-bottom: -20px;
            margin-top: 60px;
            height: 66.6vh;
        }

        header, section {
            margin: 0 auto;
            max-width: 970px;
            padding: 0 15px;
        }

        header {
            margin: 30px auto;
        }

        section + section {
            margin-top: 30px;
        }

        h1, h3 {
            font-family: 'Noto Serif JP';
        }

        h1 {
            font-size: 36px;
        }

        h3 {
            font-size: 20px;
        }
    </style>
  </head>
  <body>
    <header>
        <h1>My final project</h1>
        <em>By Your Name</em>
    </header>

    <section>
        <h3>Description</h3>

        <p>
            Nullam auctor quam ac augue vestibulum, at convallis lorem luctus. Nullam diam ipsum, volutpat eget nisi laoreet, tincidunt pretium nulla. Duis aliquam magna et mollis ornare. Integer odio lectus, lobortis sit amet purus a, imperdiet tristique metus. Aliquam erat volutpat. Pellentesque a metus eget est accumsan bibendum. Nunc ornare sit amet purus quis semper. Pellentesque vitae magna interdum velit scelerisque pharetra. Cras odio libero, dignissim nec malesuada pellentesque, finibus vel metus. Nunc eleifend nunc eu sapien tristique, vel vehicula tortor finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris at ligula convallis, varius sapien eget, tincidunt odio. Cras ultrices tellus eget mattis fringilla. Suspendisse leo nunc, sodales vel leo quis, egestas commodo velit. Aliquam malesuada odio non pulvinar sagittis. Morbi a est odio.
        </p>
    </section>

    <section>
        <h3>Why I made this</h3>
        <p>
            Sed fermentum diam magna. Duis hendrerit bibendum pretium. Fusce suscipit imperdiet neque, in ultricies ligula facilisis sit amet. Etiam placerat sapien vel dapibus ornare. Phasellus elementum posuere fringilla. Aliquam venenatis ante nisi, sit amet blandit urna faucibus quis. Aliquam venenatis ultricies nunc.
        </p>
    </section>

    <section>
        <h3>What I would've done with more time</h3>

        <p>
            Suspendisse tellus elit, fringilla non lacus luctus, auctor dictum augue. Donec non nisl imperdiet, congue nunc at, dignissim mauris. Vestibulum egestas, ex vel tempus pretium, diam augue cursus felis, at pulvinar metus enim sit amet urna. Vestibulum mattis arcu quis ipsum molestie, in mattis eros commodo. Aliquam nibh urna, volutpat vitae interdum quis, scelerisque sed ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget justo ac quam viverra aliquam. Sed convallis sem id augue vestibulum finibus. Nulla vehicula tellus sed sem porta sollicitudin. Vestibulum laoreet consequat magna, et molestie felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna metus. Nulla facilisi.
        </p>
    </section>

    <section>
        <h3>Problems encountered</h3>

        <p>
            Morbi maximus nisl vel augue bibendum dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse auctor tristique lectus ac pretium. Phasellus faucibus, turpis ut lacinia dictum, lorem leo viverra tortor, sed sodales dolor magna vitae sem. Donec nec nisl eget orci consectetur efficitur in at mauris. Sed feugiat volutpat tellus, eu vestibulum sapien finibus malesuada. Cras lacinia id tortor a posuere. Morbi vestibulum, diam sit amet vehicula ornare, mi erat pulvinar dui, eget scelerisque nibh metus quis dolor.
        </p>
    </section>

    <section>
        <h3>Data used</h3>

        <ul>
            <li><a href="#">Dataset 1</a></li>
            <li><a href="#">Dataset 2</a></li>
            <li><a href="#">Dataset 3</a></li>
        </ul>
    </section>

    <iframe width="100%" height="520" frameborder="0" src="https://savi.carto.com/u/arubenst/builder/75f16ef8-5bf3-46c4-bcbe-75a35d264e30/embed" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>My final project \| Foundations \| Pratt SAVI</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP\|Open+Sans" rel="stylesheet">

	<style>
	body {
	font-family: 'Open Sans';
	}

	iframe {
	margin-bottom: -20px;
	margin-top: 60px;
	height: 66.6vh;
	}

	header, section {
	margin: 0 auto;
	max-width: 970px;
	padding: 0 15px;
	}

	header {
	margin: 30px auto;
	}

	section + section {
	margin-top: 30px;
	}

	h1, h3 {
	font-family: 'Noto Serif JP';
	}

	h1 {
	font-size: 36px;
	}

	h3 {
	font-size: 20px;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>My final project</h1>
	<em>By Your Name</em>
	</header>

	<section>
	<h3>Description</h3>

	<p>
	Nullam auctor quam ac augue vestibulum, at convallis lorem luctus. Nullam diam ipsum, volutpat eget nisi laoreet, tincidunt pretium nulla. Duis aliquam magna et mollis ornare. Integer odio lectus, lobortis sit amet purus a, imperdiet tristique metus. Aliquam erat volutpat. Pellentesque a metus eget est accumsan bibendum. Nunc ornare sit amet purus quis semper. Pellentesque vitae magna interdum velit scelerisque pharetra. Cras odio libero, dignissim nec malesuada pellentesque, finibus vel metus. Nunc eleifend nunc eu sapien tristique, vel vehicula tortor finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris at ligula convallis, varius sapien eget, tincidunt odio. Cras ultrices tellus eget mattis fringilla. Suspendisse leo nunc, sodales vel leo quis, egestas commodo velit. Aliquam malesuada odio non pulvinar sagittis. Morbi a est odio.
	</p>
	</section>

	<section>
	<h3>Why I made this</h3>
	<p>
	Sed fermentum diam magna. Duis hendrerit bibendum pretium. Fusce suscipit imperdiet neque, in ultricies ligula facilisis sit amet. Etiam placerat sapien vel dapibus ornare. Phasellus elementum posuere fringilla. Aliquam venenatis ante nisi, sit amet blandit urna faucibus quis. Aliquam venenatis ultricies nunc.
	</p>
	</section>

	<section>
	<h3>What I would've done with more time</h3>

	<p>
	Suspendisse tellus elit, fringilla non lacus luctus, auctor dictum augue. Donec non nisl imperdiet, congue nunc at, dignissim mauris. Vestibulum egestas, ex vel tempus pretium, diam augue cursus felis, at pulvinar metus enim sit amet urna. Vestibulum mattis arcu quis ipsum molestie, in mattis eros commodo. Aliquam nibh urna, volutpat vitae interdum quis, scelerisque sed ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget justo ac quam viverra aliquam. Sed convallis sem id augue vestibulum finibus. Nulla vehicula tellus sed sem porta sollicitudin. Vestibulum laoreet consequat magna, et molestie felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna metus. Nulla facilisi.
	</p>
	</section>

	<section>
	<h3>Problems encountered</h3>

	<p>
	Morbi maximus nisl vel augue bibendum dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse auctor tristique lectus ac pretium. Phasellus faucibus, turpis ut lacinia dictum, lorem leo viverra tortor, sed sodales dolor magna vitae sem. Donec nec nisl eget orci consectetur efficitur in at mauris. Sed feugiat volutpat tellus, eu vestibulum sapien finibus malesuada. Cras lacinia id tortor a posuere. Morbi vestibulum, diam sit amet vehicula ornare, mi erat pulvinar dui, eget scelerisque nibh metus quis dolor.
	</p>
	</section>

	<section>
	<h3>Data used</h3>

	<ul>
	<li><a href="#">Dataset 1</a></li>
	<li><a href="#">Dataset 2</a></li>
	<li><a href="#">Dataset 3</a></li>
	</ul>
	</section>

	<iframe width="100%" height="520" frameborder="0" src="https://savi.carto.com/u/arubenst/builder/75f16ef8-5bf3-46c4-bcbe-75a35d264e30/embed" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
	</body>
	</html>