Tell us what’s happening:
Hi,
I’m having some issues with the #2 topic, it says:
- The height of the welcome section should be equal to the height of the viewport.
I’ll be thankful if you could provide some guidance and ideas on how to solve this.
Your code so far
HTML code:
<head>
<title>Personal Portfolio</title>
<link rel="stylesheet" href="Portfolio.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<!-- Header -->
<header id="welcome-section">
<h1>Portfolio</h1>
</header>
<!-- Nav -->
<nav id="navbar">
<ul>
<li><a href="#project-1">Project 1</a></li>
<li><a href="#project-2">Project 2</a></li>
<li><a href="#project-3">Project 3</a></li>
<li><a href="#project-4">Project 4</a></li>
</ul>
<ul>
<li><a href="" id="profile-link2">Github Profile</a></li>
<li><a href="https://www.linkedin.com/in/danilo-donado-4a5655168/" id="profile-link" target="_blank">Linkdin Profile</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Projects -->
<div class="container-grid">
<div class="r1" id="welcome">
<section>
<article>
<header>
<h2>Take a look on my work</h2>
</header>
<img id="imgpri" alt="coding image" src="Images/Imgprin.jpeg">
</article>
</section>
</div>
<div class="r2">
<section id="projects">
<article id="project-1" class="project-tile">
<header>
<a href="https://codepen.io/danilo21128/pen/pYpbQM" target="_blank">
<h2>Tribute Page</h2>
</a>
</header>
</article>
<article id="project-2" class="project-tile">
<header>
<a href="https://codepen.io/danilo21128/pen/jJZXQE" target="_blank">
<h2>Survey Form</h2>
</a>
</header>
</article>
<article id="project-3" class="project-tile">
<header>
<a href="https://codepen.io/danilo21128/pen/WmPQjy" target="_blank">
<h2>Product Landing Page</h2>
</a>
</header>
</article>
<article id="project-4" class="project-tile">
<header>
<a href="https://codepen.io/danilo21128/pen/PLMozg" target="_blank">
<h2>Technical Documentation Page</h2>
</a>
</header>
</article>
</section>
</div>
</div>
</div>
<!-- Footer -->
<footer>
</footer>
</body>
CSS code:
/* Type */
html {
font-family: Georgia;
}
/* Projects Section */
#welcome {
height: 100%;
text-align: center;
color: white;
}
#projects {
height: 100%;
text-align: center;
color: white;
}
.project-tile {
}
/* Nav Bar */
#navbar {
position: fixed;
left: 0%;
top: 0%;
width: 20%;
height: 100%;
background: linear-gradient(90deg, #000000, #300000);;
opacity: 1;
filter: alpha(opacity=50);
}
/* Basic */
body {
font-family: Georgia;
font-size: 15px;
background: #F0F0F0;
}
h1 {
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
/* Grid */
.container-grid{
display: grid;
width: 100%;
grid-template-rows: 500px 500px;
justify-content: center;
}
.r1 {
background: linear-gradient(45deg, #000000, #300000);
width: 500px;
padding: 0px 0px 0px 0px;
margin: 40px 0px 0px 100px;
}
.r2{
background: linear-gradient(145deg, #000000, #300000);
width: 500px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 100px;
}
/* External Link*/
#profile-link {
}
/* Lists*/
ul {
}
li a {
color: white;
}
li :hover{
color: dodgerblue;
}
a {
color: white;
text-decoration: none;
}
a :hover {
color: dodgerblue;
}
a :visited {
color: white;
}
/* Images*/
#imgpri{
display: flex;
max-width: 100%;
max-height: 100%;
width: 360px;
height: 280px;
padding: 0px 0px 0px 0px;
margin: 50px 0px 0px 75px;
}
/* Media*/
@media (min-width: 350px) {
p {
font-size: 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage/