Website Feedback

Code Feedback
1

Hi everyone, I’m currently working on my tribute page but I’m a bit stuck at the moment.

  1. Currently trying to add social media buttons to the right hand side of the page and have them hide until the user hovers over the icons. When I try applying the code for the buttons nothing shows/they don’t show properly

  2. Also trying to apply three pictures in the background and have them lined up vertically.

https://codepen.io/Ferbet/pen/OZLYbJ -Editor View
https://codepen.io/Ferbet/full/OZLYbJ/ -Full Page

P.S. Haven’t been coding for long so I might not grasp some terminology. Any feedback to the two above issues would be gladly welcomed.

2

Hey There! I’m by no means a pro, but I’ll help you as much as I can :slight_smile:

  1. What code are you using for the social media buttons? I don’t see it in your pen.

  2. I don’t believe you can achieve the effect you’re looking for with the css background-image property. Rather, you might try including the images directly in the html, and then using the css properties z-index, position, top, and left to get it to go to the right place behind your other content. Here’s an example, followed by a quick explanation

html: <img class="img1" src = "https://i.pinimg.com/736x/de/a5/f5/dea5f554f366e6d1aea175f9f7f463ce--female-photographers-private-investigator.jpg">

css: .img1 { top: 0px; /*Put this image 0px from the top of the site*/ left: 0px; /*Put this image 0px from the left of the site*/ position: absolute; /*Required to make the 'top' and 'left' properties work*/ z-index: -1; /*Make this element appear behind other */ }

This will work the same way for your other 2 images, except that you’ll change the ‘top’ and ‘left’ values to make them show up in the right place. I forked your pen and got this working for one image here: https://codepen.io/Gkleinerva/pen/mLaBpP

You should be able to modify it without too much work to make it work for all 3!

Good Luck!

3

@Gkleinereva your a legend, I appreciate the help. I’m going to reveiw the code you added and apply the other two images immediately. Also going to see what I can do about the buttons.

P.S. The buttons I tried using before are like these: https://www.w3schools.com/howto/howto_css_social_media_buttons.asp

4

Hmmm…why don’t you try putting the buttons back into your pen and I’ll take a look?

5

Sure thing. Give me 10 mins

6

Hey, sorry for the wait.

https://codepen.io/Ferbet/pen/OZLYbJ

7

Can someone take a look at my code? There are two main things that I’m trying to do but not sure how to.

  1. Trying to make the tabs responsive in the sense that a new page with different content appears when a different tab is selected but I don’t want the page to reload/refresh.

  2. I want to get rid of the tail that’s attached to the navigation bar, also trying to bring the “Dynamic Studios” text on the same level as the tabs.

Here’s a link to my code: https://codepen.io/Ferbet/pen/OZLYbJ

P.S. Any and all feedback is welcomed.

8

Can someone take a look at my code? There are two main things that I’m trying to do but not sure how to.

Trying to make the tabs responsive in the sense that a new page with different content appears when a different tab is selected but I don’t want the page to reload/refresh.

I want to get rid of the tail that’s attached to the navigation bar, also trying to bring the “Dynamic Studios” text on the same level as the tabs.

Here’s a link to my code: https://codepen.io/Ferbet/pen/OZLYbJ 1

P.S. Any and all feedback is welcomed.