Link to live website: https://blog-project-gamma-blue.vercel.app/index.html
This project consists of creating a blog post using HTML and CSS flexbox and grid. This project includes the HTML Semantics:
- header
- article
- section
- footer
And for the images:
- figure
- figcaption
My main page looks like this:
That links to the "Blog" page which looks like this:
The blog page also includes a footer:
My blog post has all the requirements:
Note that the working links are as follows:
- Home
- Blog
- Post1 (By clicking on the Read More button, links on "Popular Posts" on the sidebar, or by clicking the image at the "Featuared" section on the Home pag.
- Post2
Media Queries were used to make sure the site was responsive to different devices
References:
- Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
- Media Queries: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
- Subscribe Form: https://blog.hubspot.com/marketing/html-form-email
- Font Awesome for the socials: https://fontawesome.com/
Image References:
- Title background image: https://pixabay.com/photos/leaf-drops-veins-structure-foliage-7395982/
- Hello World Image: https://pixabay.com/photos/forest-trees-light-dust-clearing-653448/
- One Step at the Time: https://pixabay.com/illustrations/ai-generated-sneakers-meadow-8222499/
- The Structure of HTML Image: https://pixabay.com/photos/tree-nature-dusk-sunset-kahl-tree-94198/
- Styling with CSS Image: https://pixabay.com/photos/flower-cherry-blossom-sakura-7718955/
- Flexbox Image: https://pixabay.com/photos/mountains-landscape-mountain-range-4420690/
- Grid Image: https://pixabay.com/photos/stones-stone-nature-natural-3803550/