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
Alexander Rivera
2,302 PointsHelp with first test project
So I'm attempting to recreate the home page of my portfolio site as a test, but I'm hitting some bumpy spots.
I am having a few problems. I can't figure out how to get two lines to be inline with the Works/Contact/About/Blog line, I can't get my a:hover to work, and the gallery pieces are floating around when they should look like my site, which is alexriveradesign.com. I also would like all of my portfolio pieces to be the same size.
Essentially, i want to redesign this in a clean way. I know it won't be as in depth as the squarespace source code, but I would like to do my best.
I am in the middle of developing this page, but I attached the different code sets below.
HTML
<!DOCTYPE html> <html>
<link rel=stylesheet href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="site.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<head> <body> <div class="header"> <div class="container"> <img src="images/static.squarespace.png"><br> <span class="p1">STATEN ISLAND</span> <span class="p2">NEW YORK</span> <span class="p3">954-551-4027</span><br> </div> <div class="container" class="hover"> <hr> <a class="p4" href="http://www.alexriveradesign.com/" class="hover">WORKS</a> <a class="p4" href="http://www.alexriveradesign.com/about/" class="hover">ABOUT</a> <a class="p4" href="http://www.alexriveradesign.com/blog/">BLOG</a> <a class="p4" href="http://www.alexriveradesign.com/contact/">CONTACT</a> <section> <ul id="gallery">
<li>
<a href="http://www.alexriveradesign.com/#/partystarter/">
<img src="images/Partystarter.png">
<p>PARTYSTARTER</p>
</a>
</li>
<li>
<a href="http://www.alexriveradesign.com/#/millennial-plated-infographics/">
<img src="images/Partystarter.png">
<p>PARTYSTARTER</p>
</a>
</li>
<li>
<a href="http://www.alexriveradesign.com/#/partystarter/">
<img src="images/Partystarter.png">
<p>PARTYSTARTER</p>
</a>
</li>
<li>
<a href="http://www.alexriveradesign.com/#/millennial-plated-infographics/">
<img src="images/Partystarter.png">
<p>PARTYSTARTER</p>
</a>
</li>
</ul>
</section>
</div>
</div>
</body>
<hr>
<hr>
</head> </html>
CSS
html { border: 2px solid #d3d3d3; padding: 25px; margin: 80px; font-family: 'Open Sans', sans-serif; font-size: 12px; letter-spacing: 3px; }
.header { text-align:center; margin: 0px 70px 0 70px; }
.header img { display: block; margin-left: auto; margin-right: auto; margin-top: 75px; margin-bottom: 5px; height: 100px; width: 100px; }
/* Contact info */
.p1 { display: inline; float: left; color: #d3d3d3 }
.p2 { display: inline; text-align: center; color: #d3d3d3 }
.p3 { display: inline; float: right; color: #d3d3d3 }
.p4 { display: inline-block; float: auto; margin: 50px 10px 0 10px; color: #888888; text-decoration: none; }
div hr { display: inline; float: left; width: 15%; color: #888888; }
hr { display: inline-block; clear: both; border: none; height: 2px; /* Set the hr color */ color: d3d3d3; background-color: #d3d3d3; margin: 60px 0 60px 0; }
<!-- Gallery -->
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; color: #bdc3c7; list-style: none; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
<!-- Hover -->
}
div a { a:link {color:#888;} a:visited {color:#888; text-decoration: none;} a:hover {color:#000; text-decoration: underline;} a:active {color:#888;} }
7 Answers
Michael Austin
Courses Plus Student 7,814 PointsHi,
Looks like you’ve solved these problems. As your site is live, it’s probably easier just to point us to your site and then we’ll view the code directly, rather than you having to copy and paste the code :)
Alexander Rivera
2,302 PointsActually I use a squarespace site currently, and that was where my link took you. I'm trying to recreate my home page through my own code that isn't identical since it won't allow for all of the customization. Thanks
Michael Austin
Courses Plus Student 7,814 PointsAh ok, so are you still having the same problems? If so can you repost up the full html and css as at the moment, you’ve got code outside the three quotes so it just gets jumbled.
Alexander Rivera
2,302 PointsI am still having the same problems, and I just reposted my code. Not sure if it's still jumbled or not. Maybe there's another way I can show you, if it is?
Michael Austin
Courses Plus Student 7,814 PointsAre you using the correct quote characters to highlighting that its code? Try copying and pasting the example tags from the Markdown Cheatsheet link. Otherwise copy and paste the file contents using https://gist.github.com/. Then post the link back here.
Alexander Rivera
2,302 PointsI apologize. Here are the links:
Alexander Rivera
2,302 PointsStill waiting for help. Thanks!
Michael Austin
Courses Plus Student 7,814 PointsMichael Austin
Courses Plus Student 7,814 PointsSite is looking good by the way!