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
Ashyden Shayamano
399 Pointsmissing Twitter icon link, and LinkedIn icon link on example website
My example website has invisible Twitter and LinkedIn icon links. I can click on them but they are not visible to the eye on the page. It follows, I cant change the properties of the Twitter button to enable it to actually behave as a link which leads to twitter as shown in the tutorial.What could be the problem?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ashyden Shayamnao's Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head>
<body>
<div class="main-nav">
<ul class="nav">
<li class="name">Jane Smith</li>
<li><a href="#">Home</a></li>
<li><a href="resume.html">Experience</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<header>
<img src="http://placeimg.com/400/400/people" alt="Drawing of Jane Smith" class="profile-image">
<h1 class="tag name">Hello, I’m Ashyden.</h1>
<p class="tag location">My home is Bulawayo, in Zimbabwe.</p>
</header>
<main class="flex">
<div class="card">
<h2>Background</h2>
<p>I’m an aspiring web designer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs. I’m excited to bring my life experience to the process of building fantastic looking websites.</p>
<p>I’ve been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</p>
<p><a href ="#top"><img src="http://placeimg.com/400/400/people" alt="Drawing of Jane Smith" class="profile-image">This is a third paragraph</a></p> <p> This is a fourth paragraph</p>
<ul>
<li>To learn more, <a href="resume.html">view my resume.</a></li>
</ul>
</div>
<div class="card">
<h2>Goals</h2>
<p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
<ul class="skills">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Ruby</li>
<li>Rails</li>
</ul>
<p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
</div>
</main>
<footer>
<ul>
<li><a href="http://twitter.com/treehouse" target = "_blank"class="social twitter">Twitter</a></li>
<li><a href="#" class="social linkedin">LinkedIn</a></li>
<li><a href="#" class="social github">Github</a></li>
</ul>
<p class="copyright">Copyright 2015, Jane Smith</p>
</footer>
</body>
</html>
Ashyden Shayamano
399 Points@chris...its not really the code which is the problem. Just curious what could make the icons for Twitter and LinkedIn be visually be invisible on a web page yet they are included in the code shown above.
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsAshyden Shayamano - Can you post the styles.css sheet as well? I'm assuming the icons are attempting to be applied via the CSS classes .twitter / .linkedin / .github and the url() path is probably not correct to where you are storing the icons.
The HTML anchor links work but there's just no icon being applied in the CSS (usually due to an invalid path)
Ashyden Shayamano
399 Points- { box-sizing: border-box; }
body { margin: 0; padding: 0; text-align: center; font-family: 'Roboto', sans-serif; color: #222; background: #f7f5f0; } /* Link Styles */
a { text-decoration: none; color: #0499ff; } a:hover { color: #6633ff; }
/* Section Styles */
.main-nav { width: 100%; background: black; min-height: 30px; padding: 10px; position: fixed; text-align: center; } .nav { display: flex; justify-content: space-around; font-weight: 700; list-style-type: none; margin: 0 auto; padding: 0; } .nav .name { display: none; } .nav li { padding: 5px 10px 10px 10px; } .nav a { transition: all .5s; } .nav a:hover { color: white }
header { text-align: center; background: url('images/portland.jpg') no-repeat top center ; background-size: cover; overflow: hidden; padding-top: 60px; } header { line-height: 1.5; } header .profile-image { margin-top: 50px; width: 150px; height: 150px; border-radius: 50%; border: 3px solid white; transition: all .5s; } header .profile-image:hover { transform: scale(1.2) rotate(360deg); } .tag { background-color: blue; color: black; padding: 10px; border-radius: 5px; display: table; margin: 10px auto; } .location { background-color: #222; color: white; } .card { margin: 30px; padding: 20px 40px 40px; max-width: 500px; text-align: left; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; } .card:hover { border-color: #ff99ff; }
ul.skills { padding: 0; text-align: center; }
.skills li { border-radius: 6px; display: inline-block; background: #ff9904; color: white; padding: 5px 10px; margin: 2px; }
.skills li:nth-child(odd) { background: #0399ff; }
footer { width: 100%; min-height: 30px; padding: 20px 0 40px 20px; }
footer .copyright { top: -8px; margin-right: 20px; font-size: .75em; }
footer ul { list-style-type: none; margin: 0; padding: 0; }
footer ul li { display: inline-block; }
a.social { display: inline-block; text-indent: -9999px; margin-left: 5px; width: 30px; height: 30px; background-size: 30px 30px; opacity: .5; transition: all .25s; } a. { background-image: url(images/twitter.svg); } a.{ background-image: url(images/linkedin.svg); } a.github { background-image: url(images/github.svg); } a.social:hover { opacity: 1; } .clearfix { clear: both; }
/* Styles for larger screens */ @media screen and (min-width: 720px) {
.flex { display: flex; max-width: 1200px; justify-content: space-around; margin: 0 auto; }
header { min-height: 450px; }
.nav { max-width: 1200px; }
.nav .name { display: block; margin-right: auto; color: white; }
main { padding-top: 50px; }
main p { line-height: 1.6em; }
footer { font-size: 1.3em; max-width: 1200px; margin: 40px auto; }
}
1 Answer
Michael Collins
3,447 PointsThe issue is with this section of code:
a. {
background-image: url(images/twitter.svg);
}
a.{
background-image: url(images/linkedin.svg);
}
You haven't added the classes. The code should be:
a.twitter {
background-image: url(images/twitter.svg);
}
a.linkedin {
background-image: url(images/linkedin.svg);
}
Or just
.twitter {
background-image: url(images/twitter.svg);
}
.linkedin {
background-image: url(images/linkedin.svg);
}
Also on this line
<li><a href="http://twitter.com/treehouse" target = "_blank"class="social twitter">Twitter</a></li>
You need a space between target = "_blank" and class and remove the spaces around target = "_blank". Like so
<li><a href="http://twitter.com/treehouse" target="_blank" class="social twitter">Twitter</a></li>
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsChris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsHmm could you post some code? It's more than likely just pointing to the wrong path of the icons.