I'm currently working on creating a grid layout for my website and I've almost achieved the desired result. However, I'm facing an issue with the size of the "Projects" title within the grid. I want it to stand out and be larger compared to the other sections.
Here's what I have so far: https://i.sstatic.net/AfDJh.png
But I aim to create something like this: https://i.sstatic.net/7rSwg.png
HTML:
<div class="project-container">
<div className="title">
<h1>PROJECTS</h1>
</div>
<div className="project-one item">
<h2>Face Recognition</h2>
<button className="button button1">VIEW PROJECT</button>
</div>
<div className="project-two item">
<h2>Face Recognition</h2>
<button className="button button1">VIEW PROJECT</button>
</div>
<div className="project-three item">
<h2>Face Recognition</h2>
<button className="button button1">VIEW PROJECT</button>
</div>
</div>
CSS:
.project-container {
width: 80%;
height: 80vh;
margin: auto;
display: grid;
border: 1px solid pink;
// grid-gap: 4em;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"t t t"
"p1 p2 p3";
}
.item {
text-align: center;
color: white;
border: 1px solid pink;
}
.title {
grid-area: t;
text-align: center;
border: 1px solid pink;
}