Tribute to chef vikash khanna

Tribute to chef vikash khanna
0

#1

Hi campers,

please review my tribute page. any feed back is appreciated.

any suggestion to minimize the custom css and completely rely on the bootstrap.


#2

Hey sachin, Nice page, just a few things though:

  1. In the HTML section of your pen, you will put your code that normally goes between the <body> </body> element of any website.

  2. With point 1 being said above, CodePen has provided an easy way to add resources like e.g. Bootstrap to use within project.You can do that simply by clicking settings at the top (Settings —> Pen settings–> HTML/ CSS/ JS) to add the respective links you have added in the HTML section of your pen.Therefore the `,

, ` elements are not needed.

3. At the Bottom of the page: There were a nesting problem with the elements
(wrong way: <a> <div> </div> </a> ).
(correct way : <div> <a> </a> </div> ) – A div tag acts as a container to hold other page elements.
.
<div> <h4>Read more at</h4> </div> <hr> <div class="row text-center"> <a href="https://www.facebook.com/VikasKhannaGroup" target="_blank"> <div class="col-xs-4 fa fa-facebook-official"><br>facebook</div> </a> <a href="https://twitter.com/TheVikasKhanna " target="_blank"> <div class="col-xs-4 fa fa-twitter"><br>twitter</div> <a href="https://en.wikipedia.org/wiki/Vikas_Khanna" target="_blank"> <div class="col-xs-4 fa fa-wikipedia-w"><br>wiki</div> </a>

3.1 The block of code below was inside the wrong div which puts the links unto the background image, and not within the "main content " div tag thus its hard to see.

One way to do it with proper nesting of tags:

<p> Read more at <a href="https://en.wikipedia.org/wiki/Vikas_Khanna" target="_blank"> wiki</a> </p> <hr> <div class="social-media text-center"> <a href="https://www.facebook.com/VikasKhannaGroup" target="_blank">Facebook</a> <a href="https://twitter.com/TheVikasKhanna " target="_blank">Twitter</a> </div>

You can place the block of code just below the last <p> </p> element which is within the "<div class="col-xs-7"> Main content </div > element " on the page.

Put in CSS styles in the CSS section of your pen:

/*for spacing between social media links  */
    .social-media a{ 
       margin-right: 15px;
    }