← Back to Projects
MkViewer - MotivationalPoster [Read-Only]
ZIP
EXPLORER
Initializing MkViewer...
README.md

Motivation Meme Project (Project 44)

A simple motivational poster webpage created as a small HTML/CSS exercise.

(README Generated by AI)

What this project is

This is a single-page static site that shows a motivational poster (image, heading and short caption). It demonstrates basic HTML and CSS layout and styling.

Key features / assignment requirements

  • Uses the Libre Baskerville font for the main heading (the project includes a link to Google Fonts in index.html).
  • White text on a black background.
  • The poster content (image, heading and paragraph) is placed inside a containing div and centered on the page.
  • The image has a 5px white border.
  • The container is centered horizontally using width 50% and margin-left: 25% (so the image set to width: 100% fills the container).
  • The h1 is styled to be uppercase using text-transform: uppercase.

Files

  • index.html — main page (contains the poster markup).
  • style.css — project stylesheet used by index.html.
  • assets/images/ — image(s) used by the poster. Replace the image file inside this folder to change the poster picture.
  • solution/ — contains an example/solution version (solution.html, solution.css) and its own assets/images.

How to view

  1. Open index.html in your browser. The simplest way is to double-click the file in your file explorer.
  2. Or from PowerShell in this project folder you can run:

powershell Start-Process .\index.html

This will open the page in your default browser.

How to change the image

  1. Put your image file inside assets/images/.
  2. Update the src attribute of the <image> tag in index.html (for example assets/images/your-image.jpg).
  3. The stylesheet already sets the image to fill the container; use images with a decent resolution so they look sharp.

Notes / improvements

  • The index.html currently uses a link rel="preconnect" to the Google Fonts specimen page — to properly load the font in production you can replace it with the standard Google Fonts embed link, for example:

html <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">

  • If you want to serve this over HTTP during development, run a small static server (for example using npx http-server or Python's python -m http.server) and open http://localhost:PORT.

License & Credits

This is a small demo created for learning purposes. Use and modify freely.