Social Media Links are not showing up in Personal Profile Page

Question

Hi All

I am working on my Personal Profile Page in the Front End Web tech degree program. My social media links have disappeared on me once I hit save in the text editor and hit the refresh webpage button. Waving the white flag on this one. (insert embarrassed Monkeyface emoji here). What am I doing wrong? Thank you all for your time! Happy Hump Day!

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Morgan Hunter'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">Morgan Hunter</li>
      <li><a href="index.html">Home</a></li>
      <li><a href="resume.html">Experience</a></li>
    </ul>
</div>

<header>
  <img src="http://placeimg.com/640/480/nature.j" alt="Beautiful Evening Image" class="profile-image">
  <h1 class="tag name">Hello, I'm Morgan.</h1>
  <p class="tag location">You can find me in Nice, California.</p>
</header>

<main class="flex">
  <div class="card">
    <h2>Background</h2>
    <p>I’m an aspiring Web Developer who loves everything about the web. I was born and raised in Sacramento, California. I have over 10 years of experience in sales and customer service. I’m excited to change my life and my career to begin the process of building fantastic looking websites.</p>
    <p>As a former college athlete I've always strived to be the best that I can be.  I am a life-long learner who is always interested in expanding my skills.</p>
  </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>Sass</li>
    </ul>
    <p>I’d like to work for a company as a Front End Web Developer, helping to create an impressive online presence.</p>
  </div>

</main>
<footer>
  <ul>
    <li><a href="https://twitter.com/HunterNation115"  target="_blank" class="social twitter">Twitter</a></li>
    <li><a href="https://www.linkedin.com/in/morgan-hunter-06a26854/" target="_blank" class="social linkedin">LinkedIn</a></li>
    <li><a href="https://github.com/MHunter3" tartet="_blank" class="social github">Github</a></li>
  </ul>
  <p class="copyright">Copyright 2017, Morgan Hunter</p>
</footer>

</body> </html>

/* Global Layout Set-up */

{ box-sizing: border-box; }

body { margin: 0; padding: 0; text-align: center; font-family: 'Roboto', sans-serif; color: #222; background-color: #00000;

} /* Link Styles */

a { text-decoration: none; color: #FEFEFE; } 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: block; margin-right: auto; color: white; } .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(5deg); } .tag { background-color: #efefef; color: black; padding: 10px; border-radius: 5px; display: table; margin: 10px auto; } .location { background-color: #222; color: yellow; } .card { margin: 30px; padding: 20px 40px 40px; max-width: 500px; text-align: left; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; transition: all .5s; } .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; 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: .4; transition: all .5s;

}

a.twitter { background-image: url(images/twitter.svg); text-decoration-color: #efefef } a.linkedin { 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: -ms-flexbox; /* TWEENER - IE 10 */ display: flex; max-width: 1200px; -ms-flex-pack: distribute; justify-content: space-around; margin: 0 auto; }

header { min-height: 470px; }

.nav { max-width: 1200px; padding: 0 30px; }

main { padding-top: 20px; }

main p { line-height: 1.6em; }

footer { font-size: 1.3em; max-width: 1200px; margin: 40px auto; }

}

Answer 1 · 2017-10-25T19:35:52Z

October 25, 2017 7:35pm

I'll check it out again just to make sure.

So firstly change the color of the anchor tags from white. Then look at this code...

a.social { display: inline-block; text-indent: -9999px; margin-left: 5px; width: 30px; height: 30px; background-size: 30px 30px; opacity: .4; transition: all .5s; }

If I comment that out your links show up.. Looks like that display: inline-block is prohibiting your text from showing up on this line of code... I'll have to tinker around as to why this is though.

Answer 2 · 2017-10-25T19:54:30Z

October 25, 2017 7:54pm

I think your problem is how you are trying to use background-image in your <a> tag. Put the social media icons in as an image using the <img src="social-icon.png"> tag and have the <a> tag wrap around the image. Then, when you click on the social icon image, you'll go to your link.

Welcome to the Treehouse Community

Looking to learn something new?

Morgan Hunter

Morgan Hunter

Social Media Links are not showing up in Personal Profile Page

Travis Batts

Travis Batts

Morgan Hunter

Morgan Hunter

2 Answers

Travis Batts

Travis Batts

woodworth

woodworth

Travis Batts

Travis Batts

Morgan Hunter

Morgan Hunter