My Pet’s Stories

Varvara
I am a 2nd grader from Ras Al Khaimah, and I love art, cooking, and coding

About  The Project:

We all love our pets! They are our best friends, bringing joy and happiness into our lives. In this project, we will create a Pet Profile Page using HTML & CSS to share our pets’ pictures and stories.

You can enhance the project by adding a gallery, interactive features like a ‘Like’ button, or even an option to download images.

Technologies Used:

  • HTML – To structure the webpage.
  • CSS – To style and enhance the page layout.
  • IDE: EduBlocks HTML

1. Set up the Page

  • Create a new HTML project.
  • Use the HTML block to add <html>, <head>, and <body>.

2. Create the Pet Profile

  • Add a <h1> tag for the title: “My Pet’s Story”.
  • Use an <img> tag to insert the pet’s picture (use a URL or upload).
  • Add <p> tags for pet details (Name, Age, Breed).
  • Write the pet’s story inside another <p> tag.

3. Style with CSS

  • Use a <style> tag inside <head>.
  • Set background-color, font-size, and text-align.
  • Apply border-radius and box-shadow to images for a neat look.

4. Optional Enhancements

  • Add a <button> below the profile for a “Like” feature.
  • Use multiple <img> tags to create a simple gallery.