Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Grid column

dralveol 160

@dralveol

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any remark is more than welcome !

Community feedback

@0xabdul

Posted

Hello there well congrats on completing the single price gird component 🤩

  • In Html :
  • the html page should be contained one level heading so fix the problem
  • and the use <h1><h2><h3><h4><h5><h6> tags in line by line or sequence way like this.
  • Solution :
  • Ex :
<html>
<body>
<header>
  <div class=container> 
     <div class="item description"> 
       <h1>Join our community</h1> 
       <h2>30-day, hassle-free money back guarantee</h2> 
      <p>Gain access to our full library of tutorials along with expert code reviews.<br> 
      Perfect for any developers who are serious about honing their skills.</p> 
     </div> 
</header>

<main>
    <divclass="item call-to-action"> 
       <h3>Monthly Subscription</h3> 
       <p id="pricing"><span id="price">$29</span> per month</p>       <p>Full access for less than $1 a day</p> 
       <button>Sign Up</button> 
     </div>     
     <div class="item about-us"> 
       <h4>Why Us</h4> 
       <ul> 
         <li>Tutorials by industry experts</li> 
        <li>Peer & expert code review</li> 
         <li>Coding exercises</li> 
         <li>Access to our GitHub repos</li> 
         <li>Community forum</li> 
         <li>Flashcard decks</li> 
         <li>New videos every week</li>   
       </ul>       
     </div> 
       </main> 
       <footer> 
       <p class="attribution"> 
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.  
         Coded by <a href="#">dralveol</a>. 
       </p> 
     </footer>   
 </body> 
 </html>
  • I moderate the html code it's useful for you will clear the Accessibility reports
  • Happy Coding 😃

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord