Hi there,
I could use some pointers on the “Personal Portfolio” challenge.
Here’s my code so far.
2 issues:
- I can’t get the height of the welcome section to be equal to the height of the viewport.
- My projects section is styled in grid. The next section “contact” seems to continue in the same grid style. How do I stop this? Setting width and height doesn’t change it so far.
Thanks all!
<DOCTYPE html>
<html>
<head>
<title>FCC - Personal Portfolio</title>
</head>
<nav id="navbar">
<ul>
<li><a href="#welcome-section" class="nav-link">Intro</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
<body>
<br>
<div class="intro" id="welcome-section">
<div id="introtext">
<h1>Hi, I'm <span class="mimic">Mimic</span></h1>
<p><u>a</u> web developer</p>
</div>
</div>
<main>
<h2 class="work-title">Here's some recently developped projects</h2>
<div class="work" id="projects">
<div class="tile-container1">
<div class="project-title">FCC - Product Landing Page</div>
<a href="https://codepen.io/CPRSN/pen/pGPzWQ?editors=1100" target="blanc" class="project-tile" id="project_tile_3">
<img class="project-pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Junction_3.svg/1600px-Junction_3.svg.png" alt="project"></a>
</div>
<div class="tile-container2">
<div class="project-title">FCC- Technical Documentation Page</div>
<a href="https://codepen.io/CPRSN/pen/LqdEwZ?editors=1100" target="blanc" class="project-tile" id="project_tile_4">
<img class="project-pic" src="https://vignette.wikia.nocookie.net/phobia/images/d/d0/4.jpg/revision/latest?cb=20161127143001" alt="project">
</a>
</div>
<div class="tile-container3">
<div class="project-title">FCC-Survey Form</div>
<a href="https://codepen.io/CPRSN/pen/Erydob?editors=1100" target="blanc" class="project-tile" id="project_tile_2">
<img class="project-pic" src="https://s3.amazonaws.com/tinycards/image/e23a3d91dd56ac2c3106108c3d6c56aa" alt="project"></a>
</div>
<div class="tile-container4">
<div class="project-title">FCC-Tribute Page</div>
<a href="https://codepen.io/CPRSN/pen/YBXNxe?editors=1100" target="blanc" class="project-tile" id="project_tile_1">
<img class="project-pic" src="https://www.pelicanrouge.nl/wp-content/uploads/2017/06/Nummer-1.png" alt="project"></a
</div>
</div>
<br>
<div class="contact" id="contact">
<h2>Get in touch</h2>
<a id="profile-link" href="https://www.github.com/freecodecamp" target="_blank" class="contact-details">Webpage</a>
</div>
</main>
<footer>
</footer>
</body>
</html>
html, body {height: 100%; width: 100%;}
#navbar {
display: block;
text-align: right;
position: fixed;
top: 0;
left: 0;
}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 10px;
width: 98%;
position: fixed;
top: 0;
background-color: #000000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
color: white;
text-align: center;
padding: 10px;
border: 2px solid #00695C;
}
#navbar ul li a:hover {
background-color: #00695C;
}
#welcome-section {
height: 100%;
width: 100%;
padding-top: 0px;
margin-top: 0px;
background-color: #00695C;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
}
#introtext {
height: 120px;
width: 220px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -60px;
margin-left: -110px;
border: 2px solid #000000;
border-radius: 10px;
}
.mimic {
color: white;
}
.work {
background-color: white;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
grid-template-columns: repeat(2, 1fr);
grid-template-rows:repeat (2, 1fr);
align-items: center;
align-self: center;
justify-items: center;
justify-self: center;
}
.work-title {
text-align: center;
}
.project-pic {
width: 250px;
height: 250px;
}
.project-tile {
text-align: center;
}
.project-title {
color: black;
text-align: center;
}
.project-title a {
text-align: center;
}
.contact {
height: 100%;
width: 100%;
background-color:#00695C;
}