Struggling at an extreme level here. Trying to build my portfolio. I’m good with the nav bar for now and the welcome <div<. My problems are coming from the core content of the portfolio, the thumbnail collection. I copied this code from Codepen and planned to edit it later but all of the commands i try to personalize it do nothing, or something horrendous - frustrating after four hours. At the very least I need to center these thumbnails, which i cannot do. Also the border is for some reason not showing up on the right side of the thumbmail.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans|Ubuntu" rel="stylesheet">
<title>Braden Linick</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<ul>
<li><a class="navlink" href="#About">About</a></li>
<li><a class="navlink" href="#Services">Features</a></li>
<li><a class="navlink" href="#Contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="welcome">
<h1 class="hi">Hi. I'm Braden</h1>
<p class="web">a web developer</p>
</div>
<div class="projects">
<h2 class="projhead">These are some of my projects</h2>
<a href="https://codepen.io/FreeCodeCamp/pen/NNvBQW" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642794/d084d718-6171-11e6-83fa-ede5d0a67ad2.png" alt="project">
<div class="project-title">Tribute Page</div>
</a>
<a href="https://codepen.io/FreeCodeCamp/pen/ONjoLe" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642771/7cd6a0c4-6171-11e6-87fb-915f6084d104.png" alt="project">
<div class="project-title">Random Quote Machine</div>
</a>
<a href="https://codepen.io/FreeCodeCamp/pen/PNKdjo" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642772/7d02406c-6171-11e6-8c79-40a2933163dc.png" alt="project">
<div class="project-title">JavaScript Calculator</div>
</a>
<a href="https://codepen.io/FreeCodeCamp/pen/mVEJag" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642773/7d08cb94-6171-11e6-8c45-22e7cf64683e.png" alt="project">
<div class="project-title">Map Data Across the Globe</div>
</a>
<a href="https://codepen.io/FreeCodeCamp/pen/wGqEga" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642774/7d091806-6171-11e6-8d47-ecf2f2833fe2.png" alt="project">
<div class="project-title">Wikipedia Viewer</div>
</a>
<a href="https://codepen.io/FreeCodeCamp/pen/KzXQgy" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642775/7d354304-6171-11e6-8b56-66eee4681d88.png" alt="project">
<div class="project-title">Tic Tac Toe Game</div>
</a>
<a href="https://codepen.io/FreeCodeCamp/" class="show-all" target="_blank">Show all</a>
</div>
</div>
</body>
</html>
CSS:
body,html {
background-color: #C7D2E9;
font-family: PT sans;
margin: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #627397;
}
nav {
float: right;
}
header::after {
content: '';
display: table;
clear: both;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-left: 70px;
padding-bottom: 2px;
padding-top: 7px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: #C7D2E9;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
.welcome {
top: 0;
background: #627397;
min-height: 55vh;
padding-top: 45vh;
height: auto;
/* line-height: 100vh; */
/* width:100%;
height:96vh;
border:solid; */
}
.web {
color: white;
text-align: center;
margin: 0;
}
.hi {
font-family: ubuntu;
text-align: center;
margin: 0;
}
.projects {
background-color: #C7D2E9;
padding-top: 60px;
margin-top: -60px;
}
.projhead {
margin-top: 50px;
text-align: center;
color: #0B265C;
}
.project {
text-decoration: none;
text-align: center;
color: black;
display: inline-block;
overflow: hidden;
border: .5px solid black;
height: 220px;
width: 280px;
margin: 40px 100px;
}
.project-pic {
width: 100%;
height: 180px;
border: .5px solid black;
}
.project-title {
font-weight: bold;
}
.show-all {
text-decoration: none;
display: block;
width: 200px;
height: 30px;
margin: 20px auto 90px;
background: #e0ebe8;
color: #008080;
font-weight: bold;
font-size: 1em;
border: 2px solid #90C695;
border-radius: 4px;
cursor: pointer;
padding-top:10px;
text-align: center;
}
Browser: Google Chrome
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
.
Portfolio project HTML/CSS