Our Little Church DIY:
Cards on a Page

Sometimes it is nice to attach images with links to a web page.

HTML/CSS Cards

Please study HTML/CSS Cards.

HTML Div Tag

Please study HTML Div Tag.

HTML Image as a Link

Please study HTML Image as a Link.


<!DOCTYPE html>
<!--
 * This is the Written For Christ DIY Home web-page, for Our Little Church.
 * Author: John Fischer III of Written For Christ in 2021.
 * Updated: 
-->

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <?php include("view/head.php"); ?>
        <title><?php echo CHURCH_ABBREV_NAME; ?>: Home Page</title>
        <meta name="description" content="<?php echo CHURCH_FULL_NAME; ?>" />
        <meta name="keywords" content="<?php echo CHURCH_FULL_NAME; ?> ,
                Christian, church" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <?php include("view/header.php"); ?>
        <?php include("view/nav.php"); ?>
        <div class="content">
            <article>
                <h1><?php echo CHURCH_ABBREV_NAME; ?>: Home Page</h1>

                <div class="cardRow">
                    <div class="left3Column">
                        <a href="Calendar.php">
                            <img src="/images/cards/Calendar.jpg" alt="Calendar" class="cardImage" ></img></a>
                    </div>
                    <div class="left3Column">
                        <a href="Sermons.php">
                            <img src="/images/cards/diana-polekhina-53m8pcXQQE4-unsplash1.jpg" alt="Sermons" class="cardImage" ></img></a>
                    </div>
                    <div class="left3Column">
                        <a href="Forms.php">
                            <img src="/images/cards/FormsArt_clipart-library.png" alt="Forms" class="cardImage" ></img></a>
                    </div>
                </div>
                <div>
                    <p>Our Little Church is just a sample of what you could insert here.
                        Our Little Church does not exist, except in our imagination.</p>
                    <h3>Service Hours:</h3>
                    <p>9:30 AM Pacific Time</p>
                    <h3>Culture</h3>
                    <p>Our Little Church is a non-denominational church that is home to 
                        around a couple hundred of adults, youth and children each week. 
                        There is no formal membership at Our Little Church – if you’re 
                        here you’re part of the family.</p>
                    <p>We have a relaxed atmosphere. You can find someone in jeans, 
                        worshiping next to someone in a suit and tie. It does not matter 
                        what you’re wearing, you’re invited.</p>
                    <p>We have a place for everyone in the Our Little Church family – 
                        young adults and babies, teens and seniors, kids and singles, 
                        married couples and single moms. We have special programs for 
                        the developmentally disabled. We do have childcare at our service.</p>
                </div>
            </article>
        </div>
        <?php include("view/footer.php"); ?>
    </body>
</html>

Reviewing the file:

Let us review the lines between the leading <head> and the closing </head>. The first line of the group is the "head.php" file, which we know is majority of the code for Head. The "head.php" file contains the link for the "main.css" file, which controls the responsiveness of the web pages. We do not recommend you touch the "main.css" file unless you understand HTML5 and CSS3.

The next line starts with <title> tag and is the associated <title>The <title> tag and <meta> tags use CONSTANTS, as we know in the programming world is normally done in ALL CAPITALIZATION. After you download the files, you will need to update the constants.

The <meta> tag (as you are aware) covers the description, keywords, viewport, and the author. As you remember, the Head contains the details such as the links for the CSS files, JavaScript files, Title tag, and Meta tags.