CODEWITHSUNDEEP
htmlcss
rdm100
rdm100

Reputation: 35

Bootstrap social media buttons won't show

The bootstrap social media buttons were showing and now they aren't and I don't know why. Any ideas?

Also when I click the contact button on the menu, the point it jumps to is not lined up with the start of the contact section, it was previously working like the rest of the sections and I can't figure that out either.

link to the code pen

.navbar {
  background-color: black;
}

.navbar ul li a {
  color: #fff !important;
  font-size: 15px;
}

.navbar ul li a:hover {
  background-color: #fff !important;
  color: black !important;
}

.navbar-brand {
  color: #fff !important;
  font-size: 20px;
}

/***** HOME *****/

#home {
  background: url("http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 680px;
}

.home-wrap {
  padding-top: 140px;
}

.home-header {
  font-family: 'Lobster';
  font-size: 80px;
  color: #fff;
}

h2 {
  font-family: 'Lobster';
  font-size: 60px;
  color: #fff;
}

.home-line {
  border: 0;
  height: 3px;
  width: 90%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 153, 0, 1), rgba(0, 0, 0, 0));
}

.btn {
  margin: 10px;
  width: 80px;
  border-radius: 5px;
  background-color: black;
  color: #fff;
  border: none;
  font-size: 20px;  
}

.btn:hover {
  background-color: silver;
  color: black;
}

/***** ABOUT *****/
#about{
  background-color: white;
  padding-bottom: 80px;
}
.about-wrap {
  width: 80%;
  margin: auto;
  margin-top: 95px;
}

h3 {
  width: 80%;
  margin: 0 auto;
  font-size: 3em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: ;
  padding: 0.2em;
}
.about-line {
  background-color: black;
  border: none;
  height: 2px;
  width: 40%;
}
 .align {
  width: 80%;
  margin: 2em auto;
  text-align: center;
}
  .imga {
    width: 120px;
    height: 120px;
    padding: 20px;
}

/***** PORTFOLIO *****/

#portfolio {
  padding-top: 30px;
  padding-bottom: 40px;
  background-color: #EEDFCC;
}

.portfolio-header {
  font-size: 3em;
  color: #000;
}
.portfolio-line {
  background-color: black;
  border: none;
  height: 2px;
  width: 40%;
}

.placeholder-item {
  margin-top: 40px;
  text-align: center;
  overflo: hidden;
}

.placeholder-desc {
  margin-top: 10px;
  font-size: 16px;
  color: #000;
}

.imgp {
  border: 1px solid black;
  border-radius: 5px;
  width: 100%;
}

.divider {
  background-color: black;
  height: 3px;
}


/***** CONTACT *****/

#contact {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 65px;
}
.contact-wrap {
  margin-top: 60px;
}
.contact-header {
  font-family: "Oswald";
  color: #000;
  font-size: 40px;
}

.contact-line {
  background-color: black;
  border: none;
  height: 2px;
  width: 40%;
}

.contact-wrap {
  margin-top: 60px;
}

form {
  margin-top: 50px;
}

input {
  width: 40%;
  height: 30px;
  margin: 10px;
}

#message {
  width: 40%;
  height: 200px;
  margin-top: 10px;
}

#submit-button {
  widh: 10%;
  height: 40px;
}

/***** FOOTER *****/

footer {
  background-color: black;
  height: 40px;
}

.footer-menu {
  margin-left: -30px;
}

.footer-menu li {
  display: inline;
  margin: 10px;
}

.footer-menu li a {
  text-decoration: none;
  color: #fff;
  font-size: 17px;
}

.footer-menu li {
  display: inline;
  margin: 10px;
}

.footer-menu li a {
  text-decoration: none;
  color: #fff;
  font-size: 17px;
}

 <head> 
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Oswald|PT+Serif' rel='stylesheet' type='text/css'>

</head>
<!-- Navigation bar with the help of bootstrap -->

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Portfolio 1st Attempt</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="home">
  <div class="home-wrap text-center">
    <h1 class="home-header">Personal Portfolio Webpage</h1>
    <h2>Social Media links</h2>
    <hr class="home-line">
    <div>
      <a class="btn btn-default" type="button"  href="#"><i class="fa fa-twitter"></i></a> 
      <a href="#" class="btn btn-default"><i class="fa fa-linkedin"></i></a>
      <a href="#" class="btn btn-default"><i class="fa fa-github"></i></a>
      <a href="#" class="btn btn-default"><i class="fa fa-fire"></i></a>
    </div>
  </div>
</div>
           <div id="about">
           <div class="container">
           <div class="about-wrap text-center">
           <h3>Skills</h3>
          <hr class="about-line">
        <div class="align">
    <div class="row">
      <div class="col-xs-6 col-sm-3">
        <a href="https://en.wikipedia.org/wiki/HTML5" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/html_u7horu.png" alt="HTML5"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/css3_v0rzyx.png" alt="CSS3"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="http://rubyonrails.org/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/rails_jusgqs.png" alt="Rails"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/javascript_a2cxa4.png" alt="Javascript" ></a>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-3">
        <a href="http://jquery.com/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/jQuery_uy0yu0.gif" alt="jQuery"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="https://www.ruby-lang.org/en/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/ruby_t0scub.png" alt="Ruby"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="http://getbootstrap.com/" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/bootstrap_xfpqre.png" alt="Bootstrap"></a>
      </div>
      <div class="col-xs-6 col-sm-3">
        <a href="https://en.wikipedia.org/wiki/SQL" target="_blank"><img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/sql_mnbnrc.png" alt="SQL"></a>
      </div>
    </div>
  </div>
</div>
      </div>
</div>
  <div id="portfolio">
  <div class="container">
    <h1 class="portfolio-header text-center">PORTFOLIO</h1>
  <hr class="portfolio-line">
    <div class="placeholder-box">
      <div class="row">
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="placeholder-item">
            <a href="#"><img class="imgp" src="https://placehold.it/350x150" alt="project"></a>
            <p class="placeholder-desc"> Placeholder</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="divider"></div>
<div id="contact">
  <div class="container">
    <div class="contact-wrap text-center">
      <h1 class="contact-header">CONTACT</h1>
      <hr class="contact-line">
      <form method="post" action="#">
        <div class="row">
          <div class="col-md-12">
            <input type="text" id="name" name="name" required="required" placeholder="Enter your name here"/>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <input type="email" id="email" name="email" placeholder="[email protected]" required="required"/>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <textarea id="message" name="message" required="required" data-minlength="20"></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <input type="submit" value="Submit" class="btn btn-default" id="submit-button" />
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<footer>
  <ul class="footer-menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</footer>

Help much appreciated,

Thanks,

Rob

Upvotes: 1

Views: 2054

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

you forget add font-awesome css

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

https://codepen.io/anon/pen/dXEjbB?editors=1100

Upvotes: 4

Related Questions