Skip to content

Instantly share code, notes, and snippets.

@phoenixperry

phoenixperry/artpage.html

Created November 14, 2023 15:02
Show Gist options
  • Save phoenixperry/b1b2d8e4d5a0558e05dd6de0a28ed0f7 to your computer and use it in GitHub Desktop.
Save phoenixperry/b1b2d8e4d5a0558e05dd6de0a28ed0f7 to your computer and use it in GitHub Desktop.
Download ZIP
this is the html for my subpages.
Raw
artpage.html
<!DOCTYPE html>
<html>
<head>
<title>Art & Games - Phoenix Perry</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../main.css"> <!-- Link to your external CSS file -->
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
<!-- Meta Description -->
<meta name="description" content="Explore Phoenix Perry's diverse portfolio, including Alt Ctrl Games, Bot Party, Forest Daydream, Creative Coding Education, and education design for the Creative Computing Institute. Promoting Women in Computer Science.">
<!-- Meta Keywords -->
<meta name="keywords" content="Phoenix Perry, InteractML, Code Liberation, Devotion Gallery, UAL Creative Computing Institute, Alt Ctrl Games, Bot Party, Forest Daydream, Creative Coding, Goldsmiths University, Playable Experiences, Women in Computer Science, Crip Game Controllers, Digital Art, Technology, Game Development">
</head>
<body class="subpage">
<header>
<button class="hamburger">&#9776;</button> <!-- Hamburger Icon -->
<div class="container_subpage"> <!-- Note the 'subpage' class here -->
<nav class="sidebar" id="navbar">
<div class="name">
<a href="https://git.arts.ac.uk/pages/phoenixperry/site2023/">Phoenix Perry</a>
</div>
<ul class="navigation">
<li><a href="talks.html">Talks</a></li>
<li><a href="art.html">Art & Games</a></li>
<li><a href="software.html">Software</a></li>
<li><a href="academicWork.html">Academic Work</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="community.html">Community</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<div class="content">
<!-- Hero Area -->
<section class="hero">
<h1>Art & Games</h1>
<p>Your introduction or featured project description here.</p>
<!-- Optional: Featured project image -->
</section>
<!-- Project Thumbnails Section -->
<section class="project-thumbnails">
<!-- Example of a project thumbnail -->
<div class="project">
<img src="images/test_bot.jpg" alt="Project 1 Thumbnail">
<h2>Project 1 Title</h2>
<p>Forest Daydream creates a dynamic woodland atmosphere exploring the soundscape of the endangered ecology of an Amazonian rainforest. Participants interact with the forest. </p>
</div>
<div class="project">
<img src="images/test_bot.jpg" alt="Project 1 Thumbnail">
<h2>Project 1 Title</h2>
<p>Short description of Project 1.</p>
</div>
<div class="project">
<img src="images/test_bot.jpg" alt="Project 1 Thumbnail">
<h2>Project 1 Title</h2>
<p>Short description of Project 1.</p>
</div>
<div class="project">
<img src="images/test_bot.jpg" alt="Project 1 Thumbnail">
<h2>Project 1 Title</h2>
<p>Short description of Project 1.</p>
</div>
</section> <!--end of project thumbnails section -->
</div> <!--end of content div -->
</div> <!-- end container-->
<!-- Optional Footer -->
<!-- <footer>
Footer content goes here
</footer> -->
<!-- p5.js and other scripts if needed -->
<script src="scripts.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment