Portfolio page- Finally completed! Happy Coding!

Portfolio page- Finally completed! Happy Coding!
0

#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: