Untitled

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml%22%3E">
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="styles.css">
	<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
	<link href='https://fonts.googleapis.com/css?family=Athiti' rel='stylesheet'>
	<title>Creativity without frontiers</title>
	<header>
		<a href="Homepage.html" class="visited"><img src="site.png" class="img"></a>

	</header>
</head>
<body>
	<h1 class="titleheader" font><a href="Homepage.html" class="visited">  CREATIVITY WITHOUT FRONTIERS </a></h1>
	<br>
	<div class="row">
		<div class="column">

			<p><a href="Homepage.html" class="visited">Home</a></p>

		</div>
		<div class="column">

			<p><a href="Activities.html" class="visited">Activities</a></p>

		</div>
		<div class="column">

			<p><a href="Materials.html" class="visited">Materials</a></p>

		</div>
		<div class="column">

			<p><a href="PhotosVideos.html" class="visited">Photos & Videos</a></p>

		</div>
	</div>


</body>
</html>


CSS:


.img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 40%;
	margin-top: 1%;
}

.titleheader {
	display: block;
	margin-left: 20%;
	margin-right: 20%;
	color: darkblue;
	font-family: 'Raleway';
	font-size:40px;
	text-align:center;
	letter-spacing:3px;
	font-weight:100;
}


ul#menu li {
	list-style-type: none;
	display: inline;

}
.column {
	margin-left: 3.5vw;
	margin-right: 3.5vw;
	float: left;
	font-family: 'Athiti';
	color:mediumblue;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.row {
	margin-left: 25%;
	margin-right: 25%;
	vertical-align:middle;


}

a, a:visited, a:hover, a:active {
	color: inherit;
	text-decoration: none;
}