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> ® 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;
}
}
});
});