Tell us what’s happening:
I have a grid of two columns only. A problem is that the sections don’t appear equal in width. The two sections where I placed items in specified sells are less in total width and the second column in the projects secrion is narrower than the first. in addition, one tile of a project is pushed down in its column leaving a big empty space. I tried to place the items in grid areas rather than within columns but the problem remained unsolved. Please let me know what is wrong.
Thank you.
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Personal Portfolio Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<nav id="navbar">
<a class="nav-link" href="#About">About</a>
<a class="nav-link" href="#projects">Projects</a>
<a class="nav-link" href="#Contact">Contact</a>
</nav>
<section id="welcome-section">
<h1>MY PERSONAL PORTFOLIO</h1>
<p><span class="bold name"> <i>Hamdy ElHinnawy</i></p>
<p id="profile-link"><a>See my profile at<a href="https://freecodecamp.org" terget="_blank" rel="noreferrer"/> freecodecamp</p>
</section>
<section id="About">
<header class="dhead"><a name="About">About</a></header>
<p>With this portfolio I am not addressing recruiters. I am not looking for a job as a developer.
</p>
<p>I am learning coding, and I am a beginner.</p>
<p>I'll continue learning and in due course will decide what to do with my learning.</p>
<p>For now, I represent my portfolio to see if I am really on the right track.</p>
<p> One more reason for not addressing recruiters is that I am old and most likely will use my skill for my own purposes.</p>
</section>
<section id="projects">
<header class="work"> <a name="projects">Projects</a></header>
<article id= "item-1"class="project-tile">
<h2>Survey Form</h2>
<p>This form was to collect data for the purpose of clarifying a is normally donr in research.</p>
<p> The data to be collected includes name, gender, age and hobbies, among other things</p>
<p>See this project at <a href="https://Survey Form: Build a Survey Form | freeCodeCamp.org" target="_blank" rel="noreferrer">freecodecamp</a>
</article>
<article id="item-2" class="project-tile">
<h2>Tribute Page</h2>
<p>This was a tribute for an Egyptian writer whose work
was unique in expressinghis ideas on Egypt’s development in the 20th century</p>
<p>his funeral wa honered by the president and the highest rank of the Egyptian elite.</p> <p>He was a Nobel Lauriette, who was awarded the 1988 Nobel Prize in Literature and is the only Arab writer who got this award</p>
<p>See the project at <a href="https://Tribute Page: Build a Tribute Page | freeCodeCamp.org" target="_blank" rel="noreferrer"> freeCodeCamp<a></p>
</article>
<article id="item-3"
class="project-tile">
<h2>Technical Documentation Page</h2>
<p>This page documented the process of design and manufacturing of a printed circuit board</p>
<p>It highlighted six steps of the process referring to the old manual method and the modern ones that rely on software<p/>
<p>See the project at <a href="https://www.Technical Documentation Page: Build a Technical Documentation Page | freeCodeCamp.org" target="_blank" rel="noreferrer"> freeCodeCamp<a></p>
</article>
<article
id="item-4" class="project-tile">
<h2>Product Landing Page</h2>
<p>This page was about an imaginary store called Child Play</p>
<p>It gave a representation of products that it supposedly sells, services that would be provided and a pricing list</p>
<p>See the project at <a href="https://www.Product Landing Page: Build a Product Landing Page | freeCodeCamp.org" target="_blank" rel="noreferrer"> freeCodeCamp<a></p>
</article>
</section>
<section id="contact">
<header class="dhead"> <a name="Contact">Contact</a></header>
<img class="image" src="https://lh3.googleusercontent.com/a/ALm5wu3Rr1II1eKScPghch5zwxL3OX__1ZYukAZKOaKWTg=s450-p-rw-no">
<div class="text">
<p><span class="bold">Name</span>: Hamdy Elhinnawy</p>
<p><span class="bold">email</span>: haahinnawy@hotmail.com</p>
<p><span class="bold">Contry</span>: Egypt</p>
<p><span class="bold">Education</span>: Ph.D Economics, London School of Economics.</P>
<p><span class="bold">Date of Birth</span>: November27, 1941</p>
</div>
</body>
</main>
</html>
html {
box-sizing: border-box;
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#navbar {
width: 100vw; display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column: 1/-1; position: fixed;
text-align: center;
background: gray;
height: 65px;
top: 0;
left: 0; z-index: 2;
}
.nav-link {
text-decoration: none;
color: cyan;
font-size: 1.2rem;
font-weight: bold;
margin: 15px;
}
#welcome-section {
display: grid;
grid-column: 1/3;
height:100vh;
text-align: center;
position: relative;
padding: 50% 0; background: linear-gradient(to bottom, #F5F5DC 0%,
#E0FFFF 100%);
}
h1 {
font-size: 2rem;
}
.name {
font-size: 2rem;
}
#about {
display: grid;
grid-column: 1/3;
padding-left: 10px;
background: linear-gradient(90deg, #ffffff 0%, #E0FFFF 100%)
}
#profile-link {
color: red;
}
a { text-decoration: none;
}
.bold { font-weight: 800;
}
.dhead { font-weight: bold;
font-size: 1.5rem;
text-align: center;
}
.work {
text-align: center; margin-bottom: 25px;
font-size: 1.5rem;
font-weight: bold;
grid-column: 1/3;
}
#projects {
display: grid;
}
.project-tile {
border: 2px solid; padding-left: 10px;
margin-bottom: 10px;
margin-left: 10px;
background: linear-gradient(45deg, #ffffff 0%, #ffe6e6 100%);
}
#item-1 {
grid-column: 1/2;
}
#item-2 {
grid-column: 2/3;
}
#item-3 {
grid-column: 1/2;
}
#item-4 {
grid-column: 2/3;
}
#contact {
top: 20px;
display: grid; padding-left: 10px; padding-bottom: 2px;
background: linear-gradient(to bottom, #ffffff 0, #AFEEEE 100%);
}
.image {
grid-column: 1/2;
border: 2px solid green; border-radius: 50%;
padding: 5px;
margin: 15px auto;
width: auto;
height: 30%;
}
.text {
grid-column: 2/2;
}
@media and (max-width: 600px) {
#projects {
grid-template-columns: 1fr;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.52
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge:
