5
\$\begingroup\$

I have finished and launched my first website and would love some feedback/ideas for improvement. This is a single page website for the purpose of displaying my finished projects. I know that I have used a lot of !important declarations to make things work properly. I have also used many media queries to have things be positioned where I want them. Any help is greatly appreciated. Thank you. Here is the website

HTML:

<!DOCTYPE html>
<html >
  <head>





<!--Meta -->
<title>Goode Development</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<link rel="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'>

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

   <script src="js/index.js"></script>
<!--Meta -->

 </head>


  <body>

    <!DOCTYPE html>
<html lang="en">


<!--Navbar-->

<body>
<div class ="wrappers">
  <div class="home">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button id="btnCollapse" 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>
          <h1 class="navbar-brand">Goode Development</h1>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-left">
            <li><a class="a" href="#homey">Home</a></li>
            <li><a class="a" href="#abou">About</a></li>
            <li><a class="a" href="#porty">Portfolio</a></li>
            <li><a class="a" href="#conty">Contact</a></li>
          </ul>
        </div>
      </div>

    </nav>

    <!--End Navbar-->


    <!--header -->
    <div id="intro">
      <a name="homey"> </a>
      <div class="jumbotron">
        <h1 class="text-center" id="head">Kyle Goode</h1>
        <p class="text-center" id="header">Full Stack Web Developer</p>
      </div>
    </div>
  </div>
  <!-- End header-->
  <!--End home-->

  <!-- About -->
  <a name="abou"> </a>
  <div class="wrapper" id="box">
    <div class="about">
      <h1 class="text-center">About</h1>
      <p class="text-center" id="myth">The man...The myth...The legend</p>
      <article>
        <div class="img-wrap">
          <img id="pic" src="http://i725.photobucket.com/albums/ww259/kgoode517/IMG_6189_zpsxtlvi4iq.jpg" alt="IMG_6189">
        </div>
        <p>
          Kyle Goode is a young, caffeine dependent, Nashville local. He went to school in a small town just West of Nashville where he met and married his high school sweetheart. It is in that small town that Kyle's passion for technology began.Kyle has been amazed
          with technology and programming even as a child,from trying to read code and quickly realizing he couldn't read the long "words" it was making to taking apart the family computers, much to the chagrin of his parents. Though his adult life has
          been spent in the medical field, Kyle is excited to begin transitioning his hobby and passion to his profession.
        </p>
      </article>
      <div class="container" id="mine">
        <h1 class="text-center" id="kyle">Kyle Goode-the man in bullet points</h1>
        <ul class="text-left" id="profile">
          <li>Good Samaritan</li>
          <li>Prefers puns intended</li>
          <li>Especially gifted napper</li>
          <li>Devoted to both programming and Game of Thrones</li>
          <li>Codes for fun</li>
          <li>Making History</li>
          <li>Goes into survival mode if tickled</li>
          <li>Anxiously awaiting you to connect with him for projects.</li>
        </ul>
      </div>
    </div>
    <!--skills-->
    <div class="skills">
      <h1 class="text-center">Skills</h1>
      <ul id="list">
        <li>Html5</li>
        <li>CSS3</li>
        <li>Javascript</li>
        <li>Ruby</li>
        <li>Bootstrap</li>
        <li>Jquery</li>
        <li>Rails</li>
        <li>Git</li>
      </ul>
    </div>
    <!--end Skills-->
    <!--end About-->

    <!-- Begin Portfolio -->
  </div>
  <a name="porty"></a>
  <div class="portfolio">
    <div class="container">
      <h1 class="text-center">My Work</h1>
      <div class="row">


        <div class="col-md-4">
          <div class="thumbnail">
            <div class="caption">
              <h4 class="text-center">A Berine Sanders Tribute page made with HTML,CSS, and Bootstrap</h4> <a href="http://codepen.io/kgoode517/full/WwjNqp/"><i class="fa fa-codepen fa-5x fa-fw" id="first"></i> </a>
            </div>
            <img src="http://i725.photobucket.com/albums/ww259/kgoode517/Bernie_zps19tpxug7.png" class="img-responsive" alt="tribute">
          </div>
          <legend>Tribute page</legend>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <div class="caption">
              <h4 class="text-center">Google mockup page made with HTML,CSS,and Bootstrap</h4>
              <a href="http://codepen.io/kgoode517/full/yYddbb/"><i class="fa fa-codepen fa-5x fa-fw" id ="second"></i> </a>
            </div>
            <img src="http://i725.photobucket.com/albums/ww259/kgoode517/google_zpsxa3kemaw.png" class="img-responsive" alt="google">
          </div>
          <legend>Google homepage</legend>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <div class="caption">
              <h4 class="text-center">A cannon game made with HTML,CSS, and Javascript</h4>
              <a href="http://codepen.io/kgoode517/full/LNdxKE/"><i class="fa fa-codepen fa-5x fa-fw" id ="icon"></i> </a>
            </div>
            <img src="http://i725.photobucket.com/albums/ww259/kgoode517/cannon_zpsoqkqkueg.png" class="img-responsive" alt="cannon">
          </div>
          <legend>Cannon game</legend>
        </div>
      </div>
      <!--/row -->

    </div>
    <!-- end container -->
  </div>

  <!-- End Portfolio-->

  <!-- Footer -->
  <div class="foot">
    <h2 class="text-center">Contact me</h2>
    <div class="text-center">
      <div class="icons">
          <a name="conty"></a>
        <a href="https://www.facebook.com/goodedevelopment/" target="_blank"><i class="fa fa-facebook-official fa-5x fa-fw"></i> </a>
        <a href="https://github.com/kgoode517" target="_blank"><i class="fa fa-github-square fa-5x fa-fw"></i> </a>
        <a href="http://codepen.io/kgoode517/" target="_blank"><i class="fa fa-codepen fa-5x fa-fw"></i> </a>
        <a href="https://www.linkedin.com/in/kyle-goode-08b80b104" target="_blank"><i class="fa fa-linkedin-square fa-5x fa-fw"></i></a>
        <a href="mailto:Goodedevelopment@yahoo.com"><i class="fa fa-envelope fa-5x fa-fw"></i></a>
      </div>
    </div>


    <!--copyright -->
    <footer class="text-center">
      <small> &reg Goode Development 2016. All Rights Reserved</small>
    </footer>
  </div>
  <!-- end copyright-->
  <!--End Footer-->
  </div>
</body>

</html>






  </body>
</html>

CSS:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.wrappers{
  overflow-x: hidden;
}

/*Navbar*/

.navbar {
  height: 125px;
}

.navbar-brand {
  position: relative!important;
  left: 45px!important;
  bottom: 10px!important;
  font-size: 4em!important;
  color: white!important;
  font-family: "Montserrat", sans-serif !important;
  white-space:nowrap;
}

.nav.navbar-nav.navbar-left li a {
  color: white;
  position: relative;
  right: 475px;
  top: 66px;
  font-family: "Montserrat", sans-serif !important;
}

.nav.navbar-nav.navbar-left li a:hover {
  color: orange;
}

@media screen and (max-width: 990px) {
  .navbar-header {
    float: none !important;
  }
  .navbar-brand {
    left: 0 !important;
  }
  .nav li a {
    padding: 5px;
    margin-right: 50px;
  }
  .nav.navbar-nav.navbar-left li a {
    color: white;
    right: 0px;
    top: 0px;
  }
}

@media screen and (max-width: 767px) {
  .navbar-brand {
    font-size: 40px !important;
    position: relative !important;
    top: -20px !important;
    left: -10px !important;
  }
  .navbar {
    height: 70px;
  }
  .nav.navbar-nav.navbar-left li a {
    color: black;
    right: 0;
    top: 0;
  }
  .collapsing,
  .in {
    background-color: #222222;
    position: relative;
    top: -30px;
  }
  .collapsing ul li a,
  .in ul li a {
    color: white!important;
  }
  .collapsing ul li a:hover,
  .in ul li a:hover {
    color: orange!important;
  }
}

@media screen and (max-width: 568px) {
  .navbar-brand {
    font-size: 30px !important;
    position: relative !important;
    bottom: 20px !important;
    left: -3px !important;
    !important;
  }
  .navbar {
    height: 50px;
  }
}

@media screen and (max-width: 420px) {
  .navbar-brand {
    font-size: 25px !important;
  }
}

