survey.html

<!DOCTYPE html>
<html lang="en">

<head>
	<!-- Google tag (gtag.js) -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-H13EFXBPKL"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag() { dataLayer.push(arguments); }
		gtag('js', new Date());

		gtag('config', 'G-H13EFXBPKL');
	</script>
	<!-- Google Tag Manager -->
	<script>(function (w, d, s, l, i) {
			w[l] = w[l] || []; w[l].push({
				'gtm.start':
					new Date().getTime(), event: 'gtm.js'
			}); var f = d.getElementsByTagName(s)[0],
				j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
					'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
		})(window, document, 'script', 'dataLayer', 'GTM-WJ5WD2NX');</script>
	<!-- End Google Tag Manager -->

	<!-- Metadata 2024 -->
	<meta charset="utf-8">
	<title>Apex Housing Survey</title>
	<meta name="description" content="Explore the Town of Apex Affordable Housing Plan.">
	<meta name="keywords" content="Apex, Housing, Urban Planning, CommunityScale, Assessment, Dashboard">
	<meta name="author" content="CommunityScale">
	<link rel="canonical" href="https://communityscale.github.io/Apex/">
	<meta property="og:title" content="Town of Apex Affordable Housing Plan">
	<meta property="og:type" content="article">
	<meta property="og:url" content="https://communityscale.github.io/Apex/">
	<meta property="og:image" content="https://raw.githubusercontent.com/CommunityScale/Apex/main/images/socialcard.jpg">
	<meta property="og:description" content="Housing Study educational dashboard for Apex. Provides detailed analysis and insights on housing trends, affordability, and needs.">
	<meta property="og:site_name" content="CommunityScale">
	<meta property="og:locale" content="en_US">
	<meta property="article:author" content="CommunityScale">
	<meta property="article:tag" content="Urban Planning">
	<meta property="article:tag" content="Housing">
	<meta property="article:tag" content="Apex">
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Town of Apex Affordable Housing Plan">
	<meta name="twitter:description" content="Explore the Town of Apex Affordable Housing Plan.">
	<meta name="twitter:image" content="https://raw.githubusercontent.com/CommunityScale/Apex/main/images/socialcard.jpg">
	<meta name="twitter:creator" content="@CommunityScale">
	<meta http-equiv="content-language" content="en">

	<!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/cs-template.css">

	<!-- Fonts / icons / table
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Gloock:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://kit.fontawesome.com/b6b458829a.js" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>


	<!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<link rel="icon" type="image/png" href="images/favicon.png">

</head>

<body>
	<!-- Google Tag Manager (noscript) -->
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJ5WD2NX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
	<!-- End Google Tag Manager (noscript) -->

	<!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

	<!-- Sticky header -->
	<div class="sticky">
		<div class="topnav">
			<div class="logo-and-menu">
				<p class="inline-text">
					<img src="images/client/Apex logo.png" alt="Apex" class="inline-image" style="height: 40px; width: auto; margin-right: 10px;">
					<span class="title"><b>Housing Survey</b></span>
				</p>
				<div class="nav-options">
					<div class="desktop-pages">
						<!-- Links must be added here for desktop -->
						<a href="#Top"><span class="fa fa-arrow-up"></span> Top</a>
						<a href="index.html"><span class="fa fa-reply"></span> Home</a>
					</div>
					<div id="clickDiv" class="mobile-menu-icon">
						<a class="menu-icon">
							<i class="fa fa-bars"></i>
						</a>
					</div>
				</div>

			</div>
			<div id="targetDiv" class="">
				<!-- Links must be added here again for mobile -->
				<a href="#Top"><span class="fa fa-arrow-up"></span> Top</a>
				<a href="index.html"><span class="fa fa-reply"></span> Home</a>
			</div>
		</div>
	</div>

	<!-- Cover banner -->

	<div class="cover" id="Top" style="background:linear-gradient(to right,rgb(81, 102, 69,.8) 60%,rgba(81, 102, 69,.5)), url(images/client/cover-background.png) no-repeat center center; background-size: cover;">

		<div class="container" style="margin-top: 0">
			<h1>Affordable Housing Plan
				<br><span style="font-weight: normal;">Housing Survey</span>
			</h1>
			<div class="row">
				<div class="eight columns" style="margin-top: 2%;">
					<p>We invite you to complete this survey to support the Town of Apex' ongoing effort to update the 2021 Affordable Housing Plan, led by the Department of <a href="https://www.apexnc.org/1864/Community-Development-Neighborhood-Conne" target="_blank" rel="noopener noreferrer">Community Development and Neighborhood Connections</a> with support from <a href="https://communityscale.io/" target="_blank" rel="noopener noreferrer">CommunityScale</a>.</p>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 
╭────────────────────────╮
|    OVERVIEW            |
╰────────────────────────╯
-->

<div class="container">      
	<div class="row insight-box">
		<div class="twelve columns center-align" style="margin-top: 2%">
			<p>Placeholder survey content to be replaced with actual public event activity content once ready</p>
			<iframe src="https://docs.google.com/forms/d/14lolvA2k0AWxupL6Ua62l3P4AVKwcs0lyd5gcMJr5ps/viewform?embedded=true" width="640" height="5600" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
		</div>
	</div>
</div>


	<!-- 
╭────────────────────────╮
|    Footer              |
╰────────────────────────╯
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

	<div class="footer" style="background:linear-gradient(to right,white 80%,rgba(34, 124, 157,.1));">
		<div class="container">
			<div class="unresponsive" style="margin-bottom: 30px;">
				<div class="content-size"><a href="https://www.apexnc.org/"><img class="no-rounded-edges" src="./images/client/Apex logo.png" height="30px" width="auto" title="Apex" alt="Apex"></a></div>
				<div class="fill-space">
					<p class=""><a href="https://www.apexnc.org/" target="_blank">The Town of Apex</a> seeks to provide exceptional public service that fosters opportunity for the individual and community to live, thrive, and reach their peak.</p>
				</div>
			</div>
			<div class="unresponsive">
				<div class="content-size"><a href="http://communityscale.io"><img class="no-rounded-edges" src="./images/CommunityScale-logo.png" height="auto" width="30px" title="CommunityScale" alt="CommunityScale"></a></div>
				<div class="fill-space">
					<p class=""><a href="http://communityscale.io" target="blank">CommunityScale</a> is a pioneering urban planning and spatial data analysis company serving clients across the United States. Follow us on <a href="https://www.linkedin.com/company/communityscale">LinkedIn</a> and <a href="https://twitter.com/CommunityScale">X</a>.</p>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="nav-javascript.js"></script>

	<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

</html>