KPC
Kevin Powell - Community•2mo ago
ProtonMe

Assistance needed for implementing a grid structure

I want to implement a Grid structure [review my attached image for the preview] for a challenge from [Frontendmentor.io] using HTML and CSS only. I have done with HTML and can able to do rest of the styling but I 've been struggling to implement the grid structure format successfully. I tried with the GPT and other AI, but they are complex for me to understand as I am just a novice who is eager to learn. Here's my main block of HTML: 
  <main>
    <section class="features">
      <article class="feature--supervisor">
        <h2 class="feature--supervisor-heading">Supervisor</h2>
        <p class="feature--supervisor-description">Monitors activity to identify project roadblocks</p>
        <div class="feature--supervisor-div__icon">
          <img src="images/icon-supervisor.svg" alt="">
        </div>
      </article>
      <article class="feature--team">
        <h2 class="feature--team-heading">Team Builder</h2>
        <p class="feature--team-description">Scans our talent network to create the optimal team for your project</p>
        <div class="feature--team-div__icon">
          <img src="images/icon-team-builder.svg" alt="">
        </div>
      </article>
      <article class="feature--karma">
        <h2 class="feature--karma-heading">Karma</h2>
        <p class="feature--karma-description">Regularly evaluates our talent to ensure quality</p>
        <div class="feature--karma-div__icon">
          <img src="images/icon-karma.svg" alt="">
        </div>
      </article>
      <article class="feature--calculator">
        <h2 class="feature--calculator-heading">Calculator</h2>
        <p class="feature--calculator-description">Uses data from past projects to provide better delivery estimates
        </p>
        <div class="feature--calculator-div__icon">
          <img src="images/icon-calculator.svg" alt="">
        </div>
      </article>
    </section>
  </main>
  <main>
    <section class="features">
      <article class="feature--supervisor">
        <h2 class="feature--supervisor-heading">Supervisor</h2>
        <p class="feature--supervisor-description">Monitors activity to identify project roadblocks</p>
        <div class="feature--supervisor-div__icon">
          <img src="images/icon-supervisor.svg" alt="">
        </div>
      </article>
      <article class="feature--team">
        <h2 class="feature--team-heading">Team Builder</h2>
        <p class="feature--team-description">Scans our talent network to create the optimal team for your project</p>
        <div class="feature--team-div__icon">
          <img src="images/icon-team-builder.svg" alt="">
        </div>
      </article>
      <article class="feature--karma">
        <h2 class="feature--karma-heading">Karma</h2>
        <p class="feature--karma-description">Regularly evaluates our talent to ensure quality</p>
        <div class="feature--karma-div__icon">
          <img src="images/icon-karma.svg" alt="">
        </div>
      </article>
      <article class="feature--calculator">
        <h2 class="feature--calculator-heading">Calculator</h2>
        <p class="feature--calculator-description">Uses data from past projects to provide better delivery estimates
        </p>
        <div class="feature--calculator-div__icon">
          <img src="images/icon-calculator.svg" alt="">
        </div>
      </article>
    </section>
  </main>
No description
4 Replies
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•2mo ago
https://codepen.io/tok124/pen/XJXVKxJ Here you have a simple example
Tim
CodePen
Untitled
...
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•2mo ago
Also, first of all, i wouldn't really recommend using AI to code for you. It is kinda awful code tha they provide. However... If you feel that you must use an AI, i would rather recommend Claude or Cursor, that's far better than using ChatGPT One more thing... You are supposed to figure out yourself how to do the frontendmentor challenges for you, if a layout is too difficult for you to create, then find another challenge that you can create, that's the whole point of using it, to learn by trial and error and studying. But anyway, that is all up to each individual person so it's all up to you 🙂
ProtonMe
ProtonMeOP•2mo ago
Thanks a lot for you code, its a way simpler and spot on 🎯. Also, I will reduce my dependency on GPTs and as you say, I will try to implement on Cursor. I have already left this challenge a few days ago, but its been bugging me. That's why I tried my luck here, and luckily you have responded.
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•2mo ago
Sure man 🙂 No problem, and enjoy 🙂

Did you find this page helpful?