Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Sharing a Website Pick a Web Host

Posted by seth hinkle
seth hinkle
1,090 Points

How do I create a gallery page that is separate from my main index page?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Seth Hinkle | Designer></title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Niconne%7CCantarell:400,700italic,400italic%7CBilbo' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Volkhov:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Skare Krow Design Inc</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contacts</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="image02/dead%20tree.jpg"> <img src="image02/dead%20tree.jpg" alt=""> <p>Tattoo Design Of A Dead Oak Tree.</p> </a> </li> <li> <a href="image02/Sad%20Donald%20Duck.jpg"> <img src="image02/Sad%20Donald%20Duck.jpg" alt=""> <p>Tattoo of a sad looking Donald Duck, designed by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Rose%20Portrait.jpg"> <img src="image02/Rose%20Portrait.jpg" alt=""> <p>A beautiful Rose Portrait tattoo, designed by Rachel Hinkle.</p> </a> </li> <li> <a href="image02/Clown%20Moon.jpg"> <img src="image02/Clown%20Moon.jpg" alt=""> <p>Tattoo of a Festive Clown Moon, done by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Wikked%20Iron%20Cross.jpg"> <img src="image02/Wikked%20Iron%20Cross.jpg" alt=""> <p>Tattoo of a Sinister Iron Cross, designed by Seth Mosby Hinkle.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/skrow81"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/seth.hinkle2"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>Ā© Seth Mosby Hinkle.</p> </footer> </div> </body> </html>

I want to create another page for my site that separates my portfolio and main index. Like having a cover page that has all of my navigation elements, but you can only access my photos if you click on the portfolio page. How do I go about doing this?

1 Answer

Daniel Santos
Daniel Santos
34,969 Points

There are many way to do it. One way is to create another HTML file call 'however_you_want.html'. This file should have all the HTML content that you want in your portfolio page. Then create a link to that file/page. The tag should to link the page you look like:

<a href="however_you_want.html">Click here to see my portfolio</a>

This is one and easy way I can think of without using any other tools like PHP, etc. I this help let me know, if didn't help also let me know so we can find a solution.

seth hinkle
seth hinkle
1,090 Points

Do I then delete the images from my Index.html?

Can you show me a mockup of what it would look like?

Daniel Santos
Daniel Santos
34,969 Points

Of course I will show you. Give me a little time while I do it.

Daniel Santos
Daniel Santos
34,969 Points

Hi sorry for the delay. Here is an example. Don't mind my the CSS :D https://w.trhou.se/lt6sbksdn3 Check it out. Like I said earlier this is only using HTML. This is no the most efficient way to do it but as you keep learning more deep into web site front-end and back-end development you will understand what I am saying. If this helped don't forget to mark the question as answered. In any case let me know how it goes.

seth hinkle
seth hinkle
1,090 Points

That helped alot, had to change the section to another image and add a paragraph and header. Other than that, SUPER sound advice. helped alot! Now, if you could possible help me fix my image gallery.... I have nth-child(4n) in my responsive, I added more photos to my gallery and the images are breaking right, should I add another nth-child, if so, how? skarekrowdesigns.com/gallery.html to see what I am talking about.

Daniel Santos
Daniel Santos
34,969 Points

I see the problem in the website, I remember facing those brat bugs. It kind of difficult to me if I don't see you CSS. Email me to dsantosp12@me.com, so we can talk.