I'm going to get started on working on our home, about, and about team pages on the si

I got the slideshow to work on the <a href="http://banksy.newtfire.org/index.html" rel

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Alright! I think I got the <a href="http://banksy.newtfire.org/pages/works.html" rel="

About Team Page about banksy HOT 12 CLOSED

alnopa9 commented on July 19, 2024

About Team Page

from banksy.

Comments (12)

James-f117 commented on July 19, 2024 2

James Farley is an undergraduate Information Technology major at the University of Pittsburgh at Greensburg. He is in his fourth year of study at the University and has a diverse range of interests. James has performed in a couple of the University's theatrical performances and finds Banksy and his message very profound, moving, and interesting. He is excited to introduce Banksy and highlight the important message he is spreading with a can of spray paint!

from banksy.

alnopa9 commented on July 19, 2024 1

I got the slideshow to work on the index.html page! We can easily add more pictures, too!

from banksy.

ebeshero commented on July 19, 2024 1

@alnopa9 Wow! The Works page looks great--I've been looking at it in Firefox, Safari, and Chrome and it's pretty consistent--the images always fit and fill the space nicely. Here are some suggestions:

Check your page in the w3c Validator: It comes back with an error on your <img> elements because they need an @alt attribute to describe them for people who can't load images. https://validator.w3.org/nu/?doc=http%3A%2F%2Fbanksy.newtfire.org%2Fpages%2Fworks.html
One thing you could try is a vertical (column instead of row) flex of the <body> element with the top, middle, and bottom portions of the site. Not sure it's really necessary, but would establish the interaction/relative vertical space of these components.
You could experiment a little with the opacity / transparency of those images and maybe set a color background behind them like you did on the "About Team" page...that way your text can pop out more and the image can fade a little into the background behind it while still being impressively visible.

from banksy.

alnopa9 commented on July 19, 2024

There is a rough new index.html page! Check it out when you get the chance! If you look at the Hamilton Project the front page has a slideshow. I'd like to do something similar with some of Banksy's works where I have The Flower Thrower right now. Thoughts and ideas would be appreciated!

from banksy.

alnopa9 commented on July 19, 2024

There is a new team.html page! It just has our names and GitHub repos, but I did a hover button in our css that changes the background depending on which one your mouse is over. You can pick another color later, I just wanted the page to be a bit more fun.

from banksy.

alnopa9 commented on July 19, 2024

@James-f117 Okay! I will update your section now! Do you have a different color you'd rather have your section be, too? I have it set now as orange, but I just picked that randomly. My favorite color is green, so that's why I chose mine!

from banksy.

alnopa9 commented on July 19, 2024

Just updated the About Team page on the server!

from banksy.

alnopa9 commented on July 19, 2024

Check out the Works page and let me know if it's sized properly for your screen! It works on mine, but I may need to tweak the css for others.

from banksy.

alnopa9 commented on July 19, 2024

@ebeshero Okay, I just added the @alt values to each <img> element and also added @lang="en" to the <html> tags at the top of each page. I'm tinkering around with the css for the works page now.

from banksy.

alnopa9 commented on July 19, 2024

Alright! I think I got the Works page to a good point.

Alterations

Before- the transition would be an image with just text being covered by another image with the text in a different color. The text was not in the html in a <p> but actually on the image. This made a sloppy transition because the images weren't perfectly aligned.
Now- the text is in the html that is contained within a flexbox (which allows for easier centering). The hover effect alters this text by changing it to red with a black shadow. I was hoping the shadow will help the text pop out a little more.
Before- the image of Banksy's work was set at 1 opacity.
Now- the image of Banksy's work is set to 0.5 opacity.
I had to add a z-index value of -1 to the overlay Banksy images. If you think of the webpage containing layers, this states that the Banksy image now appears underneath the red text.
Added links to the SSI:
- The red balloon now links to Banksy's official site
- The girl now links to Banksy's Instagram
Added css styling to the links (<a> tags)
- No longer underlined
- Black text color
- Hovering over a link turns it bold, red, and has a shadow
Added overflow-y: scroll to gallery pages
Fixed flexbox spacing for gallery pages
- The <h1> and <p> tags were on the same line, now they appear on separate lines

from banksy.

abdual1100 commented on July 19, 2024

Abdual Nadeem is an undergraduate Information Technology major at the University of Pittsburgh at Greensburg. He is in his third year of study at the University and he has a lot of interests that he can't wait to accomplish before graduating. Abdual has taken a lot of classes pertaining to this topic and thats what sparked his interest in Banksy. Abdual believes that Banksy needs to be heard around the world more often and he can't wait to spread his art and beliefs through this website!

from banksy.

alnopa9 commented on July 19, 2024

@abdual1100 Okay! I just put your bio on the site!

from banksy.

About Team Page about banksy HOT 12 CLOSED

Comments (12)

Alterations

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent