In order for us to create a multi-page website, we must construct a simple microsite.
Based on your knowledge of hyperlinks and complex layouts, proceed with creating a simple HTML/CSS webpage that introduces the subject.
Note that your CSS code will require CSS Reset in order to gain complete control over the style:
The result is a simple page with placeholder hyperlinks, which serves well as a starting point to a larger website:
Quick aside: do you see that the folder does not contain any images, yet I am able to include images using an external reference? This is all thanks to a placeholder image service, and you can learn more about it here: https://picsum.photos/
https://drive.google.com/file/d/1LtZVRx8w3f_vpOwgGZsLcAPe3a-3-MWc/view?usp=drive_link
(Updated October 31, 2023)
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Serif|Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="title">John Doe</div>
<div id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div id="content">
<img src="https://picsum.photos/800/300/?image=129">
<h1>Welcome</h1>
<p>John Doe is a Toronto-based creative.</p>
</div>
</div>
</body>
</html>
/* SKIPPING CSS RESET */
#container
{
width:600px;
margin-left: auto;
margin-right: auto;
font-family: "Helvetica";
margin-top:30px;
margin-bottom:30px;
}
#title
{
padding:15px;
background-color: black;
color: white;
margin-bottom: 5px;
font-weight:bold;
font-size:24px;
}
#menu
{
background-color: #eee;
margin-bottom: 20px;
padding: 15px;
}
#menu a
{
color:red;
text-decoration: none;
font-size:16px;
margin-right:5px;
}
#content
{
padding-left:15px;
padding-right:15px;
}
#content img
{
width: 100%;
margin-bottom: 20px;
}
#content h1
{
font-size:20px;
font-weight: bold;
margin-bottom: 15px;
}
#content p
{
line-height: 1.4;
}
#content a
{
color:red;
}