@media screen and (max-width: 370px) {
  .navbar-brand {
    font-size: 20px !important;
  }
}

@media screen and (max-width: 325px) {
  .navbar-brand {
    font-size: 15px !important;
  }
}


/*End Navbar*/


/*Home Page*/

.jumbotron {
  background: transparent !important;
  color: white !important;
  font-family: "Roboto", sans-serif !important;
  position: relative;
  top: 300px;
}

.jumbotron h1 {
  font-size: 6.5em !important;
}

.home {
  background: url(http://mrg.bz/VN5LDd) no-repeat center;
  background-size: cover !important;
  z-index: -1;
  height: 1000px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
 background-position: center center !important;
}

@media screen and (max-width: 768px) {
  .home {
    height: 1050px;
  }
  .jumbotron {
    top: 250px;
  }
  .jumbotron h1 {
    font-size: 5.5em !important;
  }
}
@media screen and (max-width: 700px){
  .home{
  background-size:cover !important;
  }
 .home {
    height: 800px;
  }

}


@media screen and (max-width: 568px) {
  .jumbotron h1 {
    font-size: 4.5em !important;
  }
}

@media screen and (max-width: 370px) {
  .jumbotron {
    top: 225px;
  }
.home {
    height: 700px;
  }
}

@media screen and (max-width: 325px) {
  .jumbotron {
    top: 175px;
  }
  .jumbotron h1 {
    font-size: 3.5em !important;
  }
  .jumbotron p {
    font-size: 1em !important;
  }
.home {
    height: 600px;
  }
}


/*End Home Page */


/*About Page*/

.about {
  background: linear-gradient(180deg, darkgrey, grey);
  background-size: cover;
  background-attachment: fixed;
  display: inline-block;
  width: 100%;
  height: 900px;
  font-size: 25px;
  font-family: "Roboto", sans-serif !important;
  word-wrap: break-word;
}

.about:after {
  clear: both;
  visibility: hidden;
}

.about h1 {
  font-size: 55px;
  font-family: "Montserrat" ,serif !important;
  position: relative;
  top: 15px;
  color: black;
}

#myth {
  color: black;
  padding-top: 15px;
  position: relative;
  left: 15px;
  font-size: 28px;
}

#pic {
  width: 255%;
  height: 255%;
  position: relative;
  top: 10px;
  right: 385px;
}

.img-wrap {
  float: left;
  height: 200px;
  width: 200px;
  position: relative;
}

.img-wrap img {
  width: 100%;
}

article {
  width: 40em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 1em;
  left: 200px;
  color: black;
}

#mine {
  position: relative;
  left: 200px;
}

article p {
  overflow: hidden;
  font-size: 20px;
}

#kyle {
  font-size: 25px;
  position: relative;
  top: 35px;
  right: 71px;
}

#profile li {
  font-size: 22px;
  position: relative;
  top: 40px;
  left: 250px;
  color: black;
}

.skills {
  width: 100%;
  height: 225px;
  /*background-color: #dbdbdb*/
  background: linear-gradient(180deg, white, #dbdbdb);
  white-space: normal;
  background-attachment: fixed;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-size: 30px;
}

.skills h1 {
  font-size: 55px;
  color: black;
  font-family: "Montserrat",serif !important;
}

.skills li {
  font-size: 25px;
}

#list li {
  margin-right: 2em;
  position: relative;
  bottom: -25px;
  color: black;
  font-family: 'Roboto',serif !important;
}

#list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  list-style-type: none;
}

@media screen and (max-width: 1450px) {
  article {
    width: 35em;
  }
  #mine {
    position: relative;
    left: 260px;
  }
  #pic {
    width: 270%;
    height: 270%;
  }
}

@media screen and (max-width: 1300px) {
  article {
    width: 30em;
  }
  #pic {
    width: 285%;
    height: 285%;
    position: relative;
    right: 415px;
  }
  #mine {
    position: relative;
    left: 320px;
  }
  #kyle {
    font-size: 22px;
    position: relative;
    right: 100px;
  }
  #profile li {
    font-size: 20px;
  }
}

