ckportfolio.com - Microsite Setup

Microsite Setup

Microsite Construction

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/

Screencast Recording

https://drive.google.com/file/d/1LtZVRx8w3f_vpOwgGZsLcAPe3a-3-MWc/view?usp=drive_link

(Updated October 31, 2023)

Code Sample: HTML

<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>

Code Sample: CSS

/* 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;  
}
Fin