Final Project Inspirations
For this assignment I briefly created a webpage that showcases some of the works that inspired me in choosing what my final project was about. It is also included in my project proposal document and presentation. So, the webpage simply displays those works alongside a brief description.
Some of the issues I faced was refamiliarizing myself with the syntax of both Html and CSS. For example I struggled with displaying the images in my webpage, but it turns out I forgot to add the / at the end of the img tag… I guess one of the goals of this assignment is to have a better idea of the syntax we are using.
Below is both my html and CSS code:
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/style.css">
<script src="CSS/script.js" defer></script>
<script src="libs/p5.js"></script>
<title>Document</title>
</head>
<title>Inspiration</title>
<h1>Inspiration</h1>
<!-- HTML elements -->
<h2>Inspiration #1</h2>
<body>
<img src="libs\thefirst.png"/>
<img src="libs\third.png"/>
<img src="libs\pasted image 0.png"/ width = 550>
<img src="libs\second.png"/>
<p>
Here the artist Nathalie Miebach gathers weather data and creates sculpture and music composition.
(Artist Nathalie Miebach, TedTalk Global 2011, July 2011)
</p>
<h2>Inspiration #2</h2>
<img src="libs\portrait.png"/>
<p>
Demonstrates how a form of data (in this case image data) to create art.
(Espen Kluge, makes great choices while angry - 2019)
</p>
<h2>Inspiration #3</h2>
<img src="libs\unnamed (3).png"/>
<p>Variable studio's data-driven art by wimbledon statistics (Variable, Technology Garden, 2019
) </p>
</body>
</html>
</pre></code>
p{
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
color: white;
}
/* CLass you can use multiple times (usually used with CSS */
/* ID: you use once (usually used for javascript) */
.highlight-text {
color: blue;
font-weight: bold;
}
span{
color: blue;
}
body{
background-color: rgb(39, 39, 39);
text-align: center;
}
h2{
color: white;
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
text-align: center;
}
h1{
color: white;
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
text-size-adjust: 30px;
}