Emma Herman http://a1-emmaherman.Render.com
This project shows use of images in HTML using CSS to stylize my personal webpage. On this webpage I have greated a header with a profile photo which is cropped in a circular format as well as having a border added to it. The text is centered along with the profile photo to the page in order to fit when switched between device types (mobile/PC). I have created a box with a drop shadow around the body text which I have formatted using different font types, text styles, and lists. I included bulleted lists, bolding, italics, and different heading types within the website. I also messed around with margins and background colors in order to make it appear as if an image of my cat is holding up the screen. I have included a background image for the header and three other images within the website. All of them were formatted using devs to move them and their texts.
I faced a lot of challenges specifically surrounding pictures and with making the webpage look almost lifted from the background. For nearly every image I had to place it in a dev and then mess around with it in the css file until it looked the way I wanted it to. It was a lot of shifting the images around.
- Styled page with CSS: Used ul, li, br, b, p, h3 for styling Within CSS I had many sections in which I would mess with the margins, widths, heights, borders, packgrounds, and sizing of my images
- Used the Roboto Font from Google Fonts: I used Georgia for my font for this site as well as background colors and images. I did a lot of transformation and margin work in order to format each pixel in the desired way. I used flex displays to allow the webpage to move upon changing the window size. I put one image accross from text in my About Me section. I used a purple color pallet I found on google. I used about 3 different shades of purple.