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
Jared Hensley
8,106 PointsWhy does his twitter link in the about page show up but mine doesn't?
I went in added an idtag in the paragraph portion that has the anchor. I then referenced this idtag in my css file and changed the font color, I'm learning! But this isn't done in the video and his link shows up without doing this. However, it shouldn't! From the previous videos, we set the anchors to all be white, but now we are creating a link on a white background in the about page...seems like treehouse skipped over something here?
Jared Hensley
8,106 Pointsthe id tag that I added is #abouttwitter, this is allowing me to manually change the color of this one problem area. I'll also post my html code for the about page below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jared Hensley | Web Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jared Hensley</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/Jared.jpg" alt="Photograph of Jared Hensley" class="profile-photo">
<h3>About</h3>
<p> Hello! My name is Jared Hensley. I am just beginning my journey into the world of web development and programming. I am extremely self-motivated and have the ability to teach new concepts to myself and others. I am graduating with a Bachelor of Science in Biology this summer; however, I also have a business background with degrees in finance and enjoy the detailed nuances of of a variety of subjects. Perhaps this is why I am drawn to programming! Outside of academia and a constant pursuit of new skills, I'm quite passionate about physical fitness. I'm currently on track to start start physical therapy school this fall at the University of South Carolina, but things might be changing if all goes as plan ;) </p>
<p>If you would like to follow me on Twitter, my username is <a href="http://www.twitter.com/jaredhensley732" id= "abouttwitter">@Jaredhensley732</a>.</p>
</section>
<footer>
<a href="http://twitter.com/jaredhensley732"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/mcflyhensley"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Jared Hensley.</p>
</footer>
</div>
</body>
</html>
Jared Hensley
8,106 Pointswell, I just remembered that I changed the color of links in my css to white in order to make my navigation links white (they were showing up as a different shade of green). you can see that in my code in the follow section of css. But then the original problem still persists, why are my headings not white by default like how the instructor has his in the tutorial. This is all really helping me learn how css works with html so it's a good learning exercise for sure. Thanks!
/* link colors */
a {
color: #fff;
}
Jared Hensley
8,106 PointsWhat I ended up doing was adding this and undoing everything else I changed, so now my code looks like the following and has everything working. Although it is slightly different by this one addition to the css:
nav ul li a {
color: #fff;
}
/********************************
GENERAL
*********************************/
body {
font-family: 'Open San', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/********************************
HEADING
*********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'changa one', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em
margin: -5px 0 0;
font-weight: normal;
}
/********************************
NAVIGATION
*********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/********************************
FOOTER
*********************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20x;
margin: 0 5px;
}
/********************************
PAGE: PORTFOLIO
*********************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/********************************
PAGE: ABOUT
*********************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%
}
/********************************
COLORS
*********************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
nav ul li a {
color: #fff;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* link colors */
a {
color: #6ab47b;
}
#abouttwitter {
color: #0000ff
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
1 Answer
Daniel Santos
34,969 PointsHi Jared, nice to heard that everything is working. Next time when you have problems like this that you have to share a lot of code, snapshot your workspace. It's easier for people to help you out.
If you don't know how to do it, here its a link: https://teamtreehouse.com/forum/workspace-snapshots
I hope you keep learning!
Jared Hensley
8,106 PointsJared Hensley
8,106 Points