Hi all,
I recently submitted my ‘build a personal portfolio webpage’ project, and I discovered that on Codepen, the result is really messed up. (I was previously working on it just on notepad++ then uploaded the code to Codepen) Using the exact same code, when I viewed it on google chrome and when I viewed it on Codepen were drastically different. If you go to the link for my portfolio it looks really bad. It would be of great help if someone could explain this.
project link (garbage)
Thanks, jccofresh
*below is all the code i used on notepad++, if you copy paste onto your text editor and create a ccs and html file and then view the Chrome html document(or whichever browser) it should work. But the different desktops/broswers/computer formats might screw everything up…idk
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Portfolio: Joseph Chiang</title>
<link type="text/css" rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar">
<div class="navbar">
<a class="hover" href="#contact">Contact</a>
<a class="hover" href="#portfolio">Portfolio</a>
<a class="hover" href="#about">About</a>
<p>Web Portfolio</p>
</div>
</nav>
<div class="section1">
<div class="box" id="about">
I am a young coder with some experience in Javascript, Html, and CSS. I love learning useful and applicable things. I have a passion for coding and in the future I hope to have a job in related to Computer Science.
</div>
</div>
<div class="section2">
<h2 id="portfolio">Portfolio</h2>
<img class="pic" src="https://assets.awwwards.com/awards/images/2012/02/allsizes_remake_21.jpg" alt="placeholder website">
<img src="http://graphicdesignjunction.com/wp-content/forum/uploads/2014/01/flat-website-design-28.jpg" alt="placeholder website">
<div><a href=# class="left hovers soft-link">placeholder</a><a href=# class="right hovers soft-link">placeholder</a></div>
<img class="pic" src="https://assets.awwwards.com/awards/images/2012/02/allsizes_remake_15.jpg" alt="placeholder website">
<img src="http://graphicdesignjunction.com/wp-content/forum/uploads/2014/10/responsive+websites+designs+001.jpg" alt="placeholder website">
<div><a href=# class="left hovers soft-link">placeholder</a><a href=# class="right hovers soft-link">placeholder</a></div>
</div>
<div class="section3">
<h2 id="contact">Contact</h2>
<form action="index.html">
Name
<br />
<label>
<input type="text" class="label">
</label>
<br />
<br /> Email Address
<br />
<label>
<input class="label" type="text">
</label>
<br />
<br /> Message
<br />
<br />
<textarea name="styled-textarea" cols="5" rows="80" id="style" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Comment here...</textarea>
<br/>
<div class="press">
<button>Submit</button>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Add smooth scrolling to all links
$("a").on("click", function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$("html, body").animate({
scrollTop: $(hash).offset().top
},
800,
function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
}
);
} // End if
});
});
</script>
<div class="center">
<a target='_blank' href="https://twitter.com/?lang=en" class="fa fa-twitter"></a>
<a target='_blank' href="https://www.facebook.com/" class="fa fa-facebook-official"></a>
<a target='_blank' href="https://www.instagram.com/" class="fa fa-instagram"></a>
<a target='_blank' href="https://www.linkedin.com/" class="fa fa-linkedin"></a>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Oxygen');
@import url('https://fonts.googleapis.com/css?family=Cinzel');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
font-size: 2em;
font-weight: normal;
font-family: Oxygen, Helvetica, Sans-serif;
text-align: left;
margin: 0 auto;
}
.left {
font-style: italic;
display: inline;
margin-left: 9.1em;
color: black;
text-decoration: none;
background-color: white;
margin-top: -3em;
}
.right {
font-style: italic;
display: inline;
margin-right: 8em;
margin-left: 12em;
color: black;
text-decoration: none;
}
h2 {
color: #111;
font-family: 'Open Sans', sans-serif;
font-size: 3.01rem;
margin: 2em;
text-align: center;
text-transform: uppercase;
}
.soft-link {
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-ms-transition: color .5s linear;
-o-transition: color .5s linear;
transition: color .5s linear;
color: #FF7043;
text-decoration: none;
background-color: white;
padding: 0.8%;
}
.hovers:hover {
color: white;
background-color: #FF7043;
}
a {
padding-top: 1em;
}
/* Add a black background color to the top navigation */
.navbar {
background-color: #333;
overflow: hidden;
border-bottom: 0.1rem solid white;
}
/* Style the links inside the navigation bar */
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 0.7em 0.4em 0.3em;
text-decoration: none;
font-size: 1em;
height: 1.75em;
}
/* Change the color of links on hover */
.hover:hover {
background-color: #ddd;
color: black;
text-decoration: none;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
transition: color .3s linear;
}
/* Add a color to the active/current link */
.navbar a:active {
background-color: #333;
color: white;
}
p {
color: #01A8B2;
font-size: 1.2em;
margin-left: 0.3em;
margin-bottom: 0.3em;
margin-top: 0.45em;
}
.box {
padding: 1.5em 3em 2em 3em;
width: 70%;
font-size: 1.4rem;
}
img {
width: 37%;
height: 32%;
margin: 1em 2em 1em 1em;
}
.pic {
width: 37%;
height: 32%;
margin: 1em 1em 1em 4.5em;
}
form {
color: black;
margin-left: 1em;
}
.fa {
padding: 1.1% 0.9% 1%;
margin-bottom: 0.6em;
margin-top: 0.6em;
width: 3.1%;
height: 5.2%;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 50%;
}
.fa-facebook-official {
background: white;
color: #003958;
}
.fa-facebook-official:hover {
background-color: #003958;
color: white;
text-decoration: none;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-ms-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}
.fa-twitter {
background: white;
color: #00A2E8;
}
.fa-twitter:hover {
background-color: #00A2E8;
color: white;
text-decoration: none;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-ms-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}
.fa-instagram {
background: white;
color: #833ab4;
}
.fa-instagram:hover {
background: linear-gradient(to bottom right, #833ab4, #fd1d1d, #fcb045);
color: white;
text-decoration: none;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-ms-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}
.fa-linkedin {
background: white;
color: #006AA4;
}
.fa-linkedin:hover {
background-color: #006AA4;
color: white;
text-decoration: none;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-ms-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}
.center {
text-align: center;
background-color: #A1C0CB;
}
.press button {
color: #fff;
background-color: #6496c8;
border: none;
border-radius: 1.5em;
box-shadow: 0 0.8em #27496d;
margin-top: 1.5em;
margin-left: 47.8em;
height: 4em;
width: 8em;
}
.press button:hover {
background-color: #417cb8
}
.press button:active {
background-color: #417cb8;
box-shadow: 0 0.4em #27496d;
transform: translateY(0.5em);
}
.label {
height: 1.3em;
width: 30%;
border: 0.2rem solid #cccccc;
padding: 0.5em;
}
.ph {
display: inline;
}
textarea {
width: 55%;
height: 9em;
border: 0.2rem solid #cccccc;
padding: 0.5em;
font-family: Tahoma, sans-serif;
color: black;
margin-top: -2em;
}
form {
font-size: 2rem;
}
.section1 {
background: linear-gradient(to left, #dce35b, #45b649);
color: black;
height: 6em;
margin-top: 0.1em;
}
.section2 {
background: linear-gradient(to right, #dbe6f6, #c5796d);
margin-top: -3.1em;
margin-bottom: 2em;
height: 39.3em;
}
.section3 {
background: linear-gradient(to bottom, #73c8a9, #373b44);
color: black;
height: 23em;
margin-top: -3.1em;
}