Create a Web Page 3

With just a few more lines of CSS in the STYLE section of our header, we can create a grid of picture links.

The 'Nip Shoppe' and 'Wealthy Cats' are external websites, while 'sample-page-1' is just a local html file.

We will need 5 items to create this page: 3 pictures and 2 html files.

These files all need to be together in the same directory, which you can download as a zip file below. Just unzip and save in your computer's file system, such as the desktop.

When you double click on the 'index.html' file, you should see the page with the 3 picture links.

You can create your own grid of image links by replacing the pictures and links, and replacing the text in 'sample-page-1'. You can add more boxes by copying the code between the 'linkgridcolumn' division tags.

CLICK HERE FOR DEMO

 index.html ▾
<!DOCTYPE html>
<html>
    <head>        
        <title>Portfolio of Projects</title>
        <style>
            body {
                text-align: center;
                font-family: 'Arial', sans-serif;
            }
            header {
                padding: 30px 0;
            }
            .linkgridcolumn {
               display: inline-block;
               max-width: 100%;
               box-sizing: border-box;
               vertical-align: top;
               margin: 5px 10px;
               width: 220px; 
               position: relative;                
            }
            
            .link-title {                 
                width: 100%;
                box-sizing: border-box;
                text-align: center;
                color: white;
                font-size: 14px;
                padding: 5px;
                background-color: black;  
            }
            .linkgridcolumn img {
                max-width: 100%;
            }

        </style>
    </head> 
    <body> 
        <header>
            <h1>Portfolio of Projects</h1>
        </header>

        <div class = 'linkgridcolumn'>
            <a href = 'https://nipshoppe.com'>
                <img src = 'Cat.jpg' alt = 'Cat'  />
                <div class = 'link-title'>The Nip Shoppe </div>
            </a>
        </div>

        <div class = 'linkgridcolumn'>
            <a href = 'https://wealthycats.com'>
                <img src = 'squeekie.jpg' alt = 'Wealthy Cat'  />
                <div class = 'link-title'>Wealthy Cats</div>
            </a>
        </div>

        <div class = 'linkgridcolumn'>
            <a href = 'web-page-sample-1.html'>            
                <img src = 'Ralph.jpg' alt = 'Ralph'  />
                <div class = 'link-title'>Web Page Sample 1</div>
            </a>    
        </div>
    </body>
</html>
 web-page-sample-1.html ▾
<!DOCTYPE html>
<html>
    <head>        
        <title>Web Page Sample 1</title>
        <style>
            body {
                text-align: center;
                font-family: 'Arial', sans-serif;
                line-height: 170%;
                font-size: 18px;
                padding-bottom: 50px;
            }
            header {
                padding: 30px 0;
            }
            .full-column {
                text-align: left;
                width: 600px;
                max-width: 100%;
                margin: auto;
            }

        </style>
    </head> 
    <body> 
        <header>
            <a href = 'index.html'>&larr; Return</a><br>
            <h1>Sample Web Page</h1>
        </header>
           
            <img  src = 'Ralph.jpg' alt = 'Ralph'/>
        <div class = 'full-column'>   
            <h4> (Author:   Ralph E. McMackerel)</h4>
            <p>Many cats are unsure about how to manage their litter boxes.   I'm here to clear up some misunderstandings.   The first thing to remember is it's not your job to keep it clean.   It's their job.   If they aren't doing their job, you have every reason to choose another spot to do your business.   Don't go nuclear on them, just find a piece of floor close to the box that they will definitely see, and hopefully step in!!</p>
            <p>Another tip - kick up as much litter as you like.  It's not your job to keep it in the box.   It's their job!   Maybe they need to get a taller box.   A light scatter of litter all around the box is a good training exercise to get them to comply.</p>
            <p>More to come!</p>
        </div>
    </body>
</html>

Website Projects

Create a Web Page 3

Download Files