@media screen and (max-width: 1200px) {
  .about h1 {
    font-size: 45px;
  }
  .skills h1 {
    font-size: 45px;
  }
  #myth {
    font-size: 25px;
  }
  #pic {
    width: 280%;
    height: 280%;
    position: relative;
    right: 425px;
  }
  article {
    width: 25em;
  }
  article p {
    font-size: 18px;
    position: relative;
    right: 45px;
  }
  #kyle {
    font-size: 20px;
  }
  #profile li {
    font-size: 18px;
    position: relative;
    left: 170px;
  }
}

@media screen and (max-width: 1100px) {
  article p {
    font-size: 16px;
  }
  #kyle {
    font-size: 18px;
  }
  #profile li {
    font-size: 16px;
    position: relative;
    left: 185px;
  }
  #pic {
    width: 230%;
    height: 230%;
    position: relative;
    right: 345px;
    top: 6px;
  }
  .about {
    height: 725px;
  }
}

@media screen and (max-width: 991px) {
  #profile {
    position: relative !important;
    left: -110px;
  }
}

@media screen and (max-width: 965px) {
  .img-wrap {
    float: none;
  }
  #pic {
    height: 110%;
    width: 110%;
    position: relative;
    right: 220px;
    top: 150px;
  }
  article p {
    width: 46em;
    position: relative;
    bottom: 220px;
    right: 220px;
  }
  #kyle {
    position: relative;
    top: -190px;
    right: 175px;
  }
  #profile {
    position: relative;
    bottom: 230px;
    left: -185px;
  }
  .about {
    height: 600px;
  }
  .skills {
    position: relative;
    bottom: 120px;
  }
}

@media screen and (max-width: 815px) {
  article p {
    width: 40em;
    position: relative;
    right: 175px;
  }
  #pic {
    position: relative;
    right: 175px;
    top: 160px;
  }
  #kyle {
    position: relative;
    top: -195px;
    right: 195px;
  }
  .skills {
    position: relative;
    bottom: 140px;
  }
  #profile li {
    position: relative;
    left: 165px;
    top: 35px;
  }
}

@media screen and (max-width: 767px) {
  article p {
    width: 30em;
    position: relative;
    right: 20px;
    font-size: 15px;
  }
  .about {
    height: 655px;
  }
  #pic {
    position: relative;
    right: 225px;
    top: -15px;
    height: 90%;
    width: 90%;
  }
  #kyle {
    position: relative;
    right: 300px;
  }
  #profile {
    position: relative;
    left: -290px;
  }
  #list li {
    font-size: 20px;
  }
}

@media screen and (max-width: 695px) {
  article p {
    width: 40em;
    position: relative;
    bottom: 0px;
    right: 175px;
    padding-top:15px;
    padding-bottom:5px;
  }
  .about {
    height: 950px;
  }
  #pic {
    position: relative;
    right: -35px;
    height:100%;
    width: 100%;
  }
  #kyle {
    position: relative;
    top: 10px;
  }
  #profile {
    position: relative;
    top: -10px;
    left: -325px;
  }
}

@media screen and (max-width: 650px) {
  article p {
    width: 35em;
    right: 145px;
  }
}

@media screen and (max-width: 601px) {
  #pic {
    right: 0px;
  }
}

@media screen and (max-width: 615px) {
  article p {
    right: 160px;
  }
  #kyle {
    right: 300px;
  }
  #profile {
    left: -370px;
  }
}

@media screen and (max-width: 580px) {
  article p {
    right: 180px;
  }
}

@media screen and (max-width: 570px) {
  article p {
    width: 30em;
    right: 150px;
  }
  #kyle {
    right: 380px;
  }
  #profile {
    left: -470px;
  }
  .about {
    height: 1000px;
  }
}

@media screen and (max-width: 568px) {
  #myth {
    font-size: 22px;
  }
}

@media screen and (max-width: 560px) {
  #kyle {
    positon: fixed;
    right: 375px;
  }
}

@media screen and (max-width: 535px) {
  #pic {
    right: 20px;
  }
}

@media screen and (max-width: 515px) {
  article p {
    width: 25em;
    right: 135px;
  }
  .about {
    height: 1050px;
  }
  #kyle {
    right: 350px;
  }
  #pic {
    right: 45px;
  }
}

@media screen and (max-width: 475px) {
  #pic {
    right: 45px;
  }
  article p {
    right: 155px;
  }
}

@media screen and (max-width: 468px) {
  .about {
    height: 1025px;
  }
  #pic {
    right: 55px;
  }
}

@media screen and (max-width: 445px) {
  .about {
    height: 1100px;
  }
}

@media screen and (max-width: 440px) {
  article p {
    width: 22em;
    text-align: left;
    right: 150px;
  }
}

@media screen and (max-width: 425px) {
  #pic {
    right: 65px;
  }
}

@media screen and (max-width: 405px) {
  #kyle {
    right: 320px;
  }
}

@media screen and (max-width: 400px) {
  article p {
    right: 170px;
  }
  #pic {
    right: 85px;
  }
  #profile {
    left: -500px;
  }
}

@media screen and (max-width: 375px) {
  article p {
    right: 180px;
  }
  .about {
    height: 1150px;
  }
  #pic {
    right: 100px;
  }
}

@media screen and (max-width: 366px) {
  #myth {
    font-size: 20px;
  }
  #list li {
    bottom: 10px;
  }
}

@media screen and (max-width: 350px) {
  article p {
    width: 19em;
  }
  #pic {
    right: 105px;
  }
  .about {
    height: 1200px;
  }
}

@media screen and (max-width: 350px) @media screen and (max-width: 325px) {
  article p {
    width: 18em;
  }
  #pic {
    right: 125px;
  }
}

@media screen and (max-width: 330px) {
  #myth {
    left: -5px;
  }
#pic {
    right: 130px;
  }
}

@media screen and (max-width: 315px) {
  #pic {
    right: 14px;
  }
}

@media screen and (max-width: 305px) {
  article p {
    width: 16em;
  }
  .about {
    height: 1250px;
  }
  #pic {
    right: 145px;
  }
}

@media screen and (max-width: 295px) {
  .about {
    height: 1300px;
  }
}

@media screen and (max-width: 275px) {
  #pic {
    right: 155px;
  }
}


/*End About*/


/*Portfolio*/

.portfolio {
  padding-top: 50px;
  padding-bottom: 100px;
  background-size: cover;
  background-attachment: fixed;
  display: inline-block;
  width: 100%;
  height: 700px;
}

.portfolio h1 {
  font-size: 55px;
  font-family: "Montserrat",serif !important;
  color: black !important;
}

.row {
  padding-top: 50px;
}

.thumbnail {
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid black !important;
}

.caption img {
  flex-shrink: 0;
  max-width 100%;
  max-height: 100%;
}

.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(128, 128, 128, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: center;
  color: #fff !important;
  z-index: 2;
  font-family: "Montserrat",serif !important;
}

.caption a {
  text-decoration: none;
  color: white;
}

.caption h4 {
  position: relative;
  left: 5px;
  bottom: 10px;
  font-size: 25px;
}

.caption i:hover {
  color: orange !important;
}

legend {
  font-family: "Montserrat",serif !important;
  border-bottom: none !important;
  color: black;
}

#first {
  position: relative !important;
  bottom: -35px !important;
}

#second {
  position: relative !important;
  bottom: -35px !important;
}

#icon {
  position: relative;
  top: 30px;
}

@media screen and (min-width:767px) and (max-width:1199px) {
  #first {
    position: relative;
    bottom: 20px;
  }
  #icon {
    top: 50px !important;
  }
  .caption h4 {
    font-size: 20px;
  }
  .caption .fa {
    font-size: 70px !important;
  }
}

@media screen and (min-width:767px) and (max-width:991px) {
  #first {
    position: relative;
    top: 50px;
  }
  .caption h4 {
    font-size: 30px;
  }
  .caption {
    font-size: 15px;
  }
  .caption i {
    position: relative;
    top: 50px;
  }
  #icon {
    position: relative;
    top: 65px !important;
  }
  .caption .fa {
    font-size: 50px;
  }
}

@media screen and (max-width: 965px) {
  .portfolio {
    margin-top: -150px !important;
  }
}

@media screen and (max-width:767px) {
  #first {
    position: relative;
    top: 25px;
  }
  .caption h4 {
    font-size: 30px;
  }
  .caption {
    font-size: 15px;
  }
}

@media screen and (max-width: 1200px) {
  .portfolio h1 {
    font-size: 45px;
  }
}


@media screen and (max-width: 965px) {
  .portfolio {
    margin-top: -150px !important;
  }
}

@media screen and (max-width: 454px){
  .caption h4{
  font-size:25px;
  }
  #first{
   top:15px;
  }
  #second{
   top:15px;
  }
}



@media screen and (max-width:400px) {
  #icon {
    position: relative;
    bottom: 20px;
  }
}

@media screen and (max-width:397px) {
  #icon {
    position: relative;
    top: 0px;
  }
}
@media screen and (max-width:390px) {
  #first{
  top:5px;
  }
  }
@media screen and (max-width:325px) {
  .caption .fa {
  font-size:60px;
  }
  }
@media screen and (max-width:307px) {
  #first{
   top:-5px; 
  }
  }

/*End Portfolio*/


/*Footer*/

.foot i {
  color: white !important;
  margin-right: 0.16em;
  width: 90px;
}

.icons i:hover {
  color: orange !important;
  position: relative;
  bottom: 5px !important;
}

.foot {
  width: 100%;
  background-color: black;
  color: white;
  padding-top: 20px;
  float: left;
  border-top: 1px solid black;
}

.foot h2 {
  font-family: 'Roboto', sans-serif !important;
  position: relative;
  bottom: 15px;
}

footer small {
  font-family: 'Roboto', sans-serif !important;
}

footer {
  background-color: black;
  color: white;
}

.icons {
  display: inline-block;
  padding-bottom: 10px;
}

.icons a {
  text-decoration: none !important;
}

@media screen and (max-width: 1200px) {
  .foot .fa {
    font-size: 50px;
  }
  .foot i {
    margin-right: -10;
  }
}

@media screen and (max-width: 992px) {
  .foot {
    margin-top: 100px !important;
  }
}
@media screen and (max-width: 530px) {
  .foot i {
    display: inline !important;
    font-size: 25px;
  }
}

@media screen and (max-width: 330px) {
  .foot i {
    font-size: 38px !important;
  }
}


/*End Footer*/

JavaScript:

//Navbar 

$(".a").click(function() {
  if ($("#btnCollapse").css('display') != 'none')
    $("#btnCollapse").click();
});

//Captions

$('.thumbnail').hover(
  function() {
    $(this).find('.caption').slideDown(250); //.fadeIn(250)
  },
  function() {
    $(this).find('.caption').slideUp(250); //.fadeOut(205)
  }
);

//Smooth Scroll

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
Improve this question
\$\endgroup\$
4
  • \$\begingroup\$ Welcome to Code Review! I hope you get some good answers. \$\endgroup\$ – Phrancis Jul 6 '16 at 17:30
  • \$\begingroup\$ It could just be me, but I think your code might be broken. When I click on Portfolio or Contact in the menu I get the same page. Something else to think about is that using a Content Management System such as WordPress or Drupal would enable you to get a lot more done in the same amount of effort. \$\endgroup\$ – pacmaninbw Jul 6 '16 at 18:14
  • \$\begingroup\$ Not broken I just designed it poorly! Thanks for taking a look. \$\endgroup\$ – kgoode517 Jul 6 '16 at 19:42
  • \$\begingroup\$ The check " if (target.length) { " is unnecessary. Because in the line above it you make sure that target gets a value in any case. \$\endgroup\$ – michael.zech Jul 7 '16 at 6:39
2
\$\begingroup\$

Some review items

  • Your photo is stretched, the original is not 510 by 510, does not look right at all
  • You have a <!DOCTYPE html> in your <body>, that's wrong
  • You have a <html lang="en"> in your <body>, that's wrong
  • You have a <body> in your <body>, that's Inceptional ;)
  • I like your integrity values, I learned something new
  • On the whole, use this: https://html5.validator.nu/?doc=http%3A%2F%2Fgoodedevelopment.com%2F Your site should pass the validation flawlessly
  • You probably want to cache $("#btnCollapse") and $(this).find('.caption')
  • You probably want to capture 250 in a single constant
  • You are wrapping the last click handler in a $() call but not the first 2, I would put them all in the wrapper

  • You have 3 lines of comments, but none of them cover the least obvious code:

    $('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  • I would probably replace that long if statement with a well document boolean-returning function
  • As you know the use !important is not considered good form, you should get rid of that.
Improve this answer
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.