Portfolio page- Finally completed! Happy Coding!

Code Feedback
1

Dear campers I just completed my 2nd challenge - Portfolio page . I would be glad to know about your views and criticism. Thankyou and Happy Coding :grinning:
Here is the link: http://codepen.io/sweta_sharan/pen/XNmYWL?editors=1100

2

looks good. The home pic doesnā€™t resize for me, so I only see part of it.

3

Thank you :slight_smile: ā€¦ I actually donā€™t know how to make responsive image by using the css background property so there is an issue. :cry:

4

To fix the home pic, try this.

.banner{
background:url(https://dl.dropbox.com/s/mes5b4hy5ox8wl3/sweta_background.jpg?dl=0) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
height:600px;
margin-top: 0px !important;
padding-top:0px !important;
}

Itā€™s has a property value of " no-repeat center center fixed; "
It partially fixes it but it has different effect.

5

Hi, where did you learn about data-spy=ā€œscrollā€ data-target=".navbar" data-offset=ā€œ50ā€.

I havenā€™t seen that before on FCC, looks interesting. what does it do.

very clean code. good job.

to make the responsive image, i use flexbox, no need bootstrap frame work. or put class name of ā€œimg-responsiveā€ using bootstrap framework.

6

@albertyckim Thank you so much Iā€™ll try itā€¦ I had even tried a property that is background-size: contain;
it makes the image responsive as itā€™s always getting a container. but the only problem is it gives a lot of margin on top and bottom. you too can try it and may see what are the possible solutionsā€¦ :slight_smile:

7

@ricky11 data-spy=ā€œscrollā€ data-target=".navbar" data-offset="50"
this makes a smooth scrolling. I learnt it from W3Schools Bootstrap
and thank you so much for your appreciation :smile: