Prophet Cards

I styled the card with rounded corners, a border, and harmonious color tones to create a clean and visually appealing design. The content, including the title, image, biography details, and quote, is centered to maintain balance and focus. I also applied consistent typography and spacing to enhance readability and visual hierarchy.

Apostle Spotlight

To achieve a clean and balanced visual structure, I styled the images as circular portraits. I aligned them using a flexbox layout, which provided flexible spacing, wrapping, and centered alignment across the page. This approach helps maintain consistent formatting and a visually appealing arrangement. I also added a background image to enhance the overall design and visual focus.

Favorite Devo

I created a table to present my favorite devotionals and added a form for users to submit their information. I also styled both the table and the form by applying borders, background colors, and spacing to clearly distinguish the headings from the content and to create a more organized and visually appealing layout.

Halloween

To create a Halloween theme, I applied a color palette of orange and purple throughout the page. I styled the header and footer using flexbox and consistent spacing, and added custom fonts to enhance the design and mood. I also styled the central image with a themed border and rounded corners to make it stand out and match the overall aesthetic.

Grid Flags

I recreated the flags of different countries by arranging color blocks through rows and columns. This project helped reinforce my understanding of grid structure, alignment, and layout. In addition to Grid, I also applied other CSS techniques, including position and z-index, to achieve accurate flag designs and layered effects.

Positioning

I styled multiple color grids to demonstrate various layout effects. The project involved more advanced CSS techniques, including using Grid for structured layouts, overlapping elements with z-index, and floating elements to allow text wrapping. This exercise helped reinforce complex positioning, layering, and layout control in CSS.

Gallery

I optimized the images in Photopea to significantly reduce file size while maintaining quality. By using smaller image files, the gallery loads more quickly and performs more efficiently.

Sign Up

I restructured the HTML using div elements and IDs for detailed CSS styling. The form was designed and organized with the CSS Grid layout, providing my first practical experience with JavaScript in actual usage.