Stuck On Build a Personal Portfolio Webpage

HTML-CSS
1

Please, i want to arrange the images as tiles, two columns. don’t know how to.
And also, how to center two texts at once on different lines.

<section>
 <div id="projects">
 <h2>These are some of my projects</h2>

 <hr></hr> 
<div class="project"> 

<div id="project-tile"> 
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"> 
<p>Tribute Page</p>
 </div> 

<div id="project-tile"> 
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"/>
 <p>Random Quote Machine</p>
 </div> 

<div id="project-tile"> 
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"/> 
<p>JavaScript Calculator</p> 
</div> 
</div>
 </div> 
</section>
2

I’d advise looking up css flexibox it can allow you to have a two column layout.
Here’s a link to information on it.

CSS grid could also work for this.

Also, is this your full HTML code for the project? There seems to be some things missing. Seeing the CSS would be useful too.

3

I will check for the Flexbox now. Thanks

a{text-decoration:none;
border-color:white;
 font-size:20px;}

*{border:2px solid black;}

#welcome-section{width:100%; height:100vh;
background-color:var(--viewport-color);
text-align:center;
line-height:100vh;}

#project-tile{width:50%;display:flex;flex-direction:row;
flex-wrap:wrap;justify-content:center;
align-items:center; padding:0 4px;}

#contact{width:100%; height:100vh; 
text-align:center; line-height:100vh;
background-color:var(--viewport-color);}

img{width:100%; height:250px;object-fit:cover;margin-top:8px;padding:0 4px;}
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.