NarrativeFlow / static /index.html
kaab4321's picture
first
9756872
Raw History Blame Contribute Delete
2.61 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home - Forward Flow</title>
<link rel="stylesheet" href="style.css" />
<style>
/* Center-align text and link in the .intro section */
.intro {
text-align: center; /* Center-align text */
}
.intro h1 {
text-align: center;
font-weight: bold;
}
.intro p {
text-align: left; /* Align paragraphs to the left */
margin: 0 auto; /* Center-align paragraphs within their container */
max-width: 500px; /* Optional: limit the width for better readability */
margin-bottom: 2em; /* Add space below paragraphs */
}
.learn-more {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #333;
color: white;
text-decoration: none;
border-radius: 5px;
}
.learn-more:hover {
background-color: #555;
}
</style>
</head>
<body>
<header class="header">
<h1>Forward Flow</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page2.html">About Forward Flow</a></li>
<li><a href="page3.html">Try it out</a></li>
<li><a href="page4.html">Analyze data</a></li>
<li><a href="page5.html">Visual Creativity</a></li>
<li><a href="page6.html">Visual Forward Flow</a></li>
</ul>
</nav>
</header>
<main class="main">
<section class="intro">
<h1>
<strong><em>How do you measure imagination?</em></strong>
</h1>
<img
src="creativity.jpeg"
alt="Imagination"
style="width: 100%; max-width: 500px; margin: 20px auto"
/>
<p>
Forward flow is a way to quantify the forward motion of naturalistic
thought. Research suggests that it is correlated with creativity. You
can learn more about it here, see your own forward flow, or upload a
file to get the forward flow of many people.
</p>
<p>
Forward flow and its link to creativity is explored in this American
Psychologist paper, which can be read as an open access preprint. Data
and materials found at OSF.
</p>
<a href="page2.html" class="learn-more">Learn More</a>
</section>
</main>
<footer class="footer">
<p>Copyright &copy; 2024 Forward Flow</p>
</footer>
</body>
</html>